如今,黑暗主題無處不在。
隨著人們繼續(xù)花更多的時間與科技互動,黑暗主題提供了一種更輕松的方式與數字世界互動。通常情況下,這些主題更容易吸引眼球,更有吸引力,而且對于專注的用戶來說是完美的。
整個2020年,無數知名品牌都推出了自己版本的黑色主題。谷歌為你的硬盤提供了解決方案,而蘋果和安卓已經在他們的操作系統中構建了暗主題性能。
如果你還沒有學會如何充分利用黑暗模式,那么你可能會錯過一個極好的機會來突出你的設計技能,并贏得更多的客戶。
為什么黑暗模式?
在我們深入探討創(chuàng)建自己的黑暗主題之前,讓我們先看看什么是黑暗模式,以及它為什么如此有效。
最終,暗色主題的創(chuàng)建是為了減少所有東西發(fā)出的亮度,從你的桌面和筆記本電腦,到你的智能手機和智能手表。黑暗主題有助于改善視覺人體工程學設計,通過減少眼睛疲勞,調整亮度以適應當前的照明條件,等等。此外,許多暗模式產品在節(jié)省電池壽命方面也很出色。
下面是在你的設計作品集中添加黑色主題的一些主要好處。
更好的用戶體驗:關注用戶體驗是數字時代最重要的趨勢之一。如果你想脫穎而出,你需要愿意給每個訪問你網站的人提供難以置信的體驗。黑暗模式減少了從眼睛疲勞到電池電量消耗的一切。這有助于讓客戶在網站上停留更長的時間。
創(chuàng)新和前沿吸引力:大多數公司都想證明自己能夠保持在行業(yè)的前沿。為網站主題或外觀提供一個可選擇的暗模式版本可以幫助你的客戶從人群中脫穎而出。隨著環(huán)境變得更加關注移動設備,越來越多的公司將尋找能夠提供最佳移動體驗的設計師。
支持通用設計:黑暗模式不僅僅適合夜間對光敏感的人。這個解決方案對于視力受損的用戶來說會更舒服,因為他們在訪問你的網站時可能會受到眼睛疲勞的困擾。如果你想讓你的內容對更廣泛的觀眾更有包容性,那么學習如何設計暗模式是一個很好的開始。
設計暗模式時的最佳實踐
在暗模式下設計比你想象的要容易得多。大多數時候,這只是簡單地考慮如何用更深更暗的東西來取代站點中更明亮、更突出的部分。
這里有一些有用的建議,可以讓你朝著正確的方向前進。
1. 實驗與顏色
對于許多網頁設計師來說,在開發(fā)暗模式解決方案時,一個大問題是他們太過于沉迷于純白色文本和純黑色背景。然而,這種高對比度的選擇可能會在一段時間后有點多。
使用深灰色作為你的主要表面顏色比使用真正的黑色要容易得多。此外,與其使用明亮的白色,還不如考慮使用稍微偏白的顏色,這樣看起來會更溫暖。
用不太可能引起眼睛過度疲勞的表面和顏色組合進行實驗。深灰色粉底通常提供更大的深度范圍,因為你可以在灰色上顯示陰影。
此外,當你嘗試使用顏色時,要記住飽和的顏色在非常深的表面上會產生痛苦的振動,使它們更難閱讀。降低顏色的飽和度有助于減少對比,讓你的網站更受歡迎。
在200-50范圍內的淺色在暗主題上會有更好的可讀性。但是,您總是可以嘗試您的選擇。谷歌材料設計建議使用大約15:8:1的對比度背景和文本。
2. 考慮情緒影響
暗色模式設計的大部分工作都是要弄清楚特定的顏色是如何協同工作的。鮮明的對比很容易讓人忘乎所以,尤其是當你習慣使用白色背景的時候。但是,您需要記住,您是為那些主要尋求更輕松、更壓抑瀏覽體驗的用戶設計的。
當你在工作的時候,記住也要考慮設計的情感方面。在任何環(huán)境下,色彩的情感都能成就或毀掉一個買家的旅程。然而,色彩心理學中經常被忽視的一個方面是,人們在黑色背景下對色調的感知是不同的。
例如,想想綠色。在明亮的背景下,它傳達了自然甚至是財富。然而,在深色背景下,同樣的綠色可能會被認為是有毒的,有毒的,甚至是病態(tài)的。當終端用戶訪問你的網站時,考慮他們將獲得什么樣的印象是很重要的。
3.給用戶選擇的自由
當你開始設計暗模式時,你可能會犯的一個最大的錯誤就是認為你應該完全專注于你的暗主題,而不是其他。如果您與用戶交互時,他們想從兩個世界中得到最好的東西,那么您將面臨一個問題。如果你是專門為應用程序設計的,你將需要網頁能夠在明暗主題之間自然切換。
學習如何在你創(chuàng)建的桌子上同時使用暗模式和亮模式,這將幫助你獲得更多的客戶選擇。請記住,您需要測試您的設計在這兩個主題中的性能和影響,以檢查它們是否提供相同的體驗,無論您的用戶選擇如何瀏覽。
雖然暗模式應該給終端用戶提供不同的體驗,但它仍然需要讓用戶感覺他們是在瀏覽同一個網站。這意味著你需要嘗試最自然的明暗模式組合。
4. 記住最基本的
請記住,盡管上面的三個技巧將幫助你走上黑暗模式設計的正確道路,但你也需要考慮你所設計的平臺的機會和局限性。你為谷歌Chrome網站提供的暗模式體驗將與你為運行在iOS上的東西創(chuàng)建的體驗大不相同。
檢查您所設計的系統所提供的文檔,將有助于您深入了解什么是實際可能的。
其他關于暗模式設計的小貼士包括:
關注你的內容:確保你的內容在頁面上脫穎而出,而不是太突出。
測試你的設計:在亮和暗的外觀下,你需要確保所有東西都能正常工作。
為你的界面采用活力:活力有助于改善你的背景和前景之間的對比。
使用語義色彩:語義色彩自動適應當前網站的外觀。硬編碼的顏色值不適應可能看起來更激進。
桌面著色:試著用透明和濾鏡來給你的網站和應用程序一個稍微暖和一點的著色——很適合深夜瀏覽
圖標:如有必要,在暗模式和亮模式中使用單獨的符號和圖標。
準備好設計黑暗模式了嗎?
為沉迷于黑暗模式的時代準備你的網頁開發(fā)和設計作品集是一種復雜的體驗。你需要仔細考慮,當人們在搜索一些更微妙的東西時,他們將如何瀏覽你的網站和應用程序,和我們習慣的網站相比,視覺上沒有那么強大。
最重要的是要記住,你的網站或應用程序上的所有東西在暗模式下看起來應該和在亮模式下一樣漂亮。當人們想要在應用程序中切換設置時,僅僅添加一個動態(tài)的黑色背景是不夠的。你需要深入你的設計,研究不同的字體、顏色和圖像是如何協同工作的。