2.1　iOS设计规范

下面对iOS设计规范从设计单位及尺寸、界面结构、基本布局、字体规范和图标规范5个方面进行详细介绍。

2.1.1　iOS设计单位及尺寸

1.相关单位

·像素密度

像素密度（Pixels Per Inch，PPI）是屏幕分辨率单位，表示的是每英寸（1英寸≈2.54厘米）所拥有的像素数量。图2-1所示为PPI的计算公式（ x 、 y 分别为横向、纵向的像素数）。像素密度越大，画面越细腻。因此，虽然iPhone 4的屏幕尺寸与iPhone 3GS相同，但iPhone 4的实际像素密度大了一倍，清晰度自然更高。

·比例因子

比例因子通常指屏幕的缩放比例。标准分辨率显示器的比例因子为1.0，用@1x表示；高分辨率显示器的比例因子为2.0或3.0，分别用@2x和@3x表示。例如，一个10px×10px的标准分辨率（@1x）图像的@2x版本为20px×20px，@3x版本为30px×30px，如图2-2所示。

·物理像素、渲染像素和逻辑像素

物理像素（Physical Pixel），单位“像素”（pixel，px），是指移动设备的实际像素。渲染像素（Rendering Pixel）可以理解为手机截屏时所得到的图片尺寸。渲染像素和屏幕的物理像素通常会保持一致，例如iPhone 14 Pro/15/15 Pro的物理像素和渲染像素都是1179px×2556px。但也有例外，其中iPhone 8 Plus系列和iPhone 12 mini的物理像素和渲染像素并不一致，如图2-3所示。使用Photoshop的UI设计师可根据渲染像素进行界面设计。

逻辑像素（Logic Pixel），单位为“点”（point，pt），是根据内容尺寸计算的单位。iOS开发工程师和使用Sketch的UI设计师使用的单位都是pt。

例如，iPhone 14 Pro/15/15 Pro的逻辑像素是393pt×852pt，由于1pt=3px，因此iPhone 14 Pro/15/15 Pro的渲染像素是1179px×2556px，如图2-4所示。

2.设计尺寸

图2-5所示为一些iOS设备的尺寸。在进行UI设计时，为了适配大部分设备，推荐以iPhone 14 Pro/15/15 Pro为基准。如果使用Photoshop就创建786px×1704px的画布，如果使用Sketch就创建393pt×852pt的画布。

2.1.2　iOS界面结构

iOS界面通常由状态栏、导航栏、安全设计区以及标签栏/工具栏等组成。自全面屏手机上市，iOS界面较之前还多了虚拟主页键，如图2-6所示。

2.1.3　iOS基本布局

1.网格系统

网格系统（Grid System）又称为“栅格系统”。在App设计中，设计师通常利用一系列垂直和水平的参考线将页面分割成若干个有规律的列或格子，再以这些列或格子为基准，进行页面的布局设计，使布局规范、简洁、有秩序，如图2-7所示。

2.组成元素

网格系统由列（①）、水槽（②）及边距（③）3种元素组成，如图2-8所示。列是放置内容的区域；水槽是列与列之间的区域，用于分离内容；边距是内容与屏幕左右边缘之间的区域。

3.网格运用

·单元格：iOS的最小点击区域是44pt，即88px（@2x），其最小单元格选用4px或8px都合适。但4px的单元格容易将页面切割得过于细碎，所以比较推荐使用8px的单元格，如图2-9所示。

·列：列的数量可以是4、6、8、10、12、24等。其中，4列通常在2等分的简洁页面中使用，6、12和24列基本适用于所有等分情况，然而24列会将页面切割得过于细碎，如图2-10所示，因此实际使用中以12列和6列为主。

·水槽：水槽、边距以及横向间距的宽度可以依照最小单元格的宽度（8px）为增量进行统一设置，如24px、32px、40px等。其中，32px（16pt@2x）最为常用，如图2-11所示。

·边距：边距的宽度也可以与水槽有所区别。在iOS中以@2x为基准，常见的边距有20px、24px、30px、32px、40px及50px。边距的选择应结合产品本身的气质，其中30px的边距令人比较舒适，这也是绝大多数App首选的边距。iOS中的“设置”页面及“通用”页面都采用了30px的边距，如图2-12所示。

2.1.4　iOS字体规范

1.系统字体

·旧金山字体：旧金山字体是非衬线字体，如图2-13所示。旧金山字体有SF UI Text（文本模式）和SF UI Display（展示模式）两种尺寸。SF UI Text适用于小于19pt的文字，SF UI Display（展示模式）适用于大于20pt的文字。

·纽约字体：纽约字体是衬线字体，如图2-14所示。纽约字体旨在补充旧金山字体。小于20pt的文字使用小号，20～35pt的文字使用中号，36～53pt的文字使用大号，大于或等于54pt的文字使用特大号。

·苹方：在iOS中，中文使用的是苹方字体，该字体共有6种字重，如图2-15所示。

2.字号

进行iOS界面设计时要注意字号的大小，iOS对于字号的建议（基于@2x）如图2-16所示。苹果官网的建议全部是对英文旧金山字体而言的，中文字体的字号需要UI设计师灵活设置，设计师要综合考虑呈现效果的实用性和美观程度。10pt（20px，@2x）是手机上显示的最小字号，一般应用于标签栏的图标底部。为了区分标题和正文，它们的字号差异至少为4px（2pt，@2x），正文的合适行间距为1.5～2倍。

2.1.5　iOS图标规范

下面从应用图标和系统图标两个类别对iOS图标规范进行详细介绍。

1.应用图标

·应用图标的概念：应用图标是应用程序的图标，如图2-17所示。应用图标主要应用于主屏幕、App Store、Spotlight及“设置”页面中。

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

·应用图标的适配：应用图标会以不同的分辨率出现在主屏幕、“聚焦”区域、“设置”页面及“通知”区域中，图标尺寸也会根据不同设备的分辨率进行适配。图2-19所示为不同iOS设备及场景中应用图标的尺寸。

由于屏幕分辨率存在差异且使用场景有所不同，所以iOS官方的图标模板中有非常多的应用图标尺寸。UI设计师只需要设计1024px×1024px的应用图标，然后将其置入Photoshop的智能对象，或者Sketch的Symbol中，就可以一次性生成多种尺寸的应用图标。图2-20所示为不同尺寸的iOS官方模板。

2.系统图标

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

·系统图标的设计：导航栏和工具栏上的图标一般是48px×48px（@2x），设计时会加入一定的边距，变成56px×56px（@2x），便于切图和提高触控准确率，如图2-22所示。

标签栏上的图标一般是50px×50px（@2x）。苹果公司提供了4种不同形状的标签栏图标尺寸供UI设计师参考，其意义是让不同外形的图标在同一个标签栏中具有视觉平衡感，图2-23所示为标签栏图标尺寸。

·系统图标的适配：自定义图标会以不同的分辨率出现在导航栏、工具栏及标签栏中，其尺寸也会根据不同设备的分辨率进行适配，如图2-24所示。