查看: 40|回复: 1
【干货】零基础设计师该如何学前端
主题帖子积分
注：非计算机科班设计师@Hux黄玄 （现微信电影票前端），在转型做前端的过程中走过了不少弯路，这篇分享都是自己亲身经历过的，实打实的宝贵经验，另外还有对未来职业的建议，值得学习。本文来自于知乎。
&&笔者大学专业是数字媒体艺术，大一实习过动效设计师，大二拿到了人生第一个大公司的 offer 是交互设计师，后来转岗到淘宝旅行的前端团队，现在在微信电影票做前端研发。
&&也是走过了不少野路子，不过还好有小右哥 @尤小右 这样艺术/设计转前端的大神在前面做典范，也证明这条路是玩的通的 ：）
&&接下来就说说自己的学习建议吧，一个小教程，也是自己走过的流程，仅供参考哈
&&在这个时代学习新东西，一定要善于使用 Bing/Google 等搜索引擎…网络上的资源非常丰富，自学能力也尤为重要，尤其是对于学习技术！
&&[color=rgb(149,]入门篇（HTML/CSS）
&&说起设计师希望学前端的初衷，大概还是因为各种华丽的网页特效/交互太过吸引人，这种感觉大概就是：“Hey，我的设计可以做成网页访问了呢！”
&&好在，“展示”对于前端技术来说反而是最简单的部分。所以，放下你对“编程”两个字的恐惧，从“称不上是编程语言”的 HTML/CSS 开始，先做点有成就感的东西出来吧！
&&对于设计师来说，最有成就感的一定是“可以看到的东西”，而 HTML/CSS 正是用来干这个的，HTML 就是一堆非常简单的标签，而 CSS 无非就是把你画画的流程用英语按一定的格式写出来而已：&p& p is paragraph! &/p&
p { color:}
&&是不是非常容易，就跟读英语一样！
&&接下来，你就需要开始自学啦，比如常用 HTML 标签的意思，各种 CSS 的属性，还有 CSS 的盒模型、优先级、选择器……放心，它们都很容易；能玩得转 PS/AI/Flash/Axure/AE/Sketch 的设计师们，学这个洒洒水啦
&&推荐几个资源：
&&w3school 在线教程 (中文，一个很 Low 但是又很好的入门学习网站）
&&Learn to code (Codecademy，如果你英文 OK，强烈建议你使用它进行交互式的学习！里面从 HTML/CSS 到搭建网站的课程都有，免费，生动直观）
&&这个阶段的练习主要是“临摹”：用代码画出你想画的网站，越多越好。
&&对于书，我非常不推荐上来就去看各种厚厚的入门/指南书，没必要！这一个阶段应该快速上手，培养兴趣，培养成就感。先做出可以看的东西再说，掌握常用的 HTML/CSS 就够用了
&&如果完成的好，这个阶段过后你大概就可以写出一些简单又好看的“静态网页”了，比如这个作品集/简历：Portfolio - 黄玄的博客 （好久没更新了…丢人现眼）
2157.jpg (61.43 KB, 下载次数: 0)
11:25 上传
&&[color=rgb(149,]入门篇（JavaScript/jQuery）
&&想要在网页上实现一些交互效果，比如轮播图、点击按钮后播放动画？那你就必须要开始学习 JavaScript 了！JavaScript 是一门完整、强大并且非常热门的编程语言，你在浏览器里看到的所有交互或者高级功能都是由它在背后支撑的！
&&举个小栗子：alert(&Hello World!&)
&&就这一行，就可以在浏览器里弹出 Hello World 啦！
&&在了解一些基础的 JavaScript 概念（变量、函数、基本类型）后，我们可以直接去学习 jQuery，你不用知道它具体是什么（它是一个 JavaScript 代码库），你只要知道它可以显着地降低你编写交互的难度就好了：$('.className').click(function(){
& & alert(&Hello jQuery&)
&&通过 jQuery，我们可以继续使用在 CSS 中学到的“选择器”
&&对于没有编程基础的人来说，想要完全掌握它们两并不容易。作为设计师，很多时候我们可以先不必深究它们的原理，而是尝试直接应用它！这样成就感会来得很快，并且你可以通过实际应用更加理解 JavaScript 是用来做什么的。
&&我仍然推荐你使用 w3school 在线教程 与 / 进行学习。另外，你可以看一看诸如《锋利的jQuery (豆瓣)》 这一类非常实用的书籍，可以让你很快上手做出一些简单的效果来！
&&如果学习得顺利，你还可以尝试使用各种丰富的 jQuery 插件，你会发现写出支持用户交互的网站也没有那么困难～很多看上去很复杂的功能（比如轮播图、灯箱、下拉菜单），搜一搜然后看看文档（教程）、改改示例代码就好了。
&&比如说，配合 Huxpro/jquery.HSlider ? GitHub 这样的轮播图插件，你可以很轻松的写出 Hux-Slider | Demo 这样的网页相册～
&&最后，我想推荐下 Bootstrap ? The world’s most popular mobile-first and respons ，这是世界上最知名的前端 UI 框架之一，提供了大量 CSS 样式与 jQuery 插件。它非常容易学习并且文英文教程都非常得健全，你并不需要理解它背后的工作原理就能很好的使用它，让你快速达到“可以建站的水平”。另外，你不但可以学习如何使用它，还可以学习它背后的思想。
3936.jpg (52.22 KB, 下载次数: 0)
11:25 上传
&&[color=rgb(149,]转职方向一：前端重构
&&业内通常把专精 HTML/CSS 的前端从业人员成为重构，而对于注重视觉效果的设计师来说，在掌握基本的 HTML/CSS 后，就可以朝着这个方向发展了。
&&到了这个阶段，你不但要知道怎么写页面，还要知道它们都是为什么，并且知道怎么做更好。这对你理解 Web 世界非常有帮助，并且能帮助你做出更“系统化”的设计。
&&CSS 的学问很多，你需要开始理解文档流、浮动流等各种定位的方式与原理，理解 CSS 的继承复用思想、理解浏览器的差异、兼容、优雅降级……这里强烈推荐一本书：《精通CSS（第2版） (豆瓣)》，虽然前端技术突飞猛进，但这本书的思想永远不会过时。
&&HTML 方面，要开始注重语义化、可访问性与结构的合理，你要开始学习“结构与样式的分离”，这里有一本神书将这种分离做到了极致：《CSS禅意花园 (豆瓣)》
&&另外，各种炫酷?的 CSS 3 属性你一定会喜欢：你可以用媒体查询做响应式网页设计，你可以用 transiton 和 animation 做补间动画与关键帧动画，用 transform 做缩放、旋转、3D变换，还有圆角、渐变、阴影、弹性盒！样样都是设计师的神器！
&&如果你还掌握了 入门篇（JavaScript/jQuery）的知识，那么恭喜你！你已经可以做出很多有趣的网页了！很多 minisite 或者微信上的“H5” 小广告，这个程度的你已经可以轻松完成了！
&&配合上你的设计功力，你可以开始尝试创作一些好玩的东西，比如这种富含交互和动画的网站 绅宝 SENOVA ，它仍然是基于 Huxpro/jquery.HSlider ? GitHub 实现的！或者给自己做个小小的个人网站试试。
&&[color=rgb(149,]转职方向二：前端工程师
&&如果你觉得上述的这些都还满足不了你，你渴望做出更多了不起的交互，甚至你已经喜欢上了编程，想要转行做工程师，或者成为一名全栈设计师，那么你可以朝着这个方向继续发展！
&&这个阶段的最大难度，是你必须学会像一名软件工程师一样思考。你需要踏踏实实学习编程语言，深入理解作用域、对象、类、封装、继承、面向对象编程、事件侦听、事件冒泡等一大堆编程概念，你还需要了解浏览器，学习 DOM、BOM、CSSOM 的 API，你甚至还需要学习一些网络原理，包括域名、URL、DNS、HTTP 请求都是什么…
&&你可能会被这一大堆名词吓到。确实，想要搞定他们并不容易。但是，你要相信只要你肯花功夫它们也没有那么难，而更重要的是，如果你能拿下他们，你所收获的并不只是这些而已，而是真正跨过了一道坎 ---- 你的世界将因此打开， 你看待世界的方式将因此改变
&&对于这个阶段，你可以继续在 / 上学习，但是 w3school 已经不够用了，遇到不会的语法，我推荐你查阅 Mozilla 开发者网络，这是少数中英文都有的超级专业且友好的网站。
&&同时，你可能需要看一些书本来帮助你学习 JavaScript ：
&&《JavaScript高级程序设计（第3版） (豆瓣) 》或 《JavaScript权威指南 (豆瓣)》，大而全的书只需要一本就够了
&&如果上面这本你觉得太难，你可以先看 《JavaScript DOM编程艺术 （第2版） (豆瓣)》来过渡一下，这本书比较容易，它会教给你 “优雅降级、渐进增强”的优秀思想。
&&如果你能顺利得渡过了这个阶段，我想你已经能做出很多令你自豪的网站了！试着向身边的工程师朋友询问如何购买域名、配置简单的静态服务器，或者搜搜“Github Pages”，然后把你的作品挂在网络上让大家欣赏吧！
&&你还可以试着用 JavaScript 写写小游戏，这不但能锻炼你的编程水平还非常有趣～比如这是我刚学 JS 不久后 hack 一晚的产物 ---- 用 DOM 实现的打飞机：Hux - Aircraft （不支持手机）
6917.jpg (63.22 KB, 下载次数: 0)
11:25 上传
&&如果你能完成上述所有的学习，你已经是一名非常出色的前端学徒了！对于只是想要丰富技能的设计师或者产品经理来说，接下来的内容可能会让你感到不适 ;
&&[color=rgb(149,]但如果你铁了心想要真正入行进入大公司从事专职前端开发的工作，那么你可以接着往下看：
&&近几年的前端技术发展迅猛，前端工程师早已不是切切图写写页面做点特效就完事的职位，你需要具备相当完善的工程师素质与计算机知识，成为一名真正的工程师。
&&你需要非常了解 JavaScript 这门语言，包括 闭包、IIFE、this、prototype 及一些底层实现（ES、VO、AO）、熟悉常用的设计模式与 JavaScript 范式（比如实现类与私有属性）。另外，新的 ES6 已经问世，包括 class, module, arrow function 等等。
&&你需要非常了解前端常用的网络及后端知识，包括 Ajax、JSON、HTTP 请求、GET/POST 差异、RESTful、URL hash/query、webSocket、常用的跨域方式（JSONP/CORS），以及 CDN 缓存、静态网站/动态网站区别、服务器端渲染/前端渲染区别等等。
&&你需要学习使用进阶的 CSS，包括熟悉 CSS 3，使用 Scss/Less 等编译到 CSS 的语言，使用 autoprefixer 等 PostCSS 工具，了解 CSS 在 Scope/Namespace 上的缺陷，你还可以学习 CSS Modules、CSS in JS 这些有趣的新玩意。
游戏咖啡屋-最好的游戏编程开发技术网站！1、本主题所有言论和图片纯属会员个人意见，与本论坛立场无关 交流QQ群：
2、本站所有主题由该帖子作者发表，该帖子作者与享有帖子相关版权
4、如本帖侵犯到任何版权问题，请立即告知本站，本站将及时予与删除并致以最深的歉意
哈...今天心情不错，来游戏咖啡区签到了...
主题帖子积分
你需要非常了解前端的模块化规范，可能在你学习到这里的时候，Require.js/AMD 已经再见了，但是 CommonJS 与 ES6 Modules 你必须要了解。（你可以观看我的分享《JavaScript Modularization Seven Day》 来学习 JS 模块化的历史）
&&你需要熟悉 Git 与 Shell 的使用，包括基于 git 的版本管理、分支管理与团队协作，包括简单的 Linux/Unix 命令、你要知道大部分程序员的工作可以通过 shell 更快更酷的完成，并且很多“软件”只能通过 shell 来使用。你还可以把你的代码放到 github 上与人分享，并且学习 github 上其他优秀的开源代码。
&&你需要熟悉并且习惯使用 Node，包括了解 npm、使用 Grunt/Gulp/Browserify/Webpack 优化你的工作流、对你的代码进行打包、混淆、压缩、发布，你还可以使用 Express/Koa 配合 MongoDB/Redis 涉足到后端领域，或者尝试用 Node 做后端渲染优化你的首屏体验。
&&你需要了解各种 HTML 5 的新 API，包括 &video&/&audio&，包括 Canvas，webGL、File API、App Cache、localStorage、IndexedDB、Drag & Drop、更高级的 DOM API、Fetch API 等等。
&&你需要学习 JavaScript 的单线程与异步编程方法，因为它们非常非常常用、包括 setTimeout/setInterval，回调与回调地域、事件与event loop、还有 Promise 甚至 Async/Await。
&&你需要非常了解浏览器，包括主流浏览器的名称、内核与差异、包括私有属性与 -webkit-，你需要学习如何使用 Chrome DevTool，你需要了解浏览器渲染的 reflow/repaint 来避免 Jank 并进行有针对性的性能优化。
&&你需要专门学习 Mobile Web，因为移动互联网是趋势。包括 viewport、CSS pixel、 touch 事件、iOS/Android 浏览器的差异与兼容、移动端的性能优化、300ms delay 等等…你还需要知道 Hybrid 是什么，包括 Cordova/Phonegap，更复杂的比如和 iOS/Android 通信的机制，比如 URI Scheme 或者 JS Bridge。
&&你需要学习一些非常火热的前端框架/库，他们不但能帮助你更快的进行开发、更重要的是他们背后所蕴含的思想。包括 Backbone、Angular、Vue、React、Polymer 等等、了解它们背后的双向数据绑定、单向数据流、MVC/MVVM/Flux 思想、Web Component 与组件化等等。
&&你需要学习如何构建 web 单页应用，这是 web 的未来，包括利用 history API 或者 hash 实现路由，包括基于 Ajax + 模版引擎或者其他技术的前端渲染、包括组织较为复杂的软件设计等等。
&&我还建议你学习更多的计算机知识，它们能对你的代码能起到潜移默化的作用，包括简单的计算机体系结构、更广泛的编程知识（面向对象/函数式等）、栈、堆、数组、队列、哈希表、树、图等数据结构、时间复杂度与空间复杂度以及简单的算法等等。
&&你需要了解业内的大神并阅读它们的博客/知乎/微博，很多思想和新东西只有从他们身上才能学到。我还推荐你多参加技术交流会，多认识一些可以一起学习的小伙伴，你们可以互相交流并且一起成长。
&&你需要具备很强的自学能力、对技术有热情并且不断跟进。因为 JavaScript/前端的社区非常非常活跃，有太多的新东西需要你自己来发现与学习：比如 Universal JavaScript（同构）、 前端测试、HTML5 游戏、WebRTC、CSS 4、ES 7、React Native、Babel、TypeScript、Electron 等等等等…
&&虽然一下扯得有点多，但这些确实就是你未来将会遇到的。你并不需要全部掌握它们，但是却多多益善；你也可以专精在某几个方面，这已经足以让你成为非常专业的前端工程师。
哈...今天心情不错，来游戏咖啡区签到了...
Powered by君，已阅读到文档的结尾了呢~~
零基础入门学习iOS游戏开发
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
零基础入门学习iOS游戏开发
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口深圳汇众动漫游戏学院
当前位置： & 正文
零基础可以学游戏开发吗？
零基础可以学游戏开发吗？
答：可以学习，我们的教学课程都是可以针对零基础学习的！
第一，我们是分不同的专业，有游戏程序开发和游戏美术设计，对于不同基础的学生可以根据自己的基础和兴趣等综合情况来选择适合自己的专业。
第二，即使这其中的两个专业，学习游戏程序方向会有一些逻辑思维的要求，但是咱们的课程也是从简单到容易这样由浅入深的来学习，先学手游的J***A语言基础，再学网游的C++；
对于游戏美术设计这个专业也是不错的，人才的需求量也非常大，这个专业主要是看你个人的兴趣和综合因素来决定的，或者你可以在上专业课之前先上咱们的基础课，基础课里有策划课、程序和美术的基础，你可以上了这个基础课后再去选择，看自己适合哪个专业的学习，到时候老师也可以给你一些建议，帮助你来选择专业。
&& 广东汇众教育深圳校区（深圳市汇众益智职业培训学校）是广东汇众教育游戏动漫项目在深圳地区的实施机构，同时也是经政府批准的正规办学单位。深圳校区是汇众教育全国四大就业基地（深圳、北京、上海、成都）之一。与全国三十多家就业网络，400多家战略合作企业，上千家游戏动漫公司合作。同时为学生搭建的“两网一平台”，入学签署就业协议，毕业输送到游戏动漫企业工作，为游戏动漫企业定向培养人才，形成了产、学、研一体的教学模式，让学员实现兴趣与职业的完美结合，切实保障学生的就业无忧
&&&&&&&&&&&&&
来源：深圳汇众教育 （/）
推荐阅读Recommended Reading
开班信息Class Information
就业指导Employment
学校详细地址：深圳市福田区深南中路华能大厦中区13楼
全国服务咨询***
京ICP备号北京汇众益智科技有限公司 地址：北京市海淀区上地东路35号颐泉汇3层 ***:010-智联提示您：用人单位以任何名义向应聘者收取费用都属违法行为（如押金、资料费、代收体检费、代收淘宝信誉等），请提高警惕并注意保护个人信息！
您当前所在位置&&&当前页面
零基础游戏开发带薪学徒
五险一金年底双薪全勤奖包住餐补带薪年假员工旅游节日福利
职位月薪：元/月&
工作地点：-龙华新区
发布日期：
工作性质：全职
工作经验：不限
最低学历：中专
招聘人数：8人
职位类别：
岗位职责：1、有一定的计算机基础，了解C、Java、PHP等开发语言基础相关专业或技能优先；2、学习能力，沟通表达能力强；3、热爱互联网行业的有志青年；4、非本专业优秀应届生亦可投递本职位，公司提供入职培训福利待遇：1、实习期间包吃住，薪资面议；2、工作时间9：00-18：00，周六日双休；3、享受国家法定节假日。
工作地址：
深圳市万度网络技术开发有限公司
最新职位推荐
今日相似推荐
地点：深圳地点：深圳地点：深圳地点：深圳地点：深圳地点：深圳地点：深圳地点：深圳地点：深圳地点：深圳
公司规模：100-499人
公司性质：民营
公司行业：
公司地址：
深圳市万度网络技术开发有限公司
您也许对以下职位类别感兴趣:
热门职位推荐: