在用戶界面中使用暗色和暗色的背景，現在仍然屬于較具有爭議的問題。難怪它是如此的真實：例如在音樂播放軟件中使用合適的播放背景，對于功能效率都有著至關重要的作用。反之，也可以造成界面中周邊布局和功能的解決方案，現在就說說采用暗色背景的一些利用和陷阱，對暗色調的使用更加運用自如。

在以前的文章中，曾經分析過可能會影響到配色方案以及背景顏色的選擇的一些提及到一些，這一次將會詳細討論暗色調的使用：在網站和移動端應用的優缺點，對于Tubik工作室的客戶測試分析和實際工作投入，在暗色背景方面可以提供良好的用戶體驗和強大的吸引力解決方案。現在就讓我們進入正題吧！

暗色調

2009年在ProBlogger就公布過一份調查報告，其中可以看到一些比較有趣的觀點，例如詢問訪客喜歡在所訪問的博客上看到什么樣的背景顏色，結果幾乎一半的讀者回答到背景合理就是最好的，因為博客是傳統平面的傳承，可讀性勝過其他。然而有10%的受訪者表示：更喜歡暗色背景，另外還要取決于博客的內容和性質。所以設計師在尋找相應的解決方案時，不應該忽略掉這么大用戶的想法，特別時在數字化產品中文本內容占據主導地位的情況下，從另一個方面也可以看出用戶研究和調查也是設計過程的重要組成部分，了解了用戶所希望或訴求，我們就能在這方面推動到傳統平面印刷所未達到的高度。

其中 Richard H. Hall 和Patrick Hanna就對背景顏色的視覺呈現做出來一個合理的解釋，其中對于視覺的感知中的應用場景就是一個因素，在很早以前就實際中網頁性能和可讀性領域做了不同的科學分析，作者總結出《設計中合理的色彩組合可以造成更好的效果》，并強調更好的色彩組合的實際效果要高于單純的視覺對比度。因此暗色調的背景在一定程度上是有效的，特別是當其他元素在淺色的時候。在元素之間進行布局時，特定的對比度和清晰度，設計上是相對而言很有效的方式。這項研究調查包含了多個不同顏色組合之間的就有效性的角度對于用戶的反饋，因此強烈建議設計師參考一下。

可讀性

Jacob Nielsen 是一位很知名用戶體驗師，他曾說：由于背景和文字之間使用高對比度，對于可讀性最佳的就是在白色背景上使用黑色文字，另外在黑色背景上使用白色文字效果一樣。當文字的對比度是相同的，反而是顏色會影響我們的可讀性，所以可讀性受到顏色的影響，只是在文本使用黑色的相對于使用白色要感覺到輕，相對于白色背景，暗色更加感覺重。

由此，可讀性是影響產品性能很重要的一個方面，不僅僅涉及到文字本身。它超越了簡單的復制粘貼以及其他所有的符號意義，例如字母、數字、象形和ICON。因此使用深色背景應該做好比較全面透徹的思考分析，并在不同的設備上測試字體、icon和圖片的可讀性情況。

關于網站和應用，有一個很好的設計方法：在Awwwards上收集關于暗色調的最佳網站設計，這些都是擁有成功的的設計解決方案，但是在暗色背景的基礎之上依然存在不可讀性的案例，為了避免這些問題，在設計中應該是牢記的。

a、暗色背景會從其它元素中吸收部分光，因此需要留有足夠的空間和元素之間的透氣性；

b、合理的使用分割線可以有效的增強用戶的可讀性；

c、字體選擇使用深色的背景；

d、行間距和行高都對可讀性有影響，特別是在暗色背景下，所以字體的段落大小，字間距和行高都應該仔細考慮；

e、暗色并不只是黑色，所以在設計每一個元素的時候，都應該仔細在不同的暗色調上測試內容和顏色的呈現；

f、色相、漸變和投影發光都會影響可讀性；

g、非襯線字體通常比較清晰，而襯線字體看起來更加優雅，所以在實踐中可以使用這個原則來增強可讀性。

對比度

在視覺方面還要考慮另外一個由webdesign.about.com 公布的有趣表格，表中展示了不同的顏色組合在對比度和功能上的關系：黑色部分幾乎與所有顏色都具有良好的對比度，在設計界面中每一個特定情況下仔細測試，這個因素可以嘗試使用暗色背景作為設計方案的重要依據。

在可讀性方面，對比度也是能夠使內容更容易識別和保持清晰度的因素之一。

根據早期的調查表明：在暗色的背景中要避免使用過于明亮的文字，可以進行適當的淡化成淺灰色。或者減少比較極端的對比和較沉悶的顏色和投影；特別時做幻燈片背景時，使用白色背景，至少要用5%的灰色，用于分散亮眼的白強光，有趣的是，這種情況下依然會被看成“白色”，此外使用文字加粗，保證白色不會被背景吸收掉太多；這個原則在網頁和移動屏幕上依然有效，并也會產生很多新的變種。

另外一個需要注意的就是暗色調使得頁面看起來較重，通常用于呈現圖形內容，例如照片、圖片、插圖，海報和廣告提供了更多的機會。元素色彩之間的良好組成和一定的視覺層次可以顯著的提高視覺感受。這一因素使得暗色的背景高效和有吸引力的情況下，更加凸顯出來圖片所要傳達的內容。

色彩傳達情感

色彩心理學是另一個重要選擇，這將不僅在有效的區域呈現，而其自身就會作為信息載體的背景。暗色通常是優雅和神秘感的。此外還與高雅、形式、權威、聲望等有關，這或許是為什么許多著名時尚的品牌圍繞著深色而設計，并使用黑色和白色作為對比的視覺變現的重要原因之一，在界面設計中可以從這一方面提供設計解決方案。

使用暗色背景的好處

根據上述各點，可以在用戶界面采用深色背景可以提供一定的幫助，其中包括：

a、風格和優雅；

b、感受神秘；

c、奢華與比較知名的效果；

d、對比上選擇更加豐富多彩；

e、支持視覺層次的體現；

f、對內容有較高的可讀性；

g、視覺吸引力。

但是我們在設計時，還需要考慮以下方面：

a、用戶研究：用戶研究、實際調查、理論研究和實驗數據都是目標用戶的重要數據來源，而這些是目標用戶所期望的有效行和有吸引力的設計方案的基礎；

b、競品研究：接近競爭對手的，并對設計方案作出適當的調整，使得應用相對于競爭對手更具有優勢；

c、用戶測試；在暗色背景下可讀性和易讀性方面會受到各種不同設備以及不同分辨率的影響；

d、環境因素；產品被用戶使用表示贊成或反對的深色背景的選項之外的其他典型條件分析；

e、內容數量；元素和模塊之間的布局，屏幕上功能受到背景影響的數量多少：使用暗色背景，而元素之間非常擁擠會影響到用戶體驗；

f、內容性質；暗色的背景可以根據圖形元素，提供更好的功能呈現。

作者：Marina Yalanska

http://tubikstudio.com/dark-side-of-ui-benefits-of-dark-background