當設計師面對一個新專案的UI設計時，第一個要面對的問題就是：選擇什麼樣的配色方案？配色方案五花八門，但從背景大致可以分為亮色UI和暗色UI。而我們要在UI的明與暗中做出選擇時，瞭解色彩的相關特性和利弊關係就顯得非常重要。著名設計工作室Tubik Studio在專案程式中一直關注著色彩的應用和明暗的選擇，並通過blog分享他們所尋找的相關研究與設計心得。這篇blog專門針對黑色背景進行研究，如果你的下次設計會涉及黑色背景，那這篇文章可以幫助避免踩坑，也會為你的設計方案提供重要的依據。
在使用者介面使用黑色背景和投影一直是個具有高度爭議的話題。選擇合適的背景毫無疑問在產品效率上扮演著重要的角色，它可能是佈局和功能上一擊秒殺其他解決方案的關鍵。今天這篇文章就來詳細分析一下UI使用黑色背景的利弊。
Tubik Studio通過一些過往部落格，已經分析了影響配色方案和背景顏色選擇的一些基本因素。本文則將更多的細節集中在關於網頁和APP的暗色UI優劣勢對比上。
首先，在建立和測試不同的使用者介面等設計實踐已經證實：暗色UI可以成為非常強大和吸引力的解決方案並提供良好的使用者體驗。讓我們學會運用它，並研究一下究竟如何使其獲得最佳成效。
視覺感知
在2009年的一個關於ProBlogger的民意調查結果中發現了了一些有趣的點。讀者們被問到更喜歡blog用什麼樣的背景顏色時，總是有一半的讀者說亮色背景更好，這也非常合理，因為傳統意義上的部落格總是充滿了大量的文字，而在亮色背景上的可讀性明顯優於其他方案。
但是，意外的是竟有10%的使用者反映他們更喜歡深色背景，並有超過三分之一的人提到背景顏色應該由部落格的性質和內容決定。在尋求設計方案的過程中這樣一個龐大的使用者群不應該被設計師忽視。此外，假設該產品不管是一個APP或網站，僅包含少量的文字內容，這群使用者的比例應該會更大。這個例子很好地證明了使用者研究和調查是整個設計程式中非常重要的環節。瞭解使用者的需求或者至少知道他們的預期可以幫助突破傳統視覺的限制。
Richard H. Hall和Patrick Hanna通過分析了早期不同科學家在網頁的呈現和可讀性上的實踐經驗，在研究中關於背景顏色的視覺感知，總結出：顏色之間的對比度越高，視覺效果越好。因此假設在其他的方面特別是對比度和元素佈局的易讀性被設計且經過測試比較合理時，黑色背景和白色背景完全可以一樣高效。這個研究基於對使用者進行不同顏色組合和可用性測試還發現了很多有趣且有用的資訊，強烈推薦給設計師們。
可讀性
一位非常著名的使用者體驗設計專家Jacob Nielsen提到：為文字和背景色選擇強對比的搭配，最優易讀性要求白底黑字，但黑底白字效果幾乎一樣好。然而反向配色的比例儘管和白底黑字相同，但還是會讓使用者產生迷惑和不習慣，因此會略微放慢閱讀速度。由此可見配色對可讀性的影響之多。
的確，可讀性是影響產品可用性至關重要的因素，並且影響的不僅僅只是文字。一切有意義的符號包括文字、數字、圖片、icon都需要在介面被輕鬆感知到。因此，當設計者選擇使用黑色背景時，尤其要做好在不同裝置上的體驗和測試字型、圖示和圖片的準備。
優秀的App和網站設計，比如這裡所收集的黑色獲獎網站設計都以提供了成功的設計解決方案為主，使用黑色作為配色的主要顏色，但絲毫不降低可讀性。
為了避免這個失誤，設計過程中需要遵循以下幾點：
－黑色背景會吞噬其他元素的一部分光亮，因此元素之間需要有足夠的空間；
－線條可以讓重複的內容變得更易閱讀和消化；
－為深色背景選擇亮色字型；
－文字的行距和長度對易讀性有很大影響，特別是黑色背景，因此段落的大小、字距、首字母應該被仔細並充分地考慮；
－深色並不代表純黑，因此在每一次具體的設計中，應當花些時間測試不同種類的深色背景和不同顏色的內容，多嘗試；
－投影、漸變、發光效果等會影響可讀性；
－無襯線字型更清晰，襯線字型更優雅，在實踐中合理運用這一點可以提高內容的整體可讀性。
對比度
webdesign.about.com釋出的一張表為我們展示了視覺感知方面另外一個有趣的研究：這張表格展示了不同顏色組合之後的對比度，表中可見黑色是唯一一個幾乎與其他顏色結合都能呈現良好對比度的顏色。
情感化
色彩心理學是選擇配色方案另外需要考慮的一個點。因為介面不僅僅是一個展示內容的區域，也是產品自身資訊的一個載體。黑暗的顏色通常與優雅和神祕聯絡在一起，更有官方、正式、有力量的感覺。或許，這正是許多強大的品牌在黑白中會選擇黑色展示自己，通常都是黑色背景，亮色內容像光一樣。介面設計中對心理學方面的研究有時可以給產品的設計方案和整體呈現提供一些額外的幫助。
優勢
根據上面提到的所有的點,我們可以總結下在介面使用黑色背景的優勢包括：
－風格強勁，表現優雅；
－感覺神祕；
－奢侈高階大氣；
－廣泛的對比配色選擇；
－支援多層次的視覺結構；
－深度展現內容；
－視覺吸引力。
值得注意的點
反之，深色背景要求全面關注和分析最微小的細節，如果沒有很好地顯示，我們很容易在圖層中迷失。在這之中我們應該考慮：
• 使用者研究
對目標受眾的實際調查、理論研究和實驗資料是選擇設計的重要依據，基於他們對產品的願望和期待，我們才能選擇出最有效和最具吸引力的設計方案。
• 競品分析
通過對競品的市場分析瞭解到在已經被其他玩家用過的設計方案，這個因素會影響原始設計方案的選擇，而幫助產品變得引入注目與眾不同。
• 使用者測試
相比之下，深色背景在可讀性和易讀性上表現地更加不穩定，因此應該在不同的裝置型別和解析度下進行使用者測試。
• 環境因素
通過分析產品會被目標使用者使用的典型場景，可以幫助提供更多的理由選擇或拒絕使用暗色背景。
• 內容的多少
螢幕或網頁中必須顯示的內容和佈局的數量也會影響背景顏色的選擇。深色背景如果元素之間空隙太小，易讀性會變很差。
• 內容的本質
相對於大量複製的文字內容，深色背景對資訊視覺化圖形的展示有著更好的優勢。（讀到這裡，譯者想到了Applewatch，就一個極具代表性的例子）