根據(jù)最近的一項(xiàng)調(diào)查，超過 87.9% 的用戶選擇在手機(jī)、應(yīng)用程序內(nèi)部或其他可用的地方使用暗模式。暗模式似乎無處不在，包括網(wǎng)站和應(yīng)用程序設(shè)計(jì)。

對于 UI/UX 設(shè)計(jì)師來說，設(shè)計(jì)一個好的深色模式不僅僅是改變配色方案，這是一個復(fù)雜的過程，需要考慮的事情很多。

因此，設(shè)計(jì)編制了這份終極指南，以幫助您了解有關(guān)網(wǎng)站或移動應(yīng)用程序設(shè)計(jì)中暗模式的所有信息。我們將從定義、優(yōu)缺點(diǎn)和最佳實(shí)踐開始。最后，我們還介紹了一些深色模式 UI 設(shè)計(jì)示例和模板，供您參考。

目錄

什么是 UI 深色模式

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

深色模式與淺色模式，哪個更好

何時選擇暗模式

何時避免暗模式

暗模式設(shè)計(jì)最佳實(shí)踐

暗模式設(shè)計(jì)最佳示例和模板

UI中的暗模式是什么？

簡單來說，黑暗模式，也稱為夜間模式或黑暗主題，是在您的網(wǎng)站瀏覽器、應(yīng)用程序或移動應(yīng)用程序的燈已關(guān)閉時的一種網(wǎng)站或移動應(yīng)用程序 UI 顯示模式。

它的背景迅速從淺色或亮色變?yōu)槿诨蚧疑幱?。相關(guān)的配色方案、視覺對比度等設(shè)計(jì)方面應(yīng)進(jìn)行調(diào)整或完全改變，使其文字、圖像等內(nèi)容可讀。它完全顛覆了過去幾十年設(shè)計(jì)師經(jīng)常使用的默認(rèn)燈光模式。

暗模式設(shè)計(jì)的優(yōu)缺點(diǎn)

許多知名品牌，包括 WhatsApp、Instagram、Google、Facebook 和 Apple，都為用戶提供了出色的暗模式體驗(yàn)。如果您正在考慮為您的項(xiàng)目使用暗模式，以下是可以幫助您提前仔細(xì)評估它的利弊：

使用暗模式的優(yōu)點(diǎn)

一個好的暗模式可以給你的項(xiàng)目帶來很多好處：

對眼睛很舒服

眾所周知，長時間看電腦或手機(jī)屏幕會使您的眼睛疲勞，并造成短期和長期的傷害，例如眼睛不適、眼睛干澀、頭痛、視力模糊、復(fù)視、偏頭痛等。

與淺色模式相比，深色模式讓眼睛放松，因?yàn)槠聊话l(fā)出的眩光和明亮的光線較少。

節(jié)省設(shè)備能源

深色模式主要使用黑色和灰色，在 OLED 屏幕上，這顯著減少了文本、圖像和交互所需的能量。

讓用戶專注于重要的事情

在設(shè)計(jì)普通的“燈光模式”時，設(shè)計(jì)師傾向于使用豐富的色彩、炫酷的動畫和交互以及其他吸引人的視覺元素。但是，添加的視覺元素越多，分散用戶注意力的機(jī)會就越大。

而在深色模式下，由于黑色背景的對比度較低，顏色較少，這減少了額外的干擾。因此，用戶可以更多地關(guān)注重要的信息。如果以正確的方式使用，深色模式可以提高您的應(yīng)用程序或網(wǎng)站的受歡迎程度，因?yàn)樗绕渌麥\色模式替代方案更專注。

給人一種高端奢華的感覺

黑色總能給用戶一種經(jīng)典、優(yōu)雅或奢華的感覺。如果您正在開展一個項(xiàng)目以喚起用戶的相似感受，那么深色模式非常適合您。

使用暗模式的缺點(diǎn)

就像一把兩刃的劍，黑暗模式也有它的弱點(diǎn)：

情感聯(lián)系減弱

在設(shè)計(jì)網(wǎng)站或移動應(yīng)用程序時，不同的顏色通?？梢詭椭O(shè)計(jì)師估計(jì)不同的用戶情緒。更多的顏色通常意味著創(chuàng)造更多和更強(qiáng)烈的情感。但是，由于顏色較少，例如白色、黑色和灰色，深色模式可以創(chuàng)建的動作也有限。

可讀性和可訪問性減弱

您不能簡單地恢復(fù)配色方案并期望您的設(shè)計(jì)是正確的，設(shè)計(jì)應(yīng)用程序或網(wǎng)站的暗模式版本需要時間和精力，否則可讀性和可訪問性都將非常困難。

深色模式和淺色模式，哪個更好？

具有更多視覺元素的 Light 模式是使用最廣泛的版本，可幫助用戶創(chuàng)建具有視覺吸引力的網(wǎng)站或移動應(yīng)用程序。然而，具有有限顏色和視覺元素的深色模式消除了不必要的視覺干擾，讓用戶專注于界面內(nèi)容，同時通過成為一個更專注的應(yīng)用程序或網(wǎng)站，可能有效地增加產(chǎn)品或服務(wù)的銷售。

他們確實(shí)有自己的優(yōu)點(diǎn)和缺點(diǎn)。試著列出你所有的需求，然后仔細(xì)評估哪一個更適合你。

此外，如果您無法做出決定，為什么不嘗試在您的項(xiàng)目中同時使用它們呢？允許用戶根據(jù)自己的喜好選擇亮或暗模式是改善用戶體驗(yàn)的好方法。

什么時候選擇暗模式？

暗模式目前非常流行。但是，這并不意味著您可以在任何地方使用它。您可以嘗試使用暗模式：

當(dāng)它與您的品牌匹配時；

當(dāng)它與您的應(yīng)用情緒相匹配時；

當(dāng)你設(shè)計(jì)一個最小的項(xiàng)目時；

當(dāng)您希望核心內(nèi)容脫穎而出時；

當(dāng)您想創(chuàng)造更健康的用戶體驗(yàn)時；

何時避免使用暗模式？

以下是一些建議您避免使用暗模式的常見場景：

當(dāng)有很多文本時；

當(dāng)有很多視覺元素時；

當(dāng)有很多鮮艷的顏色時；

暗模式設(shè)計(jì)最佳實(shí)踐

以下是一些可用于為項(xiàng)目設(shè)計(jì)暗模式的最佳實(shí)踐：

1/避免使用100%黑色

純黑色背景上的純白色文本會產(chǎn)生強(qiáng)烈的視覺對比，有時會讓用戶難以閱讀。因此，在設(shè)計(jì)暗模式時，建議您使用深灰色或灰色陰影。深藍(lán)色是另一個不錯的選擇。

讓我們檢查一個黑色背景的網(wǎng)站登陸頁面：

然后是深藍(lán)色背景的網(wǎng)站登陸頁面：

你覺得哪個更容易養(yǎng)眼？如果你是設(shè)計(jì)師，你會為你的項(xiàng)目選擇哪一個？

2、避免使用飽和色

完全飽和的顏色更難讓用戶在黑暗模式下集中注意力，并導(dǎo)致用戶眼睛疲勞。在設(shè)計(jì)深色主題時，請記住使用更柔和的顏色，如白色、灰色、粉紅色等。

3、選擇正確的字體，避免使用粗體

字體是設(shè)計(jì)中最重要的視覺元素之一，在設(shè)計(jì)網(wǎng)站或移動應(yīng)用程序時應(yīng)始終注意。使用黑暗主題的網(wǎng)站或移動應(yīng)用程序，你也不應(yīng)該忽視它的作用。較粗的字體似乎總是會產(chǎn)生更強(qiáng)的對比度，并且難以閱讀界面內(nèi)容。

為了更好的可讀性，請嘗試選擇較淺的字體，而不是粗體。

4、注意視覺對比

如果視覺對比度太強(qiáng)，您可能會在用戶嘗試使用您的網(wǎng)站或應(yīng)用程序時使他們眼睛疲勞。確保您設(shè)計(jì)的視覺對比度更柔和，不會對應(yīng)用程序的可讀性產(chǎn)生負(fù)面影響——關(guān)注主要顏色、文本大小和圖像的對比度。’

5、提供深色和淺色模式選項(xiàng)

暗模式和亮模式不是非此即彼的概念。您和您的團(tuán)隊(duì)可以根據(jù)您的需要決定選擇一個或兩個。

如果您決定在您的網(wǎng)站或移動應(yīng)用程序上同時使用它們，那么您應(yīng)該遵循以下幾個提示：

讓用戶選擇想要的模式

雖然人們使用深色模式感覺很舒服，但有些人可能更喜歡使用淺色模式。因此，在處理項(xiàng)目時，最好讓用戶選擇使用哪種模式，并讓用戶可以隨時在這兩種模式之間切換。

將撥動開關(guān)或開關(guān)放在正確的位置

允許用戶在明暗模式之間快速切換是增強(qiáng)項(xiàng)目用戶體驗(yàn)的好方法。為確保這些模式改善項(xiàng)目的用戶體驗(yàn)，請確保將切換或開關(guān)放在正確的位置。

將一種模式設(shè)置為默認(rèn)模式

為了提供更愉快的體驗(yàn)，請嘗試將一種模式設(shè)置為默認(rèn)模式，并允許用戶更改默認(rèn)設(shè)置。

記住用戶的偏好

一旦用戶選擇了一種模式，請自動記住他們的選擇，并嘗試下次自動切換到他們想要的模式。

簡而言之，嘗試盡你所能簡化那里的用戶體驗(yàn)。

6、更多的空白和更少的內(nèi)容

過多的文本或內(nèi)容會導(dǎo)致 UI 混亂，使用戶難以快速瀏覽和閱讀。因此，在設(shè)計(jì)深色主題 UI 時，請記住添加盡可能少的內(nèi)容以保持用戶專注。如果您確實(shí)需要大量內(nèi)容來介紹您的產(chǎn)品或服務(wù)，請嘗試添加更多空白（或黑色，在深色模式下）以創(chuàng)建更具可讀性的布局。避免使用長段落也是保持頁面整潔的好方法。

7、創(chuàng)建清晰的視覺層次

為了增加 UI 的可讀性，您還應(yīng)該嘗試通過使用不同級別的標(biāo)題、顏色塊和顏色漸變來 創(chuàng)建清晰的視覺層次結(jié)構(gòu)。

使用灰色漸變顏色來布置您的界面，以獲得清晰的視覺層次。

暗模式設(shè)計(jì)最佳示例和模板

我們還挑選了一系列帶有深色主題或模式的最佳示例和模板來激發(fā)您的靈感：

最佳黑暗主題網(wǎng)站示例

1、Inside Studio Portfolio

Inside Studio 的 作品集網(wǎng)站使用深色模式。打開后，該網(wǎng)站會顯示帶有深色主題的全屏背景視頻，可以快速吸引您的眼球，讓您在意識到之前單擊以查看更多內(nèi)容。

黑色主題的圖像，極簡的設(shè)計(jì)風(fēng)格和精彩的動畫營造出一種神秘的感覺。這是一個很棒的黑暗主題網(wǎng)站，供您探索和獲取靈感。

2、Mav Farm

Mav Farm是一家技術(shù)公司，提供工具幫助客戶輕松啟動和運(yùn)營在線業(yè)務(wù)。它的網(wǎng)站有一個黑暗的主題，并以水晶 3D 效果給每個人留下深刻印象。水晶物體或人物在黑色背景上，有很酷的過渡和動畫，易于閱讀的文字，流暢的滾動和更多的設(shè)計(jì)細(xì)節(jié)為用戶創(chuàng)造了一個科幻仙境。

3、Long Shot

Long Shot是一家藝術(shù)企業(yè)，為客戶提供一系列服務(wù)，包括舉辦現(xiàn)場活動、制作地圖、撰寫電影和更多創(chuàng)新作品。它的在線網(wǎng)站展示了他們作品的視覺索引。它采用夢幻般的插圖風(fēng)格，為用戶提供獨(dú)特而身臨其境的體驗(yàn)以及原始背景音樂。該網(wǎng)站的黑暗模式在美學(xué)上是獨(dú)一無二的，并使用戶專注于內(nèi)容。

4、GT Easti

GT Easti是一個在線網(wǎng)站，講述字體 - GT Easti 的故事。除了簡單的黑白配色方案外，這個網(wǎng)站最吸引人的部分是其登陸頁面上的插圖表情符號。當(dāng)你在那里逗留一段時間時，它們會自動變?yōu)槠渌哂胁煌榫w的表情符號。

5、Kriss Real Estate

在設(shè)計(jì)一個深色主題的網(wǎng)站時，一些設(shè)計(jì)師會使用深藍(lán)色背景而不是純黑色背景來柔化視覺對比度，減少用戶的眼睛疲勞。 這個 Kriss Real Estate 網(wǎng)站還選擇了一個很舒服的深藍(lán)色背景，并使用講故事的風(fēng)格來引導(dǎo)網(wǎng)站訪問者瀏覽。

6、Crowd Spire

Crowd Spire 網(wǎng)站旨在激發(fā)訪問者成為付費(fèi)產(chǎn)品測試員。為了改善那里的視覺體驗(yàn)，設(shè)計(jì)師在黑色背景上添加了幾何紋理。文字有漸變色、有趣的偽3D插圖和視差滾動，所有這些都有助于有效地增強(qiáng)用戶體驗(yàn)。

具有深色主題或模式的最佳應(yīng)用模板

8、Land of Dreams

Land of Dreams 是一款帶有深色模式的移動應(yīng)用概念。豐富而溫暖的色彩創(chuàng)造了非常棒的場景，使用此模板，您可以從夢想中重新創(chuàng)建應(yīng)用程序或網(wǎng)站。