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

介紹

首先什么是深色模式？

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

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

深色模式特權(quán)

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

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

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

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

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

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

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

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

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

2、使用品牌深色

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

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

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

3、降低色彩飽和度

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

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

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

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

避免在深色模式下使用陰影。為了更好地傳達(dá)深度——確保靠近用戶(hù)的物體更亮。這將有助于建立更好的視覺(jué)層次結(jié)構(gòu)。

5、確保深色模式對(duì)比度

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

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

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

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

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

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

有很多插件可以幫助你解決這個(gè)問(wèn)題。這是我的最?lèi)?ài)：

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

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

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

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

8、不要過(guò)度使用暗模式

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

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

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

結(jié)論

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

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

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

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

作者：Buninux

譯者：Talon

Powered by Froala Editor