隨著人類將更多的時間在與科技產品的互動上,暗色模式題提供了一種更輕松的方式來接觸數字世界。通常情況下,這些主題更容易讓人眼前一亮,更具吸引力,更適合專門的用戶。
如果你還沒有學會如何充分利用暗色模式,那么你可能會錯過一個極好的凸顯你的設計實力的機會,也會錯過贏得更多的用戶。
為什么暗色模式這么流行?
暗色模式的創建是為了減少所有東西發出的亮度,從你的桌面和筆記本電腦,到你的智能手機和智能手表。暗色模式有助于改善視覺人體工程學設計,通過減少眼睛疲勞,調整亮度以適應當前的照明條件,等等。此外,許多暗色模式產品在節省電池壽命方面也很出色。
更好的用戶體驗:關注用戶體驗是數字時代產品設計最重要的趨勢之一。如果你想脫穎而出,你需要每個訪問你網站的人提供難以置信的體驗。暗色模式從緩解眼睛疲勞到電減小池電量消耗,這有助于讓客戶在網站上停留更長的時間。
創新和最前沿吸引力:大多數公司都想證明自己能夠保持在行業的前沿。為網站主題或外觀提供一個可選擇的暗色模式版本可以幫助你的客戶從人群中脫穎而出。隨著環境變得更加關注移動設備,越來越多的公司將尋找能夠提供最佳移動體驗的設計師。
更具包容性的設計:暗色模式不僅僅適合夜間對光敏感的人。這個解決方案對于視力受損的用戶來說會更適宜,因為他們在訪問你的網站時可能會受到眼睛疲勞的困擾。如果你想讓你的內容對更廣泛的觀眾更有包容性,那么學習如何設計暗色模式是一個很好的開始。
設計暗色模式時的最佳做法
在暗色模式下設計比你想象的要容易得多。大多數時候,這只是簡單地考慮如何用更深更暗的東西來取代站點中更明亮、更突出的部分。
1.色彩實驗
對于許多網頁設計師來說,在開發暗色模式解決方案時,一個大問題是他們太過于沉迷于純白色文本和純黑色背景。然而,這種高對比度的選擇可能目前是比較普遍的做法。
使用深灰色作為你的主要背景面顏色比使用真正的黑色要合適的多。此外,與其使用明亮的白色,還不如考慮使用稍微偏白的顏色,這樣看起來會更溫暖。
用不太可能引起眼睛過度疲勞的背景和顏色組合進行實驗。深灰色粉底通常展現出更大的適用范圍,因為你可以在灰色上顯示陰影。
另外,當你嘗試顏色的時候,記住飽和的顏色經常在非常暗的表面上劇烈振動,使它們更難閱讀。降低色彩飽和度有助于降低對比度,讓網站具有更好的用戶體驗。
在 200-50 范圍內的淺色色調在深色主題上有更好的可讀性。然而,你總是可以嘗試你的選擇。 Google Material Design 建議的背景和文本之間的對比度是15:8:1。
2.考慮情緒影響
暗模式設計所涉及的大部分工作都是要弄清楚某些顏色是如何協同工作的。強烈的對比很容易讓人忘乎所以,尤其是當你習慣于在白色背景下工作時。然而,你需要記住,你是為一個主要尋求更輕松、更柔和的瀏覽的用戶體驗而設計的。
工作的時候,記得也要考慮下設計的情感方面。在任何環境下,色彩中的情感可以決定或破壞買家的體驗。然而,色彩心理學中一個經常被忽視的方面是,當人們處于黑色背景時,他們對陰影的感知不同。
例如,想想綠色。在一個淺色的背景下,它傳達了自然,甚至是金融財富。然而,在黑暗的背景下,同樣的綠色可能會讓人覺得是有毒的,有毒的,甚至是病態的。重要的是要考慮終端用戶到達你的站點后會得到什么樣的印象。
3.讓用戶選擇的自由
當你開始為黑暗模式設計時,你可能犯的最大錯誤之一就是認為你應該完全專注于暗色模式,而沒有別的選項。如果你和想要兩全其美的用戶交流,會讓你覺得很麻煩。如果你是為應用程序設計的,你需要的設計應該可以自然地在明暗主題之間切換。
了解如何在你創建的桌面上同時實現暗模式和光模式選項,將有助于產品觸達到更多的客戶。記住,你需要測試設計在這兩個模式中的性能和影響,不管你的用戶選擇如何瀏覽,檢查它們是否提供了相同的體驗。
4.記住最基礎的
請記住,盡管上面的三個提示將幫助你找到暗模式設計的正確思路 ,但你還需要考慮所設計的平臺的機會和限制。你能為谷歌Chrome網站提供的暗模式體驗將與你在 iOS上運行的體驗截然不同。
檢查正在設計的系統所提供的文檔將有助于你更深入了解實際可行的設計內容。
其他關于暗色模式設計的小貼士如下:
關注你的內容:確保內容在頁面上脫穎而出,但不會太突出。
測試設計:在亮和暗的外觀下,你需要確保所有東西都能正常工作。
為界面增加活力:活力有助于改善你的背景和前景之間的對比。
使用語義色彩:語義色彩自動適應當前網站的外觀。硬編碼的顏色值不適應可能看起來更激進。
桌面著色:試著用透明和濾鏡來給你的網站和應用程序一個稍微暖和一點的著色——很適合深夜瀏覽
圖標:如有必要,在暗模式和亮模式中使用單獨的符號和圖標。
準備好設計暗色模式了嗎?
為沉迷于黑暗模式的時代準備你的網頁開發和設計作品是一種復雜的事情。你需要仔細考慮,當人們在搜索一些更微妙的東西時,他們將如何瀏覽你的網站和應用程序,和我們習慣的網站相比,視覺上沒有那么強大。
最重要的是要記住,你的網站或應用程序上的所有東西在暗模式下看起來應該和在亮模式下一樣漂亮。當人們想要在應用程序中切換設置時,僅僅添加一個動態的黑色背景是不夠的。你需要深入你的設計,研究不同的字體、顏色和圖像是如何協同工作的。
更多關于“UI培訓”的問題,歡迎咨詢千鋒教育在線名師,如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問,獲取試聽資格來試聽我們的課程,在線零距離接觸千鋒教育大咖名師,讓你輕松從入門到精通。