2.3 图标的风格类型

不同的图标风格会给用户带来不同的体验，常见的图标风格包括像素风格、扁平化风格、拟物风格及立体风格等。本节将对这些图标风格进行说明。

2.3.1 像素风格

像素风格图标的出现源于早期计算机屏幕的特性，其实质是由多个像素点组成的位图。早期计算机界面、手机界面及游戏画面因分辨率的原因会采用像素化图标。如今设计师们一般通过像素风格图标表现一种复古、怀旧的氛围，如图2-60所示。

2.3.2 扁平化风格

扁平化风格是目前较为流行的一种潮流趋势，其核心是去除繁杂的装饰效果，包括透视、纹理、阴影等，而强调信息本身。该风格图标具有简洁美观、功能突出的特点。下面对该风格图标进行说明。

1.线性图标

线性图标是通过线条塑造轮廓来表达图标的功能，多用于App界面底部的标签栏、导航栏等。其特点是形象简洁、设计轻盈，如图2-61所示。

2.面性图标

面性图标即填充图标，多用于App界面底部的标签栏、图标的选中状态等。其特点是视觉效果更加稳定，具有更突出的视觉表现力，如图2-62所示。

3.线面结合图标

线面结合图标兼具线性图标和面性图标的特点，多用于趣味性App界面底部的标签栏、界面的引导页等。其特点是充满活力、生动有趣，如图2-63所示。

2.3.3 拟物风格

拟物风格是指模拟现实中物体的造型，该风格图标对现实的还原度高，细节丰富，且可以表现出一种复古怀旧的风格，如图2-64、图2-65所示。

2.3.4 立体风格

立体风格图标具有强烈的体积感和空间感，给人带来更突出的视觉冲击力，该风格图标多用于活动专题页、引导页等，如图2-66、图2-67所示。

动手练 制作面性图标

不同风格的图标可以呈现不同的质感，下面练习制作面性图标，具体的操作步骤如下。

步骤01 打开Illustrator软件，新建一个192×192px大小的空白文档，如图2-68所示。

步骤02 选择“矩形工具”，在画板中单击，打开如图2-69所示的“矩形”对话框，设置参数。

步骤03 完成后单击“确定”按钮，效果如图2-70所示。

步骤04 使用“直接选择工具” 调整顶部两点的位置，效果如图2-71所示。

步骤05 选中四个顶点，设置圆角为4px，效果如图2-72所示。

步骤06 在控制栏中设置图形填充为绿色（#DAE000），描边为无，效果如图2-73所示。

步骤07 设置填充为深绿色（#006934），选择“椭圆工具” ，在新调整图形上方单击，打开如图2-74所示的“椭圆”对话框，设置参数。

步骤08 完成后，单击“确定”按钮创建圆形，在“属性”面板中设置参数，如图2-75所示。

步骤09 效果如图2-76所示。

步骤10 使用相同的方法绘制圆形，并调整位置，效果如图2-77所示。

步骤11 选择“椭圆工具” ，在左侧圆形上方单击，打开如图2-78所示的“椭圆”对话框，设置参数。

步骤12 在“属性”面板中设置参数，如图2-79所示。

步骤13 在控制栏中设置填充为无，描边为深绿色（#006934），粗细为2pt，效果如图2-80所示。

步骤14 使用“直接选择工具” 选择底部端点，按Delete键删除，效果如图2-81所示。

步骤15 选中所有图形，按Ctrl+G组合键编组，按Ctrl+C组合键复制，按Ctrl+B组合键粘贴在后面，在“属性”面板中调整复制图形组参数，如图2-82所示。效果如图2-83所示。

步骤16 双击复制图形组，进入编组隔离模式，调整绿色填充为浅绿色（#E2E2BC），调整深绿色填充为绿色（#1CA55A），效果如图2-84所示。

步骤17 双击空白处，退出编组隔离模式，效果如图2-85所示。

步骤18 使用“文字工具”在图形上单击，输入文字，设置其颜色为深绿色（#006934），如图2-86所示，此时完成选中状态制作。

步骤19 调整颜色，制作非选中状态效果，如图2-87所示。

至此，面性图标制作完成。 Ws2YmHyNrvE6ncHD5nSfdE8HnIE7FwuNsWfTCcorwtDj3VzOMUQqOIMiKBqzS3gJ