2.2 图标的设计规范

图标的设计规范主要是根据App的iOS和Android两个平台的设计规范而来的。下面从图标的尺寸及单位、图标的视觉统一、图标的清晰度3个方面出发详细讲解图标的设计规范。

2.2.1 图标的尺寸及单位

1. iOS中图标的尺寸及单位

在iOS中，图标主要分为应用图标和系统图标两种，单位是px和pt。px即“像素”，是按照像素格计算的单位，表示移动设备的实际像素。pt即“点”，是根据内容尺寸计算的单位。使用Photoshop软件设计界面的UI设计师使用的单位都是px，使用Sketch软件设计界面的UI设计师使用的单位都是pt。对于iOS的单位，本书将在3.2.1小节“iOS系统界面的设计规范”中进行深入剖析，以帮助读者理解。

（1）应用图标。应用图标是应用程序的图标，iOS中各类应用图标如图2-22所示。应用图标主要应用于主屏幕、App Store、Spotlight以及设置场景中。

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

应用图标会以不同的分辨率出现在主屏幕、聚焦、设置以及通知场景中，尺寸也应根据不同设备的分辨率进行适配，iOS系统中不同设备的应用图标尺寸如图2-25所示。

（2）系统图标。系统图标即界面中的功能图标，主要应用于导航栏、工具栏以及标签栏。当未找到符合需求的系统图标时，UI设计师可以设计自定义图标，如图2-26所示。

导航栏和工具栏上的图标尺寸一般是48px，部分设计会加入边距，尺寸为56px，加入边距后，方便切图，也能提升触控准确性。标签栏上的图标尺寸一般是50px。系统图标会以不同的分辨率出现在导航栏、工具栏以及标签栏场景中，图标尺寸也应根据不同设备的分辨率进行适配，如图2-27所示。

2. Android中图标的尺寸及单位

在Android中，图标主要分为应用图标和系统图标两种，单位是dp。dp是Android设备上的基本单位，等同于iOS设备上的pt。Android开发工程师使用的单位是dp，所以UI设计师在进行标注时应将px转化成dp，公式为dp=px×160/ppi（ppi为屏幕像素密度）。本书将在3.2.2小节“Android系统界面的设计规范”对其进行深入剖析，以帮助读者理解。

（1）应用图标。应用图标即产品图标，是品牌和产品的视觉表达，主要出现在主屏幕上，Android中各类应用图标如图2-28所示。

创建应用图标时，应以320dpi（dpi表示的是Android设备每英寸所拥有的像素数量）分辨率中的48dp尺寸为基准。应用图标的尺寸应根据不同设备的分辨率进行适配，使用Android的不同设备的应用图标尺寸如图2-29所示。当应用图标应用于Google Play中时，其尺寸是512 px×512px。

（2）系统图标。系统图标即界面中的功能图标，通过简洁、现代的图形表达一些常见功能。Material Design提供了一套完整的系统图标，如图2-30所示，同时设计师也可以根据产品的调性自定义设计系统图标。

创建系统图标时，以320dpi分辨率中的24dp尺寸为基准。系统图标的尺寸应根据不同设备的分辨率进行适配，使用Android的不同设备的系统图标尺寸如图2-31所示。

2.2.2 图标的视觉统一

Material Design语言提供了4种不同的图标形状供UI设计师参考，以保持视觉统一，如图2-32所示。

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

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

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

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

2.2.3 图标的清晰度

设计时为保证图标清晰，需将软件中 x 轴和 y 轴坐标设为整数，而不是小数，将图标“放在像素上”，如图2-37所示。