WWDC 大會開幕,我們準備了一份「深色模式」設計要點 - 優設網 - UISDC

WWDC 大會開幕,我們準備了一份「深色模式」設計要點

2019/06/04 13882評論 6

深色模式最近突然成為了一個時髦的詞匯,蘋果去年在 macOS 10.14 上加入了 Dark Mode,Android 系的廠商近來也紛紛加入支持,Google 在今年的 Android P 當中也正式推出了自己的深色模式。WWDC 大會上 iOS 13 正式引入 Dark Mode,深色模式已經成為大勢所趨,而這對我們 UI 設計師又意味著什么呢?

為什么我們需要深色模式?

由于電子設備的屏幕是主動發光式的,它們發出的光線會比我們生活中接觸的物品更具刺激性,而深色模式可以顯著降低屏幕的整體視覺亮度,減少眼睛的視覺壓力。在深色模式下,所有的界面元素都退居幕后,使得我們真正與之交互和操作的內容可以被凸顯出來,這也是為什么眾多專業的圖像、視頻等編輯軟件普遍采用深色界面作為默認外觀。其實深色模式不僅僅可以被那些專業生產力工具所用,對任何想要追求專注和沉浸式使用體驗的用戶來說,深色模式都將會使他們獲益匪淺。

同時隨著 OLED 屏幕的普及,支持深色模式更有了一定的現實意義:省電。由于 OLED 屏幕中每個像素都是自主發光而非 LCD 由整個一塊背光面板發光,所以在顯示深色元素時像素所消耗的電流更低,在純黑色下像素點可以完全關閉達到省電的效果。

Youtube 同一界面深淺兩種模式下屏幕的電流對比,可以看到同樣的界面,最高亮度下深色模式降低了 60% 的耗電量。

除此以外深色模式如此備受廠商熱衷的另一個原因是酷炫。我們在科幻電影中看到的頗具未來感的概念界面多數都是以深色為主,這也潛移默化地影響了我們的審美。同時自從扁平化風潮流行起來以后,千篇一律的素白界面也很容易讓用戶產生審美疲勞,對與各家系統 OS 廠商來說,增加一個系統全局性的深色模式可以無需對 UI 進行大刀闊斧改革的同時達到讓用戶耳目一新的效果,這一點對于你自己的 App 來說也是一樣的。

Dark Mode不是夜間模式

很多國內的 App 總是把深色模式理解為夜間模式,認為用戶在夜間喜歡更暗更低對比度的界面,然而這陷入了一個誤區,用戶確實需要夜間使用不刺眼的界面,但達到這一目的并不意味著需要放棄對比度。其實在深色模式下當頁面的背景由白色反轉為黑灰色時,我們已經極大減少了電子屏幕發出的光亮,而配合設備的環境光傳感器自動亮度調節已經可以使界面整體的亮度滿足用戶在暗光環境下的使用。而且系統級的深色模式下,各個 App 之間保持相對統一的對比度對用戶的實際體驗也更好,否則當下的很多 App 夜間模式由于對比度太低用戶看不清文字,反倒不得不調高屏幕亮度,而一旦跳到其他沒有夜間模式的 App 更是會被亮瞎眼。

另外前面已經提到,用戶使用深色模式的理由有很多,在暗光環境下減少視覺疲勞只是其中一種,即使在白天很多用戶也會長期打開深色模式。這意味著在深色模式下你的界面設計依然必須考慮可讀性,依然需要滿足 WCAG 2.0(Web內容可訪問性指南)中規定的 AA 級標準,即最低 4.5:1 的對比度。

WCAG 中對對比度的標準可以很好地幫助設計師檢查自己設計界面的可讀性,尤其是對于那些本來就患有視力障礙的用戶來說,低于 AA 級標準 4.5:1 對比度的正文可讀性非常差。我們可以使用色彩對比度計算器來檢查自己的配色是否符合 AA 級標準。

Color Review色彩對比度檢查工具

網站鏈接:https://color.review/check/293845-FFFFFF

Dark Mode并非簡單的反色處理

iOS 目前已經在設置里提供一個叫做智能反轉的選項,可以把除媒體以外的界面元素顏色按其對比色全部自動反轉,但實際效果卻差強人意。因為深色模式并非對淺色界面的簡單反轉,如淺色界面下的深色陰影,在深色模式下該如何處理呢?直接反色成為淺色光暈嗎?然而這樣做會打破 UI 原有的視覺層級和空間感。如果使用與淺色模式下相同的陰影,在深色模式往往又達不到足夠的層次感。這些問題都需要我們在深色模式下采用一套新的視覺設計規范,由于 iOS 目前還沒有關于深色模式的設計規范,但 Google 在 Android P 推出后,在 Material Design 官網上已經更新了他們在設計深色模式時的一整套設計規范,并且蘋果在 macOS 的視覺規范中也已經更新了深色模式相關的內容,這些都可以成為我們的參考,為 iOS 即將到來的深色模式做好準備。在這里我整理了各家視覺規范中的一些要點。

界面層級

作為 UI 設計師我們都知道 UI 中視覺層級的重要性,那么在深色模式下如何確保視覺層級依然有效呢?Material Design 在淺色模式時使用在白色卡片下投射陰影的形式來模擬現實世界的空間深度感,而在深色模式下,尤其是當背景已經很深時如何表現深度呢?記住一個原則:元素層級越高,其承載面的顏色越淺。

讓我們假想界面上方有一盞光源,離這盞光源越近,界面元素的層級越高,它的表面也將被照得越亮。因此在不同層級間應用不同級別的灰度,可以使界面層級更加突出。使用深灰而不是純黑也可使得陰影更容易發揮作用。

Material Design 中推薦的深色模式默認最低層顏色為 #121212,而在這之上的層級則使用不同透明度的白色透明層遮罩獲得層級區分。深色主題的最底層顏色應該達到 15.8:1 的對比度級別,因為這可以確保即使當應用于最高層的表面時,正文文本仍能通過 WCAG 的 AA 標準至少能達到 4.5:1 對比度。

注意事項

不要在深色模式的高層級元素下使用淺色的陰影,因為它看起來更像是光暈。而這會破壞界面的空間結構,真實世界里物體并不會投射比自身顏色更淺的陰影。

部分 App 可能會為使用 OLED 設備的用戶提供純黑底色的界面,以達到更佳的省電效果。但這只是一種可選項,完全使用純黑底會導致界面層級不易表現,很容易限制設計發揮,只有在產品視覺層級非常簡單且明確的情況下可以酌情采用。并且記住對 OLED 屏幕來說在滾動屏幕時像素點頻繁的切換開閉狀態可能會導致一定延遲,造成文字產生拖尾現象。

色彩

深色模式下的色彩需要與背景有足夠的對比度,當用于正文字號時,在任何界面層級中都至少需要保證滿足 WCAG 2.0 AA 級標準,即至少 4.5:1 的對比度。

在淺色模式下我們使用的一般都是高飽和的顏色,然而在深色的背景承載下,這些較為濃重的顏色無法滿足 4.5:1 的最低對比度標準。高飽和的顏色在深色的背景下也容易產生視覺抖動,從而導致人眼疲勞。所以在深色模式下我們應當選擇更低飽和的顏色以達到更好的可讀性。

當前 Google 在 Android P 以及蘋果在 macOS 中都已經加入了在同色系下深淺模式自動適應兩套配色方案的相關 API,在 iOS 13 中蘋果也很可能加入類似的功能。這意味著今后設計師將需要為自己的 App 色板定義深淺兩套方案,在這個語境下一種色彩不再只對應一個色值,每個顏色都將有高飽和和低飽和的兩種版本。開發者應該使用語義化的顏色名稱而不是絕對色值,剩下的就交由系統自動適配吧。

在某些情況下,色彩需要特殊對待。

1. 品牌色

為了保證品牌 VI 的一致性,品牌色可保持原飽和度不變,但對應用范圍應當極其克制,僅限于在個別元素,如品牌 Logo 或品牌性的按鈕上,但界面中的其余部分仍應遵循低飽和的配色規則。

2. 氛圍背景色

如果我們一直采用無色傾的深灰色作為背景,用戶很容易就會感到乏味。我們可以嘗試把品牌色融入到背景中去營造氛圍感,把品牌色用極低的透明度與系統默認的深色模式背景色疊加,得到的結果就可以用來作為氛圍色運用到設計中。但切記,這個氛圍背景色需要足夠暗,才可以保證在最高的層級中依然可以保證滿足 4.5:1 的最低對比度。

Material Design 中推薦作為底層背景的顏色至少需要與文字有 15.8:1 的對比度,才能保證在 MD 規范下最高也是最淺的層級滿足 4.5:1 的最低比對比度標準。

3. 淺色模式下使用大面積色彩的元素

深色模式的界面整體以深色為主,在淺色模式下使用大面積色彩的元素,如導航欄、工具欄等在深色模式下應避免使用彩色,因為在深色模式下這些色彩可能會顯得刺眼,對比過于強烈,破壞深色模式的沉浸感。

4. 深色模式下的提示元素

在淺色模式下我們有時會使用深色的元素,比如 Toast 提示等。在深色模式下為了讓這樣的模塊依然足夠突出,我們可以少量的使用淺色底作為模塊的背景,但僅限于這類面積很小,且需要特別強調的模塊中。

文字

不要在深色模式下使用純白色的文字作為正文,因為深色模式下純白色的對比會非常強烈,很容易造成視覺疲勞。當然為了保證合適的對比度,文字顏色也不宜過淺。推薦的做法是在文字層級上使用透明度,這樣可以使文字與在不同的氛圍背景色上更和諧,或者使用 HSB 模式下調整 B 值的方法確定文字的固定色值。

圖形

在淺色模式下使用的一些線性圖標,如果直接反轉拿到深色界面下來用,你可能會發現圖形的形狀感和體積感都損失了很多,這是因為白色背景可以更好的表現出形狀,人的大腦可以將白色腦補成圖形的一部分。然而在深色模式下,這種作用消失了,人腦更傾向于認為這些空白的部分是鏤空的。所以在深色模式下建議把線性圖標反轉為面性圖標,不過具體的情況可以綜合產品實際的設計風格和深色模式下的具體視覺效果再做判斷。

結語

以上就是為大家總結的深色模式設計中的一些重要的點,在 iOS 13 正式推出系統級的深色模式后,這必然會成為設計師逃不過去的一個坎,當用戶開啟系統全局的深色模式后突然出現一個不支持的 App,你的 App 就會顯得特別刺眼,甚至有些用戶可能會不得不去尋找支持這一模式的替代品。這意味著今后設計過程中設計師們不得不關注兩套模式下的不同效果,確定一套適配規范讓系統自動調整你的 App 外觀,并在某些情況下為部分界面單獨設計,設計組件化在此刻也顯得無比重要了。

由于 iOS 13 還未正式推出,iOS 對深色模式的視覺規范還并不清晰,這篇文章中并不會過多地探究具體的細節,其中提到的很多點都是普適性的概念。在 iOS 13 正式發布后,針對 iOS 的深色模式規范我會帶來更詳細地解讀。

歡迎關注作者的微信公眾號:「朗朗啊夠」

優設大課堂

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

發表評論 加載中....

評論加載中....

uisdc

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

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

您還沒有登錄

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

微信掃碼

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

把好文章收藏到微信

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

有没有菠菜送分的APP 鹤岗市| 成武县| 鄂尔多斯市| 甘孜| 合肥市| 景宁| 襄汾县| 博野县| 柘荣县| 田林县| 龙岩市| 青州市| 平利县| 东阿县| 灌云县| 丰原市| 获嘉县| 永德县| 珠海市| 湛江市| 都昌县| 乐清市| 渭南市| 宜春市| 昆明市| 广东省| 贵溪市| 庆云县| 特克斯县| 太保市| 南阳市| 南和县| 射洪县| 平安县| 扶绥县| 张家口市| 涿鹿县| 扶风县| 宜城市| 茂名市| 合肥市| 苍南县| 桂平市| 汕头市| 遂溪县| 锦州市| 长海县| 南安市| 博客| 平陆县| 林州市| 内乡县| 公安县| 天长市| 中方县| 白玉县| 读书| 蓝山县| 毕节市| 肇州县| 谷城县| 泸水县| 水富县| 宁乡县| 孙吴县| 万州区| 稻城县| 股票| 杭锦旗| 马公市| 双江| 渝中区| 长岭县| 阿坝| 山阳县| 普洱| 翁源县| 新乡县| 剑阁县| 仁怀市| 瑞金市| 合作市| 高碑店市| 玛纳斯县| 永昌县| 和平区| 平阴县| 武义县| 崇明县| 西吉县| 习水县| 炎陵县| 肃南| 进贤县| 巴楚县| 石渠县| 本溪| 富民县| 甘洛县| 绥德县| 大庆市| 永嘉县| 克什克腾旗| 左权县| 水富县| 元氏县| 日喀则市| 宣武区| 诸暨市| 武功县| 雅江县| 安丘市| 平江县| 苏州市| 凤冈县| 比如县| 柏乡县| 琼结县| 长寿区| 文成县| 康乐县| 聂荣县| 瑞丽市| 叶城县| 乳山市| 张家口市| 平乡县| 凌源市| 漳浦县| 红河县| 舞钢市| 衡山县| 天长市| 中卫市| 皋兰县| 望谟县| 沙河市|