圖解WWDC 設(shè)計(jì)分會：iOS 13 設(shè)計(jì)新特性（1）

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

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

其實(shí)近來也看到有朋友在做關(guān)于這場分會的內(nèi)容，不過更像是要點(diǎn)提煉。演講者在內(nèi)容的骨骼之間填充了很多有價(jià)值的細(xì)節(jié)信息，不僅關(guān)于「how」，更在于「why」。我會把所有這些內(nèi)容都涵蓋進(jìn)來，盡可能還原完整的現(xiàn)場。

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

隨著 iOS 13 的到來，我們設(shè)計(jì)和開發(fā) app 的方式將會發(fā)生細(xì)微而又重大的變化。

深色模式將改變我們對顏色、圖標(biāo)圖形及文字內(nèi)容的處理方式。

新的卡片風(fēng)格面板將會改變模態(tài)視圖的默認(rèn)呈現(xiàn)方式及操作方法。

新的情境菜單可以幫助用戶快速訪問與當(dāng)前內(nèi)容相關(guān)的情境化功能選項(xiàng)。

接下來，我們將圍繞這三個(gè)主題進(jìn)行詳細(xì)的探索。首先來看深色模式。

去年，我們?yōu)?macOS 帶來了深色模式，受到了人們的歡迎。其實(shí)多年以來，影像視頻類產(chǎn)品通常都在使用深色界面，以幫助用戶更清晰地聚焦于內(nèi)容本身。

深色界面非常適合于光線條件較暗的環(huán)境，因?yàn)槲覀兊难劬δ軌蚋虞p松地在界面與周圍的環(huán)境之間進(jìn)行切換。此外，出于個(gè)人喜好，很多用戶也更加傾向于使用深色界面。

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

一般而言，所有 app 都應(yīng)該支持深色模式。當(dāng)人們將系統(tǒng)切換為深色模式之后，自然會期望每一個(gè) app 的外觀都隨之進(jìn)行改變。

關(guān)于 iOS Design System

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

在進(jìn)入正題之前，我還想和各位分享我們的設(shè)計(jì)團(tuán)隊(duì)在 iOS 設(shè)計(jì)體系翻新過程中的一些主要設(shè)計(jì)目標(biāo)。

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

我們希望 iOS 具備更好的內(nèi)部一致性。所有的內(nèi)置 app 都已進(jìn)行重設(shè)計(jì)，以保持彼此之間的統(tǒng)一。期間所運(yùn)用到的新設(shè)計(jì)特性也正是我們在接下來的正題當(dāng)中將要進(jìn)行了解的。

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

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

最后，我們希望新的設(shè)計(jì)體系足夠簡單直白，易于實(shí)施。

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

顏色

每個(gè) app 都有背景視圖，同時(shí)絕大多數(shù) app 會提供文字內(nèi)容與圖標(biāo)。很多 app 還會通過分隔線與分組容器來組織內(nèi)容。

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

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

語義化顏色通過「用途」對顏色進(jìn)行定義描述，而非通過具體色值。「用途」的概念具有動態(tài)性，可以脫離于具體的表現(xiàn)樣式而獨(dú)立存在。譬如，一個(gè)「背景色」，在深色模式當(dāng)中可以指代黑色，而在淺色模式當(dāng)中可以指代白色。

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

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

對于背景色來說也是同理。「系統(tǒng)背景色」（SystemBackground）是一級背景色，在淺色模式當(dāng)中指代白色，在深色模式當(dāng)中則指代黑色?！付壪到y(tǒng)背景色」和「三級系統(tǒng)背景色」則用于構(gòu)建更豐富的背景層級。

此外還有一組背景色專門用于列表視圖（SystemGroupedBackground）。仔細(xì)觀察下圖，你會發(fā)現(xiàn)，深、淺兩種模式當(dāng)中的列表視圖，在背景色的使用上并非簡單的反色。在兩種模式中，列表行的背景色都比界面底色更加明亮，因?yàn)槲覀兿Ｍ诖_保對比度的同時(shí)，也能使兩種模式下的界面在感知上更加統(tǒng)一。在設(shè)計(jì)深色界面時(shí)，試著設(shè)想光源變暗之后的效應(yīng)，而非簡單地將所有顏色進(jìn)行反轉(zhuǎn)。

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

系統(tǒng)同時(shí)提供了六種完全不透明的灰色供你使用（SystemGrey）。

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

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

此外，我們還會繼續(xù)提供一系列著色顏色供你使用。這些著色同樣是動態(tài)的，能夠針對深、淺模式進(jìn)行自動調(diào)整。

同時(shí)，每個(gè)著色還擁有高對比度變體，當(dāng)「輔助功能」設(shè)置中的「增強(qiáng)對比度」被開啟后，這組變體將被調(diào)用，著色在深色模式中會變得更亮，在淺色模式中會變得更暗。

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

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

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

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

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

以聯(lián)系人界面為例。在獨(dú)立的「聯(lián)系人」app 當(dāng)中，其背景色采用「base」色組，即純黑；然而當(dāng)同樣的界面以模態(tài)視圖的形式出現(xiàn)在「電話」當(dāng)中時(shí)，其背景則會采用「elevated」色組。

我們再來看一個(gè)稍復(fù)雜些的例子。iPad 當(dāng)中的「郵件」在獨(dú)立狀態(tài)下會采用「base」色組作為背景色。當(dāng)我們喚出「聯(lián)系人」作為懸浮窗口時(shí)，其背景色會采用「elevated」色組，以便在視覺上表現(xiàn)出懸浮于「郵件」之上的效果。

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

創(chuàng)建新郵件時(shí)的模態(tài)視圖同樣采用了「elevated」色組作為背景，但此時(shí)，后面的「郵件」主界面的背景色會稍許變深，因?yàn)槟B(tài)視圖會為后面的圖層添加一層覆蓋效果，使其變暗。

因此，你在為深色模式進(jìn)行設(shè)計(jì)時(shí)，也要考慮到背景色可能隨著層級升降而產(chǎn)生的明暗變化，并進(jìn)一步考量前景元素的顏色對比度是否恰當(dāng)。同時(shí)我們還要再次強(qiáng)調(diào)半透明填充色和分隔線色的重要性，因?yàn)樗鼈兛梢造`活適應(yīng)于「base」與「elevated」兩組背景色。

材質(zhì)

下面來看材質(zhì)（materials）。

iOS 13 的材質(zhì)體系發(fā)生了很大變化?，F(xiàn)在，你可以從「thick」、「regular」、「thin」和「ultra-thin」這四種透明度不同的材質(zhì)當(dāng)中進(jìn)行自由選擇，它們都能良好適配于不同的背景環(huán)境。

同時(shí)，它們的外觀還會隨著深、淺模式的切換而自動調(diào)整。

你可以根據(jù)自己的實(shí)際設(shè)計(jì)需求而選擇使用哪種厚度的材質(zhì)。其中，「regular」是系統(tǒng)默認(rèn)的材質(zhì)，適用于絕大多數(shù)的界面環(huán)境。

如果需要為內(nèi)容提供更高的對比度，你也可以選擇更厚的材質(zhì)。

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

說到內(nèi)容，深、淺兩種模式下的每一種材質(zhì)都為其可能承載的內(nèi)容提供了恰當(dāng)?shù)奶摶该餍Ч╲ibrancy）。這是一種在 iOS 及 Apple 其他平臺當(dāng)中被廣泛采用的視覺效果。

相比于實(shí)色元素來說，具有虛化透明效果的內(nèi)容更加適用于系統(tǒng)提供的材質(zhì)。當(dāng)材質(zhì)背后的背景色發(fā)生變化，實(shí)色內(nèi)容很可能與材質(zhì)產(chǎn)生混溶，因而帶來嚴(yán)重的可讀性問題；而具有虛化效果的內(nèi)容則能始終保持恰當(dāng)?shù)膶Ρ榷取?/p>

系統(tǒng)控件

新的 iOS 設(shè)計(jì)體系同樣涉及到系統(tǒng)控件的翻新，包括形狀與顏色的變化，從而達(dá)到更高的內(nèi)部一致性。

經(jīng)過語義化顏色重繪的系統(tǒng)控件可以良好地適配于深、淺兩種模式。因此，使用系統(tǒng)提供的 UIKit，你無需付出任何開發(fā)成本便能實(shí)現(xiàn)深色模式的自動適配。重新創(chuàng)建控件來代替系統(tǒng)控件，這不僅需要花費(fèi)大量的時(shí)間，同時(shí)也難以具備自動適配等一系列優(yōu)點(diǎn)。

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

導(dǎo)航欄也進(jìn)行了升級。默認(rèn)狀態(tài)下的大標(biāo)題導(dǎo)航欄不再有背景色和投影效果，因而標(biāo)題能夠與內(nèi)容區(qū)域無縫銜接。當(dāng)內(nèi)容在導(dǎo)航欄底部進(jìn)行滾動時(shí)，導(dǎo)航欄的背景色與投影效果則會淡入呈現(xiàn)。

這種處理邏輯同樣可以用于默認(rèn)的小導(dǎo)航欄。例如在 iPad 的「設(shè)置」當(dāng)中，主導(dǎo)航欄與右側(cè)標(biāo)準(zhǔn)導(dǎo)航欄都使用了無背景、無投影的樣式。

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

SF Symbols

一直以來，iOS 都會提供一系列圖標(biāo)符號，用于列表行或底部工具欄等處。然而在深色模式當(dāng)中，過去的圖標(biāo)表現(xiàn)得有些差強(qiáng)人意，因?yàn)樗鼈兛瓷先ヌ^纖細(xì)了。

于是，我們的設(shè)計(jì)團(tuán)隊(duì)重新設(shè)計(jì)了所有的圖標(biāo)。更酷的是，我們將它們制成了 SF Symbols 供各位使用。

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

這些圖標(biāo)可以像文本字符一樣被輸入，因此能夠與文字同時(shí)呈現(xiàn)在一行當(dāng)中。它們擁有內(nèi)嵌基線，以確保與文字保持恰當(dāng)?shù)目v向?qū)R。

每一個(gè) SF Symbol 都針對當(dāng)前字號提供了?。╯mall）、中（medium）、大（large）三種縮放變體，以適應(yīng)不同的界面環(huán)境。

同時(shí)，與 San Francisco 相對應(yīng)，每一個(gè) SF Symbol 都提供了九種不同的字重。

SF Symbols 的矢量特性可以確保其能夠配合動態(tài)字體功能（dynamic type）實(shí)現(xiàn)自由縮放。

同時(shí)，由于提供了多種字重，當(dāng)「輔助功能」設(shè)置中的「粗體文本」被開啟后，SF Symbols 也會自動呈現(xiàn)粗體樣式。

在設(shè)計(jì)界面時(shí)，你可以通過新的 SF Symbols app 找到所需要的圖標(biāo)，直接復(fù)制，然后粘貼到設(shè)計(jì)稿里的文本圖層當(dāng)中即可。

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

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

歡迎關(guān)注作者的微信公眾號：「Beforweb」