WWDC 2019 iOS 13 設計新規範

蘋果官方引入深色模式給出了三個理由：

1. 能夠更清晰的查看照片媒體
2. 便於在昏暗環境瀏覽信息
3. 眾多用戶偏愛深色 UI

蘋果系統性的引入了深色模式，同時也為此重新升級了 iOS 設計系統。蘋果 HID 團隊為新規範定製了五個目標：

1. 感知熟悉
2. 平台級別的一致性
3. 信息結構清晰
4. 輔助功能
5. Keep it simple

1.1 語意化顏色（Semantic Colors）

深色模式的引入意味著一款產品的每個元素都有可能會有兩套顏色。兩套背景色、兩套主要文字色、兩套次要文字色，甚至設計輔助色都需要深淺兩套。如果堅持使用具體的色值來描述每一個顏色，就會導致顏色庫難以維護。這種情況延伸到代碼層則會更加混亂。為解決這個蘋果引入了語意化顏色這個概念。

語意化顏色意味顏色描述不是通過具體的色值，而是使用其發揮的具體作用。例如：在淺色模式下使用 rgb(255,255,255) 100% 透明度作為背景色、深色模式下使用rgb(0,0,0) 100% 透明度作為背景色。這兩個顏色被打包到一起，以「背景色」的名稱統稱，系統按照不同的深淺場景調用具體的色值。

iOS 13 系統內置了 4 組語意化文字顏色。這四組顏色在深淺狀態均能提供良好的閱讀對比度。

iOS 13 也提供了三組背景色。分別是系統背景、二級系統背景、和三級背景。（SystemBackground, SecondarySystemBackground, TertiarySystemBackground）。三種背景色組合使用可以提供更好的信息層級。

作為補充，新系統還提供了一套用於顯示成組內容的組合背景色。分別是系統組合背景（SystemGroupedBackground）與二級系統組合背景（SecondarySystemGroupedBackground）。兩組顏色都經過了精細的挑選，以提供清晰的對比同時保證軟體在深淺兩種模式下看起來像是同一款軟體。

新系統提供了新的 填充色（Fill Colors）和 分割線顏色（Separator Colors）。兩種顏色均使用了半透明的色值描述，以確保能夠同時適用於深淺兩種模式。

在一些情況下不適合使用上述半透明顏色，例如交叉使用的分割線。所以新的設計系統還提供了六種非透明的系統灰度色（SystemGray, SystemGray2, ... SystemGray6）

蘋果很早前就提供了一套系統級別的顏色，這些顏色也得到了更新。包含了深色模式和高對比度模式下的顏色。可以直接調用。

高對比顏色在深色背景下顏色更淺，在淺色背景下顏色更深。

蘋果知道設計師很辛苦，所以提供了一套官方的 Sketch 格式顏色庫。鏈接在此

如果設計師希望選擇自己的顏色，需要確保顏色在深淺兩種模式下能夠保證足夠的清晰。即使選擇的顏色看上去已經提供了足夠的對比，蘋果還是建議使用在線的對比度測試工具進行一下驗證。官網建議使用對比度超過 4.5 的顏色。

在為軟體選擇顏色時需要考慮到顏色的相對性，不同背景下人眼捕獲顏色的色感是不同的，設計師需要進行一定調整。

1.2 基礎層與浮層（Base and Elevated）

兩個層疊加到一起，為上方的一層加上陰影，看上去就像是浮在了起來。這是一種 UI 設計中常用的方法。但是這種方法在深色模式下就不起作用了。系統背景顏色提供了兩套顏色。淺色狀態浮層顏色使用陰影，深色模式下使用顏色稍淺的浮層。

舉例：iOS 13 的聯繫人 APP 使用了純黑的背景，當聯繫人這個功能被當作模塊再電話 APP 呼出時，使用了浮層顏色作為底色。

舉例2: iOS 13 的郵件 APP 使用了純黑的背景作為基礎色。當聯繫人 APP 以 Slide Over 模式顯示時，就使用了浮層顏色作為底色。

舉例3: 當郵件 APP 與聯繫人 APP 分屏顯示時，兩個界面均使用了浮層顏色作為底色。這麼做可以將兩個 APP 的界面與中間的分割線區分開。

舉例4: 分屏狀態下郵件主界面使用了浮層顏色作為底色，打開的撰寫郵件界面也使用了浮層顏色。這時郵件的主界面看起來顏色更深一些，是因為撰寫郵件界面使用了模態頁面進行顯示，模態頁面會自動在當前頁面與下方頁面之間生成蒙層，併產生陰影。

在使用系統灰色色值時需要檢查基礎狀態的顏色與浮層狀態是否能提供足夠強的對比。

1.3 材質 Materials

iOS 13 提供四套材質，分別是厚重、常規、薄、以及超薄（Thick, Regular, Thin, Ultrathin）。四套材質均提供深色模式。默認材質為 Regular，適用於絕大多數場景。

不同的材質厚度提供了相應的文字、填充、分割線的 鮮艷顏色（Vibrant Colors）組合，這一技巧在 iOS 種被廣泛應用。鮮艷顏色能夠隨著下方的顏色進行調整，對比之下使用純色會讓界面顯臟。

1.4 控制項與（各種）條

iOS 13 調整了一部分控制項視覺樣式以確保內部的一致性。這些控制項用到的顏色也都使用了語意化顏色，能夠完美適配深色與淺色模式。官方建議直接使用系統提供的組件。

免不了一款產品需要自己定義組件，官方建議使用系統顏色（例如 systemYellow 和 quaternaryLabel）以獲得自動的深淺模式支持。

NavBar 導航欄 也在這次更新中得到了新的優化。默認包含了大尺寸標題，大尺寸標題能夠很好的統領頁面。當頁面內容滑動上去之後，NavBar 背景會自動加深、陰影出現、並自動顯示出小標題。

舉例，在 iOS 13 的設置 APP 中左側主欄目使用了大尺寸標題，背景透明並且不包含陰影。這樣的選擇可以清晰的提示用戶當前 APP 的功能。右側分欄目則使用了普通文字尺寸的導航欄，同樣沒有使用背景色和陰影。

1.5 SF Symbols

SF Symbols 也是今年 WWDC 的一項重大更新。顧名思義 SF Symbols 以字體的形式提供了 iOS 系統的 1500 多個圖形符號，這些符號作為 San Francisco 字體的衍生，能夠與 SF 字體和諧共存。

使用這些符號也非常簡單，可以直接通過鍵盤敲出來。

每個符號包含了大、中、小三種尺寸（以當前字型大小為參考）和九種字重（與 SF 字體一致）。

SF Symbols 也具有了字體的矢量特性，能夠連續放大和縮小。

當系統中的加粗顯示輔助功能被打開時，SF Symbol 也會隨著字體的加粗而加粗。

蘋果提供了一款用於瀏覽 SF Symbols 的 Mac App。使用時只需找到需要用的符號、複製名稱，然後在 Sketch 的屬性面板中粘貼複製的名稱即可。

2 模態展示 Modal Presentations

模態通常也被叫做面板（Sheets），從頁面下方向上劃入，提示用戶進入了新的模塊。在 iOS 13 中，模態面板啟用了新的卡片樣式，並且在系統中廣泛受用。

模態面板進入的同時，原有的頁面會下沉。模態面板升到最高處不會佔滿整個頁面，而是會露一小部分下方內容，提示用戶當前正處在模態狀態。

模態面板可以通過滑動操作上下拖動以及關閉。基於手勢的交互適用於單手操作。

當模態面板中出現滑動內容時，向下滑動首先會將內容滑動到開頭。

內容滑到開頭後繼續下滑操作可關閉面板。

直接向下拖動上方導航條或點擊關閉按鈕可關閉模態面板。

向下拉動可關閉面板這一屬性可設置為禁用，以防止特殊情況不需要該效果。例如，當該頁面需要用戶作出選擇時，可關閉該屬性。關閉後用戶仍可以對該面板進行下拉操作，當動作結束後面板不會關閉，而是彈回原來位置。

另外一種情況，如果想要保留下拉關閉這一操作，同時又需要用戶作出選擇時，可以結合 ActionSheet 來提示用戶作操作。

蘋果官方要求模態面板需要保留關閉按鈕，雖然操作上這個按鈕不作為主要交互對象。但這個按鈕可以作為提示用戶該頁面可以被關閉的符號存在。另外則是處於輔助功能的考慮。

模態面板也不是萬能的。在某些情況下，例如在圖片編輯狀態還是要儘可能的為用戶操作提供足夠的空間。這種情況更適合使用全屏展示（Fullscreen Presentation）。

最後，不要濫用模態展示。模態展示的目的是用來在兩種模式狀態下進行切換，不要因為個人喜好而隨意使用。

舉例，日曆 APP 包含了一個很好的模態面板應用場景。這個 APP 包含了兩個主線頁面。一個為日曆主頁，用來顯示日曆預覽。另外一個為子頁面，用來顯示某一事件的詳細內容。當對自頁面的內容進行修改時，日曆 APP 啟用了模態面板來承載相關內容。這樣做可以讓用戶感更清晰的感受到所處的狀態發生了變化。

3 情景菜單（Contextual Menu）

iOS 13 引入的情景菜單衍生自現有的 3D Touch 菜單。交互方式從重壓調整為長按，這使得該功能夠支持所有 iOS 設備。情景菜單的概念與 PC 上的「右鍵菜單」概念高度一致。都是為了承載對某一對象的命令或操作。

情景菜單包含命令（Commands）和預覽（Preview，可選）兩個部分。情景菜單的布局可根據設備類型自動調整。

情景菜單出現在被操作對象的正上方，或距離最近的位置。菜單的順序可調整，建議將最常用命令放到最上方。菜單內可使用分割線。也可使用圖標來加強提示。

資源鏈接

SF Symbol - Download SF Symbols beta

iOS 色卡及組件資源（Sketch 格式）- https://developer.apple.com/design/downloads/iOS-13-Sketch.dmg

SF Symbol 、iOS、watchOS、macOS、tvOS 等更多設計資源都可以在下邊鏈接找到

Apple Design Resources?

developer.apple.com

（完）

推薦閱讀：