iOS 13 官方設計指南:深色模式篇中文版 - 優設網 - UISDC

iOS 13 官方設計指南:深色模式篇中文版

2019/06/16 7012評論區

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

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

人們可以將深色模式設置為系統的默認外觀模式,也可以讓設備在光照條件較弱的環境中自動切換至深色模式。

聚焦于內容。深色模式可以將焦點集中于界面當中的內容區域,使內容本身得以突顯,而周圍的界面元素則會隱退于背景之中。

在深色與淺色模式下分別測試你的界面。在某一種模式當中表現良好的設計方案,在另一種模式當中很可能出現問題。檢視界面在兩種模式下的表現,進行必要的調整,使其能夠良好適配于每一種模式。

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

顏色

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

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

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

柔化白色背景。如果你必須在深色模式下使用白色背景來承載內容,可以選擇稍暗一些的白色(淺灰色),防止其在深色的界面環境中產生外發光效應。你可以參見「顏色」部分了解更多指導原則。

圖片、圖標與圖形符號的顏色

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

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

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

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

字色

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

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

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

原文鏈接:《Human Interface Guidelines》

歡迎關注譯者的微信公眾號:「Beforweb」

優設大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.wydhjd.tw/dark-mode-design-guideline

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計師 扁平化設計 版式設計 交互設計師 界面設計 排版布局 職場 優設專訪 優設大課堂 配色 視覺設計 web前端開發 素材下載 設計流程 AI教程 設計理論 神器下載 字體下載 設計師專訪 psd下載 平面設計 用戶體驗設計 設計趨勢 設計規范 海報設計 動效設計 圖標設計 logo設計 產品設計 ICON 神器推薦 App設計 職場規劃 字體設計 酷站推薦 交互設計 ui設計 設計師職場 優秀網頁設計 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

94期香港马会三肖中特