1.3　网页UI设计的工作流程

网页UI设计的前期准备工作，依然离不开对3W（Who、Where、Why）因素的考虑，也就是对使用者、使用环境和使用方式的需求分析。只有清楚地理解网页UI设计的流程并在实际的设计工作中按照该流程来进行设计，才能设计出受用户欢迎的网页UI。

1.3.1　网页产品调研

在设计一款网页UI之前，设计师应该首先明确是什么人（用户的年龄、性别、爱好、教育程度等）用、在什么地方（桌面电脑、移动设备、家庭多媒体等）用、如何使用（鼠标/键盘、手指触控等）。任何一个元素的改变都会使网页界面设计工作做出相应的调整。图1-10所示为产品调研示意图。

在需求分析阶段，产品经理应该对开发的新产品有详细的了解，包括市场现状、核心用户的关注点、竞品的市场情况、产品资源和产品定位等。图1-11所示为需求分析示意图。

• 领域调研。

领域调研不仅要对产品本身进行分析，更重要的是要分析行业特性、市场现状、竞争环境、盈利情况，从而判断自有项目的可行性。

• 竞品分析。

竞品分析是指分析国内外相似产品的特性和各自的优势，做到知己知彼。

• 用户分析。

用户分析包括适用人群特征、人群市场容量、用户关注点。

• 产品定位。

产品定位是指产品设计初期，在用户心中确立具体形象的过程。

• 历史数据分析。

历史数据分析是指了解市场的关键指标数据，通过历史数据的比对，对产品现状有一个初步了解。

• 用户路径分析。

用户路径分析是指了解用户在产品内部的行为路径。

1.3.2　网页原型设计

需求分析完成后，在开始设计网页UI之前，设计师首先需要提炼出几个体现用户定位的关键词。

例如，为40岁左右的白领女性制作娱乐网页界面，通过分析这类用户可以得到的关键词有品质、精美、高档、女性、时尚、个性、亲和、放松等。通过对这些关键词的分析，再精减得到几个关键的词语，然后就需要在该网页UI设计中着重体现出这几个关键词的意境，最好能多设计几套不同风格的方案，以备选用。

根据这些词语初步确定界面风格、颜色搭配、信息内容和构图布局等内容，然后绘制原型图，原型图相对简单，又可以用于对网页UI进行初步的功能测试。在没有设计稿之前，如果遗漏了重要的信息或功能板块，可以及时做出调整。图1-12所示为原型设计示意图。

1.3.3　设计网页UI

每个产品都有各自的特性，即设计风格和适用人群。在视觉设计阶段，视觉设计师需要在理解产品目标及交互框架的前提下，精准提炼产品的设计风格，对产品进行合理的定位并赋予其情感。图1-13所示为界面设计示意图。

一个网站的所有界面一般不会出自同一个设计师之手，所以，在设计过程中设计师必须确保所设计的网页UI的多套方案为同一水准。

如果体验者能看出有明显的差异，那么设计作品是失败的。完成多套网页UI设计方案后，开发者开始调研验证，以得到用户的反馈。

开发者对用户反馈意见进行整理和总结，得出每套方案的优缺点，便于对最终的网页界面进行调整和改进。图1-14所示为网页界面制作过程。

1.3.4　网页UI标注

网页UI标注的作用是为开发工程师提供参考，因此设计师在标注之前需要和开发工程师沟通，了解他们的工作方式，标注完成后宣讲注意事项，以便开发工程师更加快捷和高效地完成工作，并且能够最大限度地还原设计稿。

在一份网页UI设计稿中需要标注的内容有文字的字号、粗细、颜色、不透明度，界面的背景色、不透明度，各个图标、列表、文字之间的间距。图1-15所示为网页UI设计稿标注示意图。

1.3.5　网页UI切图输出

设计师完成网页UI设计稿的设计后，需要切图并发送给开发工程师。在切图过程中，设计师首先需要分析应该为开发工程师切哪些图。

为了避免以后反复修改，建议设计师在切图之前与开发工程师进行充分沟通。图1-16所示为网页UI设计稿设计完成后，标注和切图输出时所需要的文件夹。