如何用 5 個步驟,快速設計出優秀的深色模式?

摘要:深色主題是應用界面設計的最新趨勢。MacOS 去年推出了深色主題模式后,Android 和 iOS 也緊隨其后,推出了各自的深色主題模式。 曾經罕見的深色主題現已受到大眾的廣泛期待。 如果設計得當,深色主題可以帶來諸多好處,可以緩解視疲勞,弱光下更易讀。而且,根據屏幕的不同,可以大大減少電池消耗。 然而,想要設計一套出色的深色主題并非易事,不能只是簡單地重復 ...

深色主題是應用界面設計的最新趨勢。MacOS 去年推出了深色主題模式后,Android 和 iOS 也緊隨其后,推出了各自的深色主題模式。

曾經罕見的深色主題現已受到大眾的廣泛期待。

如果設計得當,深色主題可以帶來諸多好處,可以緩解視疲勞,弱光下更易讀。而且,根據屏幕的不同,可以大大減少電池消耗。

然而,想要設計一套出色的深色主題并非易事,不能只是簡單地重復使用顏色或反轉色調。如果這樣做,效果將適得其反:加重視疲勞,弱光下更難閱讀,甚至可能打破界面的信息層次結構。

這篇文章主要將說明如何設計可讀、均衡和出色的深色主題。

深暗淺明

大多數深色主題的 UI 設計都遵循這一原則:深層界面更暗,淺層界面略亮。這模擬了從上方投射光線的環境,帶來熟悉且令人安心的物理效果。

在進行深色主題設計時,很容易就會通過反轉淺色主題來實現效果。然而,這樣做反而會使底層變亮,而表層變暗。這有悖于物理規律,會讓人感覺不自然。

與以上方法不同,我們應該從淺色主題的主界面取色,反轉此顏色,以獲得深色主題的主界面顏色。然后在近表層調亮這種顏色,在底層調暗這種顏色。

在 Superhuman,我們的深色主題是由五種灰色陰影構成的。表層界面使用較淺的灰色;底層的界面使用較深的灰色。

越靠近表層的界面使用較淺的灰色,靠近底層的界面使用較深的灰色。

重新審視感知對比度

在通過參考淺色主題來設計深色主題時,很重要的是要重新審視感知對比。也就是說,關鍵是看一個元素表現出來的差異,而不是看數值究竟是多少。

例如,在我們的淺色主題中,聯系人信息文字為不透明度為 60% 的黑色。但是在我們的深色主題中,我們將聯系方式設置為不透明度為 65% 的白色。

雖然兩者的對比度都超過 AA 標準,但是額外的 5% 卻可以防止視覺疲勞,特別是在弱光條件下。

對于這些補償并沒有嚴格的規定。相反,我們會根據文本區域、字體大小和行寬分別調整每一個元素,以確保深色主題和淺色主題一樣清晰、易于閱讀。

少用大面積亮色

在淺色主題中,我們經常使用大面積的亮色,效果通常還不錯,因為我們最重要的元素可能會更亮。但在深色主題中是行不通的,大面積亮色會把我們的注意力吸引過去。

例如,參考「提醒我」界面。在淺色主題中,粉紅色的蒙層不會把用戶的注意力從顏色更亮的對話框上吸引走。但是在深色主題中,同樣的蒙層卻會吸引注意力。所以我們拿掉了這種蒙層,這樣用戶就可以快速、輕易地關注到重要的部分。

△ 少用大面積亮色可以讓重要信息更受關注

避免純黑或純白

在 Superhuman,我們不會在黑暗主題中使用純黑或純白。

有以下四個理由:

1. 真實性

真正的黑色并不存在于我們的日常環境中(世界上最黑的物體,麻省理工學院開發的一種尚未命名的材料,離真正的黑色還差 0.005% )。因此,我們的視覺已經適應了將相對的黑暗視為黑色。

這就是為什么#000000 會讓人感覺如此不和諧,尤其是在與較淺的元素對比時,它與我們通??吹降娜魏螙|西都不匹配。

2. 黑色拖影

當較淺的元素被拖動或滾動在純黑色背景上時,就會產生黑色涂抹這種視覺失真。

這種效果出現在 OLED 屏幕上,這種屏幕越來越普遍。在這些屏幕上,純黑色像素會被關閉(這就是為什么深色主題比淺色主題消耗更少的電量)。

然而,這些像素的開啟和關閉比改變顏色要慢,因此這個變量響應導致了拖影效果。

△ iOS 時鐘應用程序的黑色拖影(必須在 OLED 屏幕上觀看)

你可以通過使用深灰色來避免黑色拖影,因為那樣的話像素將不會被關閉。這甚至適用于像 #010101 這樣的深灰色,并且仍然比淺色主題更省電。

3. 深度

如果在背景中使用純黑色,你就無法去表現深度。

打個比方,假如界面背景是純黑色的,你想在上面畫一個通知界面,通知應該漂浮在背景之上,所以你要使用陰影來傳達深度。但是,這種情況下陰影是難以察覺的,因為沒有什么比純黑更黑。

如果你的背景不是純黑色的,你可以使用不同不透明度的陰影和模糊來表達深度。例如,參考 Superhuman 的通知:

可以用陰影來表達深度,前提是背景不是純黑色的。

4. 光暈

純白文本與純黑背景形成最高對比度是 21:1。從量化的 WCAG(Web 內容無障礙指南)的使用條件來看,這簡直是最佳輸出對比。

然而,在設計黑暗主題時,一定要注意對比度,對比度太高會導致眼睛疲勞和光暈。

將非常明亮的文本設置在非常暗的背景下時,文本會顯示為背景出血。對于我們這些散光患者來說,這種影響甚至更強。

杰森·哈里森是感知與互動研究組的博士后研究員,他說:

散光患者(約占總人口的 50%)發現,黑底白字比白底黑字更難閱讀。這在一定程度上與光線有關:在明亮的顯示器(白色背景)下,虹膜閉合得更緊,減少了「變形」鏡片的影響;在黑色的背景下,虹膜會打開以接收更多的光線,而透鏡的變形會使眼睛產生更模糊的焦點。

在 Superhuman,我們必須特別注意光暈,因為應用程序的文本太多。我們把白色的文字設置為 90% 的不透明度,這樣黑暗的背景就會混在一起。這平衡了對比度和亮度,使應用程序很容易在各種光線條件下閱讀。

加深顏色

為了避免眼睛疲勞和光暈,我們把文本的顏色調暗,所以彩色元素和按鈕可能會顯得太亮了。必須調整這些顏色,以更好地適應深色的主題。

首先,我們降低亮度,使這些顏色不會搶附近文本的視覺焦點。然后,增加飽和度,使他們仍然保持原有特征。

例如,如果直接使用淺色主題中的紫色,它與附近文本對比顯得太亮了。在實際的深色主題中,我們加深了這種顏色,這樣用戶才可以專注于文本。

為黑暗的主題創造更深的顏色:保持色調,降低亮度,增加飽和度。

結論

深色主題有很多好處,現在被期待廣泛應用。

然而,想要設計好一款深色主題并非易事。簡單地重復使用顏色和反轉色調會增加眼睛疲勞,使其在弱光下更難閱讀,甚至可能打破視覺和信息層次。

我們找到了一種系統的方式來設計可讀性強、均衡、出色的深色主題,只需遵循以下步驟:

  • 深暗淺明
  • 重新審視感知對比度
  • 少用大面積亮色
  • 避免純黑或純白
  • 加深顏色

原文鏈接:《How to design delightful dark themes》



微信公眾號:alibuy

無覓評論,優化體驗,加強品牌價值

無覓相關文章插件,快速提升流量

彩票快乐10分