2.2
图标的设计规范

图标的设计规范可以从App中的图标、网页中的图标、软件中的图标3个方面进行详细的讲解。

2.2.1 App图标设计规范

在App中，图标主要分为应用图标和系统图标两种。

1．应用图标

（1）应用图标的概念

应用图标即产品图标，是品牌和产品的视觉表现，如图2-17所示。应用图标主要用于主屏幕。

（2）应用图标的设计

iOS应用图标尺寸 应用图标的设计尺寸通常可以采用1024px，并根据iOS官方模板进行规范，如图2-18所示；正确的图标设计稿应是直角矩形不带圆角的，iOS会自动应用一个圆角遮罩将图标的4个角遮住。

应用图标会以不同的分辨率出现在主屏幕、App Store、Spotlight及设置场景中，尺寸也应根据不同设备的分辨率进行适配，如图2-19所示。

Android系统应用图标尺寸 创建应用图标时，尺寸应以320dpi（Android系统开发时规定以dpi为标准，dpi表示Android每英寸所拥有的像素数量）分辨率中的48dp（dp是Android系统上的基本单位，这里的48dp等同于96px）为基准；设计时图标以400%放大（192dp×192dp）进行查看和编辑，它将以4dp显示边缘；当比例返回100%（48dp）时，可以保留锐利的边缘和正确的对齐方式，如图2-20所示。

Material Design（谷歌公司推出的新的设计语言）为Android系统提供了4种不同形状的应用图标及尺寸供UI设计师参考，以保持视觉平衡，如图2-21所示。

应用图标的尺寸应根据不同设备的分辨率进行适配，如图2-22所示。当应用图标应用于Google Play中时，其尺寸是512 px×512px。

2．系统图标

（1）系统图标的概念

系统图标即界面中的功能图标，是通过简洁、现代的图形表达一些常见的功能系统。图标主要应用于界面的导航栏、工具栏及标签栏等区域，如图2-23所示。

（2）系统图标的设计

iOS图标尺寸 iPhone SE/6/6s/7/8/XR导航栏和工具栏上的图标尺寸一般是44px，标签栏上的图标尺寸一般是50px；苹果公司官方提供了4种不同形状的标签栏图标及尺寸供UI设计师参考，其意义是让不同外形的图标处在同一个标签栏中时，保证视觉平衡，如图2-24所示。

系统图标会以不同的分辨率出现在界面的导航栏、工具栏及标签栏等区域中，尺寸也应根据不同设备的分辨率进行适配，如图2-25所示。

Android系统图标尺寸 创建系统图标时，尺寸以320dpi分辨率中的24dp为基准；图标应该留出一定的边距，如图2-26所示，以保证不同面积的图标有协调一致的视觉效果。

Material Design为Android系统提供了4种不同形状的应用图标及尺寸供UI设计师参考，以保持一致的视觉平衡，如图2-27所示。

系统图标的尺寸应根据不同设备的分辨率进行适配，如图2-28所示。

系统图标通常由①描边末端、②圆角、③反白区域、④描边、⑤内部角、⑥边界区域6部分组成，如图2-29所示。

下面对常用部分进行介绍。

描边末端： 描边末端应该是直线并带有角度，留白区域的描边粗细也应该是2dp；描边如果倾斜45°，那么末端也应该倾斜45°，如图2-30所示。

边角： 圆角和内部角都是边角，边角半径默认为2dp；内部角应该用方形角而不要使用圆角，圆角半径建议使用2dp，如图2-31所示。

描边： 系统图标应使用2dp的宽度描边，以保持图标的一致性，如图2-32所示。

除了前面提到的6部分外，视觉校正也是一种可能用到的功能。

视觉校正： 如果系统图标需要设计复杂的细节，则可以进行细微的调整，以提高其清晰度，如图2-33所示。

2.2.2 网页图标设计规范

1．设计尺寸

网页图标通常在1024px×1024px的画板中进行制作，并留出64px的边距，如图2-34所示，以保证不同面积的图标有协调一致的视觉效果。

Ant Design（一种UI设计语言）提供了6种最常用的图标设计的基本形式供设计师参考，以方便设计师快速地调用并在此基础上做出变形，如图2-35所示。

2．设计元素

Ant Design中最常见的基本元素可以归纳为点、线、圆角、三角。基本元素在使用上的尺寸如图2-36所示。

点： Ant Design建议在点的尺寸选择上保持16的倍数这一原则，常用点的4种尺寸分别为80 px、96 px、112 px、128 px，如图2-37所示。

线： Ant Design在线条尺寸的关系上采用8的倍数原则，从小到大以8的倍数递增；常用线的4种尺寸分别为56 px、64 px、72 px、80 px，如图2-38所示。

圆角： Ant Design对于圆角尺寸采取的也是8的倍数原则，最常用的3种尺寸分别为8 px、16 px、32 px，如图2-39所示，其中图标内角保持直角的处理方式。

三角： Ant Design中的三角受到战斗机设计的启发，将常用的角度定在76°左右，如图2-40所示。

Ant Design除了定义角度外，对图标中实心箭头的尺寸也做了调整。在顶角大约保持76°的基础上，宽度保持8倍数的原则，间隔为24，如图2-41所示。

3．视觉平衡

Ant Design在图标造型、摆放角度及留白空间3个方面，通过对基本元素的尺寸进行微调来实现图标的平衡感。

图标造型： 弯曲的线条在视觉上比竖直的线条看起来更细，因此需要对72px尺寸的圆形外边框进行4px的微调，如图2-42所示。

摆放角度： 倾斜的线条在视觉上同样会比竖直的线条看起来更细，因此需要对倾斜的线条进行4px的微调，如图2-43所示。

留白空间： 当图形的留白不足时，可通过调整线条的粗细来平衡视觉重量，如图2-44所示。

4．使用原则

为支持响应式设计，交付前端的图标，应尽量使用SVG矢量格式图标，或者将图标直接上传到iconfont矢量图标库中，让前端直接调用图标字体，如图2-45所示。

2.2.3 软件图标设计规范

软件中的图标主要分为应用图标和界面图标，如图2-46所示。

1．应用图标

应用图标会用于软件中的不同场景，由于场景不同，图标的具体名称也会有所变化。如Windows系统中的应用图标，如图2-47所示。

（1）磁贴图标

4个磁贴分别为小磁贴（71px×71px）、中等磁贴（150px×150px）、宽磁贴（310px×150px）、大磁贴（310px×310px）。

小磁贴：将图标宽度和高度限制为磁贴大小（71px×71px）的66%，如图2-48所示。

中等磁贴：将图标宽度限制为磁贴大小（150px×150px）的66%，高度限制为50%。这样可以防止品牌栏中的元素重叠，如图2-49所示。

宽磁贴：将图标宽度限制为磁贴大小（310px×150px）的66%，高度限制为50%。这样可以防止品牌栏中的元素重叠，如图2-50所示。

大磁贴：将图标宽度限制为磁贴大小（310px×310px）的66%，高度限制为50%，如图2-51所示。

（2）应用图标

在桌面“开始”菜单的应用列表、桌面任务栏、桌面快捷方式、桌面控制面板中，应用图标的设计尺寸如图2-52所示。

（3）初始屏幕图标

初始屏幕的尺寸如图2-53所示，图标对应放置于屏幕内，一般建议在620 px×300 px的初始屏幕内进行图标设计。

（4）锁屏提醒图标

锁屏提醒图标和其他应用图标不同，设计师不能使用自己的锁屏提醒图像，仅可以使用系统提供的。

（5）应用商店图标

在应用商店中，可以上传图标替代图像，其尺寸分别为300 px×300 px、150 px×150 px和71 px×71 px。虽然需要提供3个尺寸的图像，但只用对300 px×300 px的图像进行设计即可，如图2-54所示。

2．界面图标

界面图标在前面介绍App图标设计规范和网页图标设计规范时进行过详尽的讲解，因此这里主要总结Windows操作系统中软件界面图标的一些正确使用方法。

（1）使用系统自带图标

Microsoft向用户提供了1000多个Segoe MDL2 Assets字体格式的图标，如图2-55所示。这些图标在不同的显示器、分辨率，甚至不同的尺寸下都能保持清晰、简洁。

（2）使用图标字体

推荐使用的图标字体，除了系统自带的Segoe MDL2 Assets图标字体，还可以使用如Wingdings或Webdings的图标字体，如图2-56所示。

（3）使用可缩放的矢量图形SVG文件

SVG文件可以在任何尺寸或分辨率下都拥有清晰的外观，并且大多数绘图软件都可以导出为SVG文件，因此它非常适合作为图标资源，如图2-57所示。

（4）使用几何图形对象

几何图形与SVG文件一样，也是一种基于矢量的资源，所以可以保证清晰的外观。由于必须单独指定每个点和曲线，因此创建几何图形比较复杂，如图2-58所示。不过，当程序运行时修改图标（以便对其进行动画处理等）的话，它确实非常适用。

（5）使用位图图像（如PNG、GIF或JPEG）

位图图像要以特定尺寸创建，当它缩小时，通常会变模糊；当它放大时，通常会带有像素颗粒，如图2-59所示，因此不建议使用。如果必须使用位图图像，建议使用PNG或GIF格式，而不要使用JPEG格式。