下载掌阅APP，畅读海量书库
立即打开
不同的图标风格会给用户带来不同的体验，常见的图标风格包括像素风格、扁平化风格、拟物风格及立体风格等。本节将对这些图标风格进行说明。
像素风格图标的出现源于早期计算机屏幕的特性，其实质是由多个像素点组成的位图。早期计算机界面、手机界面及游戏画面因分辨率的原因会采用像素化图标。如今设计师们一般通过像素风格图标表现一种复古、怀旧的氛围，如图2-60所示。
图2-60
扁平化风格是目前较为流行的一种潮流趋势，其核心是去除繁杂的装饰效果，包括透视、纹理、阴影等，而强调信息本身。该风格图标具有简洁美观、功能突出的特点。下面对该风格图标进行说明。
线性图标是通过线条塑造轮廓来表达图标的功能，多用于App界面底部的标签栏、导航栏等。其特点是形象简洁、设计轻盈，如图2-61所示。
图2-61
线性图标分类
线性图标可以细分为圆角图标、直角图标、断点图标、高光式图标、不透明度图标、双色图标、一笔画图标等。
面性图标即填充图标，多用于App界面底部的标签栏、图标的选中状态等。其特点是视觉效果更加稳定，具有更突出的视觉表现力，如图2-62所示。
图2-62
面性图标分类
面性图标可以细分为单色面性图标、不透明色块面性图标、微渐变面性图标、光影效果图标、折纸投影图标、多色面性图标等。
线面结合图标兼具线性图标和面性图标的特点，多用于趣味性App界面底部的标签栏、界面的引导页等。其特点是充满活力、生动有趣，如图2-63所示。
图2-63
拟物风格是指模拟现实中物体的造型，该风格图标对现实的还原度高，细节丰富，且可以表现出一种复古怀旧的风格，如图2-64、图2-65所示。
图2-64
图2-65
立体风格图标具有强烈的体积感和空间感，给人带来更突出的视觉冲击力，该风格图标多用于活动专题页、引导页等，如图2-66、图2-67所示。
图2-66
图2-67
不同风格的图标可以呈现不同的质感，下面练习制作面性图标，具体的操作步骤如下。
步骤01 打开Illustrator软件，新建一个192×192px大小的空白文档，如图2-68所示。
步骤02 选择“矩形工具”，在画板中单击，打开如图2-69所示的“矩形”对话框，设置参数。
图2-68
图2-69
步骤03 完成后单击“确定”按钮，效果如图2-70所示。
步骤04
使用“直接选择工具”
调整顶部两点的位置，效果如图2-71所示。
图2-70
图2-71
步骤05 选中四个顶点，设置圆角为4px，效果如图2-72所示。
步骤06 在控制栏中设置图形填充为绿色（#DAE000），描边为无，效果如图2-73所示。
图2-72
图2-73
步骤07
设置填充为深绿色（#006934），选择“椭圆工具”
，在新调整图形上方单击，打开如图2-74所示的“椭圆”对话框，设置参数。
步骤08 完成后，单击“确定”按钮创建圆形，在“属性”面板中设置参数，如图2-75所示。
图2-74
图2-75
步骤09 效果如图2-76所示。
步骤10 使用相同的方法绘制圆形，并调整位置，效果如图2-77所示。
图2-76
图2-77
步骤11
选择“椭圆工具”
，在左侧圆形上方单击，打开如图2-78所示的“椭圆”对话框，设置参数。
步骤12 在“属性”面板中设置参数，如图2-79所示。
图2-78
图2-79
步骤13 在控制栏中设置填充为无，描边为深绿色（#006934），粗细为2pt，效果如图2-80所示。
步骤14
使用“直接选择工具”
选择底部端点，按Delete键删除，效果如图2-81所示。
图2-80
图2-81
步骤15 选中所有图形，按Ctrl+G组合键编组，按Ctrl+C组合键复制，按Ctrl+B组合键粘贴在后面，在“属性”面板中调整复制图形组参数，如图2-82所示。效果如图2-83所示。
图2-82
图2-83
步骤16 双击复制图形组，进入编组隔离模式，调整绿色填充为浅绿色（#E2E2BC），调整深绿色填充为绿色（#1CA55A），效果如图2-84所示。
步骤17 双击空白处，退出编组隔离模式，效果如图2-85所示。
图2-84
图2-85
步骤18 使用“文字工具”在图形上单击，输入文字，设置其颜色为深绿色（#006934），如图2-86所示，此时完成选中状态制作。
步骤19 调整颜色，制作非选中状态效果，如图2-87所示。
图2-86
图2-87
至此，面性图标制作完成。