·

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

·

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

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

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

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

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

顏色

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

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

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

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

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

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

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

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

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

字色

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

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

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

原文鏈接：《Human Interface Guidelines》

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

·