亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

介紹

首先什么是深色模式？

深色模式是一種適合夜間使用的顏色主題，主要側(cè)重于將暗色/灰色用于表面和 UI 元素。較深的顏色反射較少的光線，同時(shí)仍提供出色的閱讀體驗(yàn)。這一切都?xì)w功于銳利元素和微妙表面之間的高對比度。

作為一種設(shè)計(jì)模式，深色模式通常作為切換存在于用戶界面中。深色模式旨在補(bǔ)充系統(tǒng)的默認(rèn)（或淺色）主題。

深色模式特權(quán)

深色主題是一個(gè)很好的營銷舉措，可以讓您的 UI 在類似品牌或產(chǎn)品中脫穎而出。深沉、厚重的背景可以成為您品牌視覺效果的完美補(bǔ)充。

深色模式作為一項(xiàng)功能可以幫助減少操作產(chǎn)品時(shí)的眼睛疲勞。特別是如果您的產(chǎn)品包含大量文本，則深色模式可以幫助提高用戶的保留率和注意力。

深色模式可能會節(jié)省您的手機(jī)電量。事實(shí)證明，深色模式通過發(fā)出更少的光，在屏幕上消耗的電量減少了六倍，因此可以延長您的應(yīng)用程序生命周期和使用時(shí)間。

請注意，能源消耗主要取決于您的手機(jī)類型，而不是顏色。因此，如果您想衡量暗模式的節(jié)電效率，請查看開發(fā)人員針對特定手機(jī)類型和屏幕的指南。

深色模式專家表示，在深色表面閱讀更健康，而其他研究則得出相反的結(jié)論。但在我看來，深色模式只是一種看起來很時(shí)尚的趨勢，理論上可以讓你的品牌更舒服。

因此，事不宜遲，以下是幫助構(gòu)建深色模式UI的最佳實(shí)踐。

1、規(guī)范顏色使用

避免或限制純黑色上的白色。您可以使用純黑色 (#000) 作為深色模式的背景，但請確保將文本稍微調(diào)暗。恰到好處不會導(dǎo)致眼睛因尖端對比度而流血。

純白色使我們的眼睛需要吸收更多的光。發(fā)生這種情況時(shí)，字體會隨著背景滲出并導(dǎo)致文本模糊，尤其是在較舊的顯示器型號上。

2、使用品牌深色

為了使您的深色模式更加獨(dú)特，請使用更深版本的主品牌顏色作為表面。

與彩色字體相結(jié)合，使其看起來更加特別。?

將您的表面顏色與彩色字體相結(jié)合是創(chuàng)建品牌深色模式體驗(yàn)的絕佳選擇。只使用黑色和白色的漸變也可以。只要確保你的文本易于閱讀，而不是無緣無故地花哨。

3、降低色彩飽和度

避免在深色模式下使用完全飽和的顏色。

在較暗的表面上觀看時(shí)，高飽和度會產(chǎn)生視覺上的“抖動(dòng)”效果。相反，請使用低飽和度或略微柔和的原色版本以獲得最佳性能。

4、避免使用陰影傳達(dá)深度關(guān)系

使用較淺顏色的比例來轉(zhuǎn)換頁面深度，避免在深色模式下使用陰影。相反，使用邊框?qū)傩詾閁I元素發(fā)出深度級別。與較近的元素相比，較遠(yuǎn)的元素仍應(yīng)具有較低的高度。

避免在深色模式下使用陰影。為了更好地傳達(dá)深度——確?？拷脩舻奈矬w更亮。這將有助于建立更好的視覺層次結(jié)構(gòu)。

5、確保深色模式對比度

深色模式，就像燈光應(yīng)該滿足最低要求的 WCAG 標(biāo)準(zhǔn)一樣，以確保所有文本都清晰易讀并具有足夠的對比度。您可以使用插件來檢查您的對比設(shè)計(jì)。

以下是我們最喜歡的工具，可幫助您在不離開您選擇的工具的情況下仔細(xì)檢查對比度：

• Stark（Figma、Sketch 和 XD 插件）。
• Contrast（Figma 插件）。
• A11y（Figma 插件）。

6、先設(shè)計(jì)淺色模式

在將你的設(shè)計(jì)從淺色模式轉(zhuǎn)變?yōu)樯钌Ｊ降耐瑫r(shí)，保持所有視覺提示到位。不要為了深色主題而忽略或刪除某些顏色，以免混淆用戶。

相反，準(zhǔn)備一個(gè)顏色板，專注于反轉(zhuǎn)現(xiàn)有顏色而不會降低 UI 效率。

有很多插件可以幫助你解決這個(gè)問題。這是我的最愛：

• Appearance （Figma 插件）。
• Dark mode magic（Figma 插件）。
• Camilo（草圖插件）。

7、使用“中性”設(shè)計(jì)深色模式

為了讓切換可以預(yù)測，將您的淺色主題UI轉(zhuǎn)向深色面。從項(xiàng)目一開始就使用一組具有相同透明度值的基本或“中性”顏色。

一套透明的顏色可以讓你的生活輕松很多。您可以使用一組透明顏色將您的設(shè)計(jì)轉(zhuǎn)換為可預(yù)測的暗模式，而不是不斷選擇不同的灰色陰影。

8、不要過度使用暗模式

在大多數(shù)情況下使用深色模式是個(gè)好主意。然而，使用明亮、醒目的背景也可以很好地傳達(dá)您的設(shè)計(jì)。深色模式非常適合幫助專注于一項(xiàng)任務(wù)，但在凌晨 2:00 瀏覽 eBay 或亞馬遜時(shí)，沒有什么能比得上最后的閃光了。

淺色模式非常適合吸引您的注意力。它會彈出，喚醒用戶，并立即將他的注意力轉(zhuǎn)移到焦點(diǎn)之一，例如號召性用語標(biāo)題、按鈕或表單。

提示：如果您正在制作用于 Mac/Windows 的產(chǎn)品。最好調(diào)整您的產(chǎn)品主題以自動(dòng)與用戶當(dāng)前的主題同步。這可以幫助用戶有賓至如歸的感覺，給人留下很好的第一印象。

結(jié)論

在為你的數(shù)字產(chǎn)品規(guī)劃深色模式時(shí)，請遵循列出的提示。

請記住，將其實(shí)施到現(xiàn)有且完美運(yùn)行的產(chǎn)品中應(yīng)該有充分的理由?？紤]內(nèi)容、使用環(huán)境和設(shè)計(jì)將出現(xiàn)的設(shè)備。

但無論如何。深色模式可以使您的產(chǎn)品受益，尤其是在夜間使用手機(jī)、節(jié)省電池或在深色的氣氛中查看模因時(shí)。

原文：https://blog.prototypr.io/dark-mode-ui-best-practices-8101782de93f

作者：Buninux

譯者：Talon

Powered by Froala Editor