1.5　了解UI设计的工作流程

UI设计只是互联网产品设计中的一个步骤，要想更好地理解UI设计的工作流程，必须先了解互联网产品设计阶段的工作流程。按照互联网产品设计的先后顺序可以分为需求分析、交互设计、视觉设计、开发测试和运营5个步骤，如图1-40所示。

提示

此处所说的工作流程，针对的是一个部门健全的公司。如果是微小的创业公司，则可以作为参考，并不能全盘套用。

由于本书主要讲解移动UI设计，因此开发测试和运营部分的内容将不再讲解。

1.5.1　需求分析

需求分析是一个烧脑的工作阶段，这个阶段需要产品经理、交互设计师，甚至公司市场、运营等各个部门的人参与，进行大量的研究和提炼工作。一般通过用户分析、需求整理、竞品分析、核心流程设计、技术分析、商业市场分析等步骤，才能梳理出需求规划。需求分析的主要步骤如图1-41所示。

● 用户分析

规划产品的第一步工作就是用户分析，产品的一切都是建立在用户需求上的，一个产品只有能满足用户需求才有存在的价值。进行用户分析的主要目的是有确定的目标用户，详细了解用户的目的、行为和问题，用户使用场景及当前用户问题的解决方案等。用户分析的目的、方法举例和产出物如图1-42所示。

用户分析其实很复杂，大公司会有专门的用户研究工程师来负责，但一般公司都是由产品经理或交互设计师来完成的，他们没有太多资源和时间，但简化的用户分析也是有用的。用户分析最简单有效的方法就是进行几次用户访谈，通过访谈可以了解足够多的内容，如果资源和条件足够，调查问卷、焦点小组都是常见的方法。

● 需求整理

进行需求整理之前需要进行需求收集，收集的方式有很多种，数据分析、思维导图、用户调研、竞品分析、个人经验等。

收集一系列需求后，开始整理筛选，去掉不合理的需求后，按功能框架、用户量、使用频率、开发难度、用户习惯、商业价值、数据表现等方面分析排序和分类，产出物一般就是需求池。需求池会伴随产品的整个生命周期，需要细致和认真地去维护。需求整理的工作流程、方法和产出物如图1-43所示。

● 竞品分析

现在做的一款产品大多数已经有竞品了，做好竞品分析能达到事半功倍的效果。产品层面的竞品分析从用户需求、产品功能、交互流程、视觉展示等方面进行分析和对比，总结出优劣势和机会等。

竞品分析不应包含市场格局、公司战略等，商业层面的竞争关系可以放在商业市场环节去分析。做竞品分析的目的是了解竞品，更好地制定竞争方案，同时学习竞品优秀的地方，但不要完全照搬。产出物是竞品分析报告等文档。竞品分析的目的、例子及产出物如图1-44所示。

● 核心流程设计

产品能满足的最主要的用户需求是什么，需求分析阶段需要团队人员明确核心流程，统一方向。核心流程设计中包含角色、任务、信息流向等几个关键点，产出物一般是泳道图。核心流程设计的目的、分析角度和产出物如图1-45所示。

● 技术分析

核心流程制定后要与技术负责人共同探讨，了解研发成本。产品设计人员在设计流程阶段会有很多讨论和评审，要尽量及时与技术负责人沟通，避免后期出现麻烦。技术分析流程如图1-46所示。

● 商业市场分析

要做某一行业的产品，必须深入了解该行业。商业市场分析的目的是明确产品的商业价值，为高层做决策参考依据，获得人力、财力、资源等支持，一般都是由老板决定、产品经理执行的。

商业市场分析的角度很多，主要了解行业、市场、竞争、用户等，预估成本和风险，不同的行业、公司，其阶段的侧重点不同，需要具体问题具体分析。产出物是商业需求和市场需求等文档。商业市场分析的目的、分析角度和产出物如图1-47所示。

1.5.2　交互设计

将需求梳理好后，接下来开始进行交互设计。交互设计是产品成型的阶段，产品从抽象的需求转化成具象的界面，这个过程需要产品经理和交互设计师配合完成，当然大部分公司都是产品经理独立完成的。交互设计的工作流程如图1-48所示。

● 信息架构

交互设计中的信息架构其实就是产品信息分类。产品由哪些功能组成，将相关功能内容组织分类，明确逻辑关系，并平衡信息展现的深广度，引导用户寻找信息。信息架构的目的、方法和产出物如图1-49所示。

在信息架构工作中要把导航规划好，最好的产出物就是一个思维导图。一款体育App产品的思维导图如图1-50所示。

● 业务流程

业务流程是一个产品功能设计的基础，确定了流程，后面的工作才能顺利进行，否则会出现产品功能实现摇摆不定、反复修改的状况。业务流程的目的、分析角度和产出物如图1-51所示。

确定好产品中的角色、任务、阶段，按信息流向把流程绘制出来，业务流程也就绘制完成了。一般绘制完业务流程，产品需求文档也就成型了，产品需求文档主要是给开发人员当参考依据的，因此只需把产品层面的逻辑表达清楚即可。

● 页面流程

页面流程是业务流程的延伸，要根据以用户为中心的思路来整理，按用户使用页面的顺序进行组织，把页面结构和跳转逻辑梳理的更清楚，并确定每个页面的展现主题。页面流程的目的、分析角度和产出物如图1-52所示。

● 产品原型

产品原型可以分为低保真原型和高保真原型。产品原型的目的和产出物如图1-53所示。

低保真原型是验证交互想法的粗略展现，因为在这个阶段会有很多更改，需要不断评审和讨论，最好用纸和笔手绘，也可以用Axure或Sketch设计一些简单的草图，或者使用Adobe XD也可以。一款App的低保真原型如图1-54所示。

高保真原型要将页面控件、布局、内容、操作指示、转场动画、异常情况等都详细表达出来，给视觉和开发提供详细参考。一款App的高保真原型如图1-55所示。

高保真原型可以显著降低沟通成本，具体高保真到什么程度也要看团队的习惯和时间。有的团队会无限接近视觉稿，模拟真实的产品交互操作，有的则还是以黑白灰为主，把交互细节都展现出来，特别需要颜色体现交互的地方才加一些颜色提示。

● 说明文档

此处的说明文档指的是交互说明文档。写交互说明文档要以开发人员为中心，要使开发人员能够理解交互逻辑和规则。如果没有专门的交互说明文档，一般会在原型旁边添加注释说明，其目的都是要把交互逻辑和交互规则表达清楚。交互说明文档的目的、分析角度和产出物如图1-56所示。

1.5.3　视觉设计

完成页面的交互设计后，接下来开始进行视觉设计。视觉设计可以分为视觉概念稿、视觉设计图和标注切图三个阶段。

● 视觉概念稿

在开始正式的视觉设计之前，可以挑选几个典型的页面设计风格不同的视觉概念稿，等客户或领导确定视觉风格后，再进入下一步工作，避免推翻重做的风险。

● 视觉设计图

视觉设计的工作流程也很复杂，它是一个产品展现在用户面前最直观的印象，一个好的视觉设计图需要延续用户体验设计原则和良好地表达产品风格。视觉设计之后还需要建立标准控件库和页面元素集合等视觉规范，使团队的工作统一化、标准化。

● 标注切图

视觉设计完成后，需要给设计稿进行标注，方便前端工程师切图。标注的内容主要是边距、间距、控件长宽、控件颜色、背景颜色、字体、字体大小、字体颜色等。设计稿标注如图1-57所示。

移动端的设计稿不仅需要标注，还需要切图，把页面控件拆分成小图片，方便开发实现。切图时需要考虑适配不同分辨率的设备，如iOS的切图范围内1倍图、2倍图和3倍图，图1-58所示为一个图标切图的3种尺寸。

切好的图片按照页面和模块名称或以不同分辨率进行分类后放入不同的文件夹。分组存放切图如图1-59所示。