在用戶界面中使用暗色和暗色的背景，現(xiàn)在仍然屬于較具有爭(zhēng)議的問(wèn)題。難怪它是如此的真實(shí)：例如在音樂(lè)播放軟件中使用合適的播放背景，對(duì)于功能效率都有著至關(guān)重要的作用。反之，也可以造成界面中周邊布局和功能的解決方案，現(xiàn)在就說(shuō)說(shuō)采用暗色背景的一些利用和陷阱，對(duì)暗色調(diào)的使用更加運(yùn)用自如。
在以前的文章中，曾經(jīng)分析過(guò)可能會(huì)影響到配色方案以及背景顏色的選擇的一些提及到一些，這一次將會(huì)詳細(xì)討論暗色調(diào)的使用：在網(wǎng)站和移動(dòng)端應(yīng)用的優(yōu)缺點(diǎn)，對(duì)于Tubik工作室的客戶測(cè)試分析和實(shí)際工作投入，在暗色背景方面可以提供良好的用戶體驗(yàn)和強(qiáng)大的吸引力解決方案?，F(xiàn)在就讓我們進(jìn)入正題吧！
暗色調(diào)
2009年在ProBlogger就公布過(guò)一份調(diào)查報(bào)告，其中可以看到一些比較有趣的觀點(diǎn)，例如詢問(wèn)訪客喜歡在所訪問(wèn)的博客上看到什么樣的背景顏色，結(jié)果幾乎一半的讀者回答到背景合理就是最好的，因?yàn)椴┛褪莻鹘y(tǒng)平面的傳承，可讀性勝過(guò)其他。然而有10%的受訪者表示：更喜歡暗色背景，另外還要取決于博客的內(nèi)容和性質(zhì)。所以設(shè)計(jì)師在尋找相應(yīng)的解決方案時(shí)，不應(yīng)該忽略掉這么大用戶的想法，特別時(shí)在數(shù)字化產(chǎn)品中文本內(nèi)容占據(jù)主導(dǎo)地位的情況下，從另一個(gè)方面也可以看出用戶研究和調(diào)查也是設(shè)計(jì)過(guò)程的重要組成部分，了解了用戶所希望或訴求，我們就能在這方面推動(dòng)到傳統(tǒng)平面印刷所未達(dá)到的高度。
其中 Richard H. Hall 和Patrick Hanna就對(duì)背景顏色的視覺(jué)呈現(xiàn)做出來(lái)一個(gè)合理的解釋，其中對(duì)于視覺(jué)的感知中的應(yīng)用場(chǎng)景就是一個(gè)因素，在很早以前就實(shí)際中網(wǎng)頁(yè)性能和可讀性領(lǐng)域做了不同的科學(xué)分析，作者總結(jié)出《設(shè)計(jì)中合理的色彩組合可以造成更好的效果》，并強(qiáng)調(diào)更好的色彩組合的實(shí)際效果要高于單純的視覺(jué)對(duì)比度。因此暗色調(diào)的背景在一定程度上是有效的，特別是當(dāng)其他元素在淺色的時(shí)候。在元素之間進(jìn)行布局時(shí)，特定的對(duì)比度和清晰度，設(shè)計(jì)上是相對(duì)而言很有效的方式。這項(xiàng)研究調(diào)查包含了多個(gè)不同顏色組合之間的就有效性的角度對(duì)于用戶的反饋，因此強(qiáng)烈建議設(shè)計(jì)師參考一下。
可讀性
Jacob Nielsen 是一位很知名用戶體驗(yàn)師，他曾說(shuō)：由于背景和文字之間使用高對(duì)比度，對(duì)于可讀性最佳的就是在白色背景上使用黑色文字，另外在黑色背景上使用白色文字效果一樣。當(dāng)文字的對(duì)比度是相同的，反而是顏色會(huì)影響我們的可讀性，所以可讀性受到顏色的影響，只是在文本使用黑色的相對(duì)于使用白色要感覺(jué)到輕，相對(duì)于白色背景，暗色更加感覺(jué)重。
由此，可讀性是影響產(chǎn)品性能很重要的一個(gè)方面，不僅僅涉及到文字本身。它超越了簡(jiǎn)單的復(fù)制粘貼以及其他所有的符號(hào)意義，例如字母、數(shù)字、象形和ICON。因此使用深色背景應(yīng)該做好比較全面透徹的思考分析，并在不同的設(shè)備上測(cè)試字體、icon和圖片的可讀性情況。
關(guān)于網(wǎng)站和應(yīng)用，有一個(gè)很好的設(shè)計(jì)方法：在Awwwards上收集關(guān)于暗色調(diào)的最佳網(wǎng)站設(shè)計(jì)，這些都是擁有成功的的設(shè)計(jì)解決方案，但是在暗色背景的基礎(chǔ)之上依然存在不可讀性的案例，為了避免這些問(wèn)題，在設(shè)計(jì)中應(yīng)該是牢記的。
a、暗色背景會(huì)從其它元素中吸收部分光，因此需要留有足夠的空間和元素之間的透氣性；
b、合理的使用分割線可以有效的增強(qiáng)用戶的可讀性；
c、字體選擇使用深色的背景；
d、行間距和行高都對(duì)可讀性有影響，特別是在暗色背景下，所以字體的段落大小，字間距和行高都應(yīng)該仔細(xì)考慮；
e、暗色并不只是黑色，所以在設(shè)計(jì)每一個(gè)元素的時(shí)候，都應(yīng)該仔細(xì)在不同的暗色調(diào)上測(cè)試內(nèi)容和顏色的呈現(xiàn)；
f、色相、漸變和投影發(fā)光都會(huì)影響可讀性；
g、非襯線字體通常比較清晰，而襯線字體看起來(lái)更加優(yōu)雅，所以在實(shí)踐中可以使用這個(gè)原則來(lái)增強(qiáng)可讀性。
對(duì)比度
在視覺(jué)方面還要考慮另外一個(gè)由webdesign.about.com 公布的有趣表格，表中展示了不同的顏色組合在對(duì)比度和功能上的關(guān)系：黑色部分幾乎與所有顏色都具有良好的對(duì)比度，在設(shè)計(jì)界面中每一個(gè)特定情況下仔細(xì)測(cè)試，這個(gè)因素可以嘗試使用暗色背景作為設(shè)計(jì)方案的重要依據(jù)。
在可讀性方面，對(duì)比度也是能夠使內(nèi)容更容易識(shí)別和保持清晰度的因素之一。
根據(jù)早期的調(diào)查表明：在暗色的背景中要避免使用過(guò)于明亮的文字，可以進(jìn)行適當(dāng)?shù)牡蓽\灰色。或者減少比較極端的對(duì)比和較沉悶的顏色和投影；特別時(shí)做幻燈片背景時(shí)，使用白色背景，至少要用5%的灰色，用于分散亮眼的白強(qiáng)光，有趣的是，這種情況下依然會(huì)被看成“白色”，此外使用文字加粗，保證白色不會(huì)被背景吸收掉太多；這個(gè)原則在網(wǎng)頁(yè)和移動(dòng)屏幕上依然有效，并也會(huì)產(chǎn)生很多新的變種。
另外一個(gè)需要注意的就是暗色調(diào)使得頁(yè)面看起來(lái)較重，通常用于呈現(xiàn)圖形內(nèi)容，例如照片、圖片、插圖，海報(bào)和廣告提供了更多的機(jī)會(huì)。元素色彩之間的良好組成和一定的視覺(jué)層次可以顯著的提高視覺(jué)感受。這一因素使得暗色的背景高效和有吸引力的情況下，更加凸顯出來(lái)圖片所要傳達(dá)的內(nèi)容。
色彩傳達(dá)情感
色彩心理學(xué)是另一個(gè)重要選擇，這將不僅在有效的區(qū)域呈現(xiàn)，而其自身就會(huì)作為信息載體的背景。暗色通常是優(yōu)雅和神秘感的。此外還與高雅、形式、權(quán)威、聲望等有關(guān)，這或許是為什么許多著名時(shí)尚的品牌圍繞著深色而設(shè)計(jì)，并使用黑色和白色作為對(duì)比的視覺(jué)變現(xiàn)的重要原因之一，在界面設(shè)計(jì)中可以從這一方面提供設(shè)計(jì)解決方案。
使用暗色背景的好處
根據(jù)上述各點(diǎn)，可以在用戶界面采用深色背景可以提供一定的幫助，其中包括：
a、風(fēng)格和優(yōu)雅；
b、感受神秘；
c、奢華與比較知名的效果；
d、對(duì)比上選擇更加豐富多彩；
e、支持視覺(jué)層次的體現(xiàn)；
f、對(duì)內(nèi)容有較高的可讀性；
g、視覺(jué)吸引力。
但是我們?cè)谠O(shè)計(jì)時(shí)，還需要考慮以下方面：
a、用戶研究：用戶研究、實(shí)際調(diào)查、理論研究和實(shí)驗(yàn)數(shù)據(jù)都是目標(biāo)用戶的重要數(shù)據(jù)來(lái)源，而這些是目標(biāo)用戶所期望的有效行和有吸引力的設(shè)計(jì)方案的基礎(chǔ)；
b、競(jìng)品研究：接近競(jìng)爭(zhēng)對(duì)手的，并對(duì)設(shè)計(jì)方案作出適當(dāng)?shù)恼{(diào)整，使得應(yīng)用相對(duì)于競(jìng)爭(zhēng)對(duì)手更具有優(yōu)勢(shì)；
c、用戶測(cè)試；在暗色背景下可讀性和易讀性方面會(huì)受到各種不同設(shè)備以及不同分辨率的影響；
d、環(huán)境因素；產(chǎn)品被用戶使用表示贊成或反對(duì)的深色背景的選項(xiàng)之外的其他典型條件分析；
e、內(nèi)容數(shù)量；元素和模塊之間的布局，屏幕上功能受到背景影響的數(shù)量多少：使用暗色背景，而元素之間非常擁擠會(huì)影響到用戶體驗(yàn)；
f、內(nèi)容性質(zhì)；暗色的背景可以根據(jù)圖形元素，提供更好的功能呈現(xiàn)。
作者：Marina Yalanska
http://tubikstudio.com/dark-side-of-ui-benefits-of-dark-background
