背景的選擇對界面的使用效率非常重要,合理的背景設計可讓界面變得更易用;反之,則可能會毀掉你精心設計的UI設計。儘管Dark Mode已經在UI設計中流行了相當長的時間,但深色背景在UI設計中運用依然是一個相當有爭議的議題。
然而,在很多實踐經驗證明,深色背景同樣能帶來良好的用戶體驗,提供極具吸引力的解決方案。接下來,Inspirr將和大家一起探討「UI設計中如何最大程度運用深色背景」。

UI設計知識點
UI設計是否適合運用深色背景?
2009年ProBlogger曾做過有關「網站背景色彩」的調研,當問及用戶喜歡什麼樣背景時,近一半用戶反饋喜歡淺色背景,原因是以文本內容為主的網站,淺色背景更符合日常閱讀習慣;而有意思的是,約10%的用戶反饋更喜歡暗色背景,約三分之一的用戶則認為背景色彩與網站本身的屬性及內容相關。然而,對於非文字驅動類的網站和APP,用戶對深色背景的需求可能會更高。
另外,早些時候不同領域的科學家還專門針對網頁的可讀性進行系統化的實驗和分析,得出的結論是:
背景和內容兩者之間的可讀性成正比,白色背景下的黑色文字擁有最好的可讀性,這個道理同樣適用於黑底白字。控制好對比度和清晰度,科學家又合理設計整個實驗,當中包含了許多不同色彩組合的有效性測試。
UI設計中如何最大程度運用深色背景?
一、 可讀性,是影響網站性能的關鍵因素之一

UI設計知識點
可讀性所牽涉的不僅有文本,界面中其他元素,如標識、符號、數字以及圖案等都存在識別問題。因此在UI設計中運用深色背景時,應在不同設備上測試界面中所有元素在深色背景下的實際效果,以提升網站的閱讀體驗。
二、 對比度,是確保界面的辨識度和清晰度的重要因素之一
在UI設計中,把握對比度的控制和平衡是非常重要的,弄不好很可能會影響整個界面的展現效果。因此,在選用深色背景時,盡量仔細測試每種色彩與之搭配的效果,以創造出更多的可能性。

UI設計知識點
另外,深色(尤其是黑色)會比其他色彩更加深沉厚重,非常適用於展示圖片、插畫、海報等內容;同時,若網站布局和結構合理,深色背景還能顯著提升其他視覺元素的表現,讓內容更有吸引力。
三、 色彩心理學,也是UI設計需考慮的因素
界面不僅僅是內容展現的平台,同時也是向訪客傳遞信息的重要容器。
從色彩心理學的角度來說,深色通常會顯得優雅而神秘,這也許是為什麼許多大品牌的網頁設計會圍繞深色做視覺設計,甚至以「黑白配」作為UI設計中主要的配色方案。

UI設計知識點
雖然深色背景很好用,但也有很多細節是需要注意的,如果沒有合理規劃這些細節,同樣會讓用戶在網站布局間迷失。
① 用戶研究:針對目標用戶進行實際調查、理論研究和實驗,並以最終數據和信息作為基礎,創造有效且有吸引力的配色方案。
② 競品研究:針對競爭對手和競品進行市場調研,並將調研結構運用到UI設計方案中,讓產品更容易被訪客理解,達到脫穎而出的效果。
③ 用戶測試:網站完成後,在不同設備和分辨率下測試他的可讀性、清晰度等實際效果,並改善不合理的部分,以達到最優質的特效。
④ 環境因素:考慮網站應提供訪客其他方面的支持,分析訪客喜歡或不喜歡網站的原因等其他外在因素。

UI設計知識點
最後我想說,
綜合上述內容,我們不難發現,相比起淺色背景,深色背景對UI設計也有不少獨特的優勢,如:
● 給網站營造神秘、優雅、奢華和高端的氛圍。
● 擁有廣闊而良好的對比度。
● 更容易創造視覺層次感,提高界面視覺吸引力。
● 創造視覺深度,讓內容更容易被獲取等。