拒绝访问 | lusongsong.com | 百度云加速
请打开cookies.
此网站 (lusongsong.com) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(41edb6-ua98).
重新安装浏览器，或使用别的浏览器优秀设计联盟-SDC-优设网-设计师交流学习平台-听讲座，聊设计，找素材，尽在优设网
下一篇 继续涨姿势
阅读本文需 8 分钟
编者按：在这个变革速度前所未有的时代，我们会听到各种各样的声音。有人说设计师得懂编程，程序员要懂市场规律，不会写文案的交互设计师不是好产品经理，等等等等。但是在这些叫嚣跨领域强调多技能的人群中，我们依然能听到一些不一样的声音。今天这篇短文来自Gaiam的产品设计总监 Jesse Weaver，作为一个资深的专业产品人，他有着不一样的考量。
越来越多的招聘条件上，明确要求需要懂代码的设计师。有的是需要设计师精通HTML、CSS和JS的，比较奇葩的是要求设计设计师懂JAVA，深入理解C++的，至于要求设计师精通Android和iOS开发的一看就是想把开发的钱给省下来的鸡贼团队。如果你使用百度和Google搜索“设计师是否需要懂代码”，搜索结果可能多达几十万条，看来被这个问题困扰的人真的很多，迷茫的设计师真的不少。
坦率的讲，在这个设计与开发愈来愈紧密的时代，我并非完全不同意“设计师懂代码”这件事，但是在“我们需要能写代码的设计师”这件事情上，我觉得大家存在着相当的误解和歪曲。
作为产品设计团队的领导，我同样可以多少写一些代码，前端和后端的都可以，我自然也很明白拥有多技能的重要性。我能画原型，拥有跨学科的背景和能力，了解各种技能的特性，也拥有调整优化实践的技能。但是，我明白事情的界限在哪里。专业的事情，应该让专业的人来做。我不是开发者，更加不希望我写的代码被作为基础，被大规模地应用到一个专业程序中去。
说设计师应该去写代码，给人一种感觉：团队中所有人都应该全身心参与到产品的开发和生产上来。或者说，设计团队和开发团队应该从某种程度上合而为一，组成某种无缝的全功能多栖超级开发团队。
咱们还是实在点儿的好。设计和开发（不论是前端还是后端），是高度专业化的职业，有着清晰的定位和分工。每一个这样的职业都需要若干年的时间来掌控，想在一个领域中成为专家是无法一蹴而就的。
我们真正需要的是，能真正能做好设计的设计师，能写好代码的开发者，并且设计师和开发者能够无缝地协作。
要实现两者的协作，需要一个关键的因素：移情。移情能力是设身处地理解他人感受的一种能力，这才是关键。
我们需要设计师能够了解代码和开发的流程和原理。这和会写代码是两回事。
我们希望设计师能了解开发了解代码，就像我们希望开发者能了解设计师的工作流程和原理。设计师希望开发者能用设计语言跟他们沟通，希望开发者能了解设计思考和思维过程，而不是让开发者自己打开PS给绿色的界面加一个红色的图标。
真正意义上的相互了解，深入到位的沟通，这样才能让孤立的环节有序地整合起来，在协作中打造伟大的产品。这样协作的关键点在于，了解和分工的程度要把控好，让真正的专家在他的领域自由驰骋，不要让其他人成为阻塞。
当有人说他们需要“能写代码的设计师”的时候，我想他想要的应该是一名“瑞士军刀式的设计师”。他们想要的这个角色功能很全，就像瑞士军刀一样，自带多种工具，剪刀、牙签、螺丝刀、锉刀、锯一个都不少，干啥都能上。不过电工不会选用瑞士军刀上的螺丝刀，木工也看不上瑞士军刀上的锉刀和锯，裁缝更不会指望其中内置的剪刀，至于士兵嘛，他们喜欢匕首，军刺，而且也玩得一手好工兵铲，然而工兵铲这种神器通常是不会出现在瑞士军刀上的。
瑞士军刀只是提供了最底层最基础的工具以及相当有限的功能，以至于在很多时候很难真的将其划归到“刀”这个品类中。
专业的人事需要专业的工具。同样，专业的团队需要有专业的团队成员。
我不希望我手底下的设计师，每天刷网站关注最新的跨浏览器CSS样式解决方案，或者到处找JS教程“充电”。同理，我也不希望我手下的开发者在配色理论和配色方案这样的事情上耗费时间。
我希望我的设计师能在移动端界面标注上钻研得更深，在可用性设计上有更好的实践，期待设计师们能深入研究用户习惯，能挖掘未曾被满足的用户需求，让产品设计和体验更上一层楼，这是设计师的工作。同时我也承认，了解代码是他们工作的一小部分，但是仅仅是一小部分，这一部分工作必须是高效的，并且是基于合作需求而进行适当学习和了解。
如此一来，设计师对代码有所了解，开发者对于设计有所涉猎，那么开发者能够基于用户需求对设计师的构想有所评判，设计师也能够对设计如何实现为产品深入认识，如果双方在产品原型设计上深入沟通，说不定能拿出更有说服力的方案。但是不论如何，都要规避让设计师“成为开发者”，或者让开发者“成为设计师”这样的 想法。
融合是存在的，并且有它独到的意义，但是此处并不合适。
如果你希望你的团队发挥它真正的优势，做专业的事情，通过移情效果达成协作，那么你的团队不需要瑞士军刀式的成员。真正能在专业领域深入挖掘的成员——设计师、开发者——才是你需要的人，让他们走到一起，组成你的工具箱。
这才是我们要的。
【没有师傅带，跟着教程成高手】
Top 1：作者自学成功的亲身经验，实用性高！
Top 2：从新手技巧到高手教程都在这儿了！
Top 3：集合多位交互大牛的经验合集！
原文地址：
优设译者：
「子木说」
很久之前看过的一个段子，我想诸位对此肯定深有体会：前台美女三宝：你好，找谁，倒饮料。产品经理三宝：山寨，改版，再推倒。项目经理三宝：进度，流程，做报表。团队经理三宝：团建，开会，评绩效。数据分析师三宝：SQL，Excel，PPT。人事经理三宝：画饼，忽悠，挖墙脚。设计师三宝：修改，重做，飞机稿。程序员三宝：闷骚，加班，修电脑。
本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量96万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
PS后期教程！如何调出柔和清淡且通透的人像效果？
编者按：这类效果在当下的人像摄影中特别受欢迎，常见于各式亲子照，女友照，如果你前期技巧不足，那就后期技术来补，今天@泼辣熊科技 总结...
用户体验，细节为王，今天推荐一篇看似简单却道理十足的文章，值得大家一起阅读并且深思，我们是否在一些地方因为惯性思维错过了提升产品体验的点 &&&...今天，@P大点S微博 教大家制作一个Wbe Mini Player，一个很简单的播放界面。主要是图层样式的应用，操作绝对简单。做完之后，修改颜色神马的相当的...@牛MO王涵 ：阿B一直都认为，作为一名设计师不仅要做的一手好设计，也要玩的一手好游戏。这是手和脑的搭配组合，轻松娱乐并且发掘设计的灵感。或许别人不信，但是...@设计便利店：平时在做排版设计的时候是不是经常遇到这种情况？把画面的文字或元素左摆摆，右排排，方向键上下左右微调，眯眼看大效果，全凭感觉调了一两个钟头后，自...Z Yuhan：说起界面设计里对扁平设计，主流感受都是正面的，似乎很少有人提出它有什么问题。扁平风格在这个简约至上的时代体现了符合潮流的审美，但是它是否真的...编者按：大家都知道Google fonts里面有不下600个免费可商用的英文字体可以使用，这么多选择，用哪个好呢？今天@justfont 从专业角度推荐几款...ICONY 是一套集合了 100 个图标的免费图标集，这套图标的特色是平面化设计，没有多余或复杂的图形，很容易被使用于任何一个开发项目。这套图标一共提供了四...编者按：前两天@C7210 （腾讯高级交互设计师）从目标、内容来源、创意扮演的角色3个方面聊了艺术和设计的区别，今天第二章节继续从视觉美学和自我角色两方面深...编者按：2017年会动效的设计师依然吃香，想学好动效，可以先临摹一些简单的效果。比如今天这篇教程，虽然不难，但能帮你快速熟悉AE中关键帧和操控点工具的使用。...
我们的团队
大家在关注
一扫"掌"握！
把好文章收藏到微信
打开微信，扫码分享学设计 优设网 在这里IBM Waston设计师:这是我为自己设计的生活 | 从零道一#10 李双双本文首发于公众号「从零道一」（id: goto0011)。 收听完整播客。李双双（） 是 IBM Waston 美国匹兹堡办公室的一名用户体验设计师（User Experience Designer）。她于2014从卡内基梅隆大学（CMU）的人机交互（HCI）硕士项目毕业；此前她在人民大学完成了计算机科学的本科。在本期访谈中，我们主要聊了这些： - IBM Waston 的用户体验设计师工作是什么样的？如何满足不同用户的需求？- CMU HCI的capstone 项目有哪些独特之处？申请时要注意什么？- 在工作求学经历之外，双双还给我们分享了她如何运用设计原理，从头至尾完整设计了自己的婚礼的故事。李 = 李双双#0. 在瑞典喜欢上了人机交互（HCI） 介绍一下你在工作前的求学经历？李：我从小的梦想其实是当记者，因为初高中的时候看了很多柴静做的访谈，想成为她那样的人。于是高考时就报了人大新闻专业，但高考发挥失常，又是考前报志愿，最终被录取到了人大的信息学院，在数学系和计算机系中做选择。这算是我一个人生的巨大转变。大一的时候压力很大，被数学分析虐的哭了好几次。好在发现自己虽然以前没接触过编程，却逐渐开始享受用程序实现想法的过程。于是阴差阳错学了计算机，慢慢和当记者的梦想越走越远。迷茫过一段时间，又不知道自己以后适合做什么。我一直是喜欢瞎想瞎琢磨的的人，脑子里有很多想法，不知道能量往哪里释放。所幸本科时抓住了一些机会，和几个朋友一起设计了一个帮助师生交流信息的平台，在一个国际的比赛演讲然后得了最高奖，后来平台还在学校投入了使用。这算是我第一个和产品有关的经历。虽然我硕士读的是HCI，但直到大三我才真正了解它。当时去瑞典斯德哥尔摩大学交换了一个学期，选到了两门和HCI有关的课，其中一门关于多媒体的课我用 Processing （一种编程语言）做了一个用手指在空中弹钢琴的软件，同学们都很喜欢。同时我第一次了解到 HCI 既可以和人打交道，又可以用到编程，这让我感到很兴奋。#1. 在 CMU MHCI 的一年：帮美国银行提高用户体验CMU人机交互这个项目怎样？李：CMU HCI 硕士项目非常好，非常注重实践，希望把学生培养成合格的 UX 设计师。它只有十二个月，但有一个长达七个月的毕业项目（capstone project）。由于大家都来自不同专业，秋季学期会先上基础课。第二个学期有毕业项目，四到五人一个小组，每个小组会和一个“客户”对应。这个项目名气比较大，有公司找到CMU来赞助我们，我当时的客户是美国银行（Bank of America）。我们需要解决一个真实的问题：如何提高网上交易率？当时美国银行发现用他们的用户在网站上基本只做查询，很少去做交易，开卡贷款等。我们经过三个月用户研究，去飞到DC、费城等地采访美国银行的用户，去观察他们怎么在网点和别人沟通（比如职员用了什么语言），和网站上没有的比较。也打电话，看他们的客户服务怎么样。这个项目的好处是可以用书本上的知识，完整把UX的流程做一遍。后来在工作中，UX永远不会有时间让你一步步做好，但是了解整个过程是很重要的。#2. 成为一名用户体验设计师什么是用户体验设计师？李：这个职位是这几年才发展出来的，以前是程序员和产品经理一起去决定的产品功能，设计师把界面画漂亮就可以。近几年随着行业上的带动，发现欠缺中间环节，很难保证最佳产品体验。等产品发布出去，再得到用户的反馈就太迟了。这个职位保证了尽早知道用户需求是什么。在设计过程中，如果没有用户反馈去修正产品，设计出的东西可用性不强，因为设计师和产品经理往往是不能代表所有人的。我们在设计出雏形后，尽早让用户确认这是否是他们想要的。之后会做一些可点击的原型，测试可用性。比如说在航空公司的网站订票，在界面上不知道改怎么做，或者不小心选错了日期之后，下一步不知道如何修改，这些问题要尽早解决，在迭代过程中减少消耗，才不会浪费太多程序员的时间，最大程度降低风险。总的来说，用户体验设计师是一个比较杂的职业。不是整天在电脑前画图，而是会和用户打交道、进行头脑风暴，再做线框图原型，作为给视觉设计师的框架。你在工作中遇到过哪些挑战？李：现在做的产品是很偏技术的，不是一个比较好理解的应用，而是一个人工智能的搜索方案，比较抽象，要和程序员、研究人员沟通后才能明确理解。同时我们产品既是为了程序员设计的，也要照顾半路出家的人。我本科学计算机，不断意识到这是一个好处。虽然有很多语言已经忘记了，但是整个思维还在。传统设计学校出来的同事比，在程序员向我描述东西的时候我会很快明白他在讲什么。设计过程中经常用哪些工具？李：有一个工具是 Sketch，几乎是每天不离手。用它画 UI，从初级的线框图，到比较成熟的设计。另一个 Axure 用来做可点击的原型。这个工具比较成熟，可以加入复杂逻辑、数据库，做用户测试的时候用这个做原型，模仿最后成型的产品，而不需要程序员把它真正做出来。你本身的工作是UX，有没有对某款产品印象深刻？李：举一个大家都很熟悉的例子：宜家。最近我正好在搬家，发现宜家真的是把设计融入到从头到尾的体验中了。我在宜家手机app里存了一些物品， 去了实体店就会打开手机，它会明确告诉我到哪里取这些产品。整个过程的体验设计得非常巧妙，它把相似的产品放在一起，形成一圈；在走一圈的过程中，你可以一件件地拿你要的东西。在购买后，每个盒子包装设计很好，但性价比又高。这让我觉得宜家是个非常好的体验。其实 UX 并不只是存在于一个 App或者一个网站里，它是存在于任何一个产品的任何形式中。#3. HCI 申请经验，作品集当时是怎么申请的 CMU 的 HCI？李：HCI的申请和不同的地方，尤其是对没有设计经验的同学，就是需要一个作品集。虽然叫作品集，但不是一本书，而是一个静态的形式，现在公认的方法是做一个网站。作品集上要放几个和以前项目相关的内容 - 比如你做过什么和HCI有关的，可以是本专业的，但你交叉运用了和HCI相关的东西。比如学新闻的同学在作品集上可以放采访、做视频的经历。在 CMU HCI 项目时间紧张只有一年，该如何处理求职问题？李：九月份开学第一个求职会很多公司就来了，当时就措手不及，很多申请就石沉大海了。真正开始认真找工作是在寒假回来，我更新了作品集，把第一个学期的项目和几个正在做的项目都放在上面。开始投很多简历，收到了一些电话面试。有时候通过面小公司积累面试经验，把自己弄到一个比较能说的状态，去承认自己虽然HCI只学了一年，并且没有相关的工作经历，但你也去做了一些项目，在向职业方向努力。我比较幸运，在四、五月收了两个 offer，其中一个是 IBM，其他同学也有在毕业之前拿到offer的，美国同学也有启动的比较慢，但大家最后基本都找到了工作。#4. 做自己婚礼的 UX 设计师我们来聊一些和工作无关的东西。你去年全程设计了自己的婚礼，也把过程记录在微信推送里，能不能和我们分享一下？李：我是个喜欢折腾的人，有很多爱好，但是都和艺术、设计搭边，比如油画水彩等尝试。去年我订婚后决定在美国办婚礼，也决定自己承担下这个项目。原因之一是人力很贵，二我有这样的能力和想法。加上我在公司里为没见过的用户做设计，这次我要以自己为最主要的用户来设计。当了设计师、产品经理、用户，很有意思。我找到了一个非常特别的婚礼场地，是一个偏亚洲风的私人小花园，有池塘、锦鲤、日本花园，也有可以开出去的船。我画了一个手绘地图告诉别人我的婚礼仪式在一个小亭子上，也标出蛋糕、卫生间在哪，放在自己做的婚礼网站上。中间还有一个中式的敬茶仪式，这个是考虑了宾客的需求，因为有1/3是中国来的、1/3我的同事朋友、1/3我老公的同事朋友。他们会比较好奇，一对中国人在他乡办婚礼是一个什么样的。所以我不仅穿婚纱，还穿了中式的秀禾服，也还准备了很多中式甜点。最有意思的是当天下大雨，我在敬茶仪式后本来是要换回婚纱去跳第一支舞（first dance），这个概念只在西方有，但是下大雨就没时间去换婚纱，我就穿着秀禾服跳了一段非常西式的舞，非常特别。（篇幅所限，更多细节请点击原文收听播客）推荐一下平时喜欢看的书、 微信公众号、网站等？李：我喜欢卡尔维诺的《树上的男爵》，给我打开了一个脑洞很大的世界，一个小男孩和家里争吵后就一直住在树上，一生中从未下过地面，语言也非常优美。公众号的话，我想推荐两个和 UX 相关的。一个是UX Coffee，他们采访了很多设计师，有很多干货值得关注。还有一个我这两年一直在参与做的项目，叫 UX Offer， 帮助大家了解 UX，作品集和准备 HCI 项目的申请。另外很多设计资讯是从
来的。它是 Chrome 插件，打开新页面会出现它自己的内容，有来自不同设计源（如Dribble, Behance）上其他设计师的新作品。嘉宾联系方式：个人主页: 你可能也喜欢（同样来自CMU）：
+ 关注「从零道一」：微信公众号: goto0011播客收听地址： 欢迎来这个知乎问题写下对我们节目的看法: 17添加评论分享收藏文章被以下专栏收录“从零道一”是一个对身边优秀而有趣的计算机学生和年轻专业人士的访谈，聊他（她）们的故事、经历和体验，由郑天意和池邦强主持。每一期节目我们会制作成播客（Podcast），在网易云音乐中搜索“从零道一”即可找到我们。公众号 ID：goto0011设计师应该学编程吗？设计师学编程的经历和感受是怎样的？ - 知乎<strong class="NumberBoard-itemValue" title="被浏览<strong class="NumberBoard-itemValue" title="5,673分享邀请回答gefostudio.com/dc53853 条评论分享收藏感谢收起62添加评论分享收藏感谢收起作为一枚设计师，我被前端开发朋友的高薪深深伤害...
作为一名设计师，我被前端开发朋友的工资深深伤害.......
我是学工业设计的，喜欢热爱设计行业的，但经过几年的努力工作，觉得未来发展和工资等都有限，所以想往互联网IT行业发展。在别人的介绍，下了解到web前端目前很火，感觉这是设计新的发展方向，然后就去了解了下前端开发目前的薪资水平。
以下为在某主流互联网行业招聘网站上，搜索“前端”限定“3年及以内”经验后最先出现的4份岗位待遇信息。对比自己一个月不到1w的工作，简直累觉不爱。。
难道我的一生就只能落于人后吗？不甘心对不对！还好，因为你有很好的设计功底，其实web前端开发，也需要有设计师的眼光的，因为单纯的程序员对于审美这块，略微薄弱（别打我....）
那么，设计师的春天在哪里，如何成功转型成出色多金的前端开发工程师呢？来看看阿里巴巴交互设计师的人生经验吧~
入门篇（HTML/CSS）
说起设计师希望学前端的初衷，大概还是因为各种华丽的网页特效/交互太过吸引人，这种感觉大概就是：“Hey，我的设计可以做成网页访问了呢！”
好在，“展示”对于前端技术来说反而是最简单的部分。所以，放下你对“编程”两个字的恐惧，从“称不上是编程语言”的 HTML/CSS 开始，先做点有成就感的东西出来吧！
对于设计师来说，最有成就感的一定是“可以看到的东西”，而 HTML/CSS 正是用来干这个的，HTML 就是一堆非常简单的标签，而 CSS 无非就是把你画画的流程用英语按一定的格式写出来而已：
&p& p is paragraph! &/p&&style&p { color:}&/style&
是不是非常容易，就跟读英语一样！
接下来，你就需要开始学习啦，比如常用 HTML 标签的意思，各种 CSS 的属性，还有 CSS 的盒模型、优先级、选择器……放心，它们都很容易；能玩得转 PS/AI/Flash/Axure/AE/Sketch 的设计师们，学这个小菜一碟~
推荐几个资源，先从最简单的学习：
w3school 在线教程 (中文，一个很 Low 但是又很好的入门学习网站）
Learn to code (Codecademy，如果你英文 OK，强烈建议你使用它进行交互式的学习！里面从 HTML/CSS 到搭建网站的课程都有，免费，生动直观）
这个阶段的练习主要是“临摹”：用代码画出你想画的网站，越多越好。
对于书，我非常不推荐上来就去看各种厚厚的入门/指南书，没必要！这一个阶段应该快速上手，培养兴趣，培养成就感。先做出可以看的东西再说，掌握常用的 HTML/CSS 就够用了。
如果完成的好，这个阶段过后你大概就可以写出一些简单又好看的“静态网页”了
入门篇（Java/jQuery）
想要在网页上实现一些交互效果，比如轮播图、点击按钮后播放动画？那你就必须要开始学习 Java 了！Java 是一门完整、强大并且非常热门的编程语言，你在浏览器里看到的所有交互或者高级功能都是由它在背后支撑的！
举个小栗子：
alert("Hello World!")
就这一行，就可以在浏览器里弹出 Hello World 啦！
在了解一些基础的 Java 概念（变量、函数、基本类型）后，我们可以直接去学习 jQuery，你不用知道它具体是什么（它是一个 Java 代码库），你只要知道它可以显著地降低你编写交互的难度就好了：
$('.className').click(function(){ alert("Hello jQuery")})
通过 jQuery，我们可以继续使用在 CSS 中学到的“选择器”
对于没有编程基础的人来说，想要完全掌握它们两并不容易。作为设计师，很多时候我们可以先不必深究它们的原理，而是尝试直接应用它！这样成就感会来得很快，并且你可以通过实际应用更加理解 Java 是用来做什么的。
如果学习得顺利，你还可尝试使用各种 jQuery 插件，你会发现写出支持用户交互的网站也没有那么困难，很多看上去很复杂的功能（比如轮播图、灯箱、下拉菜单），搜一搜然后看看文档（教程）、改改示例代码就好了。
比如说，配合 Huxpro/jquery.HSlider · GitHub 这样的轮播图插件，你可以很轻松的写出 HSlider | Demo 这样的网页相册或者 HSlider | Weather 这样的手机端 App 原型。
最后，我想推荐下 Bootstrap · The world's most popular mobile-first and respons ，这是世界上最知名的前端 UI 框架之一，提供了大量 CSS 样式与 jQuery 插件。它非常容易学习并且中英文教程都非常健全，你并不需要理解它背后的工作原理就能很好的使用它，让你快速达到“可以建站的水平”。有余力的话，你不但可以学习如何使用它，还可以学习它背后的设计思想。
基本的知识掌握了，接下来就是令人头疼的转职选择，如何才是最符合自身发展的呢？看看大神怎么说吧~
转职方向一：前端重构 （Web Rebuild）
业内通常把专精 HTML/CSS 的前端从业人员称为重构，而对于注重视觉效果的设计师来说，在掌握基本的 HTML/CSS 后，就可以朝着这个方向发展了。
到了这个阶段，你不但要知道怎么写页面，还要知道它们都是为什么，并且知道怎么做更好。这对你理解 Web 世界非常有帮助，并且能帮助你做出更“系统化”的设计。
CSS 的学问很多，你需要开始理解文档流、浮动流等各种定位的方式与原理，理解 CSS 的继承复用思想、理解浏览器的差异、兼容、优雅降级……这里强烈推荐一本书：《精通CSS（第2版）》，虽然前端技术突飞猛进，但这本书的思想永远不会过时。
HTML 方面，要开始注重语义化、可访问性与结构的合理，你要开始学习“结构与样式的分离”，这里有一本神书将这种分离做到了极致：《CSS禅意花园 》。
另外，各种炫酷屌的 CSS 3 属性你一定会喜欢：你可以用媒体查询做响应式网页设计，你可以用 transiton 和 animation 做补间动画与关键帧动画，用 transform 做缩放、旋转、3D变换，还有圆角、渐变、阴影、弹性盒！样样都是设计师的神器！
如果你还掌握了 入门篇（Java/jQuery）的知识，那么恭喜你！你已经可以做出很多有趣的网页了！很多 minisite 或者微信上的“H5” 小广告，这个程度的你已经可以轻松完成了！
配合上你的设计功力，你可以开始尝试创作一些好玩的东西，比如这种富含交互和动画的网站 绅宝 SENOVA ，它仍然是基于 Huxpro/jquery.HSlider · GitHub 实现的！或者给自己做个小小的个人网站试试
转职方向二：前端工程师（Front-end Engineer）
如果你觉得上述的这些都还满足不了你，你渴望做出更多了不起的交互，甚至你已经喜欢上了编程，想要转行做工程师，或者成为一名全栈设计师，那么你可以朝着这个方向继续发展！
这个阶段的最大难度，是你必须学会像一名软件工程师一样思考。你需要踏踏实实学习编程语言，深入理解作用域、对象、类、封装、继承、面向对象编程、事件侦听、事件冒泡等一大堆编程概念，你还需要了解浏览器，学习 DOM、BOM、CSSOM 的 API，你甚至还需要学习一些网络原理，包括域名、URL、DNS、HTTP 请求都是什么…
你可能会被这一大堆名词吓到。确实，想要搞定他们并不容易。但是，你要相信只要你肯花功夫它们也没有那么难，而更重要的是，如果你能拿下他们，你所收获的并不只是这些而已，而是真正跨过了一道大坎 —— 你的世界将因此打开， 你看待世界的方式将因此改变
这个阶段，w3school 已经不够用了，遇到不会的语法，我推荐你查阅 Mozilla 开发者网络，这是少数中英文都有的非常专业且友好的网站。
同时，你可能需要看一些书本来帮助你学习 Java ：
《Java高级程序设计（第3版） 》或 《Java权威指南 》，大而全的书只需要一本就够了
如果上面这本你觉得太难，你可以先看 《Java DOM编程艺术 （第2版）》来过渡一下，这本书比较容易，它会教给你 “优雅降级、渐进增强”的优秀思想
如果你能顺利得渡过了这个阶段，我想你已经能做出很多令你自豪的网站了！试着向身边的工程师朋友询问如何购买域名、配置简单的静态服务器，或者搜搜“Github Pages”，然后把你的作品挂在网络上让大家欣赏吧！
你还可以试着用 Java 写写小游戏，这不但能锻炼你的编程水平还非常有趣～
如果你能完成上述所有的学习，你已经是一名非常出色的前端学徒了！对于只是想要丰富技能的设计师或者产品经理来说，接下来的内容可能会让你感到不适 。
但如果你铁了心想要真正入行进入大公司从事专职前端开发的工作，那么你可以接着往下看：
近几年的前端技术发展迅猛，前端工程师早已不是切切图写写页面做点特效就完事的职位，你需要具备相当完善的工程师素质与计算机知识，成为一名真正的工程师。
你需要非常了解 Java 这门语言，包括 闭包、IIFE、this、prototype 及一些底层实现（ES、VO、AO）、熟悉常用的设计模式与 Java 范式（比如实现类与私有属性）。另外，新的 ES6 已经问世，包括 class, module, arrow function 等等
你需要非常了解前端常用的网络及后端知识，包括 Ajax、JSON、HTTP 请求、GET/POST 差异、RESTful、URL hash/query、webSocket、常用的跨域方式（JSONP/CORS、HTTP 强缓存/协商缓存，以及如何利用 CDN 、静态网站/动态网站区别、服务器端渲染/前端渲染区别等等
你需要学习使用进阶的 CSS，包括熟悉 CSS 3，使用 Scss/Less 等编译到 CSS 的语言，使用 autoprefixer 等 PostCSS 工具，了解 CSS 在 Scope/Namespace 上的缺陷，你还可以学习 CSS Modules、CSS in JS 这些有趣的新玩意。
你需要非常了解前端的模块化规范，可能在你学习到这里的时候，Require.js/AMD 已经再见了，但是 CommonJS 与 ES6 Modules 你必须要了解。
你需要熟悉 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 等等。
你需要学习 Java 的单线程与异步编程方法，因为它们非常非常常用、包括 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 + 模版引擎或者其他技术的前端渲染、包括组织较为复杂的软件设计等等。
我还建议你学习更多的计算机知识，它们能对你的代码能起到潜移默化的作用，包括简单的计算机体系结构、更广泛的编程知识（面向对象/函数式等）、栈、堆、数组、队列、哈希表、树、图等数据结构、时间复杂度与空间复杂度以及简单的算法等等。
你需要了解业内的大神并阅读它们的博客/知乎/微博，比如
等等等等，很多思想和新东西只有从他们身上才能学到。我还推荐你多参加技术交流会，多认识一些可以一起学习的小伙伴，你们可以互相交流并且一起成长。
最后，你需要具备很强的自学能力、对技术有热情并且不断跟进。因为 Java/前端的社区非常非常活跃，有太多的新东西需要你自己来发现与学习：比如 Universal Java、Isomorphic Java、前端测试、HTML5 页游、WebRTC、WebSocket、CSS 4、SVG、HTTP/2、ES 7、React Native、Babel、Type、Electron 等等等等…
原文作者：黄玄
原文网页：https://www.zhihu.com
本文编辑：蛋饼
如果你对前端开发很感兴趣，也想从设计师转行到前端，别急，优达菌为你准备 与 Google、GitHub 联合开发的 前端开发纳米学位课程，学习网页开发的基本原理和应用知识，完成一系列实战项目，为成为一名顶尖前端工程师打下基础！
* 课程报名倒计时1天，将于6月14日 23:59截止报名。
* 课程报名请点击 阅读原文，了解学费及课程安排，还能加入微信群，掌握第一手信息，关注课程后还可加入直播答疑分享。
好消息好消息！
如果你完成本期前端开发课程，获得学位认证，
就有机会获得内推，加入一个超牛B的前端团队，
坐标：杭州·天猫·前端
↓↓↓点击这里，抓住最后报名机会！
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
今日搜狐热点