隨著人類將更多的時(shí)間在與科技產(chǎn)品的互動(dòng)上，暗色模式題提供了一種更輕松的方式來(lái)接觸數(shù)字世界。通常情況下，這些主題更容易讓人眼前一亮，更具吸引力，更適合專門的用戶。

　　如果你還沒有學(xué)會(huì)如何充分利用暗色模式，那么你可能會(huì)錯(cuò)過一個(gè)極好的凸顯你的設(shè)計(jì)實(shí)力的機(jī)會(huì)，也會(huì)錯(cuò)過贏得更多的用戶。

　　為什么暗色模式這么流行?

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

　　更好的用戶體驗(yàn)：關(guān)注用戶體驗(yàn)是數(shù)字時(shí)代產(chǎn)品設(shè)計(jì)最重要的趨勢(shì)之一。如果你想脫穎而出，你需要每個(gè)訪問你網(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)說會(huì)更適宜，因?yàn)樗麄冊(cè)谠L問你的網(wǎng)站時(shí)可能會(huì)受到眼睛疲勞的困擾。如果你想讓你的內(nèi)容對(duì)更廣泛的觀眾更有包容性，那么學(xué)習(xí)如何設(shè)計(jì)暗色模式是一個(gè)很好的開始。

　　設(shè)計(jì)暗色模式時(shí)的最佳做法

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

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

　　對(duì)于許多網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說，在開發(fā)暗色模式解決方案時(shí)，一個(gè)大問題是他們太過于沉迷于純白色文本和純黑色背景。然而，這種高對(duì)比度的選擇可能目前是比較普遍的做法。

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

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

　　另外，當(dāng)你嘗試顏色的時(shí)候，記住飽和的顏色經(jīng)常在非常暗的表面上劇烈振動(dòng)，使它們更難閱讀。降低色彩飽和度有助于降低對(duì)比度，讓網(wǎng)站具有更好的用戶體驗(yàn)。

　　在 200-50 范圍內(nèi)的淺色色調(diào)在深色主題上有更好的可讀性。然而，你總是可以嘗試你的選擇。 Google Material Design 建議的背景和文本之間的對(duì)比度是15:8:1。

　　2.考慮情緒影響

　　暗模式設(shè)計(jì)所涉及的大部分工作都是要弄清楚某些顏色是如何協(xié)同工作的。強(qiáng)烈的對(duì)比很容易讓人忘乎所以，尤其是當(dāng)你習(xí)慣于在白色背景下工作時(shí)。然而，你需要記住，你是為一個(gè)主要尋求更輕松、更柔和的瀏覽的用戶體驗(yàn)而設(shè)計(jì)的。

　　工作的時(shí)候，記得也要考慮下設(shè)計(jì)的情感方面。在任何環(huán)境下，色彩中的情感可以決定或破壞買家的體驗(yàn)。然而，色彩心理學(xué)中一個(gè)經(jīng)常被忽視的方面是，當(dāng)人們處于黑色背景時(shí)，他們對(duì)陰影的感知不同。

　　例如，想想綠色。在一個(gè)淺色的背景下，它傳達(dá)了自然，甚至是金融財(cái)富。然而，在黑暗的背景下，同樣的綠色可能會(huì)讓人覺得是有毒的，有毒的，甚至是病態(tài)的。重要的是要考慮終端用戶到達(dá)你的站點(diǎn)后會(huì)得到什么樣的印象。

　　3.讓用戶選擇的自由

　　當(dāng)你開始為黑暗模式設(shè)計(jì)時(shí)，你可能犯的最大錯(cuò)誤之一就是認(rèn)為你應(yīng)該完全專注于暗色模式，而沒有別的選項(xiàng)。如果你和想要兩全其美的用戶交流，會(huì)讓你覺得很麻煩。如果你是為應(yīng)用程序設(shè)計(jì)的，你需要的設(shè)計(jì)應(yīng)該可以自然地在明暗主題之間切換。

　　了解如何在你創(chuàng)建的桌面上同時(shí)實(shí)現(xiàn)暗模式和光模式選項(xiàng)，將有助于產(chǎn)品觸達(dá)到更多的客戶。記住，你需要測(cè)試設(shè)計(jì)在這兩個(gè)模式中的性能和影響，不管你的用戶選擇如何瀏覽，檢查它們是否提供了相同的體驗(yàn)。

　　4.記住最基礎(chǔ)的

　　請(qǐng)記住，盡管上面的三個(gè)提示將幫助你找到暗模式設(shè)計(jì)的正確思路 ，但你還需要考慮所設(shè)計(jì)的平臺(tái)的機(jī)會(huì)和限制。你能為谷歌Chrome網(wǎng)站提供的暗模式體驗(yàn)將與你在 iOS上運(yùn)行的體驗(yàn)截然不同。

　　檢查正在設(shè)計(jì)的系統(tǒng)所提供的文檔將有助于你更深入了解實(shí)際可行的設(shè)計(jì)內(nèi)容。

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

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

　　測(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ù)雜的事情。你需要仔細(xì)考慮，當(dāng)人們?cè)谒阉饕恍└⒚畹臇|西時(shí)，他們將如何瀏覽你的網(wǎng)站和應(yīng)用程序，和我們習(xí)慣的網(wǎng)站相比，視覺上沒有那么強(qiáng)大。

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

更多關(guān)于“UI培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項(xiàng)目實(shí)操的話可以點(diǎn)擊咨詢課程顧問，獲取試聽資格來(lái)試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。