@C7210?：在今年 WWDC 期間看到一些設計方面的分會視頻，便萌生出要做這樣的中文圖文版本。其實過去每年的 DC 分會都有幾場不錯的設計主題演講，印象中 2017 年的基礎設計原則專題，以及 2014 年的快速原型專題等等，都非常值得學習。

或許是因為 WWDC 分會視頻的獲取成本較高，且多是缺乏字幕的英文原聲，所以一直以來沒見到太多同學在關注，也蠻遺憾的。現在我來推一下好了，就從今年的開始。

其實近來也看到有朋友在做關于這場分會的內容，不過更像是要點提煉。演講者在內容的骨骼之間填充了很多有價值的細節信息，不僅關于「how」，更在于「why」。我會把所有這些內容都涵蓋進來，盡可能還原完整的現場。

本場演講人是 Apple Design Evangelist 團隊的 Mike Stern，話題涉及「深色模式」、「卡片視圖」和「情境菜單」三大方面。由于整體篇幅較長，我們在本期首先聚焦于「深色模式」。Mike 從設計體系、顏色、材質、系統控件、SF Symbols 等若干方面的新變化入手，對「深色模式」相關主題進行了從內到外的詳細詮釋。

隨著 iOS 13 的到來，我們設計和開發 app 的方式將會發生細微而又重大的變化。

深色模式將改變我們對顏色、圖標圖形及文字內容的處理方式。

新的卡片風格面板將會改變模態視圖的默認呈現方式及操作方法。

新的情境菜單可以幫助用戶快速訪問與當前內容相關的情境化功能選項。

接下來，我們將圍繞這三個主題進行詳細的探索。首先來看深色模式。

去年，我們為 macOS 帶來了深色模式，受到了人們的歡迎。其實多年以來，影像視頻類產品通常都在使用深色界面，以幫助用戶更清晰地聚焦于內容本身。

深色界面非常適合于光線條件較暗的環境，因為我們的眼睛能夠更加輕松地在界面與周圍的環境之間進行切換。此外，出于個人喜好，很多用戶也更加傾向于使用深色界面。

iOS 中的深色模式使用純黑色作為背景色，為文字內容及其他前景元素提供最高對比度。此外，純黑背景色在視覺效果上可以和設備框體無縫融合，使整個界面看起來更加開闊，仿佛與硬件融為一體。

一般而言，所有 app 都應該支持深色模式。當人們將系統切換為深色模式之后，自然會期望每一個 app 的外觀都隨之進行改變。

關于 iOS Design System

深色模式的設計適配涉及到整個 iOS 設計體系的進化。目前，iOS 設計體系已經面向 iOS 13 進行了全面的翻新。這里簡單詮釋一下，所謂「設計體系」，大體是指以符合特定邏輯及一致性的方式整合在一起的一系列界面組成元素，包括顏色、字體、圖形等等。一套合理、一致的設計體系將有助于你構建出更加易學易用的 app。基于 iOS 設計體系構建的 app 自然能使 iOS 用戶感到熟悉易懂。

在進入正題之前，我還想和各位分享我們的設計團隊在 iOS 設計體系翻新過程中的一些主要設計目標。

首先，也是最首要的，我們希望 iOS 依然能夠保持人們所熟悉的樣子，并符合長久以來的操作直覺。

我們希望 iOS 具備更好的內部一致性。所有的內置 app 都已進行重設計，以保持彼此之間的統一。期間所運用到的新設計特性也正是我們在接下來的正題當中將要進行了解的。

我們希望新的設計體系能夠提供一系列的顏色選項，以便構建更加清晰的信息層級，使最重要的元素得以突顯，而次要元素則適度弱化。

我們還將可訪問性（accessibility）放在了和其他設計目標同等重要的位置，新系統將全面支持「輔助功能」設置中的「粗體文本」與「增強對比度」模式。

最后，我們希望新的設計體系足夠簡單直白，易于實施。

下面進入正題，讓我們一起對深色模式進行深入的了解。

顏色

每個 app 都有背景視圖，同時絕大多數 app 會提供文字內容與圖標。很多 app 還會通過分隔線與分組容器來組織內容。

我們會很自然地通過色值對這些元素的顏色進行定義，例如字色是純黑，背景是純白等等。隨著界面復雜度的提升，色盤也會相應地進行擴展，但通常不會出現什么大問題。

然而，要同時適配深、淺兩種外觀模式，你就必須管理兩套完整的顏色方案，并確保它們之間始終保持同步。這種情況下，我們需要以更加抽象的方式來思考和管理顏色體系。為此，我們引入了「語義化顏色」的概念。

語義化顏色通過「用途」對顏色進行定義描述，而非通過具體色值。「用途」的概念具有動態性，可以脫離于具體的表現樣式而獨立存在。譬如，一個「背景色」，在深色模式當中可以指代黑色，而在淺色模式當中可以指代白色。

因此，相比于自己維護兩套獨立的配色，你現在完全可以使用系統內置的語義化顏色方案，來確保你的界面可以自動適配深、淺兩種外觀模式，這會非常方便。

iOS 13 內置了一整套語義化顏色供你使用，其中多數顏色都擁有「一級」至「四級」梯度，這些變量主要用于構建信息層級。例如「文本色」（LabelColor）是一級字色，可以提供最高的對比度，主要用于最為重要的內容元素，如內容的主標題。而「二級文本色」（SecondaryLabelColor）可以用于副標題，「三級文本色」（TertiaryLabelColor）用于輸入框占位符文本，「四級文本色」（QuaternaryLabelColor）用于禁用狀態的文本。

對于背景色來說也是同理。「系統背景色」（SystemBackground）是一級背景色，在淺色模式當中指代白色，在深色模式當中則指代黑色。「二級系統背景色」和「三級系統背景色」則用于構建更豐富的背景層級。

此外還有一組背景色專門用于列表視圖（SystemGroupedBackground）。仔細觀察下圖，你會發現，深、淺兩種模式當中的列表視圖，在背景色的使用上并非簡單的反色。在兩種模式中，列表行的背景色都比界面底色更加明亮，因為我們希望在確保對比度的同時，也能使兩種模式下的界面在感知上更加統一。在設計深色界面時，試著設想光源變暗之后的效應，而非簡單地將所有顏色進行反轉。

此外，系統內置的語義化顏色還包括填充色（FillColor），以及分隔線色（SeparatorColor）。其中，所有的填充色和一種分隔線色采用了半透明效果，以便與各類背景色形成良好的對比度。

系統同時提供了六種完全不透明的灰色供你使用（SystemGrey）。

在那些使用半透明色可能帶來問題的地方，這些灰色將尤其適用。例如在繪制交叉網格時，半透明色會產生重疊效果，干擾人們的視線；如果元素需要疊加放置，那么只有使用實色才能表現出正常樣式。

這些語義化顏色已經被用于新系統中的方方面面，因此我們也鼓勵你在自己的 app 中使用這些顏色。你可以在 Apple Design Resources 與 Human Interface Guidelines 當中查看完整的顏色定義，以便更好地起步。

此外，我們還會繼續提供一系列著色顏色供你使用。這些著色同樣是動態的，能夠針對深、淺模式進行自動調整。

同時，每個著色還擁有高對比度變體，當「輔助功能」設置中的「增強對比度」被開啟后，這組變體將被調用，著色在深色模式中會變得更亮，在淺色模式中會變得更暗。

如果你需要使用定制化的著色，那么同樣要確保它們可以適配于深、淺兩種外觀模式。在淺色模式當中表現良好的顏色，到了深色模式當中可能會產生對比度不足的問題，反之亦然。因此，最好可以通過線上的對比度計算工具來進行精準確認。

由于著色同樣具有動態特性，因此你可以為深、淺兩種模式選擇相似但不同的著色，使各自的對比度達到標準，即 4.5 : 1 或更高。良好的對比度可以提升界面的可訪問性及可用性。

此外，你可能還會用到更多的定制化顏色，例如可以由用戶自主選擇的字色，或是定制化的狀態指示符等等。與著色相仿，這些定制化顏色同樣可以擁有動態特性，因此你仍然可以針對深、淺模式進行細微調整，確保所有顏色在不同模式下都可以提供足夠的對比度。

我們前面一直在講「深色」與「淺色」，然而這只是一種比較簡化的說法。實際上，深色模式的背景色體系還分為「base」和「elevated」兩組，用于構建圖層的層級關系。

當兩個淺色圖層產生疊加時，我們通過投影效果就可以將它們區分開來；然而在深色模式下，這種方式幾乎是無效的。因此，在深色模式當中，同樣使用「SystemBackground」作為背景色的圖層，在視覺上位于「后方」的會采用「base」色值，顏色較深；而位于「前方」的會采用「elevated」色值，顏色較淺。

以聯系人界面為例。在獨立的「聯系人」app 當中，其背景色采用「base」色組，即純黑；然而當同樣的界面以模態視圖的形式出現在「電話」當中時，其背景則會采用「elevated」色組。

我們再來看一個稍復雜些的例子。iPad 當中的「郵件」在獨立狀態下會采用「base」色組作為背景色。當我們喚出「聯系人」作為懸浮窗口時，其背景色會采用「elevated」色組，以便在視覺上表現出懸浮于「郵件」之上的效果。

然而，當「聯系人」與「郵件」多任務并列展示時，它們都會采用「elevated」色組作為背景，以確保窗口之間的分隔空間以及分隔指示符足夠明顯可見。

創建新郵件時的模態視圖同樣采用了「elevated」色組作為背景，但此時，后面的「郵件」主界面的背景色會稍許變深，因為模態視圖會為后面的圖層添加一層覆蓋效果，使其變暗。

因此，你在為深色模式進行設計時，也要考慮到背景色可能隨著層級升降而產生的明暗變化，并進一步考量前景元素的顏色對比度是否恰當。同時我們還要再次強調半透明填充色和分隔線色的重要性，因為它們可以靈活適應于「base」與「elevated」兩組背景色。

材質

下面來看材質（materials）。

iOS 13 的材質體系發生了很大變化。現在，你可以從「thick」、「regular」、「thin」和「ultra-thin」這四種透明度不同的材質當中進行自由選擇，它們都能良好適配于不同的背景環境。

同時，它們的外觀還會隨著深、淺模式的切換而自動調整。

你可以根據自己的實際設計需求而選擇使用哪種厚度的材質。其中，「regular」是系統默認的材質，適用于絕大多數的界面環境。

如果需要為內容提供更高的對比度，你也可以選擇更厚的材質。

如需承載輕量級的操作，或是較為簡單的內容，那么「thin」或「ultra-thin」更加適合。材質的選擇取決于其所承載的內容的特質。

說到內容，深、淺兩種模式下的每一種材質都為其可能承載的內容提供了恰當的虛化透明效果（vibrancy）。這是一種在 iOS 及 Apple 其他平臺當中被廣泛采用的視覺效果。

相比于實色元素來說，具有虛化透明效果的內容更加適用于系統提供的材質。當材質背后的背景色發生變化，實色內容很可能與材質產生混溶，因而帶來嚴重的可讀性問題；而具有虛化效果的內容則能始終保持恰當的對比度。

系統控件

新的 iOS 設計體系同樣涉及到系統控件的翻新，包括形狀與顏色的變化，從而達到更高的內部一致性。

經過語義化顏色重繪的系統控件可以良好地適配于深、淺兩種模式。因此，使用系統提供的 UIKit，你無需付出任何開發成本便能實現深色模式的自動適配。重新創建控件來代替系統控件，這不僅需要花費大量的時間，同時也難以具備自動適配等一系列優點。

當然，在很多時候，定制化的控件也是必需的；UIKit 畢竟難以滿足所有的設計需求。譬如，UIKit 并沒有提供星級打分控件。當你自行設計時，應該使用系統提供的顏色方案，這樣就無需針對深、淺模式單獨進行管理了。

導航欄也進行了升級。默認狀態下的大標題導航欄不再有背景色和投影效果，因而標題能夠與內容區域無縫銜接。當內容在導航欄底部進行滾動時，導航欄的背景色與投影效果則會淡入呈現。

這種處理邏輯同樣可以用于默認的小導航欄。例如在 iPad 的「設置」當中，主導航欄與右側標準導航欄都使用了無背景、無投影的樣式。

無縫銜接的導航欄看上去不錯，但也并非在任何時候都適用。由于其背景是全透明的，任何位于下方的內容都會直接呈現出來。此外，如果界面當中的控件元素較多，信息密度較大，那么你應該在導航欄底部保留原本的投影效果，從而形成明確的區隔感。

SF Symbols

一直以來，iOS 都會提供一系列圖標符號，用于列表行或底部工具欄等處。然而在深色模式當中，過去的圖標表現得有些差強人意，因為它們看上去太過纖細了。

于是，我們的設計團隊重新設計了所有的圖標。更酷的是，我們將它們制成了 SF Symbols 供各位使用。

SF Symbols 當中包含了超過 1500 個圖標。這不僅是一套全新的圖標集，同時更代表了設計和使用圖標的全新思路。顧名思義，SF Symbols 正是為了配合 San Francisco 字體的視覺特性所設計的。

這些圖標可以像文本字符一樣被輸入，因此能夠與文字同時呈現在一行當中。它們擁有內嵌基線，以確保與文字保持恰當的縱向對齊。

每一個 SF Symbol 都針對當前字號提供了小（small）、中（medium）、大（large）三種縮放變體，以適應不同的界面環境。

同時，與 San Francisco 相對應，每一個 SF Symbol 都提供了九種不同的字重。

SF Symbols 的矢量特性可以確保其能夠配合動態字體功能（dynamic type）實現自由縮放。

同時，由于提供了多種字重，當「輔助功能」設置中的「粗體文本」被開啟后，SF Symbols 也會自動呈現粗體樣式。

在設計界面時，你可以通過新的 SF Symbols app 找到所需要的圖標，直接復制，然后粘貼到設計稿里的文本圖層當中即可。

更新過的 iOS Apple Design Resources Sketch 文件已經全面支持 SF Symbols。譬如，要想更換 tab bar 中的圖標，你只需選中 tab bar，將 SF Symbol 粘貼到右側檢查器面板的特定字段當中，即可實現覆寫。這項功能我個人已經使用了幾個月，這真的會改變我們一直以來的設計方式。

如果這 1500 多個圖標仍然難以滿足你的全部需求，你還可以將某個 SF Symbol 導出成 SVG 格式，然后到 Illustrator 或 Sketch 當中進行定制化修改。保存后的 Symbol 同樣具備上述的一切功能特性。

歡迎關注作者的微信公眾號：「Beforweb」