當(dāng)前位置：首頁(yè) >UI設(shè)計(jì) >教你巧用UI設(shè)計(jì)中的暗黑模式——Dark Mode

教你巧用UI設(shè)計(jì)中的暗黑模式——Dark Mode

發(fā)布時(shí)間：2024-02-27 19:14:31 瀏覽量：155次

編輯導(dǎo)語(yǔ)：我們每天都會(huì)看一寫(xiě)APP，有時(shí)候你會(huì)覺(jué)得一些軟件界面的白色很刺眼，尤其是晚上的時(shí)候；這就是為什么越來(lái)越多的設(shè)計(jì)師開(kāi)始注重創(chuàng)作兩種主題模式——明亮和黑暗；本文作者教你如何用UI設(shè)計(jì)中的暗黑模式。

黑暗模式有一些我們應(yīng)當(dāng)遵守的特定規(guī)范，使其對(duì)用戶使用來(lái)說(shuō)會(huì)更加合理。

一、為什么選擇暗黑模式？

黑暗主題的主要優(yōu)勢(shì)是在于：

弱光環(huán)境下具有更高的可讀性；
黑暗模式降低了設(shè)備屏幕的亮度；
它改善了視覺(jué)工程學(xué)，并能在特定的光照條件下得到更好的調(diào)節(jié)。

正因如此，在夜晚及深夜使用數(shù)碼設(shè)備會(huì)更加舒適。

1. 深色模式的優(yōu)缺點(diǎn)

使用深色模式可以：

減輕眼睛疲勞；
構(gòu)造視覺(jué)層次；
使界面更神秘；
營(yíng)造高端感；
提高在夜間提高可讀性；
確保夜晚使用環(huán)境（比如在晚上使用娛樂(lè)的app）；

在以下情況下，請(qǐng)避免使用暗黑模式：

這些是深色模式的優(yōu)缺點(diǎn)。

2. 可以在項(xiàng)目中使用的實(shí)用技巧

盡量不要用100％的純黑色：

當(dāng)您想開(kāi)始設(shè)計(jì)暗黑模式時(shí)，你想到的第一件事可能是“直接創(chuàng)建一個(gè)黑色背景”。

這應(yīng)該是我們常犯的錯(cuò)誤。

Google的Material Design建議使用深灰色，而不是純黑色；Material Design建議的深色主題界面顏色為＃121212。

考慮把顏色飽和度降低：

黑暗模式應(yīng)避免使用飽和色，首要原因便是可訪問(wèn)性——飽和色不符合WCAG（注：Web內(nèi)容無(wú)障礙指南）的標(biāo)準(zhǔn)：即深色背景下的正文文本至少為4.5:1（注：即界面主色與文字信息的對(duì)比度）。

飽和色在深色背景下會(huì)產(chǎn)生光學(xué)振動(dòng)（optical vibrations），從而可能會(huì)導(dǎo)致眼部疲勞。

做兩個(gè)調(diào)色板——用于暗黑模式和明亮模式：

在上面的技巧中，我提到過(guò)飽和的顏色更適合深色主題。

另一方面，我們都喜歡輕便的用戶界面中充滿活力的色調(diào)。

如何匹配這兩個(gè)？接下來(lái)的答案是給這兩種主題創(chuàng)建互補(bǔ)的色板是最佳選擇。

記住深色模式下的可訪問(wèn)性：

如果你想使解決方案更易于使用，則有適用于深色主題的特定準(zhǔn)則。

最重要的是以下內(nèi)容：正文和背景之間的對(duì)比度應(yīng)至少為15.8：1，正因這點(diǎn)，即便是更高、顏色更淺的層級(jí)，可讀性也很不錯(cuò)（參見(jiàn)Material Design）。

你可以使用這些工具來(lái)檢查對(duì)比度：

Contrast（mac版）；
Accessible Brand Colors（web端）；
Stark（XD、Sketch、Figma插件）；

避免使用陰影：

在一些明亮的界面中，我們往往使用輕微的陰影來(lái)表現(xiàn)深度。

正因如此，現(xiàn)在的界面使用起來(lái)會(huì)更加自然合理（注：可能是界面設(shè)計(jì)借鑒和引用了自然的光影效果，所以感覺(jué)會(huì)比較自然合理）。

然而，陰影在大多數(shù)黑暗模式的元素中，并不是那么明顯。

這就是為什么不要頻繁地使用它們。畢竟還有另外的表現(xiàn)層次的方法。

海拔高度構(gòu)建層級(jí)結(jié)構(gòu)：

如你所知，陰影在黑暗主題中顯示效果不好，表達(dá)層級(jí)結(jié)構(gòu)的更好的方法是使用海拔的亮暗。

背景層應(yīng)該是最暗的，放置在其頂部的元素應(yīng)稍亮一些。

正因如此，界面能夠更合理的被用戶感知。

遵循平臺(tái)準(zhǔn)則：

設(shè)計(jì)一套流暢合理的界面是所有平臺(tái)的使命。

所有主流平臺(tái)都有制定規(guī)范，可以幫助你來(lái)實(shí)現(xiàn)黑暗主題（或模式）。

二、iOS人機(jī)界面指南的主要規(guī)范

專(zhuān)注于內(nèi)容，在淺色和深色外觀中測(cè)試你的設(shè)計(jì)，當(dāng)你調(diào)整對(duì)比度和透明度等輔助功能設(shè)置（注：accessibility settings，或稱(chēng)為可訪問(wèn)性設(shè)置）時(shí)，確保在黑暗模式下的內(nèi)容清晰易讀（上面講到的技巧將做到這一點(diǎn)）。

顏色：

使用適應(yīng)當(dāng)前外觀的顏色（使用動(dòng)態(tài)顏色——兩個(gè)色板）（注：iOS13官方新增動(dòng)態(tài)顏色dynamic color ，同樣的顏色在dark mode和light mode模式下的色值不一樣）。
確保所有外觀都有足夠的色彩對(duì)比。
柔化白色背景的顏色（白色背景–深色調(diào)，深色背景–淺色調(diào)）。

圖標(biāo)和圖像：