激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

「UI設(shè)計(jì)」8個技巧做好深色主題設(shè)計(jì)

發(fā)布時間：2024-02-27 17:13:53 瀏覽量：159次

封面：Kostia Varhatiuk

譯者：SKYUI（公眾號：SKYUI創(chuàng)新體驗(yàn)）

原文作者：Nick Babic

原文地址：
https://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6

深色主題是過去幾年中最需要的功能之一。蘋果和谷歌都將深色主題作為用戶界面設(shè)計(jì)重要的組成部分。深色主題降低了界面亮度，在深色環(huán)境中給用戶提供了適度安全感，也最大限度減少了用戶的眼疲勞。下面是在設(shè)計(jì)產(chǎn)品的深色主題時需要了解的 8 個技巧。

1. 避免純黑色

深色主題不一定是純黑色背景上的純白色文本。事實(shí)上，這種高對比度對用戶可能很痛苦。

使用深灰色作為組件的主要表面顏色比使用純黑色(#000000)更安全。深灰色界面可減輕眼睛疲勞，深灰色表面上的淺色文本比黑色表面上的淺色文本對比度低。深灰色表面可以表達(dá)更廣泛的顏色、高度和深度，因?yàn)樗菀自诨疑峡吹疥幱?，而不是真正的黑色?/p>

材質(zhì)設(shè)計(jì)建議#121212作為深色主題表面顏色。

深色主題表面顏色建議#121212

2. 避免在深色主題上使用飽和色

飽和色在淺色表面很適用，但在深色表面上會讓人產(chǎn)生視覺上的振動，使其更難閱讀。去飽和度原色，使對比度足以與深色界面形成對比。

使用較淺的色調(diào)（顏色在200-50范圍內(nèi)），因?yàn)樗鼈冊谏钌黝}表面上具有更好的可讀性。淺色變體不會降低用戶界面的表達(dá)力，還能幫助你保持適當(dāng)?shù)膶Ρ榷龋也粫斐裳劬ζ凇?/p>

調(diào)色板中飽和度較低的顏色可以提高可讀性，減少視覺震動。

由于飽和色會在深色表面上產(chǎn)生視覺上的震動，要避免在深色主題上使用飽和色。淺色調(diào)（顏色在200-50范圍內(nèi)）在深色主題表面(在所有標(biāo)高上)具有更好的可讀性。

3. 符合無障礙色彩對比標(biāo)準(zhǔn)

確保你的內(nèi)容在深色模式下仍然清晰易讀。深色主題表面必須足夠深，以顯示白色文本。谷歌材質(zhì)設(shè)計(jì)推薦在文本和背景之間使用至少15.8：1的對比度。

使用顏色對比工具來測試對比度。

https://uxpro.cc/toolbox/accessibility/color-accessibility/

4. 文本使用“打開”顏色

“打開”顏色出現(xiàn)在組件頂部和關(guān)鍵表面的“打開”顏色。通常用于文本。

深色主題默認(rèn)的“打開”顏色是純白色（#FFFFFF）。但是#FFFFFF是亮色，在深色的背景下會產(chǎn)生視覺“震動”。所以谷歌材質(zhì)設(shè)計(jì)推薦使用稍暗的白色:

高度強(qiáng)調(diào)的文本的不透明度應(yīng)為87%。

中等強(qiáng)調(diào)文字的比例為60%。

禁用文本使用38%的不透明度。

快速提示：深色背景下的淺色文本比淺色背景下的文本更醒目。這就是為什么要在深色模式中使用更淺色的字體。

選擇稍暗的白色以防止背景與周圍的深色內(nèi)容形成鮮明的對比

5. 考慮設(shè)計(jì)的情感方面

當(dāng)涉及為現(xiàn)有的APP設(shè)計(jì)一個深色主題時，你或許想要在深色模式下傳達(dá)相同的情緒。但最好不要這樣做。因?yàn)?/p>

不同的背景對顏色的感知也不同

這意味著深色主題不能像淺色主題一樣傳達(dá)信息。因此，深色和淺色主題總是會喚起不同的情感。與其試圖解決這個問題，不如利用它來確定產(chǎn)品的特性。

深色模式并不總是從現(xiàn)有的淺色主題派生出來。

Shift Dashboard—— Sergey Zolotnikov設(shè)計(jì)的深色模式

6. 深度溝通

與淺色主題設(shè)計(jì)類似，在創(chuàng)建深色主題用戶界面時，必須創(chuàng)建層次結(jié)構(gòu)并要強(qiáng)調(diào)布局中的重要元素。

標(biāo)高（Elevation）是我們用來傳達(dá)元素層次結(jié)構(gòu)的工具。

在淺色模式下，我們使用陰影來表示高度。表面越高，陰影就越寬。同樣的方法在深色主題中是行不通的。在深色背景下很難看到陰影。最好是照亮每一層表面。

在用材料建造的深色主題中，抬高的表面和組件使用疊加著色。一個表面的標(biāo)高越高，表面顏色就越淺。

更高的標(biāo)高，更淺的表面

表面越高，覆蓋層就越堅(jiān)固明亮。

由Martin Mro?設(shè)計(jì)的音樂播放器界面

7. 允許用戶從普通模式切換到深色模式

讓系統(tǒng)決定何時打開或關(guān)閉深色主題是具有誘惑力的。這種設(shè)計(jì)決策會導(dǎo)致用戶體驗(yàn)非常糟糕。所以讓用戶那里獲得了控制權(quán)，讓系統(tǒng)為他們做出決定。

這就是為什么最好不要使用自動啟用深色主題。允許用戶使用用戶界面控件打開(或關(guān)閉)深色主題。用戶能夠根據(jù)自己的需求手動選擇模式。你需要定位和設(shè)計(jì)切換器模式。

‘深色主題’的UI控件

8. 測試你在淺色和深色外觀的設(shè)計(jì)

查看用戶界面在這兩種情況下的外觀，并根據(jù)需求調(diào)整設(shè)計(jì)以適應(yīng)每種情況?？梢钥紤]在日落之后用白熾燈測試你的產(chǎn)品。

參考：

Dark theme (Material Design)深色主題 (材質(zhì)設(shè)計(jì))

https://material.io/design/color/dark-theme.html

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定