前端工程师和 UI 设计师该如何选择？

重要！重要！

此回答中的前端知识体系已过时，并存在误导性，请知乎搜索其他答案学习。

———————————————————-

首先得恭喜你，你对2门有密切关系的技能有了初步的了解。

无论是懂前端的设计还是懂设计的前端在任何公司都是很受欢迎的.因为你的本职工作的完成度和速度都讲比一般人好。

现在放在你面前的有3条路。

1.成为前端工程师。

2.ui设计师。

3.全栈设计师。

成为前端设计师需要掌握的技能：
1.1精通html+css+css3，深刻的理解结构与css的配合，并不是会了一点padding，margin，canvan就代表会了。静态界面的能力表现在你代码的复用性，可修改性。例：整站中设计师给出的相同设计手法的模块，你只需要用一个div就搞定。这里需要前端对设计有一定的了解。移动web项目居多。
1.2精通js，jq。很多经常使用的判断，逻辑手写就行，速度快而且垃圾代码少。
1.3建立自己的js代码库，轮播，滚动，刷新，滑进滑出，弹出窗，摇一摇，动画，摄像头等都是会经常用到的找点轻便的代码自己拔下来，然后做成demo存在自己的电脑里面。
1.4深刻理解前台，专题，用户中心，管理系统，移动对c界面，移动专题等不同类型的界面可能你的写法会不一样。有的求快，有的要求复用，有的要求兼容，哪怕是快的写法和兼容的写法也会因为应用环境的关系改变。
1.5 懂一点设计，最高程度的去还原设计师的界面，理解为什么他需要移动1px的位置，理解为什么每个行距间距可能都是10px，这样你们会成为知己好友。
1.6了解一点后端的基础知识，至少知道他们在你的静态页面中那里需要插入动态数据，有哪些东西可以做成可配置的，有些页面跳转可能导致他们拿不到回值等。这样你会成为后端的好朋友。
1.7如果掌握了以上所说的知识，那么就有充足的时间去学习一些应用还不是很广泛的知识。提前挖好自己的井。列：phonegap，appcan它们可以将移动页面变客户端，并提供很多模拟客户端本地效果的js，虽然这种东西不可能代替原生可是某些二级页面或者企业项目可以用这种东西快速完成。ajax，你可以做到一些简单的数据传输。canvas配合的cocos2d，cocos3d（我们中国人的东西）等的动画js，常用于h5游戏，最近我发现企鹅的某些品牌移动web也用的类似的手法。当然还有很多，学习一样的过程中自然就会发现更多其他的。
1.8 前端工程师是设计与实现的枢纽，在职业划分中很重要也很专业。项目约复杂对专业性要求越高。是个需要很长很长时间去用心掌握的技能。

成为设计师需要掌握的技能：
ps：我不知道lz理解的ui设计师和我理解是不是一样的。我自己根据行业来划分。平面设计师，互联网设计师，3d设计师，动画设计师，视频设计师，插画师，游戏场景，游戏人设。因为项目以及职业规划的不同可能掌握多种技能，或许有大神都能掌握并精通吧。最常见的还是2d 平面+互联网+插画。3d 3d+动画+视频 。绘画艺术 插画+场景+人物。的技能组合。
我来说说和我工作相关的2d类设计。
-----------------------------------------------------------
留个坑。

1.1 2d类设计应用环境：网站设计，平台设计，专题设计，app设计，h5设计，海报，单页，画册，大轮播，ppt等其中分为2个大类互联网设计和平面设计。从某一大类入行，学到东西会不一样。相对来说平面设计对视觉的发展程度高于互联网设计，互联网设计的应用场景比平面多很多，入门级要求没有那么高.

1.2 2大类中视觉呈现最难的是专题和海报。专题类又分游戏和电商比较难。平面类海报以汽车和房产略微高端。

1.3 以纯视觉来说平面设计对视觉要求更高一点。平面设计是看的，互联网设计是用的。

1.4 选择好最终的方向，以题主的ui设计来看应该是偏互联网设计的，平面设计没有ui的概念。

1.5 互联网设计视觉以电商和游戏的专题及h5页面为最。交互以平台类和对c端app为最。重视觉先学好字形，场景，主视觉的搭配后学界面元素的合理排布以及引导用户视觉走向的方法。重交互先入一行了解业务需求，目标客户，与产品沟通的方法，界面的逻辑，易用，复用后学视觉呈现。
------------------------------------------------------------
留个坑，设计还没说完

1.6 做出好的设计方法有千万种。做出不丑的设计倒是有一种方法。就是对技法的磨练。

1.7 何为技法，我说一个集结为主题的游戏专题设计过程吧。从策划处拿到需求，设计找策划拿到需求。
1.7.1 找策划确认几个环节，主视觉是什么？头图是否会修改成批量广告图？有没有领导说过偏向于那种配色？这波活动目标群体是什么？活动的目的是为了提高注册还是概念宣传？等越细越好。每一句话代表一个页面元素。
1.7.2 确认好设计模块。头图，转化按钮，功能区，内容描述区，集结产品区，提交弹出区，底部。
1.7.3 根据游戏风格和目标用户订好整体颜色基调最好不超过2种预留一个颜色做辅助色。根据辅助色寻找或手画符合页面和游戏风格辅助元素用于描述区，产品区，提交区。保持风格统一。
1.7.3 头图分为三大块，字形，主视觉，场景。字形尽量做到有整体，有变化，有对比，有质感。场景分为前景中景后景为了提高界面的纵深层次与氛围。主视觉可是是字最好是人，如果是人就需要调整人物光源和阴影，如果是战斗类的图片最好选有张力的人物并加点动感的处理手法。选图是很重要的基础技能。
1.7.4 功能模块，图形化半写实化处理。列：抽奖用转盘，数字用进度条。在主元素外加点之前手机的细节元素组合成符合本页面的主题。
1.7.5 基本这2块做的不错，稿子也就过了，有更多的时间可以继续优化的其他模块，增加和减少元素让页面看的更舒服和易用。
1.7.6 上面所说的就是很少一部分的技法，色彩的搭配，对比的使用，界面的排版，明暗的选择等都是技法有一定的标准，学会了基础就更有能力去追求更难更高的。这个时候你已经知道要追求的是什么了。
1.8 ps，ai，painter这些工具只不过是你手中的笔。画，画的好不好，最终看的还是人，以及如何选择自己合适的笔。先玩好一个高级软件。我是以ps入门，3年后接触的ai，抓了个高手问清了区别半天也就会了。然后其他2d软件看看就能玩了。
1.9 色彩，结构，排版，对比，视觉引导，交互，整体感，选图，统一性这些以及这些的细分都属于技法，是基础，技法掌握的越多越好。
2.0 我的个人理解，2d设计是不分平面互联网的，也是不分行业的。基础是一样的，所以能做出的结果是一样的。
2.1 会一些手绘，无论是画插画还是2.5d图形，还是高阶的修图，调色都是决定你如何比一般设计师更优秀的关键因素。
2.2 设计是一个一生的职业，就算有一天不从事这一行了，可是从设计中学会的思维能帮助我们去解决一些事情。
2.3 设计很苦，入门很难，工资也没有研发高。一定要喜欢，不然最好不要选。我不想见到又一个刻苦的手艺人因为生活的压力而放弃。

以上二种你都是专业性极高的科目，都需要花上整个青春去学习才能称之为优秀。可是一旦成功，你将变的无可替代，特别是设计。

如果你不幸因为工作的关系不能丢下2个技能，那么你将和我一样苦b的选择了第三条路，全栈设计师，你需要花更多的时间去学习很多的东西，无时无刻担心被时代所淘汰。

你会产品，没有产品优秀。
你会策划，没有策划优秀。
你会交互，没有交互优秀。
你会视觉，没有设计优秀。
你会前端，没有前端优秀。
你会ppt，文案，能与所有环节沟通顺畅，能独立做很多事。
你身边的人都说你很牛b。
可是这一身你将与大师无缘。

当你花了很长时间（至少一万个小时吧）去做一样事情，你就会很优秀。

路怎么走，想好再走。

我是工业设计专业的，因为实习的时候是做的平面设计，所以毕业后顺理成章地选择了平面设计，后来实在不喜欢跟顾客的纠缠，于是转身做ui了。现在部门要求我学前端，然后我自学了基本的HTML，CSS ,JS等等。好吧然后回归正规，说说ui设计师和前端设计师的问题。

……………………………………………………………………………………………………………………………………

很多人觉得ui设计师也是平面设计的，就形式来说，确实不错，但ui设计师考虑的更多的是用户体验，以及整个界面之间的逻辑节奏，让用户能够有很好的使用体验。平面设计面对的对象是“客户”，而ui设计面对的是“用户”，虽然只是一字之差，但我确实感同身受，想必平面设计的伙伴都是深有感触的。

然后就是和前端工程师的一些关系，我一直觉得ui设计师和前端工程师都是设计师，图形处理和前端代码都只是工具，因为他们的最终要求是一样的，就是达到形式和美和功能的最高统一。但两者之间延伸的方向确实有差别的，作为一个ui设计师，如果只是会ps,ai,fw等设计软件是算不上优秀的，你必须也懂前端代码，这样才能和前端工程师去更好的沟通。ui设计师的两个延伸方向是用户群体+前端代码实现。而前端工程师的两个延伸是设计+后台代码实现。前端工程师不懂欣赏美，不懂设计师为什么这里是1PX的距离，这里是这个色值，是很慢达到别人想要的，以后的你也不可能完成独立完成一个具有美感的项目。同时前端工程师也要懂后台，懂架构等等。恭喜楼主在这好的年纪拥有同时成为优秀前端工程师和优秀ui设计师的基本条件！

然后这两个职业你必须拥有足够的兴趣和在以后的职业一直保持学习的姿态。因为这两个行业都需要保持很好的先进性。必须通过不断地学习新的设计理念，设计风格，前端特效实现等等才能不被别人说你做的东西很low，跟不上时代！

作为一个设计起家的小白，我对设计有着深深的热爱。很多不懂设计的人觉得设计就是放个图片摆个文字，这是整个设计大环境的悲哀。如果你想成为一个ui设计师，ps，ai，还有现在流行的sketch甚至手绘都是你必须掌握的工具，记住是工具。有了锄头你再想如何挖土如何挖出一片漂亮的土。经常看一些设计网站，像behance, 站酷，花瓣， ui中国， 甚至包括500px 。了解别人色彩是使用和搭配，为的就是让自己变得跟优秀的人同样优秀，然后超越他们！楼主既然懂前端代码，这在任何企业都是一个不错的加分项，前端同样也不能丢。

如果想成为前端工程师，会ps等设计软件是再好不过的了。当然也有一些在bat的人可能不以为然，他们分工明确，产品很多都是流水线出来的。但要成为一个bat的大神也必须懂设计，懂前端后台。HTML，CSS, JS是必须精通的，不然你也只能算是个页面重构的。前端工程师也必须学很多东西，一直学，很多新的前端实现形式不断涌现，如果只做你手头的那个产品，一直用个div包一下，就只会那么几个特效是完全不够用的。学的东西简直太多太多，设计也是如此，看的学的东西太多。总之都是要不断积累的。

根据目前行业的一些情况来看，ui设计师和前端工程师会越来越交织在一起，很多国外的大师也都用代码来实现前端设计。可能有人会说，职业只会越分越细，怎么会不断交织？是的，职业会越来越细，但我们并不只是想成为流水线的工人，每个设计师和前端工程师都有一个大咖梦，对不？

但是话又说回来，术业有专攻，既然选择一个就要专攻一个。选择ui设计师就认真做设计的事，前端代码你要懂，不一定精，要知道怎么实现。前端工程师就认真码农，设计类的不一定要精，但也要会切图，有自己的美感。

不管选什么，都要考虑兴趣，兴趣，兴趣！毕竟都是苦逼心累的活！

…………………………………………………………………………………………………………

大冷天用手机纯手打，点个赞慰问下吧………………………………………………………………………………