1.2 网页UI设计的制作流程
很多没有在正规的大公司工作过的设计师想知道UI设计的具体工作流程是什么。其实，每个公司都有自己的工作流程，有些公司可能需要设计师从前期立项到中间开发再到后期产品测试和项目上线进行全程跟进，而有些公司可能只需要设计师在产品研发阶段进行参与。但不管哪种方式，设计师有必要知道一个产品从立项到完成的所有步骤。现在给读者介绍一种工作流程，如图1-19所示。
图1-19
1.2.1 产品调研阶段
在一个项目开始之前首先是立项，领导或者相关部门给产品经理提出想法，产品经理拿到项目之后对整个项目进行分析，期间产品经理需要做很多的准备工作，如图1-20所示。
图1-20
产品定位：产品经理需要配合市场部门进行市场调研，首先需要确定目标市场、目标人群和产品定位，如果时间充足，要做用户调研来确定产品的用户需求。
市场分析：对市场里的竞品做一些竞品分析，进一步确保产品的市场定位。
结构设计：当确定了产品的目标人群和市场定位后，接着要做的就是产品的结构设计，预算产品周期，疏通整个产品流程。
原型设计：进行原型设计是为了根据进度与成本把原型控制在手绘、图形、Flash、视频这几个质量范围内。它不需要有全部的功能，但要体现出设计对象的基本特征和基本功能。
知识点睛：原型图是需要交给交互设计师来完成的，但是产品经理要跟其他部门的同事时刻保持密切沟通，例如，产品的市场定位需要找市场部门的同事进行沟通，产品设计规范。界面布局等需要找UI设计师沟通，而开发环境和项目周期要找技术开发的同事进行协调。有些公司还有专门的交互设计师，产品经理需要在前期制作原型图时和交互设计师充分配合完成交互说明，以便后期的视觉设计和技术开发。
1.2.2 UI视觉设计
产品原型（包括前期交互稿）完成之后需要交付给UI设计师进行视觉设计，这里指的UI设计其实严格来说属于GUI。因为UI的本意为User Interface（用户界面），涵盖了交互设计、用户体验设计和视觉设计，而交互设计和用户体验设计是在产品开始之时就已经同时展开的，所以这里说的设计通常指GUI界面视觉设计，如图1-21所示。
图1-21
根据原型设计阶段的界面原型，对界面原型进行视觉效果的处理。
01 搜索素材灵感：多找优秀设计作为自己设计灵感的来源是一个非常有效的方法（参考学习而不是抄袭）。
02 确定界面配色风格和界面整体色调。
03 确定界面布局和设计风格。
04 进行界面设计。
05 完稿后进行可用性测试，并和技术开发人员讨论修改直至最终定稿。
知识点睛：这里有必要说一下视觉设计规范。有些公司的视觉规范是在视觉设计开始前就定下来的，而有些公司是整个视觉设计完成之后再来制定视觉规范的。为什么可以这样呢？因为视觉规范是为了整个设计团队在设计时更容易沟通而制定的，但设计工作在进行中可能会随时变更视觉风格，所以设计前期确定设计规范，可能会对后期的设计带来一定的限制，设计师内部通常会有一个简单的设计文档来进行交流。
等设计稿确定之后，再来制作标准的设计视觉规范，方便后期开发和设计工作继续跟进。在整个视觉设计中，设计师不仅要把控好整体的视觉设计风格，更要耐心设计好各个细节，例如，icon、字体、元素之间的间距这些不起眼的地方往往代表了整个App的质量，细节之处做好会在视觉上给用户带来一种安全可靠的感觉，所以细节非常重要。
1.2.3 产品技术开发
产品技术开发环节中UI设计师需要配合程序开发人员进行切图。标注，把控开发质量，并及时反馈由于开发人员的视觉偏差和设计师所造成的开发难度过大而需要调整的设计。
01 UI设计师切图、标注，并将图片输出。
02 程序员按照设计人员给出的界面设计图稿，完成界面的初步代码编译部分。
03 UI设计师配合开发，以保证视觉效果还原度及小细节的修改，如图1-22所示。
图1-22
1.2.4 BUG测试
在开发工作完成之后，整个项目组会配合测试人员对产品进行测试，测试视觉、交互以及后台等多方面有无BUG并进行及时修改，如图1-23所示。
图1-23
提示：BUG测试就是一个用于完善软件的测试阶段。用户必须知道，只要是软件就会有BUG。再严格的测试也只是抽样活动，总会有BUG被遗留下来。基于以上两种原因，软件或者系统发布时总会或多或少存在BUG。需要看BUG的影响程度。对于生命周期比较长的软件或系统，BUG只要产生了影响就要被修复。
1.2.5 产品上线
产品通过测试之后就可以发布上线。此时UI设计师可以辅助产品经理收集手机用户体验报告，并进行分析。产品上线后，用户一般会通过各种渠道发出自己对产品的声音，这些反馈对于产品和设计师来说非常重要。
提示：为什么要收集用户反馈？收集用户反馈大致可分为两个目的：了解用户和了解产品。这些资料将会为之后的产品迭代所使用。
1.2.6 产品迭代
当产品基础框架开发完成进入成熟期后，产品的周期性迭代就变得非常重要。所谓产品迭代，就是在一定时间内，对该产品一定量的新需求加以评估、筛选、开发、测试以及上线的一系列行为的总称。而产品迭代的周期化，是指固定产品迭代的流程，一般为一到两周。
对市场和用户反馈进行分析之后找出产品界面设计的优缺点，为下一个版本提出合理的建议，如图1-24所示。
图1-24