下载掌阅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
至此，完成视频播放器图标制作。