1.4.3　视觉设计

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

1．视觉概念稿

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

图1-21　视觉概念的示意图

2．视觉设计图

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

图1-22　视觉设计的过程

3．标注切图

图1-23　标注切图的过程

视觉设计图完成后，需要给设计稿做标注，方便前端工程师切图和适配输出。标注的内容主要是边距、间距、控件宽高、控件颜色、背景颜色、字体、字体大小、字体颜色等，图1-23所示为标注切图的过程。