UI最重要的组件之一就是图标，随着扁平化设计的发展越来越注重图标的简洁与寓意表达，扁平化图标是设计界的流行趋势，它流行的原因在于以下几点。

屏幕分辨率越快越高。

大量写实拟物图标，造成观者视觉上的疲劳。

大量纹理、阴影等细节对图标的基本功能形成了干扰。

写实的图标很难表现一个抽象的概念。

1.扁平化的误区 很多设计者在设计扁平化图标时存在以下误区：同类功能的图标风格不统一，用色不统一；功能块零碎，导致简洁的画面变得零碎；可操作的按钮等和背景没有区分开来；图形过于抽象化，难以识别。

2.扁平化图标分类

扁平化图标有以下几类。

为剪影图标添加一个圆或矩形的纯色背景作为底，如图2‑124所示

背景采用同色系的拼贴图标，如图2‑125所示。

图2‑124 纯色背景为底

图2‑125 拼贴背景

折纸风格的图标分为两个部分，使用不同深浅的两种颜色实现折纸的效果，如

图2‑126所示。

图2‑126 折纸风格

长投影的图标如图2‑127所示。

图2‑127 长投影图标

3.剪影图标的设计要点 拟物化设计是尽可能地绘制繁琐细节，追求丰富和相似度，而剪影图标相反，要求去繁择简，并在设计中有所变化。简影图标的设计流程如下。

提炼精华，勾勒轮廓：通常在绘制已有参照物的基础上设计一个图标，可以根据自己喜欢的造型参照物进行分析，先抓取参照物的关键节点，并使用几何图形绘制出一个相似的基本图形，如图2‑128所示。

调整造型，不断优化：基础图形出来后就开始根据自己的想法调整造型，这个阶段可以多准备几个版本，通过对比挑选出最合适的造型图，如图2‑129所示。

图2‑128 勾勒轮廓

图2‑129 调整造型

细节增减，完成塑型：对细节部分进行增加或删减，形成特色，完成最终的剪影图标，如图2‑130所示。

图2‑130 细节增减

图2‑131 参考图标

提示：类似的图标还有很多，我们也可以拿来参考，如图2‑131所示。

4.4种扁平化风格图标的绘制

下面对4种扁平化风格图标的绘制进行讲解，分别是常规扁平化、长投影、投影、渐变式图标，如图2‑132所示。

图2‑132 4种扁平化风格图标

常规扁平化图标

常规扁平化图标是没有任何修饰的扁平化图标，绘制过程十分简单，图2‑133所示为流程图。

图2‑133 流程图

01 执行“文件”|“新建”命令，新建空白文档，如图2‑134所示。

02 选择“圆角矩形工具”，在选项栏中设置填充颜色，设置圆角半径为40　px，如图2‑135所示。

图2‑134 新建空白文档

图2‑135 设置选项栏

03 单击半径左侧的按钮，在展开的选项中选择“固定大小”单选按钮，设置宽、高为256px，如图2‑136所示。

图2‑136 设置固定大小

04 在画面中绘制圆角矩形，如图2‑137所示。

图2‑137 绘制圆角矩形

05 选择“椭圆工具”，设置固定大小为186　px，如图2‑138所示。

图2‑138 设置固定大小

06 在画面中绘制正圆，如图2‑139所示.

图2‑139 绘制正圆

07 选择两个图层，选择“移动工具”后在选项栏中单击“垂直居中对齐”按钮和“水平居中对齐”按钮，如图2‑140所示。

08 使用“路径选择工具”选择圆，按Ctrl+C组合键复制，按Ctrl+V组合键粘贴。然后按Ctrl+T组合键进行自由变换，按住Shift+Alt组合键按比例缩小40px，如图2‑141所示。

图2‑140 单击对齐按钮

图2‑141 复制并缩小

09 在“属性”面板中进行细致调整，调整后的参数为146　px，如图2‑142所示。

10 在选项栏中选择“减去顶层形状”选项，如图2‑143所示。

图2‑142 调整参数

图2‑143 选择“减去顶层形状”选项

11 执行操作后的图形如图2‑144所示。

图2‑144 操作后的图形

12 在工具箱中选择“自定形状工具”，如图2‑145所示。

图2‑145 选择“自定形状工具”

13 在选项栏中单击如图2‑146所示的三角按钮。

图2‑146 单击三角按钮

14 展开列表，单击如图2‑147所示的图标。

图2‑147 单击图标

15 选择“全部”选项，如图2‑148所示。

16 在弹出的对话框中单击“确定”按钮，如图2‑149所示。

图2‑148 选择“全部”选项

图2‑149 单击“确定”按钮

图2‑150 选择“标志3”17 在载入的形状中选择“标志3”，如图2‑150所示。 18 在画面中按住Shift键绘制三角形，如图2‑151所示。

图2‑151 绘制三角形

19 按Ctrl+T组合键将其旋转-90度，然后从标尺中拖出参考线，标记圆的中心，调整三角形的位置，如图2‑152所示。

20 按Ctrl+;组合键隐藏参考线，完成效果如图2‑153所示。

图2‑152 旋转并调整位置

图2‑153 完成效果

提示：选择圆后按Ctrl+T组合键即可看到中心点，然后拖出参考线，如图2‑154所示。

图2‑154 中心点

长投影图标(www.daowen.com)

下面介绍长投影图标的绘制，图2‑155所示为流程图。

图2‑155 流程图

01 使用“矩形工具”绘制一个填充颜色为黑色的矩形，如图2‑156所示。

02 在“图层”面板中调整矩形到椭圆的下方，如图2‑157所示。02

图2‑156 绘制矩形

图2‑157 调整图层顺序

提示：选择图层后直接上下拖动即可调整图层顺序。

03 按Ctrl+T组合键，然后按住Shift键将矩形旋转45度，如图2‑158所示。

04 在“图层”面板底部单击“添加蒙版”按钮添加图层蒙版，如图2‑159所示。

图2‑158 旋转45度

图2‑159 添加图层蒙版

05 选择“圆角矩形1”图层，按住Ctrl键单击该图层的缩览图将其载入选区，如图2‑160所示。

06按Ctrl+Shift+I组合键进行反向选择，如图2‑161所示。

图2‑160 载入选区

图2‑161 反向选择

07 设置背景色为黑色，选择“矩形1”图层蒙版，按Ctrl+Delete组合键填充蒙版，如图2‑162所示。

图2‑162 填充蒙版

08 使用“钢笔工具”单击添加锚点，如图2‑163所示。

图2‑163 添加锚点

提示：用户也可以在选择蒙版后直接使用“画笔工具”在画面中涂抹。

09 按住Alt键依次单击矩形顶端的三个锚点，如图2‑164所示。

10 按住Ctrl键拖动锚点的位置，使多余的黑色部分位于三角形下方，如图2‑165所示。

图2‑164 单击锚点

图2‑165 拖动锚点位置

11 在“图层”面板中调整图层的不透明度为20%，如图2‑166所示。

12 调整后第一个长投影效果就制作完成了，如图2‑167所示。

图2‑166 修改不透明度

图2‑167 长投影完成效果

13 下面是圆形的长投影制作。同理先绘制一个矩形，旋转角度，如图2‑168所示。添加蒙版后使用“钢笔工具”添加三个锚点，然后调整锚点，如图2‑169所示。

14 调整图层的不透明度为20%，完成长投影图标的绘制，如图2‑170所示。

图2‑168 绘制矩形并旋转

图2‑169 添加并调整锚点

图2-170 完成绘制

投影图标

下面介绍投影图标的绘制，图2‑171所示为流程图。

图2‑171 流程图

01 在常规扁平化图标的基础上选择圆角矩形的图层，单击“图层”面板底部的“添加图层样式”按钮，在打开的菜单中选择“投影”选项，如图2‑172所示。

02 打开对话框，设置“投影”参数，如图2‑173所示。

图2‑172 选择“投影”选项

图2‑173 设置“投影”参数

03 单击“确定”按钮，图像效果如图2‑174所示。

04 选择该图层，单击鼠标右键，执行“拷贝图层样式”命令，如图2‑175所示。

图2‑174 图像效果

图2‑175 执行“拷贝图层样式”命令

05 选择圆和三角形所在的图层，单击鼠标右键，执行“粘贴图层样式”命令，如图2‑176所示。

06 完成制作，效果如图2‑177所示。

图2‑176 执行“粘贴图层样式”命令

图2‑177 完成效果渐变式图标 下面介绍渐变式图标的绘制，图2‑178所示为流程图。

图2‑178 流程图

01 在常规扁平化图标的基础上复制圆角矩形，并在“图层”面板上设置“填充”为0%，如图2‑179所示。

02 选择“钢笔工具”，在圆的路径左、右两侧添加两个锚点，如图2‑180所示。

图2‑179 设置“填充”为0%

图2‑180 添加两个锚点

03 在工具箱中选择“直接选择工

具”，如图2‑181所示。

04 框选下半部分，如图2‑182

所示。

图2‑181 选择“直接选择工具”

图2‑182 框选下半部分

05 按Delete键删除选中的锚点，如图2‑183所示。

06 双击图层，在打开的对话框中添加“渐变叠加”图层样式，如图2‑184所示。

图2‑183 删除锚点

图2‑184 添加“渐变叠加”图层样式

07 单击“确定”按钮，效果如图2‑185所示。

08 选择底层的圆角矩形，同样添加“渐变叠加”图层样式，如图2‑186所示。

图2‑185 效果

图2‑186 添加“渐变叠加”图层样式

09 单击“确定”按钮完成效果，如图2‑187所示。

图2‑187 完成效果