最近 B 端告一段落，接著騰時間來更新移動端相關規范了。緊接上一篇規范相關的內容，開始更新下一半部分。

移動端規范認識

1. iOS 規范說明

目前，iOS 系統是我們設計新項目時默認使用的系統。所以，我們首先要來認識 iOS 相關的設計規范。

iOS 系統是一個比較整體、統一的平臺，它的更新比較緩慢、穩定，很長時間才會在視覺上有大的更新。

在我們寫下這篇內容的時候，iOS 已經更新到了 15，這是一個比較值得強調版本。那就是蘋果從規范層面，徹底拋棄以 iPhone8 為代表的直角矩形屏幕設備，而全面投入使用圓角矩形的劉海屏。

并且，官方默認建議使用的畫布尺寸寬，也從原本 iPhone X 的 375pt，更改成 iPhone13 的 390pt（影響很大）。

下面，我們就從界面的角度，來解釋下使用 iOS 規范首先要注意的事項。對于其它系統應該注意的小細節和建議，可以查看我們翻譯的完整文檔：

同時，也提前下載官方的最新設計組件庫，用于參考。鑒于官網經常更新，實效性強，所以建議大家去官網下載，下面是對應的網址和下載位置。

官網地址：https://developer.apple.com/design/resources/

狀態欄和指示器

官方組件庫中，最重要的兩個組件就是狀態欄 （Status Bar） 和指示器（Home Indicator）了，它們是 APP 中的常駐元素。雖然基礎，但很多設計師沒搞明白它們怎么用。

除了游戲、視頻等少數全屏場景，狀態欄和首頁指示器都會覆蓋在界面的最上層，且懸浮固定。且它們各自都有一個透明的操作區域，在設計時不能將可操作的按鈕置于操作區域之中，會造成一定的沖突。

UI 設計創建畫布后，第一件事就應該是從官方組件庫將這兩個元素置入畫布中，進行居中和頂/底部對齊。切記要考慮它們背景元素的色彩，確保兩個控件能被正常顯示。

置入這兩個基礎元素以后，第二件事，就是確定頁面的內邊距了。最早官方推薦左右頁邊距是 15pt，大概在 iOS13 以后，則變更為 16pt 延續至今。

頁邊距也只是一個規范建議，沒有強制性。可以根據項目的實際情況自己決定，如果沒有必要的原因或者把握，就盡量使用 16pt 即可。

頭部標題欄

第二個關注的要素，叫頭部標題欄（Navigation Bar），直譯叫 “導航欄”，但因為英文中加了 tion 結尾這個導航是帶有信標意思的名字，而不是我們中文常規語境下的動詞，所以我們一直使用使用頭部標題欄來稱呼它。

官方雖然給我們提供了好幾種頭部標題，但不是我們必須從中挑選一個出來用的，同樣可以自定義。在 iOS11 以后，推出了包含大標題模式的標題欄，但這個樣式是針對英文場景設計的，中文標題的適用性非常差，所以你很難看到國內主流應用使用。

正常情況下，在一級或特殊頁面會使用自定義的頂部樣式，在二級和一般頁面，會使用最普通的標題居中、左側帶返回的官方標題欄。該標題欄高度 44pt，左右的圖標都支持我們進行添加和更換。

底部導航欄

底部的導航欄（Tab Bar）也是我們設計中最常用的組件元素之一，很多翻譯會把它叫做 “標簽欄”，但我們一直反對這種叫法。因為 UI 元素還有 “Tag” 和 “Tag Bar” 這種真正的標簽欄，用此就會混亂。

而且，底部導航的語義對應網頁中的導航和安卓側邊導航，確保我們全平臺用詞的一致性！

官方規范中，底部導航總高 83pt，下方有個空白區域是用來放底部指示器的，導航可點擊區域實際高為 49pt。設計過程中，貫穿到底部的背景是必要的，不能直接去掉讓底部指示器處于懸空狀態。

底部導航的數量，常規是 3-5 個最佳，如果使用官方組件樣式，我們要做的就是置入該組件，然后替換對應的圖標、文字、色彩即可。

如果官方組件不能滿足的，也完全可以在這個基礎上做調整，保持主要參數一致的情況下增加額外的細節，比如中間的放大的添加、拍照按鈕。或者，兩側不撐滿，制作懸浮的底部導航欄（這時候可以不考慮底部指示器）。

iOS 中的列表菜單

列表菜單也是我們設計中常用的元素之一，在官方組件中，主要包含兩種類型，一種左右通欄模式，另一種卡片模式。其中行與行之間的分割線左側會預留一個頁面那邊距的空缺出來。

這類列表有比較自由的編輯方式，單行默認高度是 44，可以根據我們的設計風格調整。同時，左側可以添加圖標，右側也不一定只有箭頭。

各類提示、彈窗

官方提供的提示總類、彈窗總類非常的豐富。不同的提示應用在不同的場景中，比如進行確認、單選、多選、填寫信息等。

如果項目沒有特殊的要求，且開發資源比較緊張（項目時間短），我們就可以在項目中直接使用這些提醒和彈窗完成對應的流程設計。這么做的好處，不僅是設計效率高，開發在實現前端頁面的時候可以直接調用官方的樣式不用自己再寫一遍（簡單理解成就是更快了）。

雖然多數彈窗支持我們自定義更改，但有些彈窗類型是系統級規范。比如 ID 驗證流程，當系統彈出這個彈窗的時候，是不允許開發者染指的，版本啥樣顯示啥樣，必須從官方組件庫里獲取。

其它基礎控件

除了上面這些，其它的一些基礎的控件可以自己查看官方的組件庫進行熟悉。在我們的項目設計過程中，涉及到能用官方原生控件解決的操作，就盡量使用原生的控件，而避免自己設計。

這么做的主要目的不是讓視覺樣式和官方統一，也是為了讓項目效率更進一步提升。比如日期選擇期，就是一個無論是設計還是開發都非常麻煩的元素。

前面提到的組件控件元素理解了，就應該知道官方的規范是非常有 “彈性” 的。

我們了解視覺規范的主要目的除了知道少數必須使用官方樣式的元素外，還提供了哪些可以快速 “復制”、“黏貼” 的元素。讓我們用盡可能高效、簡單的方式完成頁面的設計。

規范不是讓你 —— 必須做什么，而是給你建議 —— 可以做什么。

2. iOS 夜間模式

接著我們就要來討論一下 iOS 的夜間模式了，新手對它也存在較多認知誤區。

夜間模式是 iOS13 推出的一個全新模式，讓系統可以進行亮色和深色模式的切換。

這里要強調一點，模式的切換只是系統的一個狀態，它會直接影響所有蘋果官方應用和系統元素，也會告知你啟動的應用系統現在切換成了深色模式（對應 API）。

但是，應用可以自己選擇要不要響應系統的色彩模式，或者干脆就沒有提供兩種色彩模式，那么深色模式切換對該應用就不會產生作用。

規范中的深色模式，就是介紹官方應用深色模式的設計思路、細節，幫助我們來建立自己的深色模式（一些特殊的原因，國內 APP 適配深色都要自己另外輸出一個版本）。

彩色色相的應用

首先，深色模式的變更不是只有背景色變化和文字改成白色，而是多數顏色都會發生一定程度的調整。因為彩色色相在純白和純黑模式下，視覺感受是不同的。

比如，下圖是同一個紅色在純黑和純白中的背景：

這個案例，則是前后應用了兩種不同紅色產生的效果：

所以，蘋果為了統一這種視覺的落差，強調了深色模式下彩色明度會更高，并給出了對應的案例。

灰色色相的應用

然后，就是灰色色相的應用，自然兩種模式下也是有不同的。

但是，灰色應用的場景就多起來了，首先是背景色應用。蘋果對卡片層級的建議是最多三層（不樣套娃），淺色模式下，用白、灰、白的模式做區分，而深色模式下，則給了三個不同的灰度。

灰色文字在深色模式下，使用白色的透明度來完成，包含了 4 個層級。當然，如果有必要我們也可以增加更多的出來。

以及，淺色模式中我們會使用投影，投影主要以黑色透明度為主。但是，我們肯定不能在黑色模式下再用黑色投影了，也不可能用白色透明度對吧！所以，深色模式也會去掉投影樣式，只使用純色背景做區分。

材質卡片

iOS 有系統自帶的毛玻璃效果，也就是我們軟件中的背景模糊效果（Background Blur），這種效果根據透明度劃分了 4 個層級。

在淺色模式下，毛玻璃使用的是白色卡片進行背景模糊，而在深色模式下，使用的就是黑色的卡片進行背景模糊。

毛玻璃效果會應用在非常多的場景，當我們需要應用這種材質的時候，不要去硬背背后的參數，直接找到官方組件，通過復制該卡片的樣式，再黏貼到你想要的元素上即可。

深色規范提供了一系列的設計思路，不是讓我們直接套用，而是作為參考讓我們更好的完成應用的深色版本設計。

值得一提的是，如果你的界面，從最開始就完全是深色風格的設計，那么自然不需要考慮深色模式，淺色和深色系統環境下都只是一套界面。

結尾

篇幅關系，這篇就寫到這里結束了！下篇作為規范的最后一篇，再來補上有關安卓和適配相關的基礎知識。

歡迎關注作者的微信公眾號：「超人的電話亭」