UI界面设计

超齐全的UI设计流程指南

6787

UI设计工作，包括APP设计、网页设计、小程序设计等方面，而一个产品完整的UI设计流程，是指拿到一个新的项目需求后，从设计思考开始，产品前期分析，设计产品，设计评审，用户测试，直至产品上线。我们的工作流程如下：

以上的流程都是与设计师密切相关的内容，我们的关注点不能只有视觉效果，孤立的设计容易脱离产品，反复修改，因此前期分析与后期支持都值得我们重视。

需求分析

产品立项后的第一阶段是需求分析阶段，当我们拿到一个新的需求时，首先要了解的就是产品的需求是什么，了解市场背景、产品定位、概念，客户的需求是什么。

一般来说，我们接到的需求分为三类：全新产品、现有产品新增功能、产品改版。

需求文档类型

前期分析阶段中，需求方主要是与产品经理进行沟通，产出文档有三种：

BRD文档（Business Requirement Document）：商业需求文档，基于商业目标或价值所描述的产品需求内容文档（报告）。

MRD文档（Market Requirement Document）：市场需求文档，该文档在产品项目过程中属于“过程性”文档，由产品经理或者市场经理编写的一个产品说明需求的文档。

PRD文档（Product Requirement Document）：产品需求文档是将商业需求文档（BRD）和市场需求文档（MRD）用更加专业的语言进行描述。

分析类网站推荐

互联网数据资讯中心：http://www.199it.com/

艾瑞网-互联网数据资讯聚合平台：http://www.iresearch.cn/

数据分析网：https://www.afenxi.com/

36氪：https://36kr.com/

产品分析纬度

有了数据参考来源后，我们就能从五个纬度分析产品：

产品分析：市场背景、产品业务、现有产品各项数据。

用户画像：

（1）显性画像：即用户群体的可视化的特征描述。如目标用户的年龄、性别、职业、地域、兴趣爱好等特征。

（2）隐性画像：用户内在的深层次的特征描述。包含了用户的产品使用目的、用户偏好、用户需求、产品的使用场景、产品的使用频次等。

需求确认：产品需求主要是为了满足用户或企业价值，所以一定要确认重要且紧要的需求内容是什么功能，什么功能和内容暂时不需要做，什么功能和内容放在后期做，因此设计时也要考虑产品未来的扩展性。

逻辑流程：

（1）逻辑流程，整个产品的逻辑、内部流程；

（2）用户路径，描述用户在产品内部的路径。

竞品分析：和国内外同类产品进行比较分析，知己知彼。

竞品选择，从两个方向出发：一是从产品类型出发：比如我们需要设计的产品是财务类，选择的方向也是同类财务类产品；二是从产品功能出发：比如说财务产品中有着支付购买的功能板块，选择的竞品也包括了购物、生活类产品。

最后，比起产品经理来说，设计师在这个阶段能获三个信息：

1.自己需要完成什么

2.要做到什么程度

3.扩展性的考虑，可以在设计时预留位置

文档整理工具

语雀：https://www.yuque.com

原型设计

原型设计的主要作用，是用户体验设计师与PM、网站开发工程师沟通最初的产品设想的重要工具，展示产品内容和结构及粗略的布局，说明用户将如何与产品进行交互，而不是视觉设计。

在大厂中，职位分工更为细致明确，大多原型都是由产品经理制作的，而中小企业里，更多的是设计师也要具备制作原型的能力。原型图阶段中设计师需要和产品经理沟通需求，并不是产品经理向设计师下发需求，而是需要相互就自己擅长的方面进行沟通。

原型类型区别

设计时原型的类别也需要关注，每个项目启动时对原型的需求不一定都相同，交流的对象也有可能会对原型的类别产生混淆，以为线框图（Wireframe）、原型（Prototype）和视觉稿（Mockup）是一个东西，设计最好先与产品经理/甲方开始就确认要绘制什么类型的原型。

三种类别虽然产出效果不同，但在本质上都是一样的，为设计开发服务，所以在产品研发时，并没有硬性规定一定先产出哪一个类别的原型图，一切以实际研发过程中的要求为准。

交互设计原则

交互设计作为原型设计里的重要环节，了解交互设计原则，给交互设计提供更多设计支持。

（1）Fitts’ Law / 菲茨定律（费茨法则）

目标离的越远，到达就越是费劲。目标越小，就越难点中。如果我们要想鼠标比较快速的命中目标可以采取两个措施，要么减少鼠标与目标之间的距离，要么使目标足够大。

（2）Hick’s Law / 席克定律（希克法则）

定律内容：一个人面临的选择越多，所需要作出决定的时间就越长。在人机交互中界面中选项越多，意味着用户做出决定的时间越长。

（3）神奇数字 7±2 法则

人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。与席克定律类似，神奇数字 7±2 法则也经常被应用在移动应用交互设计上，如应用的选项卡不会超过 5 个。

（4）The Law Of Proximity 接近法则

根据格式塔（Gestalt）心理学：当对象离得太近的时候，意识会认为它们是相关的。在交互设计中表现为一个提交按钮会紧挨着一个文本框，因此当相互靠近的功能块是不相关的话，就说明交互设计可能是有问题的。

（5）Tesler’s Law 泰思勒定律（复杂性守恒定律）

该定律认为每一个过程都有其固有的复杂性，存在一个临界点，超过了这个点过程就不能再简化了，你只能将固有的复杂性从一个地方移动到另外一个地方。如对于邮箱的设计，收件人地址是不能再简化的，而对于发件人却可以通过客户端的集成来转移它的复杂性。

（6）新乡重夫：防错原则

防错原则认为大部分的意外都是由设计的疏忽，而不是人为操作疏忽。通过改变设计可以把过失降到最低。该原则最初是用于工业管理的，但在交互设计也十分适用。如在硬件设计上的 USB 插槽；而在界面交互设计中也是可以经常看到，如当使用条件没有满足时，常常通过使功能失效来表示（一般按钮会变为灰色无法点击），以避免勿按。

（7）Occam’s Razor 奥卡姆剃刀原理（简单有效原理）

这个原理被称为“如无必要，勿增实体”，即如有两个功能相等的设计，那么选择最简单的。

（8）Steering Law转向定律

触控技术(Touch)应用：

a.0°方向是最利于操作者移动的方向，具有较好的视觉反馈，成功率相对最高；

b.120°方向用户在操作时最为困难，在用户界面交互设计中应尽少用；

c.用户手指在各个方向的运动中,宽度低于14像素的Tunnel是用户体验最差的。

（9）帕累托定律（80/20 原则）

任何大系统中，大部分的效果仅有少数几项变量决定。

用户80%的时间花在了20%的功能上。

法则定律其实看起来有点枯燥，生搬硬套其实并不一定能套上去，列举以上的设计原则更多的是为设计做参考，结合设计原则，是提升设计说服力的有效方法。

完整的原型图

一套完整且专业的原型图，除了按照需求文档设计出所有页面，串联页面以外，还包括一些让人容易疏忽的地方，因为原型图所交付的人并不只有需求方，还有设计师与开发人员。

1.原型图标注，画开发看得懂的图

原型图对于设计师来说，是为了查看产品功能页面与逻辑路径。对于开发人员来说，除了产品框架搭建，他们最关心的内容是产品使用中的边界条件、页面跳转关系。原型设计时需要画出功能的所有交互状态，因此原型图标注包括：

（1）定义好每个标注点的含义和事件

在做交互稿标记之前，定义规范好每个标记的含义，形成统一的规范，使得团队成员易于理解。如，用水滴表示标注的功能，用圆圈+箭头的形式来标识页面跳转关系。

（2）梳理所有对象和逻辑关系、状态

下面的原型图标注以在饿了么商家详情页结算订单为例，先用思维脑图梳理功能状态，这样能避免遗漏一些边界条件。

（3）模块化区分和标记

梳理好状态后再在原型图上写产品用例，每个功能做成一个模块，有利于往后的维护和迭代。

2.在同一个页面展示所有的交互状态

当项目开始一段时间后，原型里的标注会逐渐变多，很多的开发和设计，没有很多耐心看原型图上的各种标注。所以尽量能一个页面上显示出所有的交互状态，避免设计与开发时看漏。

3.流程图，梳理业务逻辑关系

以流程图梳理产品业务的逻辑关系，常用的流程图分为单向流程图和泳道图（涉及到多个角色）。

单向流程图一般描述单一角色完成某个任务的整体过程，如登录注册过程、支付流程、填写资料等。

绘制流程图需要注意一下几点：

1.确保产品流程的合理性。

2.有效传达需求。

3.检验异常分支。

以上简单的梳理了一下日常工作设计原型图中容易让人忽略的内容。

如若想要设计绘制更专业的原型图，可参阅一下两篇文章：

《超全面总结！如何画出专业的原型图？（上）》

《超全面总结！如何画出专业的原型图？（下）》

关于原型工具

Axure

官网链接：http://www.axure.com/

很有名的原型设计工具，也算是日常工作中最常用的原型工具，成名很早，很多设计师、PM（产品经理）都有用它，它除了能够高效率制作产品原型，快速绘制线框图、流程图、网站架构图、示意图、HTML 模版外，还支持javascript交互的实现，并生成Web格式上传到Axure share分享浏览。

当然，目前市面上有很多种原型工具诞生，例如墨刀、摩客、ProtoPie等，都适合用于原型交互设计，当然选择哪个工具要看你自己，你的需求是什么，最适合自己工作流程的工具是哪种，有没有电脑系统的要求等等。

推荐设计应用——Figma

官网链接：https://www.figma.com/

Figma 是一个完全免费的在线设计软件，支持 Windows 和 macOS 等多个平台，是可以让整个团队的成员同时查看并修改协作的平台。使用过 Sketch后，上手 Figma 几乎没有难度。

（1）原型设计

在figma里面，你可以无缝完成从设计到原型演示的切换，不需要反复同步设计图到第三方平台，并且可以利用Figma Mirror在手机上预览效果。单击播放图标将进入演示模式，可以在其中实时查看已完成的原型。

（2）实时协作+内置评论

在Figma里，设计和协作可以是同时进行的，任何人都可以在设计图的任何地方添加评论，你可以在评论中@其他人或将评论标记为已解决。

视觉设计

情绪板设计

情绪板，换句简单话来说就是由图像，视频和其他视觉元素组成拼贴在一起想法和过程，主要目的是讲述项目背后的故事，一次作为设计方向形式上的参考，同时情绪板也可以在配色方案上，视觉风格，质量材质，作为设计指导，帮助设计师提供一些设计方案和指引。（我们有一篇关于UI设计师如何创建情绪板？的文章，可以参考一下）

色彩

配色在视觉设计中所发挥的作用是不言而喻的，我们在设计时对于色彩的制定一般有两类情况：

1.全新品牌设计，了解各种颜色或者色相的气质和情感属性，在具体设计的时候，进一步根据品牌的气质和需求，再在色相的基础上调整明暗和饱和度。

2.根据甲方/需求方原有产品的色彩来设置，如果不是全新产品，大部分都有一套自己产品的色彩体系，在保持产品的一致性的前提下，后续产品皆沿用原有色彩体系。

但是，色彩本身的内涵和情绪特质并不是全部。比如一个行业当中，很多企业都使用了蓝色，那么产品继续使用蓝色，可以让用户更快「识别出」产品所属的领域，但是本身也存在让人混淆的风险。如果你想要在视觉上脱颖而出，可以试着使用不同的色彩。

配色参考网站：

风格

品牌或者产品的设计风格与配色是相辅相成的，依据产品特性与需求，选择合适的设计风格，更利于提升视觉效果。所以我们需要随时了解最新的设计趋势与风格，分清各个设计风格的特点与区别十分有必要。以下是设计中常用的设计风格集合：

01. 半扁平化设计

关键词：极简、符号化、光影

由于具体化设计的影响，界面设计更加趋向于立体化，光和阴影的运用，成为“半扁平化设计”。为了适应现代科技而推崇的扁平化设计仍会存在，但已不再被大量发展并使用。适量渐变阴影的使用将会在保留其简约风格的基础上使扁平化设计更加复杂和写实化。

02.三维渲染风格

关键词：平面立体感，纯色，空间感。

随着C4D的流行，三维的表现形式在设计中变得愈演愈烈。不过在后扁平化时代，如何在扁平与立体的形式中间寻找平衡是大家关注的焦点，而三维纯色渲染恰恰是一种很好的尝试。

空间感的布局拓展了画面深度，同时物体纯色系的渲染方式又强化了画面的平面感。设计将干扰人们注意力的因素排除，只留下需要传达的主题部分，令人印象深刻，这样的形式已经在摄影及三维艺术中流行起来，充满仪式感的画面让设计者爱不释手。

03. 动画效果

动画效果已经越来越多的以各种形式出现在网页设计上，诸如gifs, SVG, WebGL CSS 或小视频。

04. 渐变色

关键词：多色、同色系、对比色

渐变色是时下最主要的流行趋势之一，始于2016且势头至今有增无减。像Instagram这样的业界大拿甚至将其logo由扁平改成了多颜色渐变。从logo到按键和图片，渐变色的潮流已经无处不在。

05.极简风格

关键词：极简、雅致、留白

在内容越来越多的前提下，设计师应该减少无用信息的干扰让用户可以快速聚焦的到内容本身，这种“少即是多”设计思路就是我们常说的极简风格。删减与用户任务无关的非功能性元素，只保留重要的信息，减轻用户的认知负荷。

06.波普风格

关键词：波点、夸张、设计感极强

波普风格主要体现在大众喜闻乐见的人物、事物、事件中。简单来说，它有以下几个特点：（1）设计中强调新奇和独特、采用强烈的色彩处理，个性化的配色风格很有感染力。（2）图案是最主要的表现形式。常常带有娱乐、趣味性、诙谐性。（3）难以确定统一的风格，追求各种风格的混合，追求新奇、古怪。（3）通俗大众，设计元素一般来自日常生活中的人物、事物。（4）拼接。

07.孟菲斯风格

关键词：明快，集合结构，随性

孟菲斯风格在色彩上，常常打破配色规律，喜欢用一些靓丽、纯度高、大胆、对比强烈的配色，借鉴了波普艺术的配色。在排版上，元素之间没有过多的联系，元素的排列常常无规律可循，运用大量的几何元素，点、线、面综合运用。规则的几何图形有圆形、三角形、矩形、圆环、波浪线、网格、斜杠等等，不规则的几何图形也是由点、线、面拼贴而成。

08.光感透气叠加

关键词：光感，渐变，氤氲感。

具有光感的半透明渐变叠加平面设计风格。光因为其剔透，纯净，反射的特性，一直被人们所青睐着。人们不再满足于简单的色彩叠加，增加光感的设计将会为产品增添更多的未来迷幻属性。

09.插画风格

（1）扁平插画：简单来讲就是把复杂的关系简约化，让画面更加清爽整洁，也是现在比较常用的风格了，很多商务工具类的APP会选择使用这种风格。

（2）肌理插画：顾名思义就是给插画加上了些肌理质感（比如杂色）和光感，本质也和扁平插画差不多，一些想体现质感的页面会用到这种风格。

（3）手绘插画：需要设计师具备很强的绘画功底，也算是插画里面难度比较高的一种。手绘风格的插画运用的也比较广，常见的有一些插画绘本，故事场景设计等。

（4）MBE插画：dribbble的一位设计师创作了这种风格，它主要的特点就是圆润、可爱、呆萌、简洁。在APP中的引导页、启动页和缺省页运用也比较广泛。

（5）渐变插画：有点类似日本漫画场景的感觉，风格特别唯美浪漫。光感比较强，所以也称为微光插画。颜色一般采用相近色，颜色种类不要太多。

（6）2.5D插画：立体插画，也就是在二维的空间里表现三维的事物。大多设计师使用C4D设计，PS/AI也可以。

10.中国风

关键词：水墨、雅致、文艺

利用中国风的视觉元素在设计上完成表达。在各种视觉表现形式中，国画，书法，服饰纹理，建筑结构，陶瓷等传统材料肌理等等都可以作为素材，利用中国风元素的同时，适当改造，更换色彩，简化结构，复杂化肌理效果等等以求在视觉上更接近品牌的气质。

11.剪纸风格

关键词：矢量插画、投影、纸张肌理

12.低多边形（Low Poly）

关键词：多边形、3D、低细节

low poly实际是把多色元素，用三角形分割，每个小三角形的颜色，取自原多色元素的相应位置。这种设计风格的特点是低细节，面又多又小，高度渲染，经常配以柔光效果。

13.赛博朋克

关键词：虚拟现实、人工智能、霓虹光感

赛博朋克又称赛伯朋克、数字朋克、电脑判客、网络判客，是科幻小说的一个分支，以计算机或信息技术为主题。在视觉设计中的特点就是蓝、紫、青等冷色调为主色调，霓虹灯光感效果为辅助，故障艺术风为辅助（图像的失真、错位、破碎等），有时还可以加一些异常的现象比如180度翻转的建筑，还有复古风和未来风并存。

14.蒸汽波（Vaporwave）

关键词：荧光、流体、梦幻感

蒸汽波是一种受赛博朋克影响的网络线上艺术，选用的视觉元素主要有古典艺术形象，八九十年代的流行文化产物，window95经典窗口样式，又或者是代表着某个时代记忆的各种事物。【蒸汽波更多相关内容】

15.像素风格

关键词：像素化，轮廓清晰，卡通。

像素风格属于点阵式图像，是一种图标风格的图像，更强调清晰的轮廓、明快的色彩，几乎不用混叠方法来绘制光滑的线条，同时它的造型比较卡通，得到很多朋友的喜爱。

16.故障艺术（Glitch Art）

利用事物形成的故障，进行艺术加工。特点就在于图像失真、破碎、错位、变形，还有颜色的失真、错位，和一些条纹图形的辅助。

字体

一、界面常用字体推荐

字体的选择是由产品属性或品牌特性的关键词而决定。

1.一般中文字体种类分为：黑体、宋体、仿宋、楷体等；

2.英文字体种类分为：无衬线体、衬线体、意大利斜体、手写体、黑字体等。

中文字体推荐

线上中文字体推荐使用思源黑体、华文黑体、冬青黑体、微软雅黑、苹方-简、黑体-简。其中 iOS 系统默认中文字体是「苹方PingFang」，Android 系统中文字体使用「思源黑体Noto Sans CJK」。

英文字体推荐

线上英文字体推荐使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans。其中 iOS 系统默认英文字体为「San Francisco」，Android 系统默认英文字体为「Roboto」。

数字字体推荐

线上数字字体推荐使用 DIN、Helvetica Neue。

DIN 起源于1995年的德国，无衬线字体，易用耐看、字形开放，是设计师最爱的几类字体之一，适合显示比较长的大号数字，但是小字号的情况下识别度较低。

Helvetica Neue 除了上文介绍的简洁朴素、中性严谨、没有多余的修饰外，还是 Helvetica 的升级版，拥有了更多的字重，可以作为 iOS 和 Android 跨平台数字字体使用。

二、字号

1. 关于字号

字号是界面设计中另一个重要的元素，字号大小决定了信息的层级和主次关系，合理有序的字号设置能让界面信息清晰易读、层次分明；相反，糟糕无序的字号使用会让界面混乱不堪，影响阅读体验。

2. 字号的选择

字号的选择，可以遵循 iOS 、Material Design、Ant Design 等国内外权威设计体系中的字号规则，也可以根据产品的特点自行定义。

（1）iOS 字号规则

在 iOS11 系统中，使用 San Francisco 作为系统英文字体，包含了以下几种字号的文本样式：

需要注意的是，San Francisco 字体有两种模式：文本模式 SF Pro Text 和展示模式 SF Pro Display，文本模式适用于字号小于 20pt 的文字，展示模式适用于字号大于等于 20pt 的文字。

（2）Material Design 字号规则

在 Material Design 设计体系中，使用 Roboto 作为英文字体，规定了以下文字排版的常用字号：

长篇幅正文，每行建议 60 字符左右，短文本建议每行 30 字符左右。

（3）Ant Design 字号规则

Ant Design 受到5音阶以及自然律的启发定义了10种不同的字号，从小到大依次为: 12px、14px、16px、20px、24px、30px、38px、46px、56px、68px。

建议主要字号为 14px，其余字号的选择可根据具体情况进行自由的定义，尽量控制在3-5种之间，保持克制的原则。

（4）Kiwi 字号规则

Kiwi 是饿了么的中后台设计语言，致力于打造出能够「了解、洞察、温暖、激励用户」的产品。

在 Kiwi Web 中，规定最小字号为 12px，主要文本字号为 14px，最大字号为 46px。

三、行高

行高可以理解为一个包裹在字体外面的无形的框，字体距框的上下空隙为半行距。

参考 W3C 原理，眼睛到屏幕的距离 25cm 为最佳阅读距离。

西文的基本行高通常是字号的 1.2 倍左右。而中文因为字符密实且高度一致，没有西文的上伸部和下延部来创造行间空隙，所以一般行高需要更大，根据不同人群的特点（儿童、年轻人、老年人）以及使用环境，可达到1.5至2倍甚至更大。

文章引用来源：《饿了么高级设计师：界面视觉设计 5 要素之字体篇》

关于文字版权问题：https://www.yuque.com/docs/share/ae07c865-a2ef-4c30-8a8b-1f4e2e958593

图标

设计中常用的图标，从使用的用途来说图标分为两种，功能性图标和展示性图标。

1.功能性图标是为了引导用户理解和操作，需要表现精确和简介，方便用户识别其含义。功能性图标常规状态下为无彩色。

2.展示性图标通常为页面入口，会有更多形状、颜色、质感的表达，吸引用户的注意力和点击欲望，强调差异性，比如各种品类区的图标、徽章、等级图标等等。

但图标的风格并不止两类，以下简单的整理了一下图标的风格分类，设计中选择符合产品整体风格的图标即可。

△参考文档作者：超人的电话亭/RDD

如果是自己进行图标绘制，那么需要采用统一的图标绘制模板，保证图标视觉上大小的一致。

实际项目中，并不是所有项目都有十分充裕的时间来设计图标，所以我们可以下载图标素材（图标素材下载地址）。

图片

网上推荐的无版权图片网站有很多，但是真正好用的却是少数部分。

第一找图梯队

piqsels

基于CC0协议的免版税图库，个人和商业免费使用。

Unsplash

最知名的无版权图片网站，这家以风景为主，数量足够多，但是很多滤镜感太强，颜色太过厚重，比较适合做壁纸，事实上很多壁纸软件也是直接从这上面下载的图。

Pixabay

可以说是全球最大的免费图片网站了。图多而且种类足够丰富。这其实也是一家集合网站，可以看到Unsplash 家的很多图也能在Pixabay 里搜到。

Pexels

这家也有很多精美的图片，而且比较好的一点是会有「一周精选」，平常没事的时候来收收图也挺好的。

visualhunt

数量超级多的无版权图片网站，可以根据颜色进行搜索。

第二找图梯队

这里面是一些图片资源没有那么丰富，但是质量都还不错的，如果之前的网站没有找到合适的，可以在这里再次搜寻一下。

别样网——找图新欢，旅行日常为主，图片多为用户自己上传，所以在其他地方很少见到

Gratisography——每周都会更新，图片角度和题材都比较另类，人物图片不少。

StreetWill——优点是图片都比较精致小众，缺点是更新慢。

IM FREE——图片分类详细，可按分类进行筛选。

Magdeleine——有编辑精选，但图片滤镜也比较厚重。

FancyCrave——每天两张手工筛选精品照片。

精准找图梯队

Flickr

雅虎著名的图片社区——Flickr，由于汇集了大批的摄影师，所以Flickr 家的图片质量都相当之高，不过你可能会说Flickr 的图片不都是有版权的吗？别急，在「授权」那里选择「所有创用CC」或者「允许商业用途」即可找到那些可以使用的图片。

ps.由于Flickr 目前没有简体中文版，所以搜索时用英文或者繁体中文会得到比较好的结果。

Google

谷歌的图片搜索那是相当的强大，选择右侧的「工具」，可以自定义很多东西，包括大小、颜色及使用权限。

关于图片版权问题：https://www.yuque.com/docs/share/e61dbdaf-d101-4b19-ad47-0c7d08814041

组件

组件是设计师在日常设计工作中，极为常见的内容。设计师除了在完成业务需求的的设计之后，同时需要设计一套适用于产品的组件库。

所谓“最佳方案性价比”，就是我们需要在设计的个性化表达和资源投入之间找到最佳的平衡点，在关注出色视觉表现的基础上，逐渐加强对项目协同及体验价值的关注，逐步形成新的设计思维模式，也就是组件化思维。

组件化设计就是把产品需求场景化、视觉表达模块化，每个组件基于复用为目的，使其具备独立的完整解决方案，通过标准的规范组合方式来构建整个设计方案，从而提升设计效能。

组件化设计思维3个关键点：

1. 完整组件方案：将组件视为一个独立的产品，从多维度，多场景输出组件的方案和组合标准。

2. 组件化思维：从需求出发，拆解页面表达结构和所需组件。

3. 通用页面规则：通用的页面与组件的栅格体系及替换规则。

设计规范

在产品发展日趋平稳，产品定位和品牌形象都比较确定的时候，参与设计的人越来越多，统一性和效率的问题渐渐显现，为了保证平台统一性，提升团队工作效率，打磨细节体验，这时候就需要我们定义和整理设计规范。

确定规范内容

模范大平台完整规范体系，针对产品自身情况增删，整理出我们自己所需要的规范内容。

规范优先级

了解规范的内容有哪些之后，我们需要确认的是规范优先级，规范内容庞大复杂，基础的、必要的、高性价比的放在第一个版本中，复杂的向后放，随着产品的迭代，规范才会越来越完整。

一个好的规范应该是高效的、简单易懂的，具体执行时，我们应该确保分类合理、规范本身保持一致、布局排版易读，来提升设计师查阅的效率；确保定义清晰、描述准确、场景完备，来帮助设计师理解和使用，但值得注意的是，设计规范并不是“圣经”，不要因为规范而限制了自己的思维，当发现规范有问题的时候，要及时去修正，而不是做了一次之后，一直沿用，永不修改。

设计评审

设计评审是一种可用性测查工具，通常由一个评审员审查设计方案中的可用性问题。

「设计评审」一词颇为广义，涉及数种可用性测查方法，且每一种的运用因人（评审员）而异、因评审目的而异。常见的设计评审方法有：

1.启发式评估（Heuristic Evaluation）。启发式评估的标准是设计方案需遵循一套设计原则，比如尼尔森十大可用性原则。

2.独立设计准则（Standalone Design Critique）。独立设计准则是（通常以群组对话的形式）对进行中的设计加以分析，以决策设计方案是否达成目标、体验友好的一种评估方法。

3.专家评审（Expert Review）。专家评审是指由 UX 专家对网站/或网站部分功能，App 应用/App 中部分功能进行可用性问题的精细检查。很多公司分不清专家评审和启发式评估两者的界限，把专家评审当做是比启发式评估更加通用的方法也是可以的。

原型交互评审

原型完成后召集至少两三个设计师或者对交互比较了解的人，使用并评测原型。你可以将原型所关注的几个任务列出来，以免专家不知道原型哪部分可交互哪部分不可交互。

第一种方法比较常用的评测方法是启发式评估法，而这种方法比较常见的标准是尼尔森交互设计法则（Nielsen Heuristic）。以下是十条尼尔森交互设计法则：

1、系统状态是否可见

2、系统是否符合现实世界的习惯

3、用户是否能自由地控制系统

4、统一与标准

5、错误防范

6、减轻低用户的记忆负担

7、灵活性和效率

8、美观简洁

9、帮助用户认知、了解错误，并从错误中恢复

10、帮助文档

第二种常用方法是SUS（系统可用性量表），最初是 Brooke 于1986年编制，量表由10个题目组成，包括奇数项的正面陈述和偶数项的反面陈述，要求参与者在使用系统或产品后对每个题目进行5点评分。

1.量表公开免费。

2.整个量表题目陈述简单，只需参与者打分，实施起来很快。

3.测量结果是介于0-100之间的分数，容易理解。

4.可测量多种用户界面，比如网页、手机、平板等。

SUS(系统可用性量表) 分数

当参与者做完一系列任务后，就可以快速对SUS进行打分。然后就需要对每个题目的分值进行转换，奇数项计分采用“原始得分-1”，偶数项计分采用“5-原始得分”。由于是5点量表，每个题目的得分范围记为0~4（最大值为40），而SUS的范围在0~100，故需要把所有项的转换分相加，最终再乘以2.5，即可获得SUS分数。

将SUS分数换算成百分等级来解释，百分等级的意思是指测量的产品或系统相对于总数据库里其他产品或系统的可用性程度。

SUS评分参考

从图中我们可以看出评分达到70分左右，就可以比市面上一半产品可用性要好，也就是说这个产品的用户体验算是合格了。

用户体验评审

使用用户体验问题记录表，组织相应的评估小组人员，参与评估人数越多越好，样本越多越好。为了提升工作效率，可以直接通过发放记录表给到评估人员，再统一回收就好。

用户体验问题记录表

包括问题所在位置、对应的二十一条可用性原则、严重程度等级、问题描述。

问题分析整理

通过收集用户体验问题记录表，进行小组会议讨论，把问题总结归类，并对所有问题做一个统一的规范分类。（例可优化问题保留，不是体验问题的舍弃）。

当问题总结归类完成后，下一步需要引入“用户体验八阵图”来对应相应页面，让我们能够更直观的了解到现有项目中精细到单个页面中所面临的用户体验设计问题，这样一来，可以快速发现体验问题最多是哪个页面？体验问题最严重的是哪个页面？体验问题中哪个模块的问题最多？等。

用户体验八阵图

中心向外为问题严重等级，依次为：小问题（1）、次要问题（2）、主要问题（3）、灾难性问题（4），

一一应对到「用户体验问题记录表」中的「问题严重等级」。

把收集到的问题以「点」的形式点到对应模块的八阵图当中

优化方案

——通过 SUS系统可用性量表知道了产品的整体体验处于什么水平。

——通过协作启发式评估知道了产品的用户体验到底有哪些问题。

——通过最新21条可用性原则知道了如何避免出现体验问题。

——通过用户体验八阵图知道了哪些模块最迫切需要优化。

更多与设计评审相关内容：《一个完整的设计评审流程是怎样的？来看这篇总结！》

项目走查

01. 检查需求

检查设计方案是否满足需求，是否完成了原型设计中覆盖的全部设计点。

02. 检查规范

检查方案排版和对齐是否准确，产品设计要检查控件尺寸字体字号是否符合设计规范，运营设计要检查字体字

号是否符合运营设计规范。

03. 阅读顺序

产品设计检查方案的使用顺序是否符合产品使用流程及用户预期，运营设计检查阅读顺序是否满足运营引导用户阅读的需求。

04. 视觉表达

评估设计创意是否有服务于设计目标，视觉表达手法是否处理到位。

切图与标注

当界面设计定稿之后，设计师需要对图标进行切片提供给开发工程师，切图与标注是为了能够满足开发人员对于效果图的高度还原需求，直接影响到工程师对设计效果的还原度。并且也是设计师重要的输出物之一。合适、精准的切图可以最大限度的还原设计图，起到事半功倍的效果。

通常我们只需要对 icon 与图片进行切图即可，文字、线条和一些标准的几何形状是不需要切图的，例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可，开发工程师可以用代码实现这种效果。

切图基本规范

1.切图的尺寸必须为偶数

2.同一模块内，切图大小应保持一致

3.如果有背景，尽量用平铺的背景图案来设计（减少程序体积）

4.可点击的部件要把相关状态都切图输出，比如：正常状态、点击状态、不可点击状态

5.输出的切图应当尽可能的压缩大小，以降低APP的总大小，提升用户使用时的加载速度 (推荐在线压缩：https://tinypng.com)

6.所有的变形字体把它当成icon来切

7.切图输出格式：png-24

8.重复的东西只切一个

切图输出类型

1.图标切图输出

（1）桌面图标切图输出

App的桌面图标会被运用在很多不同的地方展示，比如手机桌面、APP store、手机的设置列表，所以app桌面图标需要很多个不同尺寸的切图输出。两个平台对相应桌面图标设计输出尺寸也不尽相同，在输出的时候要把双平台的这些尺寸全部输出切图。桌面图标切图只需要提供直角的图标切图即可，手机系统会自动生成圆角效果。

（2）系统图标切图输出

一套图适配双平台：

iOS平台（iPhone 6plus版本除外）和安卓平台公用44*44px切图素材，即可实现一套切图适配两个平台的开发。

适配大屏幕：

为了适配iPhone 6plus、iPhone 7plus，单独切一套比原有44*44px切图大1.5倍的切图，即66*66px大小的切图。

（3）APP内功能图标：

图标是可以有留白区域的，建议图标尺寸尽量不要过多。

2.图片类切图输出

图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。同一类型的图片切图一般要保持同样的大小尺寸以便于工程师开发使用。另外一般这些切图的文件较大在切图过程中需要控制切图文件的大小。

全屏类切图

局部类切图

3.动效元素切图

动效元素切图一般是指在app中加载动效所需要的切图元素。gif动图切图一般分为三种：

（1）只需要给到gif图动效的部分即可。

△城易logo

（2）导出序列图片压缩打包给开发人员。

（3）导出json ⭐️

Airbnb 开发了一款动效神器： Lottie，这是一个将 After Effects 动画提供给任意一个 iOS，macOS，Android 还有 React Native 原生 APP 的文件库。这些动画通过一个叫 Bodymovin 的开源 After Effects 插件，以 JSON 文件的形式进行输出。Lottie 通过 JSON 格式下载动画数据并实时提供给开发者。