UI设计工作流程详解（开公司设计接单，非大厂螺丝钉）

UI设计工作流程详解（开公司设计接单，非大厂螺丝钉）

从设计工作室的视角，分解从需求到研发实现的流程，一家之言，欢迎拍砖

本文为DFUIUX设计工作室 原创，请勿转载

基于DFUIUX设计工作室的企业内训服务，我们开发出了一整套符合一线设计师的培训体系，如果你是想要入行的新人，或者初级UI设计师，你可以根据以下流程检查一下你即将要去的培训机构是否真的是UI培训，而不是滥竽充数的课程体系，或者作为个人学习提升的方向指引。以下内容，你需要反复操作2-3遍，才能在就业后做到游刃有余，快速融入到工作流中。

1. 拿到产品或交互给的原型，一般是墨刀\Axure制作；

墨刀可以以网络连接的方式，进行原型提交及沟通，可实时修改，并且提供团队功能，非常适合团队协作，特别是在专业外包设计服务与客户沟通的场景下。

AxureRP可以在无代码的情况下通过简单的函数设置，实现高保真的交互体验并输出产品需求文档，在老一辈产品经理圈子里比较受欢迎，但协作成本稍高，不适合年轻团队使用，且与ProtoPie对比起来，它的高保真效果又不够真实，也不能很好的服务于UE需求，因此在专业外包设计场景下，戴维蔚来并不推荐使用AxureRP作为交互设计及用户体验设计工作软件。

交互设计利器：墨刀mockitt

虽然大部分企业不会要求UI设计师出交互原型，但个别情况下除外，例如外包接单沟通阶段、创业公司老板就是产品经理等，这时候UI设计师也是要参与交互原型制作的，因此你需要会这两款软件的基本操作，但在需要出交互方案时，我们推荐使用墨刀，因为可以快速的在线沟通，实时修改，对项目需求的快速确认很有帮助。

2. 开始使用sketch、figma、XD基于官方或者大厂组件库制作界面；

如果你要入行UI设计，这三个软件最好都会，且精通，因为你无法预知你要去的公司究竟使用哪一款软件，为了避免入职后出现还要学习软件的尴尬，最好对三个软件的特性和使用流程都很熟悉。

UI设计必须会的三个软件：Figma、Sketch、AdobeXD

UI设计源文件

由于主流的平台，如IOS和andorid基本都是使用这三款软件进行组件库构建，因此，如果你想要用官方组件库，就必须会用这三个软件，至少你要会sketch，但实际上还是有很多中小公司没有给设计师配备苹果电脑，甚至一些大型上市公司，也是用的windows，因此，还是建议大家三个软件都要精通为好。

UI设计组件库和设计规范资源

腾讯TDesign设计+开发资源

软件精通，不仅仅是软件操作很熟练，而是你拿到项目需求，能够根据需求快速使用软件搭建设计规范和组件库，或者马上上手已有的规范及组件库，并立即开始产出高质量的系列界面（一天8个左右的速度），记得是系列界面。因为一个项目，无论C端还是B端，都是几十上百个页面，如何保证页面的视觉交互和逻辑交互保持一致体验，这才是UI设计的核心，也是UX设计的基本要求：一致性。而一致性的前提，一定是标准化的设计规范和组件库。因此，这里说的软件精通，一定是你用这个软件做过至少一个完整（80-200个页面）的项目，并对这个软件的设计规范和组件库创建及使用形成了”肌肉记忆“。

因此，如果你想要从事UI设计工作，却对主流设计软件产生偏科，那么，对你的职业生涯并不是一个很好的开始。

3. 同时使用AI（Adobe Illustrator）绘制图标，使用PS（Photoshop）制作运营banner；

AI是插画设计和MG动画制作的基础软件，也是图标绘制的最佳选择之一，因此是UI设计师必须会的软件，PS就更加不用说了，是几乎所有设计工作都要求会用的软件，AE则是几乎唯一的UI动画代码导出软件。

Adobe Illustrator 适量插画设计、图标设计
Adobe Photoshop 数码CG手绘、游戏界面设计、运营设计、拟物图标设计
Adobe AfterEffect 影视特效制作、MG动画、UI情感化动画、图标动画 JSON、SVGA、PAG代码导出

Adobe Illustrator- 适量插画设计、图标设计；Adobe Photoshop- 数码CG手绘、游戏\大屏界面设计、运营设计、拟物图标设计；Adobe AfterEffect- 影视特效制作、MG动画、UI情感化动画、图标动画 JSON、SVGA、PAG代码导出。

4. 一边做界面一边传蓝湖或别的交付软件；

界面设计好了，就到研发协同，我们一般采取设计与研发资源同步提交的方式进行，也就是做一部分提交一部分，而这种协同模式，最好的解决方案就是蓝湖在线交付，这是戴维蔚来采用的主要手段，可以快速给客户交付移动端、桌面端、网页端等常见的界面图形资源。当然，如果是安卓设备适配，还需要了解draw9Patch，具体大家自行补课吧。

蓝湖设计切图

5. 最后使用ProtoPie或者Principle、XD制作UX交互动效给研发看；

程序员根据效果图和切图做出来的页面，只是静态页面，能实现页面功能，但并不能实现用户体验提升，特别是交互体验，例如发布成功，是否使用动画弹窗，如果使用，应该如何动，图文动画出现的顺序是怎么样的，动态效果持续多久合适等。这时候，就需要UI设计师进行交互体验设计了，需要使用专业的软件完成高保真交互效果制作，模拟用户的操作流程，设计每一次操作反馈的表现形式。并输出动画或者视频，甚至直接输出可操作的高保真Demo给程序员使用，进而推动程序员优化代码层面的交互设计。这是UI设计中的关键一步，是比图片资源交付更需要经验积累的一步，因此UIUX设计师才是UI设计的未来，不仅仅能作图切图，还能指导程序员优化交互层面的用户体验。

ProtoPie 最优秀的高保真Demo制作软件
Principle 最简单的交互体验效果制作工具
Keynote 任何人都可以快速上手的演示动画软件

最后补充一句，如果你是使用AdobeXD制作界面的，强烈推荐AdobeXD的交互原型制作功能，点击-自动制作-对齐，你真的会爱上它的。

6. 用AE将插画动画以JSON格式或者SVGA格式提交给程序员；

动画已经制作好了，但问题也来了，我为弹窗做了一个人物插画动画，应该怎么给程序员呢？可用的方式包括以下几种：图片序列图（aPNG、WebP、SVG等）、GIF动图、JSON、SVGA、PAG。从使用普及度来说，基于lottie方案，使用AE，通过bodymovin插件输出为JSON是最通用的方案，但记得使用洛丽塔进行测试，要通过测试，最好动画制作采取PTRS的制作方案制作。

以上这一句话，对于假的UI设计培训机构来说，应该是闻所未闻的，毕竟知识太新，很多机构老师自己都没有经历过动画代码的程序交付过程。

lottie UI动画制作

7. 进行研发走查，实时跟进研发实现结果；

研发走查，其实就是基于你提交的切图和设计稿，以及动画Demo去检查每一个程序员的界面实现效果，毕竟程序员的思维是：功能跑通了就是做好了，他们不太在意用户体验的细节，例如你设计的分割线是4% #000000，他用了8% #000000，等等。类似的细节差异如果多了，最终的上线效果会与设计图差异很大，因此需要设计师在页面完成交付后，还要跟进研发实现，也就是进行走动排查，用测试机看每一个细节，和研发同事一点一点的对。但如果客户使用蓝湖交付，这个问题基本上就不存在了，这也是为什么我们推荐使用交付软件，而不是手动标记切图的原因。

8. 最后使用 keynote等制作项目总结，做内部发布

在规模稍大的企业，会比较重视员工的内部培训，因此在设计项目结束后，会要求设计师完成一份设计规范输出，包括设计的想法、思路、规范、规格等，作为日后产品迭代的设计指引，也作为设计师考核的一项要求。特别是大厂，项目复盘和述职，离不开精美的PPT介绍。

但一定要记得，只有大厂才会每年做内部职级答辩，要做花里胡哨的项目分析，对于中小公司来说，少玩花哨，多点务实，好好做好组件库和设计规范，产品上线后，通过运营数据分析用户行为，结合商业目标推导出界面及交互迭代方案才是王道。少说空话，多做实事，大厂是有大量运营数据才推导出的结论，在答辩时候做好看的PPT，做内部述职，新人入行一通拍脑袋写文案实在不可取，只会耽误自己打好设计基础，学了假大空的东西。

给新人的一点建议：

2. 不要盲目改行，要大专及以上学历，要年纪28岁以下，没有HR会要一个经验不足，年纪很大的人；
3. 不要相信任何就业承诺和就业信息公布，没有人愿意自己的入职信息被企业拿去做推广宣传，所以你看到的肯定是伪造的；
4. 3-5个月学习时间很短，一定要多做项目，少写文档，要学交互就去专门学交互设计课程，要学产品就专门去学产品经理课程，要学UIUX就做好设计规范和组件库，做好图标和UI动画，做好高保真交互Demo；交互文档和产品需求文档，根本轮不到初级UI设计师去写，什么都会一点皮毛，UI作品还停留在静态页面阶段，就业定位不清，大概率四处碰壁。
5. 很多老师自己早就脱离了实际需求，甚至是平面转的UI，所以不要听老师对你的作品的评价，要去问问别的设计师，学完作品发站酷，是最好的试金石。一般推荐都拿不到，投出去的简历，肯定石沉大海，白学了几个月。
6. 理性分析网络的评价信息，10个分享学习历程和转行经验的，9个是培训机构自己的招生运营人员。

本文为DFUIUX设计工作室 原创，请勿转载