原文地址：http://design4users.com/2016/12/09/dark-side-of-ui-when-dark-is-good-for-users/
譯者：阿嗚GXR
在界面中使用深色和陰影一直以來是備受爭議的話題。因為合適的背景色是幫助提高整個產(chǎn)品使用效率的關(guān)鍵因素，反之它也可以否定其它圍繞布局和功能的設(shè)計方案，這就是為什么這個問題如此重要。今天我們的文章主要討論深色背景在用戶界面設(shè)計中的優(yōu)點和缺點，所以我們一起來看看深色這個話題。
在早期的文章中我們已經(jīng)分析過影響配色方案的選擇以及基礎(chǔ)背景色的因素并且提及了在此過程中要考慮的一些重點。這一次我們將聚焦更多細(xì)節(jié)在網(wǎng)頁和移動應(yīng)用設(shè)計中運(yùn)用深色的優(yōu)點與缺點。在Tubik工作室實際的工作經(jīng)驗中，他們通過創(chuàng)建和測試不同的用戶界面已經(jīng)證明了深色背景具有更加強(qiáng)大的吸引力，而且可以帶來積極地用戶體驗。讓我們先理所當(dāng)然的認(rèn)為這個結(jié)論是正確的，然后討論一下什么時候、什么地方使用可以讓其發(fā)揮最大的作用。
深色的視覺感知
2009年一項發(fā)表在ProBlogger中的調(diào)查結(jié)果已經(jīng)表達(dá)了一些有趣的觀點。詢問被調(diào)查的閱讀者更喜歡用哪一種顏色來做博客的背景色。幾乎一半的被測試者更傾向于選擇淺色的背景——這是合理的因為博客一直是文字驅(qū)動的，所以可讀性方面是最重要的。但是，10%的被調(diào)查者回答說他們更傾向于深色背景，并且超過1/3的人還提到這種選擇需要基于博客的性質(zhì)和內(nèi)容。設(shè)計師在設(shè)計過程中尋找方案時，如此高比例的用戶需求是不能夠被忽略的。此外，在一些不以文字驅(qū)動為主的網(wǎng)頁或應(yīng)用中這個比例將更大。這是一個很好的例子來證明用戶研究和調(diào)查是設(shè)計過程中很重要的部分。了解用戶想要什么或者至少知道可以改變用戶傳統(tǒng)習(xí)慣的極限是什么。
Richard H已經(jīng)針對這個問題提供了科學(xué)的研究。Hall和Patrick已經(jīng)重點強(qiáng)調(diào)了關(guān)于背景顏色的視覺感知和表現(xiàn)的觀點。一些科學(xué)家在早期通過一些實際的實驗已經(jīng)從網(wǎng)頁的性能和可讀性作了分析。作者總結(jié)如下：他們發(fā)現(xiàn)兩極的顏色組合有更好的性能（就是深色字放在淺色背景上），以及前面研究中提到的，對比度更大的顏色組合性能更好。因此，在其它情況下深色背景也可以像淺色背景一樣有效，尤其是布局元素的對比度和易讀性進(jìn)行了合適的設(shè)計和測試。研究包含了很多基于用戶測試得出的有意思且有用的信息，都是從不同顏色組合及其有效性的角度出發(fā)。
可讀性方面
用戶體驗設(shè)計領(lǐng)域非常有名的專家Jacob Nielsen提到：文字和背景需要使用有很強(qiáng)對比度的顏色。最理想的易讀性是黑色的字放在白色的背景上（所謂的正文本）。白色的字放在黑色背景上（所謂的負(fù)文本）也不錯。雖然正文本和負(fù)文本的對比度是一樣的，反色的配色方案會有一點偏離和降低用戶閱讀速度。易讀性容易受到配色方案的影響，讓文本比純黑更輕一些，尤其是背景色要比純白稍微深一些。事實上，可讀性是非常重要的，它不僅僅在文字方面影響產(chǎn)品的表現(xiàn)。所有的控件、字母、數(shù)字、圖形符號和圖標(biāo)都應(yīng)該在界面上都應(yīng)該容易地被注意到和辨認(rèn)出來。因此，設(shè)計師需要準(zhǔn)備在不同設(shè)備上選擇和測試適合深色背景的字體、圖標(biāo)和圖片。
例如在Awards上有一些優(yōu)秀的深色網(wǎng)頁和應(yīng)用設(shè)計的實踐集錦，它們使用深色背景作為基礎(chǔ)配色方案但是并沒有降低可閱讀性。為了避免降低可用性的問題，在設(shè)計過程中一定要記住：深色背景會吸收一些其他元素的光，所以一定要在各個元素之間留出一定的空間或者說要有透氣感。較長的距離可以讓大量內(nèi)容的可讀性和易讀性變高。行間距和文本長度的設(shè)計問題對可讀性的影響很大，尤其是在深色背景上。所以段落尺寸，字間距和行間距需要謹(jǐn)慎地考慮；深色不只是意味著黑色，在很多特定的設(shè)計案例中會在不同背景色上放置內(nèi)容，然后進(jìn)行多次開放性試驗的測試；陰影、漸變和發(fā)光都會影響可讀性；無襯線字體會更加清晰，但是襯線字體會看起來更加優(yōu)雅，將這些嘗試應(yīng)用在實踐中可以提高內(nèi)容的可讀性。
對比度方面
另外一個有意思的事情是webdesign.about.com提供的關(guān)于視覺方面的思考，詳見下方的表格。這個表格展現(xiàn)了在不同顏色組合中表現(xiàn)出來的不同程度的對比度，可以發(fā)現(xiàn)一個有趣的事實：表格中的黑色部分幾乎在所有顏色上都有良好的對比度。在每一個項目的界面設(shè)計中進(jìn)行謹(jǐn)慎的測試，這就是為什么可以試著使用深色背景作為不同的設(shè)計方案。
在可讀性方面，對比度對于內(nèi)容的可識別性和易讀性也是一個很重要的因素。在早期一個關(guān)于對比度方面的研究表明：在深色背景上，要確保你的文字不要過于明亮：把字從白色調(diào)整為淺灰色，或者使用暗色降低極端對比度和刺眼的程度。同樣的這個原則可以用在做幻燈片的時候，需要至少添加5%的灰色來降低白色的明亮度。有意思的是它“讀起來”還是像白色一樣。此外，還要將字體加粗，這樣字體就不會被深色背景吞沒。這個測試，也包括其它的測試，為網(wǎng)頁和App屏幕上更有效地呈現(xiàn)本質(zhì)內(nèi)容提供了新的調(diào)色方案。還有一件需要提醒的事情是，深色背景變得越來越深，通常是為了更好的展示例如圖片、照片、插圖、海報和廣告等圖形內(nèi)容。良好的構(gòu)圖以及遵循視覺層級的原則，能夠極大地提高布局元素的視覺感知。當(dāng)界面比原稿更加圖形化的時候，在一些案例中就可以讓深色背景變得更加有效且更加有吸引力。
情感認(rèn)知方面
色彩心理學(xué)是在選擇背景色時另外一種需要考慮的，設(shè)計不僅僅是為了展示外觀還要包括它所承載的內(nèi)容。深色總是與優(yōu)雅和神秘相聯(lián)系。此外，黑色也常常和正式、威望、權(quán)利聯(lián)系起來。這也許就是為什么很多大品牌喜歡圍繞黑白主題來建立自己的視覺展示，深色作為主導(dǎo)色，淺色呈現(xiàn)內(nèi)容給閱讀者。界面設(shè)計中使用這些可以為其它設(shè)計方案和產(chǎn)品的一般展示方案提供更多的支持。
深色背景的優(yōu)點
根據(jù)以上提到的所有觀點，我們可以總結(jié)出深色背景運(yùn)用在用戶界面中有以下優(yōu)點：
· 時尚且優(yōu)雅
· 神秘感
· 奢華且大牌
· 對比度的有效范圍變廣
· 支持視覺層級
· 更好地呈現(xiàn)內(nèi)容
· 視覺吸引力
需要考慮的情況
另一方面，在深色背景中如果一些很小的細(xì)節(jié)在排版中丟失或沒有合適的展示出來，需要特別注意和分析。這種情況下我們需要考慮：
用戶研究。實際調(diào)查、理論調(diào)查和實驗可以從目標(biāo)受眾那里得到重要的數(shù)據(jù)反饋，希望根據(jù)這些來選擇有效且有吸引力的設(shè)計方案。
競品研究。調(diào)查目前市場上相近的競爭產(chǎn)品可以幫助我們理解哪一種設(shè)計解決方案已經(jīng)被其它競爭對手應(yīng)用了，并且這些因素可以影響選擇最初的設(shè)計方案，有助于做出能夠引起用戶注意的產(chǎn)品。
用戶測試。深色背景在可讀性和辨識度方面容易出問題，因此應(yīng)該在各種設(shè)備和各種分辨率上進(jìn)行嚴(yán)格的測試。
環(huán)境因素。分析產(chǎn)品在被目標(biāo)受眾者使用時典型的條件，用戶可以提出其它的原因或者反對深色背景的觀點。
大量的內(nèi)容。大量的元素和區(qū)塊需要在屏幕或網(wǎng)頁上凸顯出來，可以影響對背景色的決定：更深的背景色在元素之間留了太少的空間導(dǎo)致很難獲取信息。
內(nèi)容的本質(zhì)。相對于大量的復(fù)制文字，深色背景可以更好地凸顯基于圖形元素的設(shè)計。
推薦閱讀
在用戶界面上使用深色背景的問題最近已經(jīng)成為專業(yè)人士關(guān)注的對象了。根據(jù)這些設(shè)計問題，我們?yōu)橄胍私飧嘞嚓P(guān)內(nèi)容的讀者推薦以下文章：
The Impact of Web Page Text-Background Color Combinations on Readability
Visual Perception: An Introduction
Art and Visual Perception: A Psychology of the Creative EyeColour Choices on Web Pages: Contrast vs Readability
The Dos and Don’ts of Dark Web Design
文章來源于Tubik Blog
