一、组件状态指示状态栏和指示器

在做 iOS App 设计的规范时候
 ，总会发现在几乎所有页面上 ，百科都存在这两个组件——顶部的栏和状态栏「Status Bar」和底部的首页指示器「Home Indicator」。

状态栏 是器设系统用来提示手机几个关键功能运行情况或参数的区域，例如：时间、组件状态指示移动网络、规范Wifi 和电量 
。百科状态栏需要在几乎任何情况下向用户展示这些重要信息
，栏和所以它是器设一个常驻的全局组件
 ，这也是组件状态指示为什么我们需要在几乎每个页面中置入它们。

首页指示器 是规范页面底部的一条小横杠，这个横杠在 iPhone X 全面屏出现的百科时候同步出现 ，用来替代原先非全面屏机型中的栏和 Home 键，达到回到首页
、器设进入 App 切换视图等功能 ，这些操作也是全局的，所以首页指示器也是一个常驻的全局组件
。

但就是这么两个不起眼的常驻小组件，却出现了大量误用、错用的情况：

虽然这两个组件在 App 里完全不需要设计师管 (系统统一样式)，但这些错误出现在设计稿中
，还是体现了一位 UI 设计师的不专业 、不严谨 。

二、出现错误的原因

之所以会出现这些错误
，主要有两个原因 ：

从 iPhone X 开始到最新的 iPhone 16 系列，苹果一共对屏幕分辨率做了三次调整，也就是有四种不同的分辨率。

在这 8 代 iPhone 上 ，头顶都存在一个区域，要么是刘海儿、要么是灵动岛。

为了适应这些分辨率调整 ，为了状态栏和头顶的刘海儿/灵动岛相适配 ，状态栏也存在几个略有差异的版本——尽管它们粗看起来好像豆哥样，都是左边时间右边仨图标，但是时间和图标的位置，各个版本之间都有细微差异 。

所以，出错的主要原因也就一目了然了 ：在相应机型的画板中
，使用了不匹配该机型的状态栏版本。作为 UI 设计师 ，搞清楚各版本之间的差异也是基本要求之一。

三 、状态栏版本

注：以 iPhone X 为起点
，老版本机型时代久远，不做讨论；在讨论分辨率时不考虑 Max、Mini、SE 机型的分辨率，做设计时一般以 Pro 版机型分辨率为基础。

1. iPhone X / Xs / 11 Pro

三代机型涉及的 iOS 版本为 iOS 11 、12、13，这三代也是 iPhone 开始使用刘海之后的三代 ，分辨率没变都是 375×812，刘海没变
，状态栏也就基本没变
 。

2. iPhone 12 / 12 Pro

涉及 iOS 版本为 iOS 14，从 iPhone12 这代开始 ，分辨率改为 390×844。

3. iPhone 13 / 13 Pro /14

涉及 iOS 版本为：iOS 15，iPhone 13、13 Pro、14 分辨率与 12 一致
，但是缩小了刘海尺寸，所以状态栏也略有调整。

4. iPhone 14 Pro

涉及 iOS 版本为
：iOS 16，iPhone 14 Pro 将分辨率刚改为 393×852，同时引入了灵动岛 ，所以状态栏又比较明显的变化 ，尤其是 ：变高了一点。

5. iPhone 15 / 15 Pro /16

涉及 iOS 版本为：iOS 17，这三个机型与 14 Pro 相比基本无变化，不知为何苹果给出的官方规范文件里状态栏尺寸高度差 1pt ，疑似为苹果印度病发作（误）
。

6. iPhone 16 Pro

涉及 iOS 版本为：iOS18，iPhone 16 Pro 再次更改了分辨率为 402×874 @3x
，所以状态栏也略有调整 。

总结来说，状态栏的变化基本都是由于 iPhone 的逻辑分辨率或者顶部摄像模组发生了变化，用一张图来展示就是：

四 、设计建议尺寸

目前只推荐两个尺寸：

393×852

对应的状态栏和首页指示器尺寸为 ：393×54、393×34

对应的机型 iPhone15 / 15 Pro / 16

402×874

对应的状态栏和首页指示器尺寸为：402×50、402×34

对应的机型 iPhone 16 Pro

这两个中二选一，应该不容易出错了吧？同时需要注意 
，在进行包装时也需要挑选对应机型的 Mock up，否则同样会出现刘海、灵动岛与状态栏不匹配的情况。

五、黑白状态栏的使用场景

同时我们会注意到，状态栏有两种颜色——黑和白(有且仅有这两种)，这两种颜色并不是对应 iOS 的深色模式和浅色模式 ，而是对应状态栏下方内容用什么颜色
，为了保证色彩对比，状态栏会根据下方内容的颜色自动切换。

不少同学也会出现这样一类错误：明明状态栏底下的图片是深色的
，但是状态栏没有改为白色
，这也是不对的。

六、安卓的状态栏和指示器

安卓也有状态栏和指示器 ，但是因为品牌众多，基于安卓的 OS 也众多 ，并没有办法统一使用规范的组件 ，所以在做安卓 App 设计时
，只需要放上 Material Design 3 的官方状态栏和指示器作示意即可，不要求准确。

结尾

以上，就是状态栏和指示器相关的内容，如果想要获取 iPhone 15 Pro 和 iPhone 16 Pro 对应的状态栏和指示器组件，可以关注超人的电话亭公众号回复「状态栏」获取下载链接。

作者：超人的电话亭