2024年5月28日发(作者：)

本文整理汇总了一些界面设计（iOS系统）中常用的一些尺寸规范和方法，如控件间距、

适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了

解，并融会贯通。

目录

o

o

o

o

o

o

o

o

o

o

界面设计尺寸及栏高度

边距和间距

内容布局

界面图片设计比例

建立统一风格的图标

APP版式设计规范

界面文字设计规范

设计适配

切图规范

设计稿标注

一、界面设计尺寸及栏高度

目前主流的 iOS 设备主要有 iPhone SE（4英寸）、iPhone 6s/7/8（4.7英寸）、

iPhone 6s/7/8 Plus（5.5英寸）、iPhone X（5.8英寸），它们都采用了 Retina 视网膜

屏幕，其中 iPhone 6s/7/8 Plus 和 iPhone X 采用的是3倍率的分辨率，其他都是采用

的2倍率的分辨率，无论是栏高度还是应用图标，设计师提供给开发人员的切片大小，

前者始终是后者的1.5倍，并分别以@3x和@2x在文件名结尾命名，程序再根据不同分

辨率自动加载@3x或者@2x的切片。

通过上面的讲解和图示我们了解了 iPhone 不同设备的物理尺寸，那么他们的像素分辨

率又是多少呢？也就是说我们用 Photoshop 做设计新建画布应该设置多大呢？另外，

iOS应用中的栏，包括状态栏、导航栏、标签栏、工具栏等，它们的高度又分别是多少

呢？（注意：iOS 严格规定了各个栏的高度，这个是必须遵守的）通过下面的表格和图

示来为你解答上面的问题。

1 / 74

注意：在进行 iphone x 设计的时候我们依然可以采用熟悉的 iphone 7 的设计尺寸作为

模板，只是高度增加了290px，设计尺寸为750*1624（@2x）。注意状态栏的高度由原

来的40px变成了88px，另外底部要预留68px的主页指示器的位置。

2 / 74