官方的指南雖然篇幅較短，但更側(cè)重于細(xì)節(jié)層面，仍然可以幫助你在真正上手新系統(tǒng)及深色設(shè)計(jì)之前，對(duì)相關(guān)設(shè)計(jì)原則，特別是顏色的適配機(jī)制與方法進(jìn)行了解。同時(shí)也建議大家觀看本次 WWDC 相關(guān)講解視頻，理解會(huì)更加全面。

從 iOS 13.0 開始，人們可以將系統(tǒng)全局的外觀樣式設(shè)置為深色視覺風(fēng)格，即「深色模式」。在深色模式中，系統(tǒng)會(huì)為所有界面、視圖、菜單、控件等等調(diào)用一套更深的背景色方案，同時(shí)通過(guò)更多的半透明虛化效果使前景內(nèi)容更有效地從深色背景當(dāng)中突顯而出。深色模式同樣支持所有的可訪問性設(shè)計(jì)標(biāo)準(zhǔn)。

人們可以將深色模式設(shè)置為系統(tǒng)的默認(rèn)外觀模式，也可以讓設(shè)備在光照條件較弱的環(huán)境中自動(dòng)切換至深色模式。

聚焦于內(nèi)容。深色模式可以將焦點(diǎn)集中于界面當(dāng)中的內(nèi)容區(qū)域，使內(nèi)容本身得以突顯，而周圍的界面元素則會(huì)隱退于背景之中。

在深色與淺色模式下分別測(cè)試你的界面。在某一種模式當(dāng)中表現(xiàn)良好的設(shè)計(jì)方案，在另一種模式當(dāng)中很可能出現(xiàn)問題。檢視界面在兩種模式下的表現(xiàn)，進(jìn)行必要的調(diào)整，使其能夠良好適配于每一種模式。

確保深色模式下的內(nèi)容在調(diào)整過(guò)系統(tǒng)對(duì)比度和透明度之后依然清晰可讀。在深色模式下，打開系統(tǒng)設(shè)置當(dāng)中的「增強(qiáng)對(duì)比度」和「降低透明度」這兩個(gè)選項(xiàng)，（在分別打開和同時(shí)打開的情況下）測(cè)試內(nèi)容的可讀性，你或許會(huì)發(fā)現(xiàn)一些暗色的文字內(nèi)容在暗色背景上變得不再清晰。在打開「增強(qiáng)對(duì)比度」之后，暗色文字與暗色背景的整體視覺對(duì)比度也可能被降低。視力良好的人或許仍然可以閱讀對(duì)比度較低的文字，但對(duì)于視力有所缺陷的人來(lái)說(shuō)，這樣的文字將難以辨識(shí)。你可以參見「顏色與對(duì)比度」部分了解更多指導(dǎo)原則。

顏色

深色模式的配色方案當(dāng)中包含一系列較深的背景色以及較淺的前景色。這些經(jīng)過(guò)仔細(xì)甄選的顏色可以在確保信息對(duì)比度的同時(shí)，良好地適配于深、淺兩種外觀模式，確保這兩種模式下的視覺感知一致性。

使用能夠適配于當(dāng)前外觀模式的顏色。使用 iOS 13 新引入的語(yǔ)義化顏色（Semantic Colors）的界面元素可以自動(dòng)適配當(dāng)前的外觀模式，例如分隔線。當(dāng)需要定制化的顏色時(shí)，你可以向 app 的素材目錄（Asset Catalog）當(dāng)中添加一套顏色組合，為淺色與深色模式各自定義一組顏色變量，使其能夠根據(jù)用戶當(dāng)前的外觀模式進(jìn)行自動(dòng)適配。避免通過(guò)硬編碼的方式定義具體的色值，否則顏色將不具備自適應(yīng)性。

確保顏色在不同的外觀模式下都具備足夠的對(duì)比度。建議使用系統(tǒng)定義的顏色來(lái)確保前景與背景內(nèi)容之間具備足夠的對(duì)比度。對(duì)于定制化的顏色，要確保其對(duì)比度達(dá)到 7:1，特別是對(duì)于小號(hào)文字而言。你可以參見「動(dòng)態(tài)系統(tǒng)顏色」部分了解更多指導(dǎo)原則。

柔化白色背景。如果你必須在深色模式下使用白色背景來(lái)承載內(nèi)容，可以選擇稍暗一些的白色（淺灰色），防止其在深色的界面環(huán)境中產(chǎn)生外發(fā)光效應(yīng)。你可以參見「顏色」部分了解更多指導(dǎo)原則。

圖片、圖標(biāo)與圖形符號(hào)的顏色

iOS 13 使用 SF Symbols 字體圖形符號(hào)，可以自動(dòng)與深色模式進(jìn)行良好地適配；而系統(tǒng)自帶的全彩色圖片也面向深、淺兩種外觀模式進(jìn)行了優(yōu)化。

盡可能使用 SF Symbols 圖形符號(hào)作為圖標(biāo)。無(wú)論你通過(guò)系統(tǒng)定義的動(dòng)態(tài)顏色對(duì)其進(jìn)行著色，還是使用半透明虛化效果，這些圖形都可以自動(dòng)面向兩種外觀模式進(jìn)行適配。

需要定制化圖標(biāo)時(shí)，面向深、淺兩種外觀模式各自提供一套素材。在淺色模式下，空心圖標(biāo)相比于實(shí)色圖標(biāo)更易識(shí)別；在深色模式下，情況則反之。

確保全彩色圖片、圖標(biāo)的適配性。如果這些圖形素材在深、淺兩種外觀模式下均有著良好的表現(xiàn)，那么僅提供一套素材即可。如果素材只能適用于其中一種外觀模式，那么，要么對(duì)其進(jìn)行修改以提升適配性，要么另行創(chuàng)建一套素材用于另一種外觀模式。使用素材目錄將所有素材合并成為單一的圖形。

字色

半透明虛化效果有助于在深色背景當(dāng)中保持文字的良好對(duì)比度。

為文本標(biāo)簽（Label）使用系統(tǒng)提供的相應(yīng)顏色。一級(jí)、二級(jí)、三級(jí)、四級(jí)文本標(biāo)簽色均可以自動(dòng)適配于深、淺兩種外觀模式。你可以參見「排版」部分了解更多指導(dǎo)原則。

使用系統(tǒng)提供的視圖控件來(lái)實(shí)現(xiàn)文本輸入框（Text Field）和文本視圖（Text View）。系統(tǒng)提供的視圖與控件可以使文字在任何背景之上都具有良好的表現(xiàn)，并能根據(jù)半透明虛化效果的有無(wú)而進(jìn)行自動(dòng)調(diào)整。在可以調(diào)用系統(tǒng)提供的視圖與控件的情況下要避免自行繪制。你可以參見「UITextField」與「UITextView」部分了解更多指導(dǎo)原則。

原文鏈接：《Human Interface Guidelines》

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