UI组件规范百科 ：状态栏和指示器设计指南
· 2026-09-03 12:52:40
一 、组件状态指示状态栏和指示器
在做 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 对应的状态栏和指示器组件 ，可以关注超人的电话亭公众号回复「状态栏」获取下载链接 。
作者：超人的电话亭
文章推荐：
一样往常气候下 ，以下哪个成语更合实用来感激冲动冲动冲动别人 ？
任推邦聘请码是若干很多若干良多若干很多若干良多若干很多若干 ？若何掉落踪掉落踪 ？具体编制法度圭表类型