如今，黑暗主題無(wú)處不在。

隨著人們繼續(xù)花更多的時(shí)間與科技互動(dòng)，黑暗主題提供了一種更輕松的方式與數(shù)字世界互動(dòng)。通常情況下，這些主題更容易吸引眼球，更有吸引力，而且對(duì)于專注的用戶來(lái)說(shuō)是完美的。

整個(gè)2020年，無(wú)數(shù)知名品牌都推出了自己版本的黑色主題。谷歌為你的硬盤提供了解決方案，而蘋果和安卓已經(jīng)在他們的操作系統(tǒng)中構(gòu)建了暗主題性能。

如果你還沒(méi)有學(xué)會(huì)如何充分利用黑暗模式，那么你可能會(huì)錯(cuò)過(guò)一個(gè)極好的機(jī)會(huì)來(lái)突出你的設(shè)計(jì)技能，并贏得更多的客戶。

為什么黑暗模式?

在我們深入探討創(chuàng)建自己的黑暗主題之前，讓我們先看看什么是黑暗模式，以及它為什么如此有效。

最終，暗色主題的創(chuàng)建是為了減少所有東西發(fā)出的亮度，從你的桌面和筆記本電腦，到你的智能手機(jī)和智能手表。黑暗主題有助于改善視覺(jué)人體工程學(xué)設(shè)計(jì)，通過(guò)減少眼睛疲勞，調(diào)整亮度以適應(yīng)當(dāng)前的照明條件，等等。此外，許多暗模式產(chǎn)品在節(jié)省電池壽命方面也很出色。

下面是在你的設(shè)計(jì)作品集中添加黑色主題的一些主要好處。

更好的用戶體驗(yàn):關(guān)注用戶體驗(yàn)是數(shù)字時(shí)代最重要的趨勢(shì)之一。如果你想脫穎而出，你需要愿意給每個(gè)訪問(wèn)你網(wǎng)站的人提供難以置信的體驗(yàn)。黑暗模式減少了從眼睛疲勞到電池電量消耗的一切。這有助于讓客戶在網(wǎng)站上停留更長(zhǎng)的時(shí)間。

創(chuàng)新和前沿吸引力:大多數(shù)公司都想證明自己能夠保持在行業(yè)的前沿。為網(wǎng)站主題或外觀提供一個(gè)可選擇的暗模式版本可以幫助你的客戶從人群中脫穎而出。隨著環(huán)境變得更加關(guān)注移動(dòng)設(shè)備，越來(lái)越多的公司將尋找能夠提供最佳移動(dòng)體驗(yàn)的設(shè)計(jì)師。

支持通用設(shè)計(jì):黑暗模式不僅僅適合夜間對(duì)光敏感的人。這個(gè)解決方案對(duì)于視力受損的用戶來(lái)說(shuō)會(huì)更舒服，因?yàn)樗麄冊(cè)谠L問(wèn)你的網(wǎng)站時(shí)可能會(huì)受到眼睛疲勞的困擾。如果你想讓你的內(nèi)容對(duì)更廣泛的觀眾更有包容性，那么學(xué)習(xí)如何設(shè)計(jì)暗模式是一個(gè)很好的開始。

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

在暗模式下設(shè)計(jì)比你想象的要容易得多。大多數(shù)時(shí)候，這只是簡(jiǎn)單地考慮如何用更深更暗的東西來(lái)取代站點(diǎn)中更明亮、更突出的部分。

這里有一些有用的建議，可以讓你朝著正確的方向前進(jìn)。

1. 實(shí)驗(yàn)與顏色

對(duì)于許多網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)，在開發(fā)暗模式解決方案時(shí)，一個(gè)大問(wèn)題是他們太過(guò)于沉迷于純白色文本和純黑色背景。然而，這種高對(duì)比度的選擇可能會(huì)在一段時(shí)間后有點(diǎn)多。

使用深灰色作為你的主要表面顏色比使用真正的黑色要容易得多。此外，與其使用明亮的白色，還不如考慮使用稍微偏白的顏色，這樣看起來(lái)會(huì)更溫暖。

用不太可能引起眼睛過(guò)度疲勞的表面和顏色組合進(jìn)行實(shí)驗(yàn)。深灰色粉底通常提供更大的深度范圍，因?yàn)槟憧梢栽诨疑巷@示陰影。

此外，當(dāng)你嘗試使用顏色時(shí)，要記住飽和的顏色在非常深的表面上會(huì)產(chǎn)生痛苦的振動(dòng)，使它們更難閱讀。降低顏色的飽和度有助于減少對(duì)比，讓你的網(wǎng)站更受歡迎。

在200-50范圍內(nèi)的淺色在暗主題上會(huì)有更好的可讀性。但是，您總是可以嘗試您的選擇。谷歌材料設(shè)計(jì)建議使用大約15:8:1的對(duì)比度背景和文本。

2. 考慮情緒影響

暗色模式設(shè)計(jì)的大部分工作都是要弄清楚特定的顏色是如何協(xié)同工作的。鮮明的對(duì)比很容易讓人忘乎所以，尤其是當(dāng)你習(xí)慣使用白色背景的時(shí)候。但是，您需要記住，您是為那些主要尋求更輕松、更壓抑瀏覽體驗(yàn)的用戶設(shè)計(jì)的。

當(dāng)你在工作的時(shí)候，記住也要考慮設(shè)計(jì)的情感方面。在任何環(huán)境下，色彩的情感都能成就或毀掉一個(gè)買家的旅程。然而，色彩心理學(xué)中經(jīng)常被忽視的一個(gè)方面是，人們?cè)诤谏尘跋聦?duì)色調(diào)的感知是不同的。

例如，想想綠色。在明亮的背景下，它傳達(dá)了自然甚至是財(cái)富。然而，在深色背景下，同樣的綠色可能會(huì)被認(rèn)為是有毒的，有毒的，甚至是病態(tài)的。當(dāng)終端用戶訪問(wèn)你的網(wǎng)站時(shí)，考慮他們將獲得什么樣的印象是很重要的。

3.給用戶選擇的自由

當(dāng)你開始設(shè)計(jì)暗模式時(shí)，你可能會(huì)犯的一個(gè)最大的錯(cuò)誤就是認(rèn)為你應(yīng)該完全專注于你的暗主題，而不是其他。如果您與用戶交互時(shí)，他們想從兩個(gè)世界中得到最好的東西，那么您將面臨一個(gè)問(wèn)題。如果你是專門為應(yīng)用程序設(shè)計(jì)的，你將需要網(wǎng)頁(yè)能夠在明暗主題之間自然切換。

學(xué)習(xí)如何在你創(chuàng)建的桌子上同時(shí)使用暗模式和亮模式，這將幫助你獲得更多的客戶選擇。請(qǐng)記住，您需要測(cè)試您的設(shè)計(jì)在這兩個(gè)主題中的性能和影響，以檢查它們是否提供相同的體驗(yàn)，無(wú)論您的用戶選擇如何瀏覽。

雖然暗模式應(yīng)該給終端用戶提供不同的體驗(yàn)，但它仍然需要讓用戶感覺(jué)他們是在瀏覽同一個(gè)網(wǎng)站。這意味著你需要嘗試最自然的明暗模式組合。

 4. 記住最基本的

請(qǐng)記住，盡管上面的三個(gè)技巧將幫助你走上黑暗模式設(shè)計(jì)的正確道路，但你也需要考慮你所設(shè)計(jì)的平臺(tái)的機(jī)會(huì)和局限性。你為谷歌Chrome網(wǎng)站提供的暗模式體驗(yàn)將與你為運(yùn)行在iOS上的東西創(chuàng)建的體驗(yàn)大不相同。

檢查您所設(shè)計(jì)的系統(tǒng)所提供的文檔，將有助于您深入了解什么是實(shí)際可能的。

其他關(guān)于暗模式設(shè)計(jì)的小貼士包括:

關(guān)注你的內(nèi)容:確保你的內(nèi)容在頁(yè)面上脫穎而出，而不是太突出。

測(cè)試你的設(shè)計(jì):在亮和暗的外觀下，你需要確保所有東西都能正常工作。

為你的界面采用活力:活力有助于改善你的背景和前景之間的對(duì)比。

使用語(yǔ)義色彩:語(yǔ)義色彩自動(dòng)適應(yīng)當(dāng)前網(wǎng)站的外觀。硬編碼的顏色值不適應(yīng)可能看起來(lái)更激進(jìn)。

桌面著色:試著用透明和濾鏡來(lái)給你的網(wǎng)站和應(yīng)用程序一個(gè)稍微暖和一點(diǎn)的著色——很適合深夜瀏覽

圖標(biāo):如有必要，在暗模式和亮模式中使用單獨(dú)的符號(hào)和圖標(biāo)。

準(zhǔn)備好設(shè)計(jì)黑暗模式了嗎?

為沉迷于黑暗模式的時(shí)代準(zhǔn)備你的網(wǎng)頁(yè)開發(fā)和設(shè)計(jì)作品集是一種復(fù)雜的體驗(yàn)。你需要仔細(xì)考慮，當(dāng)人們?cè)谒阉饕恍└⒚畹臇|西時(shí)，他們將如何瀏覽你的網(wǎng)站和應(yīng)用程序，和我們習(xí)慣的網(wǎng)站相比，視覺(jué)上沒(méi)有那么強(qiáng)大。

最重要的是要記住，你的網(wǎng)站或應(yīng)用程序上的所有東西在暗模式下看起來(lái)應(yīng)該和在亮模式下一樣漂亮。當(dāng)人們想要在應(yīng)用程序中切換設(shè)置時(shí)，僅僅添加一個(gè)動(dòng)態(tài)的黑色背景是不夠的。你需要深入你的設(shè)計(jì)，研究不同的字體、顏色和圖像是如何協(xié)同工作的。