下载掌阅APP，畅读海量书库
立即打开
图标又称为icon，是UI设计中非常重要的视觉元素，具有指代意义，能够美化UI设计并帮助用户快速识别。本节将对图标设计规范进行讲解。
根据系统的不同，图标尺寸规范也略有差异。本节将针对iOS系统和Android系统中的图标尺寸规范进行说明。
iOS系统中的图标具有非常具体的大小和分辨率要求，以保证图标在不同的设备上可以正确显示。其单位一般为px或pt，px即像素，是按照像素格计算的单位，即移动设备的实际像素，一般Photoshop软件的单位设置为px；pt即点，是根据内容尺寸计算的单位，一般Sketch软件的单位设置为pt。
iOS系统中的图标使用网格进行规范化设计，尺寸较为统一。一般可以将其分为应用图标和系统图标两种类型，如图2-1、图2-2所示。下面对这两种类型的图标进行介绍。
图2-1
图2-2
（1）应用图标
应用图标是应用程序的图标，主要用于主屏幕、App Store、Spotlight及设置中。在设计时，可以采用1024×1024px的尺寸设计，再通过现成尺寸模板资源生成数套尺寸文件导出。应用图标会以不同的分辨率出现在主屏幕、App Store、Spotlight及设置场景中，尺寸也根据不同设备的分辨率进行适配，如表2-1所示。
表2-1
iOS应用图标由系统统一切圆角，设计时直接出方形图标即可。
（2）系统图标
系统图标是界面中的功能图标，主要用于导航栏、工具栏及标签栏，尺寸随不同设备的分辨率而变化，如表2-2所示。
表2-2
Android系统中的图标分为应用图标和系统图标两种类型，单位为dp。dp是Android系统专用的长度单位，与px的转换公式为dp=px×dpi（dpi表示屏幕密度）/160。创建应用图标时应以320dpi分辨率中的48dp尺寸为基准；创建系统图标时应以320dpi分辨率中的24dp尺寸为基准。表2-3所示为不同设备的分辨率适配的图标尺寸。
表2-3
Material Design语言提供4种不同的图标形状供设计师参考，设计图标时根据图标的形状在安全区域内绘制，可以保证视觉平衡，如图2-3所示。
图2-3
设计时为保证清晰度，需要将图标放置在像素点上，并避免出现小数点、奇数等数值，图2-4所示分别为正确示例及错误示例。
图2-4
为了保证视觉平衡，在设计图标时需要结合图像形状及视觉效果，选择合适的重心组合图形，以使图标看起来更稳。
系统图标应使用2dp的描边，以保持图标的一致性，如图2-5所示。留白区域的描边粗细也应该是2dp。倒角应保持外圆内方，外角半径默认为2dp，如图2-6所示。
图2-5
图2-6
描边末端应该是直线并带有角度，若描边倾斜45°，其末端也应倾斜45°结束，如图2-7、图2-8所示。
图2-7
图2-8
在学习图标设计规范的相关知识后，下面将利用该部分知识制作视频播放器图标。具体的操作步骤如下。
步骤01 打开Illustrator软件，新建一个192×192px大小的空白文档，如图2-9所示。
步骤02
选择“圆角矩形”工具
，在画板中单击，打开如图2-10所示的“圆角矩形”对话框，设置参数。
图2-9
图2-10
步骤03 单击“确定”按钮创建圆角矩形，如图2-11所示。
步骤04 在工具栏中设置填充为紫色（#9A73E2），描边为无，效果如图2-12所示。
图2-11
图2-12
步骤05
选择“直线段工具”
，在画板中绘制直线段，在“属性”面板中调整其参数，如图2-13所示。
图2-13
步骤06 效果如图2-14所示。
图2-14
步骤07
选择画板中的对象，在“路径查找器”面板中单击“分割”按钮
，将圆角矩形分割为两部分，如图2-15所示。
步骤08 选中分割后的圆角矩形，右击，在弹出的快捷菜单中执行“取消编组”命令，取消编组，并设置上半部分填充为绿色（#5BCB95），如图2-16所示。
图2-15
图2-16
步骤09
选择“椭圆工具”
，在绿色填充上方单击，打开如图2-17所示的“椭圆”对话框，设置参数。
步骤10 完成后，单击“确定”按钮创建圆形，如图2-18所示。
图2-17
图2-18
步骤11 选中圆形，在“属性”面板中调整参数，如图2-19所示。
步骤12 效果如图2-20所示。
图2-19
图2-20
步骤13 设置圆形的填充为黄色（#EBD91F），如图2-21所示。
步骤14 使用相同的方法绘制圆形，并调整位置及颜色，效果如图2-22所示。
图2-21
图2-22
步骤15
使用“直线段工具”
绘制一条直线段，在“属性”面板中设置参数，如图2-23所示。
步骤16 选中直线段，在工具栏中设置其填充为无，描边为浅紫色（#EBDBED），粗细为2pt，端点为圆头，效果如图2-24所示。
图2-23
图2-24
步骤17
使用“椭圆工具”
在直线段上绘制一个半径为4px的圆，设置其填充与顶部绿色一致，效果如图2-25所示。
步骤18
选择“多边形工具”
，在画板中单击，打开如图2-26所示的“多边形”对话框，设置参数。
图2-25
图2-26
步骤19 完成后单击“确定”按钮创建三角形，在“属性”面板中设置参数，如图2-27所示。效果如图2-28所示。
图2-27
图2-28
至此，完成视频播放器图标制作。
图标是UI设计的重要组成部分，在UI界面中起到代替文字、连接其他界面的作用。本节将对图标的基础知识进行介绍。
从广义上讲，图标是具有指代意义的图形符号，高度浓缩且可以快速传达信息，便于记忆；从狭义上讲，图标多应用于计算机软件方面。图标的应用范围很广，大到交通标志、公共场所中的指示性图标，小到移动产品中的界面图标等，如图2-29、图2-30所示。
图2-29
图2-30
图标设计可以按照调研分析、要素挖掘、设计图形、建立风格、细节修正和场景测试的流程进行，如图2-31所示。
图2-31
图标设计应遵循清晰简洁、视觉统一、易识别性、愉悦友好四大原则。下面将对此进行介绍。
图标的主要目的是快速清晰地传达概念，在设计时应去除多余的装饰，以尽量保持图形的简洁，使其可以清晰明了地传达所要传递的信息，如图2-32、图2-33所示。
图2-32
图2-33
图标设计一般需要在基本造型、风格表现、节奏平衡上保持统一，以保证图标的一致性，如图2-34所示。
图2-34
在基本造型上，需要根据图标设计规范对图标各部分进行统一设计，包括描边粗细、描边末端样式等；在风格表现上，需要保证同一系列图标风格的统一性，防止造成极大的割裂感；在节奏平衡上，可以根据规范给出的模板设计图标以达到视觉平衡的效果。
易识别性是图标设计的基本原则，是指设计的图标可以快速传达准确的信息，使用户可以迅速识别图标所代表的含义，而不会造成困惑，如图2-35所示。
图2-35
良好的用户体验是界面设计最重要的原则之一，在设计图标时，也应遵循这一原则。
通过学习图标的基础知识，可以帮助用户了解图标。下面讲解制作文件袋图标，具体的操作步骤如下。
步骤01 打开Illustrator软件，新建一个192×192px大小的空白文档，如图2-36所示。
步骤02 选择“矩形工具”，在画板中单击，在打开的“矩形”对话框中设置参数，如图2-37所示。
图2-36
图2-37
步骤03 完成后单击“确定”按钮，创建的矩形如图2-38所示。
步骤04 选中矩形，在“属性”面板中设置参数，如图2-39所示。
图2-38
图2-39
步骤05 效果如图2-40所示。
步骤06
使用相同的方法，新建一个120×30px大小的矩形，使用“直接选择工具”
调整底部两点位置，效果如图2-41所示。
图2-40
图2-41
步骤07
使用“直接选择工具”
选中底部两点，在控制栏中设置边角半径为8px，效果如图2-42所示。
步骤08
选择“椭圆工具”
，在新调整图形上方单击，在打开的“椭圆”对话框中设置参数，如图2-43所示。
图2-42
图2-43
步骤09 完成后，单击“确定”按钮创建圆形，在“属性”面板中设置参数，如图2-44所示。效果如图2-45所示。
图2-44
图2-45
步骤10 选中圆形，按Ctrl+C组合键复制，按Ctrl+F组合键粘贴在前面，在“属性”面板中设置参数，如图2-46所示。效果如图2-47所示。
图2-46
图2-47
步骤11 选中两个圆形，按Ctrl+C组合键复制，按Ctrl+F组合键粘贴在前面，在“属性”面板中设置参数，如图2-48所示。效果如图2-49所示。
图2-48
图2-49
步骤12
选择“直线段工具”
，在画板中绘制直线段，如图2-50所示。
步骤13 选中所有图形，在控制栏中设置填充为无，描边粗细为2pt，效果如图2-51所示。
图2-50
图2-51
步骤14 选中下方大圆，按Ctrl+C组合键复制，按Ctrl+B组合键粘贴在后面，在控制栏中设置其填充为黄色（#FFF100），描边为无，效果如图2-52所示。
步骤15 在“属性”面板中调整参数，如图2-53所示。
图2-52
图2-53
步骤16 效果如图2-54所示。
步骤17
使用“直线段工具”
继续绘制直线段，如图2-55所示。
图2-54
图2-55
步骤18 在“属性”面板中分别调整参数，如图2-56、图2-57所示。
图2-56
图2-57
步骤19 选中所有直线段，在控制栏中设置其描边端点为圆点，如图2-58所示。效果如图2-59所示。
图2-58
图2-59
至此，文件袋图标制作完成。
不同的图标风格会给用户带来不同的体验，常见的图标风格包括像素风格、扁平化风格、拟物风格及立体风格等。本节将对这些图标风格进行说明。
像素风格图标的出现源于早期计算机屏幕的特性，其实质是由多个像素点组成的位图。早期计算机界面、手机界面及游戏画面因分辨率的原因会采用像素化图标。如今设计师们一般通过像素风格图标表现一种复古、怀旧的氛围，如图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
至此，面性图标制作完成。