一、狀態(tài)欄和指示器

在做 iOS App 設(shè)計(jì)的時(shí)候，總會發(fā)現(xiàn)在幾乎所有頁面上，都存在這兩個(gè)組件——頂部的狀態(tài)欄「Status Bar」和底部的首頁指示器「Home Indicator」。

狀態(tài)欄 是系統(tǒng)用來提示手機(jī)幾個(gè)關(guān)鍵功能運(yùn)行情況或參數(shù)的區(qū)域，例如：時(shí)間、移動網(wǎng)絡(luò)、Wifi 和電量。狀態(tài)欄需要在幾乎任何情況下向用戶展示這些重要信息，所以它是一個(gè)常駐的全局組件，這也是為什么我們需要在幾乎每個(gè)頁面中置入它們。

首頁指示器 是頁面底部的一條小橫杠，這個(gè)橫杠在 iPhone X 全面屏出現(xiàn)的時(shí)候同步出現(xiàn)，用來替代原先非全面屏機(jī)型中的 Home 鍵，達(dá)到回到首頁、進(jìn)入 App 切換視圖等功能，這些操作也是全局的，所以首頁指示器也是一個(gè)常駐的全局組件。

但就是這么兩個(gè)不起眼的常駐小組件，卻出現(xiàn)了大量誤用、錯(cuò)用的情況：

雖然這兩個(gè)組件在 App 里完全不需要設(shè)計(jì)師管 (系統(tǒng)統(tǒng)一樣式)，但這些錯(cuò)誤出現(xiàn)在設(shè)計(jì)稿中，還是體現(xiàn)了一位 UI 設(shè)計(jì)師的不專業(yè)、不嚴(yán)謹(jǐn)。

二、出現(xiàn)錯(cuò)誤的原因

之所以會出現(xiàn)這些錯(cuò)誤，主要有兩個(gè)原因：

從 iPhone X 開始到最新的 iPhone 16 系列，蘋果一共對屏幕分辨率做了三次調(diào)整，也就是有四種不同的分辨率。

在這 8 代 iPhone 上，頭頂都存在一個(gè)區(qū)域，要么是劉海兒、要么是靈動島。

為了適應(yīng)這些分辨率調(diào)整，為了狀態(tài)欄和頭頂?shù)膭⒑?靈動島相適配，狀態(tài)欄也存在幾個(gè)略有差異的版本——盡管它們粗看起來好像豆哥樣，都是左邊時(shí)間右邊仨圖標(biāo)，但是時(shí)間和圖標(biāo)的位置，各個(gè)版本之間都有細(xì)微差異。

所以，出錯(cuò)的主要原因也就一目了然了：在相應(yīng)機(jī)型的畫板中，使用了不匹配該機(jī)型的狀態(tài)欄版本。作為 UI 設(shè)計(jì)師，搞清楚各版本之間的差異也是基本要求之一。

三、狀態(tài)欄版本

注：以 iPhone X 為起點(diǎn)，老版本機(jī)型時(shí)代久遠(yuǎn)，不做討論；在討論分辨率時(shí)不考慮 Max、Mini、SE 機(jī)型的分辨率，做設(shè)計(jì)時(shí)一般以 Pro 版機(jī)型分辨率為基礎(chǔ)。

1. iPhone X / Xs / 11 Pro

三代機(jī)型涉及的 iOS 版本為 iOS 11、12、13，這三代也是 iPhone 開始使用劉海之后的三代，分辨率沒變都是 375×812，劉海沒變，狀態(tài)欄也就基本沒變。

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 一致，但是縮小了劉海尺寸，所以狀態(tài)欄也略有調(diào)整。

4. iPhone 14 Pro

涉及 iOS 版本為：iOS 16，iPhone 14 Pro 將分辨率剛改為 393×852，同時(shí)引入了靈動島，所以狀態(tài)欄又比較明顯的變化，尤其是：變高了一點(diǎn)。

5. iPhone 15 / 15 Pro /16

涉及 iOS 版本為：iOS 17，這三個(gè)機(jī)型與 14 Pro 相比基本無變化，不知為何蘋果給出的官方規(guī)范文件里狀態(tài)欄尺寸高度差 1pt，疑似為蘋果印度病發(fā)作（誤）。

6. iPhone 16 Pro

涉及 iOS 版本為：iOS18，iPhone 16 Pro 再次更改了分辨率為 402×874 @3x，所以狀態(tài)欄也略有調(diào)整。

總結(jié)來說，狀態(tài)欄的變化基本都是由于 iPhone 的邏輯分辨率或者頂部攝像模組發(fā)生了變化，用一張圖來展示就是：

四、設(shè)計(jì)建議尺寸

目前只推薦兩個(gè)尺寸：

393×852

對應(yīng)的狀態(tài)欄和首頁指示器尺寸為：393×54、393×34

對應(yīng)的機(jī)型 iPhone15 / 15 Pro / 16

402×874

對應(yīng)的狀態(tài)欄和首頁指示器尺寸為：402×50、402×34

對應(yīng)的機(jī)型 iPhone 16 Pro

這兩個(gè)中二選一，應(yīng)該不容易出錯(cuò)了吧？同時(shí)需要注意，在進(jìn)行包裝時(shí)也需要挑選對應(yīng)機(jī)型的 Mock up，否則同樣會出現(xiàn)劉海、靈動島與狀態(tài)欄不匹配的情況。

五、黑白狀態(tài)欄的使用場景

同時(shí)我們會注意到，狀態(tài)欄有兩種顏色——黑和白(有且僅有這兩種)，這兩種顏色并不是對應(yīng) iOS 的深色模式和淺色模式，而是對應(yīng)狀態(tài)欄下方內(nèi)容用什么顏色，為了保證色彩對比，狀態(tài)欄會根據(jù)下方內(nèi)容的顏色自動切換。

不少同學(xué)也會出現(xiàn)這樣一類錯(cuò)誤：明明狀態(tài)欄底下的圖片是深色的，但是狀態(tài)欄沒有改為白色，這也是不對的。

六、安卓的狀態(tài)欄和指示器

安卓也有狀態(tài)欄和指示器，但是因?yàn)槠放票姸?，基于安卓?OS 也眾多，并沒有辦法統(tǒng)一使用規(guī)范的組件，所以在做安卓 App 設(shè)計(jì)時(shí)，只需要放上 Material Design 3 的官方狀態(tài)欄和指示器作示意即可，不要求準(zhǔn)確。

結(jié)尾

以上，就是狀態(tài)欄和指示器相關(guān)的內(nèi)容，如果想要獲取 iPhone 15 Pro 和 iPhone 16 Pro 對應(yīng)的狀態(tài)欄和指示器組件，可以關(guān)注超人的電話亭公眾號回復(fù)「狀態(tài)欄」獲取下載鏈接。

作者：超人的電話亭