暗色模式設(shè)計的正確打開方式

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

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

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

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

　　更好的用戶體驗：關(guān)注用戶體驗是數(shù)字時代產(chǎn)品設(shè)計最重要的趨勢之一。如果你想脫穎而出，你需要每個訪問你網(wǎng)站的人提供難以置信的體驗。暗色模式從緩解眼睛疲勞到電減小池電量消耗，這有助于讓客戶在網(wǎng)站上停留更長的時間。

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

　　更具包容性的設(shè)計：暗色模式不僅僅適合夜間對光敏感的人。這個解決方案對于視力受損的用戶來說會更適宜，因為他們在訪問你的網(wǎng)站時可能會受到眼睛疲勞的困擾。如果你想讓你的內(nèi)容對更廣泛的觀眾更有包容性，那么學(xué)習(xí)如何設(shè)計暗色模式是一個很好的開始。

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

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

　　1.色彩實驗

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

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

　　用不太可能引起眼睛過度疲勞的背景和顏色組合進行實驗。深灰色粉底通常展現(xiàn)出更大的適用范圍，因為你可以在灰色上顯示陰影。

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

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

　　2.考慮情緒影響

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

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

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

　　3.讓用戶選擇的自由

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

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

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

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

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

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

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

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

　　為界面增加活力：活力有助于改善你的背景和前景之間的對比。

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

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

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

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

　　為沉迷于黑暗模式的時代準(zhǔn)備你的網(wǎng)頁開發(fā)和設(shè)計作品是一種復(fù)雜的事情。你需要仔細考慮，當(dāng)人們在搜索一些更微妙的東西時，他們將如何瀏覽你的網(wǎng)站和應(yīng)用程序，和我們習(xí)慣的網(wǎng)站相比，視覺上沒有那么強大。

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

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