更多UI干貨：
在做 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 對應的狀態欄和指示器組件，可以關注超人的電話亭公眾號回復「狀態欄」獲取下載鏈接。
歡迎關注作者的微信公眾號：「超人的電話亭」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
熱評 ^_^想→