深色調(diào)的網(wǎng)站設(shè)計(jì)是比較流行的，它能營造出簡潔、富有創(chuàng)造性的效果。
它能滿足一些客戶對網(wǎng)頁設(shè)計(jì)風(fēng)格的要求。然而，它并不能適用于每一個(gè)客戶對網(wǎng)站設(shè)計(jì)風(fēng)格的要求，設(shè)計(jì)師應(yīng)根據(jù)實(shí)際情況而定。
盡管深色調(diào)的設(shè)計(jì)風(fēng)格能做到引人注目的效果，但很多設(shè)計(jì)師不知道如果有效的使用它來打動(dòng)、吸引瀏覽者。
深色調(diào)網(wǎng)頁設(shè)計(jì)經(jīng)常出現(xiàn)的問題是不易讀、沒有吸引力、很少打破傳統(tǒng)的設(shè)計(jì)模式。
這片文章，我們將討論一些如何讓你的下一個(gè)深色調(diào)網(wǎng)頁設(shè)計(jì)更能吸引、打動(dòng)廣大瀏覽者的方法和技巧，真正做到讓你的設(shè)計(jì)表達(dá)你的創(chuàng)意。
最近的調(diào)查顯示有超過47%的大眾用戶更喜歡亮色調(diào)的網(wǎng)頁設(shè)計(jì)。內(nèi)容的可讀性是主要原因。大多數(shù)的用戶不喜歡亮文字內(nèi)容顯示在深背景上，這樣的對比效果是比較刺眼的，給人不舒服的感覺。

相比之下，有10%的設(shè)計(jì)師通常選擇深色調(diào)來設(shè)計(jì)網(wǎng)頁，同時(shí)36%的人認(rèn)為應(yīng)該根據(jù)網(wǎng)頁的具體風(fēng)格要求進(jìn)行選擇。
那么，哪個(gè)是正確的答案那？歸結(jié)起來，每一個(gè)人都有自己的意見，事情就是這樣。
但是有相當(dāng)一部分用戶認(rèn)為重色調(diào)的設(shè)計(jì)是可以接受的，有時(shí)是設(shè)計(jì)首選。作為網(wǎng)頁設(shè)計(jì)師，我們不得不考慮如何有效的設(shè)計(jì)深色調(diào)的網(wǎng)頁給我們客戶與自己。
相信亮色調(diào)網(wǎng)頁設(shè)計(jì)的愛好者們希望深色調(diào)的網(wǎng)頁設(shè)計(jì)應(yīng)該更易閱讀、有好的用戶體驗(yàn)。

多使用留白
或者應(yīng)該叫“留黑”？合理有效的使用留白對于任何風(fēng)格的設(shè)計(jì)來說都是非常重要的。但對于深色調(diào)的網(wǎng)頁設(shè)計(jì)來說它則是必須的。
深色調(diào)的網(wǎng)頁設(shè)計(jì)給人總體的感覺是“沉重的”，如果整體布局結(jié)構(gòu)凌亂更增強(qiáng)了給人沉重的感覺。下面展示了一些比較受大眾喜歡的深色調(diào)網(wǎng)頁設(shè)計(jì)，他們合理使用了留白達(dá)到很好的設(shè)計(jì)效果。
Black Estate是互聯(lián)網(wǎng)里深色調(diào)網(wǎng)頁設(shè)計(jì)的一個(gè)而已，設(shè)計(jì)確實(shí)很棒并值得我們研究學(xué)習(xí)。設(shè)計(jì)自始自終都在合理、有效的使用留白，如何在設(shè)計(jì)元素周圍有效的使用了留白，從而設(shè)計(jì)出了這樣講究的網(wǎng)頁。
logo標(biāo)志周圍留有大量的“留白”，作為瀏覽者我們首先看到的就是它，其次看到的才是主要內(nèi)容與右邊的瓶子。正如你所看到的，留白是用來突出瓶子上的亮文字內(nèi)容與內(nèi)容標(biāo)題。

Tictoc的主要特點(diǎn)就是它在內(nèi)容、裝飾圖片周圍留用了大量的“留白”，當(dāng)我們繼續(xù)往下瀏覽時(shí)，我們看到使用了很少的留白，從而將我們的注意力集中在到下面的具體內(nèi)容上面。
這里的關(guān)鍵是，留白起到了引導(dǎo)的作用，逐步引導(dǎo)用戶瀏覽這個(gè)頁面。
網(wǎng)站通過使用大量的留白從而增加了深色調(diào)設(shè)計(jì)的層次，留白僅僅是為了實(shí)現(xiàn)深色調(diào)的效果而已

Mark Dearman網(wǎng)站的框架結(jié)構(gòu)自始自終采用靈活的、均勻的分布式布局進(jìn)行留白。
留白為每一個(gè)相鄰的內(nèi)容板塊里面的內(nèi)容提供了大量呼吸、停頓的空間。當(dāng)進(jìn)入到下一板塊內(nèi)容的時(shí)候，它們之間的留白是一個(gè)很好的休息地點(diǎn)。
留白對于深色調(diào)網(wǎng)頁設(shè)計(jì)來說是必須的，它不但有助于解決布局的凌亂、散亂，同時(shí)也是網(wǎng)頁設(shè)計(jì)增強(qiáng)整體感很重要的元素。

正文內(nèi)容留白
深色調(diào)網(wǎng)站內(nèi)容的易讀性是不喜歡深色調(diào)網(wǎng)頁用戶所擔(dān)心的問題。設(shè)計(jì)師必須將更多的精力放在文字本身上。
在整個(gè)設(shè)計(jì)上，通過調(diào)整段落與段落之間的距離大小、行距來增加留白是提高重背景網(wǎng)站文字內(nèi)容可讀性的一種方式。
下面展示的例子介紹了元素與元素之間留白、元素本身周圍留白在深背景和亮背景上的對比情況。

增加字體大小是提高深色調(diào)網(wǎng)頁內(nèi)容可讀性的另外一種方式，同文章以上介紹的方法一樣，大號的字體能增加其本身及周圍的留白，字體越大其周圍的留白空間就會(huì)越大。
比如下面的字母“a”，當(dāng)字體增大時(shí)，其周圍的留白就會(huì)隨著增大。無論是a周圍的空間還是其內(nèi)部的空間，還是與上下內(nèi)容之間的空隙留白都跟著一起變化。
注意，在淡色調(diào)上閱讀小文字內(nèi)容要比深色調(diào)上容易的多。當(dāng)在新的網(wǎng)站上設(shè)置字體的時(shí)候，一定要事先虛擬一些內(nèi)容以確保其清楚易讀。如果不清楚的話，可以嘗試增加一下字體的大小來調(diào)整。

文字對比
一些人普遍認(rèn)為大多數(shù)的深色調(diào)的網(wǎng)站容易導(dǎo)致眼睛疲勞。設(shè)計(jì)師們或多或少的忽視了對比。如何找到一個(gè)平衡點(diǎn)那？
如果你在一個(gè)漆黑的屋子里，突然遇到很強(qiáng)的亮光你會(huì)感覺不適應(yīng)的。但是，如果你在一個(gè)稍微有點(diǎn)弱光的屋子里再遇到亮光的話應(yīng)該會(huì)好一些兒。這個(gè)規(guī)則同樣使用于網(wǎng)頁設(shè)計(jì)。
找到一個(gè)完美的對比，也就是說在深背景于亮字之間找到一個(gè)對比平衡點(diǎn)。
下面的例子簡單的說明這點(diǎn)，如何平衡字體與背景之間的對比度。注意當(dāng)讓背景顏色變淺時(shí)其上面的文字也會(huì)一起變淺的。
找到文字與背景的對比平衡點(diǎn)是比較困難的。
為了找到最終的平衡點(diǎn)，我們使用不同的程度的背景顏色做試驗(yàn)。背景不要是純黑色，文字不是純白色是試驗(yàn)的最終平衡點(diǎn)。

字體的處理
字體在設(shè)計(jì)里面扮演著非常重要的角色，尤其在深色調(diào)布局設(shè)計(jì)里面更應(yīng)該深思熟慮的。下面的圖片展示了14點(diǎn)大小的serif和sans-serif字體在深背景上的效果。
sans-serif字體明顯更清晰、易讀一些。但是一部分設(shè)計(jì)師讓然是應(yīng)用serif字體。
僅僅放大sans-serif字體這一個(gè)方法，從而讓其周圍留有更多的留白，并讓其清晰易讀。

下面是在寫此文之前的網(wǎng)站論壇的界面截屏。網(wǎng)站同時(shí)使用了serif和sans-serif兩種字體，但是使用它們是有技巧的。
大字體比如標(biāo)題、導(dǎo)航等使用了serif字體來增加其效果。為了比較好的對比、提高可讀性，body里面定義了sans-serif字體。

使用少的配色方案
為了讓深色調(diào)的設(shè)計(jì)看起來更干凈、整齊，設(shè)計(jì)師應(yīng)盡量選擇少的配色方案。
通過一下幾個(gè)簡單的例子，過多的顏色配色方案針確實(shí)無意于深色調(diào)設(shè)計(jì)的，因?yàn)檫@樣的配色對比太強(qiáng)烈了。
保留一種或二種顏色系

部分設(shè)計(jì)師喜歡用對比強(qiáng)烈、刺激的配色方案，當(dāng)然這樣也是可以的，但要能夠恰如其分的使用好。
總體來說，顏色很容易讓網(wǎng)頁界面花、雜亂，本來深色調(diào)的網(wǎng)站顏色就很重了。所以在用色方面更應(yīng)該慎重一些！

中文原文：深色調(diào)網(wǎng)頁界面設(shè)計(jì)注意事項(xiàng)
英文原文：The Do’s and Don’ts of Dark Web Design
轉(zhuǎn)載請注明www.varhi.com，以表示對作者和譯者的尊重，多謝！