iPhone X（iOS11）设计规范 | 2021年5月

背景：本文是针对iPhone X的一些设计规范，新人在产品原型设计和UI设计时可能会记不住字体、导航条高度、间距、导出尺寸等常规规范，所以通过近期学习，希望贡献小小力量，也为自己后续设计保留一份参考笔记。

一、iPhone X的画布使用尺寸

将iPhone 8 的尺寸与iPhoneX的尺寸做了一下对比，在sketch上设置的画布iPhone8可以用375*667px，iPhoneX可以用375*812px。在做图的时候，建议大家都用宽度375px，最后根据不同的设备导出几倍大小转换成不同设备对应的分辨率即可。（PS：关于pt与px的关系文章后会做一个说明，目前大家可以这样理解：在375宽度的分辨率下，px=pt）

二、字体规范

1、字体类型：

（1）iOS 9及以下：中文字体为冬青黑体，英文字体为Helvetica Neue

（2）iOS 10及以上：中文字体为苹方(Ping Fang SC Light)，英文字体为San Francisco

        - SF Pro Text：用于19pt及以下大小的文本

        - SF Pro Display：用于20pt及以上大小的文本

2、其他设计师分享的字体大小使用规范：

（1）导航栏标题： 16-18pt

（2）标题文字： 15-16pt

（3）内容区域文字：12-14pt

（4）辅助性文字： 10-12pt

三、案例说明内容模块标准尺寸与字体大小

1、【纵向】常用模块尺寸：

（1）顶部状态栏statusbar：44pt

（2）顶部导航栏nav bar：44pt

（3）Screen title /Search bar：53pt

（4）底部导航栏Tab bar：49pt

（5）Home虚拟主键home indicator：34pt

（6）左右两边间隙layout margin：16px

（7）Nav bar的左右两边icon：18*18pt

2、【纵向】常用模块字体大小（以iOS14 相册为例）：

（1）Nav bar字体大小：18pt

（2）Screen title大小：34pt

（3）Sub title大小：22pt

（4）内容区域大小：16pt

3、【横向】常用模块尺寸：

（1）顶部状态栏statusbar：无

（2）顶部导航栏nav bar：32pt

（3）底部导航栏Tab bar：30pt

（4）Home虚拟主键home indicator：23pt

（6）左右两边间隙layout margin：16pt

（7）安全区域Safe Area：734*352pt

2、【横向】常用模块字体大小（以iOS14 相册为例）：

（1）Nav bar字体大小：18pt

（2）Title大小：22pt

（3）内容区域大小：16pt

三、iPhone常用尺寸及pt与px关系

pt：独立像素，iOS开发基本单位（Point）

px：相对长度，设计基本上都是用px来标注（Pixel）

从表中可以看出，用在iPhone X的设备上，在设计图的时候，都用pt的规范，最终导出时选择@3x即可。

四、iOS 14其他控件尺寸规范

五、iOS 14系统APP配色