隨著人類(lèi)將更多的時(shí)間在與科技產(chǎn)品的互動(dòng)上，暗色模式題提供了一種更輕松的方式來(lái)接觸數(shù)字世界。通常情況下，這些主題更容易讓人眼前一亮，更具吸引力，更適合專(zhuān)門(mén)的用戶(hù)。
如果你還沒(méi)有學(xué)會(huì)如何充分利用暗色模式，那么你可能會(huì)錯(cuò)過(guò)一個(gè)極好的凸顯你的設(shè)計(jì)實(shí)力的機(jī)會(huì)，也會(huì)錯(cuò)過(guò)贏得更多的用戶(hù)。
為什么暗色模式這么流行?
暗色模式的創(chuàng)建是為了減少所有東西發(fā)出的亮度，從你的桌面和筆記本電腦，到你的智能手機(jī)和智能手表。暗色模式有助于改善視覺(jué)人體工程學(xué)設(shè)計(jì)，通過(guò)減少眼睛疲勞，調(diào)整亮度以適應(yīng)當(dāng)前的照明條件，等等。此外，許多暗色模式產(chǎn)品在節(jié)省電池壽命方面也很出色。
更好的用戶(hù)體驗(yàn)：關(guān)注用戶(hù)體驗(yàn)是數(shù)字時(shí)代產(chǎn)品設(shè)計(jì)最重要的趨勢(shì)之一。如果你想脫穎而出，你需要每個(gè)訪問(wèn)你網(wǎng)站的人提供難以置信的體驗(yàn)。暗色模式從緩解眼睛疲勞到電減小池電量消耗，這有助于讓客戶(hù)在網(wǎng)站上停留更長(zhǎng)的時(shí)間。
創(chuàng)新和最前沿吸引力：大多數(shù)公司都想證明自己能夠保持在行業(yè)的前沿。為網(wǎng)站主題或外觀提供一個(gè)可選擇的暗色模式版本可以幫助你的客戶(hù)從人群中脫穎而出。隨著環(huán)境變得更加關(guān)注移動(dòng)設(shè)備，越來(lái)越多的公司將尋找能夠提供最佳移動(dòng)體驗(yàn)的設(shè)計(jì)師。
更具包容性的設(shè)計(jì)：暗色模式不僅僅適合夜間對(duì)光敏感的人。這個(gè)解決方案對(duì)于視力受損的用戶(hù)來(lái)說(shuō)會(huì)更適宜，因?yàn)樗麄冊(cè)谠L問(wèn)你的網(wǎng)站時(shí)可能會(huì)受到眼睛疲勞的困擾。如果你想讓你的內(nèi)容對(duì)更廣泛的觀眾更有包容性，那么學(xué)習(xí)如何設(shè)計(jì)暗色模式是一個(gè)很好的開(kāi)始。
設(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)說(shuō)，在開(kāi)發(fā)暗色模式解決方案時(shí)，一個(gè)大問(wèn)題是他們太過(guò)于沉迷于純白色文本和純黑色背景。然而，這種高對(duì)比度的選擇可能目前是比較普遍的做法。
使用深灰色作為你的主要背景面顏色比使用真正的黑色要合適的多。此外，與其使用明亮的白色，還不如考慮使用稍微偏白的顏色，這樣看起來(lái)會(huì)更溫暖。
用不太可能引起眼睛過(guò)度疲勞的背景和顏色組合進(jìn)行實(shí)驗(yàn)。深灰色粉底通常展現(xiàn)出更大的適用范圍，因?yàn)槟憧梢栽诨疑巷@示陰影。
另外，當(dāng)你嘗試顏色的時(shí)候，記住飽和的顏色經(jīng)常在非常暗的表面上劇烈振動(dòng)，使它們更難閱讀。降低色彩飽和度有助于降低對(duì)比度，讓網(wǎng)站具有更好的用戶(hù)體驗(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è)主要尋求更輕松、更柔和的瀏覽的用戶(hù)體驗(yàn)而設(shè)計(jì)的。
工作的時(shí)候，記得也要考慮下設(shè)計(jì)的情感方面。在任何環(huán)境下，色彩中的情感可以決定或破壞買(mǎi)家的體驗(yàn)。然而，色彩心理學(xué)中一個(gè)經(jīng)常被忽視的方面是，當(dāng)人們處于黑色背景時(shí)，他們對(duì)陰影的感知不同。
例如，想想綠色。在一個(gè)淺色的背景下，它傳達(dá)了自然，甚至是金融財(cái)富。然而，在黑暗的背景下，同樣的綠色可能會(huì)讓人覺(jué)得是有毒的，有毒的，甚至是病態(tài)的。重要的是要考慮終端用戶(hù)到達(dá)你的站點(diǎn)后會(huì)得到什么樣的印象。
3.讓用戶(hù)選擇的自由
當(dāng)你開(kāi)始為黑暗模式設(shè)計(jì)時(shí)，你可能犯的最大錯(cuò)誤之一就是認(rèn)為你應(yīng)該完全專(zhuān)注于暗色模式，而沒(méi)有別的選項(xiàng)。如果你和想要兩全其美的用戶(hù)交流，會(huì)讓你覺(jué)得很麻煩。如果你是為應(yīng)用程序設(shè)計(jì)的，你需要的設(shè)計(jì)應(yīng)該可以自然地在明暗主題之間切換。
了解如何在你創(chuàng)建的桌面上同時(shí)實(shí)現(xiàn)暗模式和光模式選項(xiàng)，將有助于產(chǎn)品觸達(dá)到更多的客戶(hù)。記住，你需要測(cè)試設(shè)計(jì)在這兩個(gè)模式中的性能和影響，不管你的用戶(hù)選擇如何瀏覽，檢查它們是否提供了相同的體驗(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è)開(kāi)發(fā)和設(shè)計(jì)作品是一種復(fù)雜的事情。你需要仔細(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é)同工作的。
更多關(guān)于“UI培訓(xùn)”的問(wèn)題，歡迎咨詢(xún)千鋒教育在線名師，如果想要了解我們的師資、課程、項(xiàng)目實(shí)操的話可以點(diǎn)擊咨詢(xún)課程顧問(wèn)，獲取試聽(tīng)資格來(lái)試聽(tīng)我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門(mén)到精通。
京公網(wǎng)安備 11010802030320號(hào)