2010年毕业后，我从事了两年多的书籍平面设计工作，2013年初转行做UI设计。今天，作为一个五年的老手，我想跟大家分享一下我在UI设计工作流程中的一些想法和经验。

UI设计师知道一款上线的产品至少有几十个UI页面，而且往往是团队合作，所以综合的协作思维很重要。UI界面不但要“好看”，更重要的是“好用”，设计师要用产品整体的思维理念去设计。

如图所示，我们从UI设计师在产品开发流程中所处的位置来探讨协同与统筹的设计思维，从产品需求到测试上线，产品线各个职能岗位都需要协同配合。

UI设计师处于产品线的中段，要有参与、带动、沟通的能力，不仅要懂产品、懂数据，能做交互、视觉、动效，还要协助研发、测试，最终让产品顺利上线。

接下来我们从产品设计工作流程的角度来分析UI设计的协作与全局思维。

/ 1. 做好合理的设计准备 /

1. 设计师在产品需求分析阶段应该收集哪些信息？

产品需求分析是产品研发前非常重要的一个工作环节，对产品的后续进展有着至关重要的作用。当接到需求的时候，UI设计师需要弄清楚：为什么要这样设计？为谁设计？产品的使用场景有哪些？用户和受众有哪些？这个需求的具体目标是什么？这些前期收集到的情报会帮助你的设计变得更有说服力。

2.没有研究，就没有设计。

UI设计师在收集到有用的信息之后，需要对信息进行总结、整理，进行一些必要的用户研究，对产品进行分析，并与现有的研究成果进行互动。

在设计的早期阶段，UI设计师通过讨论和研究开发出的产品比单纯利用设计师作为资源的团队开发出的产品更有创意，也更容易吸引用户。

因此UI设计师应该积极参与到产品前期的讨论和调研中，这个过程会给你的设计带来正确的目标和方向，让你知道重点在哪里，在商业价值、视觉层次和用户体验之间创造出完美的契合。

2.使用视觉设计解决问题。

虽然有些产品问题或目标并不能通过设计来解决，但是在研究的过程中，我们更应该思考设计是否还有更多的可能性。

比如当用户打开APP的频率较低时，思考一下图标设计是否不够醒目，或者是否过于同质化，用户难以区分。

比如：当用户在注册过程中迷失的时候，思考一下注册环节是否设计得不够明显。

比如：当用户的交易量占比较低时，我们能否优化流程、提高页面的展示效果？

如果你经常以类似的方式思考，你可以尝试通过设计解决日常生活中遇到的很多问题。

4. 用数据支持并验证设计。

设计是否解决了问题还是需要通过数据来验证，UI设计师可以适当关注功能改进前后的数据变化，以综合判断自己的设计是否符合预期。

在设计初期，UI设计师需要利用已有的数据对设计进行精准定位，比如可以按照用户群体、喜好、年龄、收入等进行归纳。

在设计的中后期，需要对设计效果进行收集、跟进和验证。这个阶段，大部分UI设计师都进入了紧张的细节设计过程，此时一些交互和设计细节可能需要反复修改。当对某个细节产生分歧时，不妨利用A/B 来验证设计方案，找到最适合产品的风格。

测试A

测试B

如上图所示，针对“全民热门卡牌”的位置进行了A/B测试，并根据数据以testB模式进行最终的呈现。

/ 2. 明确设计结构 /

1.明确产品结构。

明确产品结构有助于设计师了解产品的复杂程度以及整个结构设置，从而更容易在设计过程中协调设计进度和信息架构。

以职场社交产品的结构为例。

2.明确信息结构。

信息结构是相互流通、相互关联的，要特别注重信息层级的关联性，优秀的应用一定是各层级相互影响、相互促进的，比如一个社交APP，如果要到达“个人详情”页面，可以有多个入口。

3.通过视觉手段构建信息层次。

梳理产品结构和信息结构对于 UI 设计师来说可能看似无关紧要，但你一定经历过无法更优雅地在原型中设计复杂内容的痛苦。那么何不从梳理信息层级开始，体验拥有清晰逻辑指导设计的乐趣。

/ 3. 建立产品视觉规范 /

UI设计师通常不是一个人在工作，团队可以帮助我们分担工作量sketch measure怎么用，发挥每个人的特长，共同完成产品设计。但每个设计师的风格和侧重点都不一样，同一款产品的设计需要保持一致：一致的配色、一致的字体和排版、一致的视觉风格。

经验丰富的设计师会综合判断在产品开发的哪个阶段应该产生设计规范、如何及时迭代该规范、以及如何实施该规范。

1. 视觉规范是在哪个阶段制作的？

在产品设计阶段制作设计规格至关重要，若过早制作，产品会反复修改，规格也就失去价值；若在产品运作后期制作，修改、重新设定款式的风险极大，因此应将其制作于产品中期一个稳定的范围较为合理。

2. 根据需要迭代更新规范。

没有什么是一成不变的，随着产品的迭代，功能的增加，设计规范要及时调整和完善，当一种新的风格流行起来时，可能就需要为新的设计重新制定规范，比如之前的设计是拟物化风格，然后是扁平化风格，还有现在在扁平化风格的基础上华丽而流行的渐变色风格。

3.应执行设计规范。

在这个阶段，大部分设计师和团队都认识到了设计规范的必要性，也花费了大量的时间和精力去制定规范。但是，如果不去执行，设计规范就没有价值。因此，执行的意义大于设计规范本身。

比如这么小的一个操作，规范中的“标题”就被设置为默认字体大小2。当创建“默认字体大小2标题”的文本样式时，开发工程师点击输出HTML文件就可以看到输出页面。标准的名称在标准的实施过程中起着不可小觑的作用。

另外，对于人少的创业团队，可以考虑用快捷沟通等方式解决问题，因为这样有利于敏捷开发，这时候可能还没有纸质的规范，但是设计师要有规范感，从设计上保持一致性，要求严格要求自己，严谨设计。

/ 4.完美再现设计稿/

前期强调设计调研的重要性，中期注重视觉稿设计，而设计执行后期设计师要注重与开发工程师的沟通，对设计稿进行裁剪、标注，实现一定的动态效果，并进行沟通讨论。

如果对页面布局的原理和开发流程一无所知sketch measure怎么用，合作过程中难免会遭遇挫折，设计师在掌握设计的同时，需要拓展自己的知识面，才能对产品设计有更全面的认识和客观。

1.密切沟通，协作解决问题。

在开发过程中，需要和开发工程师密切沟通，共同解决问题；在开发完成后，在目检阶段需要更加密切的沟通，目检关乎设计稿的还原程度，需要通过与目检稿的对比，仔细检查一致性，包括页眉页脚的位置是否统一，按钮样式、反馈状态、错误样式是否统一；需要保证方案的可行性，屏幕上的操作是否简单易用。

2.检查是否有遗漏，并对设计进行适当调整。

在设计页面的时候，通常会使用比较理想的“假数据”和“假文本”，UI设计师在检查的时候应该根据开发实际实现的填充数据来考虑设计是否不合理，并对界面做一些适当的调整。

有些情况下开发工程师可能会反馈：这个动画实现成本太高，效果难以实现；我觉得这个页面这样做比较好等等。这时候设计师就需要及时沟通，帮助开发工程师解决问题。经验丰富的设计师会根据开发进度、技术实现成本等沟通出一个适合解决当前问题的方案。可能不是最理想的，但一定足以满足功能需求。

Tips：这里给大家推荐一款AE插件，可以将AE制作的动效直接导出为.json文件，供开发工程师使用，不仅降低了开发工程师的实施成本，还能完美重现动效。

3.不需要完全一致。

设计稿和设计规范是死的，而人是活的。目测可以最大程度保证设计稿完美再现，但同时也必须接受代码与设计稿之间的差异。一些细节，比如文字的行距、间距、字符间距等导致的问题无法完全避免，因为文字属性都有自己的边距。

Tips：文本编辑器中有个小技巧，只要将文字间距行高改为和字体大小一样的值，就能让文字边距紧贴边缘。不过不同的操作系统采用的排版机制和字体渲染方式不同，这两种方式标注出来的值不会和开发工程师实现的完全一样，检查的时候只要保证各操作平台显示美观即可。

/ 结论/

每个UI设计师和他们所在的产品团队都有不同的工作习惯和合作方式，但一个具备协作和全局思维的UI设计师在任何团队中都会很优秀。

随着行业市场趋于饱和，UI设计师的竞争会越来越激烈，需要“产品导向”、设计基础扎实、有独立思考能力（具备商业思维、用户研究、设计方法、数据分析等全局思维）的人，UI设计师将会是最具竞争力的。

如有侵权请联系删除！