1.2 移动UI设计流程
UI设计（视觉界面设计）只是产品设计中的一个步骤，要想更好地理解UI设计的设计流程，必须先了解产品设计阶段的整体工作流程。一般情况下，完成一款移动UI设计作品按先后顺序需要经历5个阶段，如图1-13所示。
图1-13 移动UI设计流程
提示
此处的设计流程针对的是一个大型设计公司。如果是微小的创业公司，则可以作为参考，而不能全盘套用。由于本书主要讲解移动UI设计，因此开发测试和发布运营部分的内容将不再讲解。
1.2.1 需求分析
一款成功的UI设计作品，其产品需求分析尤其重要。一个全面且正确的产品需求分析文档是产品成功的首要条件。
需求分析是一个“烧脑”的工作阶段，这个阶段需要产品经理、交互设计师，甚至公司市场、运营等各个部门的人都参与，做大量的研究和提炼工作。一般通过市场分析、用户需求分析、竞品分析、产品功能设计和功能技术分析等步骤，最终整理和规划出需求文档。图1-14所示为需求分析的主要步骤。
图1-14 需求分析的主要步骤
1.2.2 交互原型设计
将需求分析整理为文档后，接下来开始进行交互原型设计。交互原型设计是产品成型的阶段，产品从抽象的需求转化成具象的界面，需要产品经理和交互设计师配合完成。交互原型设计的工作流程如图1-15所示。
图1-15 交互原型设计的工作流程
1.2.3 视觉界面设计
移动端产品的视觉界面设计可以简单归纳为视觉概念稿、视觉设计图、标注切图和适配打包4个步骤，下面逐一进行讲解。
● 视觉概念稿
在开始正式的视觉设计之前，可以首先挑选几个典型的App页面，完成不同的风格设计稿，让客户或者领导从中选择一种风格，将其确定为视觉风格后，再进入下一步工作，从而避免推翻重做的风险。图1-16所示为视觉概念稿的工作流程。
图1-16 视觉概念稿的工作流程
● 视觉设计图
视觉设计的工作流程也很复杂，它是展现在用户面前最直观的产品内容，将直接影响产品在用户心中的印象。
因此，视觉设计图需要延续用户体验设计原则，同时能够很好地表达产品的设计风格。视觉设计完成之后还需要建立标准控件库和页面元素集合等视觉规范，使设计团队的工作统一化和标准化。图1-17所示为视觉设计的工作流程。
图1-17 视觉设计的工作流程
● 标注切图
视觉设计完成后，需要给设计稿做标注，方便前端工程师切图。标注的内容主要包括边距、间距、控件长宽、控件颜色、背景颜色、字体、字体大小和字体颜色等内容。图1-18所示为标注UI设计。
图1-18 标注UI设计
提示
前端工程师是指开发测试阶段的工作人员。前端工程师和UI设计师都可以为视觉设计图进行切图适配等工作，具体情况由所属公司的工作分配决定。
● 适配打包
为视觉设计进行切图标注后，需要为设计稿进行常见机型的适配工作。简单来说，就是将设计稿调整为常见机型的屏幕尺寸，然后逐一输出。最后，将输出的不同尺寸的设计稿和切图标注的文件进行打包，整理后交于开发人员。