写在前面

UI设计师，这个职业发展至今已经有十几个年头了，开始逐渐走向成熟。我们获取知识的途径也越来越多。“超全面设计指南”、“学会这一点，从此不迷茫”、“快速掌握”、“干货大合集”、“BAT设计师都在用的视觉技巧”等等字眼统治了各大设计网站。乱花渐欲迷人眼，在庞大的信息碎片面前，我感觉到了无力——为什么天天看“干货”还是抓不住精髓？为什么学好了这一点，还是会迷茫？超全面到底有多全面？为什么每一篇文章标题都可以这么劲爆，而内容其实“新瓶旧酒”？

未知的迷茫，就像黑暗对于孩子。我想，是时候整理出自己的UI知识体系，做好自己的规划，不再被碎片化的所谓“干货大合集”扰乱思维。

. . .

分类的方法很多，这里我会根据产品开发的时间顺序梳理UI设计师在每个阶段需要掌握和运用的知识点。我对于本文的定位是一个目录，每个分类的内容点到为止，之后我会再根据目录中的内容按重要程度深入学习。

1.需求阶段

一个产品的出现源于用户的需求，需求对于产品来说是至关重要的。作为设计师，也需要了解需求的产生和分析，这样才能更加有理有据的做设计（怼产品）。对于这部分内容，了解即可，不需要过于深入的研究。

1.1 用研常识

界面的最终面向的是用户，用户研究对于界面设计来说，就像是地基对于高楼一样重要。了解用研的基本常识有助于更好的理解用户。

常用的用研常识有：用户画像、用户访谈、问卷调查、焦点小组、眼动测试、用户反馈和大数据分析等。

1.2 产品常识

了解产品是做好产品的第一步，要对于产品的需求如何确定、产品定位如何决定有一个基本的认识。

常用的产品常识有：产品设计的五个层面、产品定位五步法、产品设计的三要素、马斯洛需求理论、KANO模型、Censydiam用户动机分析模型。

1.3 商业常识

常用商业常识有：竞品分析、增长模型、精益画布。

1.4 心理学常识

了解心理学的相关知识有助于我们把握用户的心理状态。

常用的心理学常识：认知心理学、格式塔心理学、色彩心理学、心流状态。

2.交互阶段

交互设计与视觉设计密不可分，有时，在视觉设计的过程中也需要修正一些交互的问题，因此，积累一些交互设计知识是必不可少的。这部分内容需要熟知。

2.1 产品架构

产品的架构就是产品的骨架，就是信息架构。产品类型不同，架构的复杂度也会不同。对于不同类型的产品需要使用合适的架构。

· 产品架构的模型主要分为层级结构、自然结构、线性结构、矩阵结构。

· 产品结构的特性：易用性、稳定性、可扩展性

2.2 交互设计三要素

目标、任务、行为

2.3 可用性原则

尼尔森十大可用性原则：状态可见原则、环境贴切原则、撤销重做原则、一致性原则、防错原则、易取原则、灵活高效原则、易扫视原则、容错原则、人性化帮助原则。

2.4 可用性测试

掌握几种常用的可用性测试方法，可以帮助我们作出较好的决策。

常用方法：走廊测试、远程可用性测试、专家测试、纸质原型测试。

3.视觉阶段

对于视觉设计师来讲，视觉能力当然是所有能力的重中之重，这部分涵盖的信息非常多，需要深入的研究掌握，并在平时工作中熟练运用。

3.1 各平台设计规范以及基础控件

各平台规范对于实际的设计工作会有很大的帮助，目前主要需要了解Android、iOS原生系统设计规范、web设计规范等，同时也需要关注一些新平台的出现。

系统控件也是需要熟练掌握的部分，例如：按钮、导航栏、状态栏、toast、弹窗、输入框等。同时，不要忽略页面的异常状态。

3.2 字体

需要了解不同平台的默认字体以及常用字号。对于不同字号的使用，要注意既要能够达到区分层级的目的，也不能使用过多过细的字号层级，以免产生凌乱感。

此外，还要掌握字体设计的方法。

3.3 图标设计

图标是界面的基本元素之一，对于任何App或网站都是很重要的。好的图标需要注意：识别性、易用性、一致性、独特性、吸引力。

3.4 配色原则

色彩可以决定界面给用户的第一感觉，做好配色需要：

· 熟练掌握运用配色原则；

· 结合品牌特性选择合适的配色方案；

· 熟练掌握主色、次色、辅助色、背景色直接的搭配比例。

3.5 排版原则

页面排版最重要的是要有效地组织信息。

排版四大原则：亲密性、对比、重复、对齐。

3.6 动效设计

动效可以更加生动地展示系统状态，还可以为页面增加不少趣味。动效的样式非常多变，但是万变不离其宗，那就是——迪士尼动画十二原则：

· 挤压与伸展                 · 预期动作                     · 演出展示    

· 接续动作与关键动作   · 跟随动作与重叠动作     · 渐快和渐慢    

· 弧形                           · 附属动作                     · 时间控制质感    

· 夸张                           · 手绘技巧                     · 吸引力

这十二条动画法则可以帮助我们更好的做出有创意的动效。

3.7 设计工具

设计工具不用多说，一般PS、Sketch、AI是常用工具，另外做动效可以使用AE、principle、flinto、Framer等。除此之外，还要经常关注新工具的出现，毕竟长江后浪推前浪。

3.8 审美水平

审美水平直接决定页面的视觉质量。在平时，除了要多浏览相关网站学习大神们的作品关注设计趋势之外，还需要在生活中多留心，从不同的行业中汲取营养。

4.开发阶段

设计完成后还要关注开发实现的问题，否则再好的设计也是空中楼阁。这部分内容需要熟知，至少要能够用相同的语言与开发小哥哥们更好的沟通。

4.1 前后端基础知识

了解前后端的基础知识主要是为了方便与开发小哥哥沟通，节省大家的时间。主要需要了解前端布局的知识和数据埋点的基础。

4.2 协作方法以及工具

这部分知识主要解决协作效率问题。

·项目文件管理方法：可以根据自身情况按照时间、项目、版本或终端维度划分。这件事上没有绝对的正确，最重要的是要适合自己并且有一定的准则，方便查找和分类即可。

· 标注与切图规范

· 协作工具：现在出现了很多好用的协作工具，如：zeplin、蓝湖等，释放了大部分设计师切图标注的工作量，十分便捷，需要时常关注一下。

4.3 设计走查

设计走查是保证设计还原度、进一步优化用户体验的重要环节，在这一环节要注意：页面的一致性、方案的可用性、文本的可读性、不同屏幕上的易用性、屏幕对于颜色的影响、icon的可识别性、动效的使用。

5.反馈阶段

产品上线后要关注后续的反馈，以便进一步发现问题、迭代产品。这部分内容了解、做到心中有数即可。

5.1 用户反馈

获取用户反馈的渠道主要有：

· 通过客服；

· 通过产品论坛、QQ群、微博等社交工具；

· 应用商店直接评论；

· 应用内用户反馈入口。

可以不时关注一下用户反馈，以便培养站在用户角度考虑问题的思维习惯。

5.2 数据分析

产品好不好，还要靠数据说话。做好数据分析可以帮助我们把握正确的设计方向。

常见概念：SEO/SEM、访问路径、用户行为路径，浏览量、访问量、独立访客数、跳失率、转化率、页面停留时间、访问页面数、流量来源、流量来源ROI、留存、留存、平均使用时长等等

常用方法：Link Tag的流量标记、转化漏斗、微转化、A/B测试、事件追踪、DOSS分析法等等。

6.软实力

做好设计工作还需要一些看不见的软实力。

6.1 素材库管理

素材库包括但不限于图片、图标、配色、规范、建模等，还自己需要根据个人的需求对于上述各种方面的知识进行梳理，让素材库成为灵感源泉和弹药库。

6.2 沟通能力

与上下游沟通、与用户沟通。

6.3 理解能力

对于需求的理解、对于公司品牌战略以及产品的理解。

6.4 表达能力

有将自己的设计主张表达出来的能力，做到能够有理有据的说服人。

6.5 更新的态度

随时做好准备接受的新的方法、理念，并主动学习。

6.6 做人方面

注意要诚实守信（真见过两面三刀的设计师，叹为观止，具体就不吐槽了，噗～）、对人宽容，工作积极、细心，有分享的态度，最后，抗压抗挫折能力对于设计师尤为重要，要有一颗强大的心脏。

. . .

写在后面

《双城记》中说：“这是最好的时代，也是最坏的时代，这是智慧的时代，这是愚蠢的时代。”多种多样的信息渠道使得我们可以随时随地获取自己想了解的信息，而随之而来的问题则是如何分辨信息的质量，在这样的时代中，唯有建立起自己的知识体系，才能提纲挈领，拨开迷雾。