Photoshop CC 移动UI设计案例教程(全彩慕课版)
上QQ阅读APP看书,第一时间看更新

2.1.4 iOS图标规范

在iOS中,图标分为应用图标和系统图标两种,下面分别介绍这两种图标的设计规范。

1. 应用图标

应用图标的概念:应用图标是应用程序的图标,如图2-14所示。应用图标主要应用于主屏幕、App Store、Spotlight及设置中。

图2-14 iOS系统中的各类应用图标

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

图2-15 iOS官方模板

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

图2-16 iOS系统中不同设备应用图标的尺寸

2. 系统图标

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

图2-17 系统图标(由澳大利亚Prospa产品设计负责人AndrewMcKay创作)

系统图标的设计:在导航栏和工具栏上的图标一般是44px(22pt@2x),在标签栏上的图标一般是50px(25pt@2x)。苹果官方提供了4种不同形状的标签栏图标尺寸供UI设计师参考。其意义是让不同外形的图标在同一个标签栏上时,保证视觉平衡,如图2-18所示。

图2-18 标签栏图标尺寸

系统图标的适配:系统图标会以不同的分辨率出现在导航栏、工具栏及标签栏场景中,尺寸也应根据不同设备的分辨率进行适配,如图2-19所示。

图2-19 iOS系统中不同设备系统图标的尺寸