深底色風(fēng)格的頁(yè)面設(shè)計(jì)很受歡迎，它可以創(chuàng)造出別致優(yōu)雅、極富創(chuàng)造力的效果。深底色設(shè)計(jì)適用于許多網(wǎng)站類(lèi)型，但并非所有。這種風(fēng)格應(yīng)該在恰當(dāng)?shù)臈l件下使用。

　　雖然深底色風(fēng)格可以帶來(lái)視覺(jué)沖擊力，但是很多設(shè)計(jì)師并不知道如何有效地表現(xiàn)他們，取得的效果往往適得其反。失敗的設(shè)計(jì)會(huì)導(dǎo)致可讀性差，難以吸引用戶(hù)，無(wú)法使用傳統(tǒng)的設(shè)計(jì)元素等問(wèn)題。

　　所以在這里，我們將討論一些深底色頁(yè)面設(shè)計(jì)的要素，以便讓你的下一次設(shè)計(jì)更受歡迎，更具創(chuàng)造性。

　　最新的調(diào)查表示，47%的受訪(fǎng)者首選淺底色的設(shè)計(jì)， 主要原因是基于可讀性。大多數(shù)人不喜歡閱讀深色背景上的亮色文字，那樣眼睛容易疲勞從而導(dǎo)致不適的閱讀體驗(yàn)。相比之下，10%的受訪(fǎng)者傾向于深底色的網(wǎng)站，另外36%的認(rèn)為將取決于網(wǎng)站類(lèi)型而定。

　　那什么是正確的答案呢?雖然每個(gè)人都有自己的觀(guān)點(diǎn)，但既然有如此高比例的用戶(hù)可以忍受深底色的頁(yè)面設(shè)計(jì)，有時(shí)甚至是他們的首選。作為網(wǎng)頁(yè)設(shè)計(jì)師必須了解如何為自己和客戶(hù)創(chuàng)建更有效的深底色設(shè)計(jì)。同時(shí)我們必須相信深底色風(fēng)格可以增加其可讀性和友好性。

　　使用更多的空白

　　在這里或許我們應(yīng)該稱(chēng)之為“空黑”。有效地利用空白，在任何設(shè)計(jì)中都是重要的，對(duì)于深底色風(fēng)格而言更必不可少。深色的設(shè)計(jì)令人感到“沉重”，擁擠的布局會(huì)加重這種感受。 看看一些流行的深底色設(shè)計(jì)，可以注意到他們運(yùn)用了大量的空白。

　　網(wǎng)站 Black Estate 陳列了互聯(lián)網(wǎng)上優(yōu)秀的深底色頁(yè)面設(shè)計(jì)，它本身也是一個(gè)值得關(guān)注的卓越設(shè)計(jì)。 其設(shè)計(jì)中運(yùn)用了大量的空白，還有獨(dú)到之處：有效地在某些重要元素旁邊使用空白。

　　首先，用戶(hù)會(huì)第一眼看見(jiàn)的元素——logo，旁邊有大量的空白。 然后用戶(hù)會(huì)注意到主內(nèi)容區(qū)和右側(cè)的酒瓶。 如你所見(jiàn)，空白完美地反襯出了內(nèi)容區(qū)的主標(biāo)題和酒瓶上的文字。

　　在Tictoc的設(shè)計(jì)中，精選內(nèi)容及相關(guān)圖片配合大片的空白共同構(gòu)成。隨著頁(yè)面下移，我們可以發(fā)現(xiàn)空白越來(lái)越少，這樣我們的注意力就會(huì)轉(zhuǎn)移到縮展示的內(nèi)容。

　　其關(guān)鍵是：空白可以逐步引導(dǎo)用戶(hù)到頁(yè)面底部

　　黑色背景增加了設(shè)計(jì)的縱深感。 網(wǎng)站非常依賴(lài)設(shè)計(jì)中的空白，配合黑色背景制造出來(lái)的創(chuàng)意效果，頁(yè)面才如此吸引人。

　　網(wǎng)站 Mark Dearman的布局中應(yīng)用了大量對(duì)稱(chēng)分布的空白。

　　每個(gè)內(nèi)容區(qū)塊間的空白提供了足夠的呼吸空間，在用戶(hù)視線(xiàn)瀏覽到下一區(qū)塊前，提供很好的休息點(diǎn)。大量的空白是深底色設(shè)計(jì)中必不可少的，它能夠令布局簡(jiǎn)潔，突出重要的元素，令整體外觀(guān)更優(yōu)雅。

文字間距

　　由于可讀性是深底色設(shè)計(jì)的頭號(hào)問(wèn)題，所以設(shè)計(jì)師應(yīng)該更多地關(guān)注文本的設(shè)計(jì)。在整體設(shè)計(jì)中，改善可讀性的一個(gè)途徑是增加文本的段落間距，字距及行高。

　　下圖中比較了在深底色和淺底色中不同文本間距造成的效果。

　　另一種方式來(lái)改善網(wǎng)站的可讀性的方式是增加字號(hào)。 如同本文中提到的大部分規(guī)則，更大的字體意味這更多的空白。 字母越大，字母的中間和四周就會(huì)出現(xiàn)更多空白。如下圖中的”a“字，字號(hào)越大，除了四周的空白越大，字母“a ”字臂和字谷中的空白也更大。

　　要注意，淺色背景上的小號(hào)文本比暗色背景上的更容易閱讀。 所以在設(shè)計(jì)新網(wǎng)站時(shí)，要使用一些虛擬文本來(lái)做測(cè)試，以確保文本的易讀性， 如果不行，嘗試增加字號(hào)看是否有幫助

　　文本的對(duì)比度

　　很多人都同意，深底色設(shè)計(jì)容易造成眼睛疲勞，過(guò)高或過(guò)低的對(duì)比度通常是罪魁禍?zhǔn)住?那如何找到完美的平衡點(diǎn)呢?

　　假設(shè)你在一個(gè)漆黑的房間里，突然有明亮的光線(xiàn)進(jìn)入，你肯定會(huì)感到非常不適。 但如果是在一個(gè)不太黑的屋子里，射入不那么亮的光線(xiàn)，則會(huì)好受得多。 這同樣適用于web設(shè)計(jì)。

　　尋找完美的對(duì)比度，意味著要找到背景暗度和文本亮度之間的平衡點(diǎn)。

　　下圖中簡(jiǎn)略地說(shuō)明了背景和文本之間的對(duì)比狀況。 你可以注意到背景和文本的亮度都在梯次降低。

　　在深底色背景上，為文字尋找合適的亮度要困難得多。要找到完美的平衡點(diǎn)，必須要試驗(yàn)不同的配色。 通常不使用純黑或純白能帶來(lái)更好的效果。

　　如何選用字體

　　字體在設(shè)計(jì)中扮演著重要的角色，在深底色設(shè)計(jì)中我們應(yīng)該更謹(jǐn)慎地考慮字體的選用。 下圖中示范了在深色背景中14號(hào)無(wú)襯線(xiàn)字體和襯線(xiàn)字體的顯示效果。

　　(譯注：襯線(xiàn)：例如右邊Serif的“S”字母曲線(xiàn)兩端的小筆畫(huà)，那就是襯線(xiàn)。中文中的襯線(xiàn)字體是宋體，無(wú)襯線(xiàn)字體是黑體。襯線(xiàn)字體除了有筆畫(huà)頂端的裝飾筆畫(huà)，線(xiàn)條有明顯的粗細(xì)變化。而無(wú)襯線(xiàn)字體往往筆畫(huà)是粗細(xì)是一致的，或變化非常不明顯。)

　　無(wú)襯線(xiàn)字體可讀性更強(qiáng)， 但許多設(shè)計(jì)師仍然選用襯線(xiàn)字體來(lái)表現(xiàn)設(shè)計(jì)中優(yōu)雅的部分。其中的訣竅是僅在大字號(hào)文本上選用襯線(xiàn)字體，大字號(hào)的襯線(xiàn)字體會(huì)帶來(lái)更多額外的空白，從而令每個(gè)字母都顯得非常清晰。

　　下圖的案例中， 襯線(xiàn)字體和無(wú)襯線(xiàn)字體的使用形成了優(yōu)美的搭配。

　　在大字號(hào)的文本(如標(biāo)題，導(dǎo)航和頁(yè)面頭部)上使用襯線(xiàn)字體，可令設(shè)計(jì)倍增優(yōu)雅。 在正文部分使用了簡(jiǎn)潔的無(wú)襯線(xiàn)字體，又提高可讀性和對(duì)比度。

使用精簡(jiǎn)的配色方案

　　為了讓深底色設(shè)計(jì)具有簡(jiǎn)潔明快的外觀(guān)，設(shè)計(jì)者應(yīng)該選用精簡(jiǎn)的配色方案。從下面的幾個(gè)案例中，我們可以看出，炫目的配色方案在深底色設(shè)計(jì)中并不適用，因?yàn)閷?duì)比太強(qiáng)烈了。堅(jiān)持只使用一種或兩種顏色。

　　如果要嘗試更多的顏色，試試與背景色同色系的搭配。

　　當(dāng)然，許多深底色的頁(yè)面設(shè)計(jì)中擁有激動(dòng)人心的配色方案。 你可以在使用正確技巧的情況下打破規(guī)則約束。不過(guò)，一般狀況下，過(guò)多的顏色容易讓頁(yè)面看起來(lái)臟亂， 由于背景色已經(jīng)讓頁(yè)面顏色很深，所以請(qǐng)謹(jǐn)慎使用顏色。

　　提供切換模式

　　雖然我們已經(jīng)掌握了很多技巧令深底色設(shè)計(jì)更具吸引力，但是我們還可以再做一點(diǎn)努力已滿(mǎn)足更多的用戶(hù)。務(wù)必增加一個(gè)樣式表，以便用戶(hù)可以選擇切換到效果為“淺色背景+深色文字”的另一版本。同時(shí)創(chuàng)建2個(gè)樣式表可以保證這一點(diǎn)，一個(gè)用于默認(rèn)的深底色風(fēng)格，一個(gè)用于替換為淺底色。

　　網(wǎng)站SitePoint上有不錯(cuò)的教程講到了這一點(diǎn) : Build a Simple Style Switcher in CSS.《如何使用css創(chuàng)建風(fēng)格簡(jiǎn)潔的界面切換功能。》。 在這里僅需創(chuàng)建深色和淺色兩份樣式表，而無(wú)需其它顏色(如橙色、藍(lán)色、白色)的界面皮膚。

　　最適合使用深底色風(fēng)格的設(shè)計(jì)類(lèi)型

　　如前所述，很大一部分用戶(hù)認(rèn)為，深底色的頁(yè)面設(shè)計(jì)可以適用于某些網(wǎng)站類(lèi)型，但那份調(diào)查中并沒(méi)有說(shuō)清楚究竟是哪些類(lèi)型。

　　一般而言，深底色風(fēng)格適合用于創(chuàng)意型或優(yōu)雅型的設(shè)計(jì)，比如：對(duì)于摩登時(shí)尚網(wǎng)站，深背景色可以顯得別致優(yōu)雅。對(duì)于手繪風(fēng)格的網(wǎng)站，深色背景可用于更好地體現(xiàn)個(gè)性與創(chuàng)意。

　　別致的深底色設(shè)計(jì)

　　深色但帶給人的感覺(jué)是縱深，權(quán)威的，有力的。在使用得當(dāng)?shù)臅r(shí)候會(huì)看起來(lái)非常別致優(yōu)雅。這里有一些使用深底色風(fēng)格設(shè)計(jì)的案例和技法。網(wǎng)站Larissa Meek 在背景里使用了古典風(fēng)格的紋理，創(chuàng)建了優(yōu)雅的基調(diào)。其它另類(lèi)的特性令人對(duì)此設(shè)計(jì)印象深刻。這種技法可應(yīng)用與多種類(lèi)型的網(wǎng)站。復(fù)古和景點(diǎn)的紋理可以創(chuàng)造兼具優(yōu)雅和個(gè)性化的風(fēng)格。

　　大部分人會(huì)把古典的紋理和高檔關(guān)聯(lián)起來(lái)，所以使用這種方法可以很容易地創(chuàng)建讓網(wǎng)站看起來(lái)有檔次。

　　Depth Core 的設(shè)計(jì)非常簡(jiǎn)潔，深色背景提升了風(fēng)格和檔次，也很明確的體現(xiàn)了網(wǎng)站所有者的風(fēng)格。別致的設(shè)計(jì)可以提升你所展示的作品的價(jià)值。

　　請(qǐng)注意，這款設(shè)計(jì)中沒(méi)有紋理，也沒(méi)有任何logo和作品展示之外的圖片。否則這個(gè)設(shè)計(jì)將會(huì)顯得很臃腫，而照現(xiàn)在這樣，內(nèi)容區(qū)的呈現(xiàn)非常精美和緊湊。

　　設(shè)計(jì)中一個(gè)比較好的流程是先加入所有必不可少的元素，然后再一個(gè)一個(gè)加入所需的元素，設(shè)計(jì)師在此過(guò)程中可以不斷停下來(lái)思考下每個(gè)新元素的添加是否必要，布局有沒(méi)有因此而過(guò)于飽和。

　　被優(yōu)雅背景襯托的藝術(shù)品會(huì)看起來(lái)更有價(jià)值，所以對(duì)于產(chǎn)品展示網(wǎng)站，例如網(wǎng)站 Tapbots ，一個(gè)擁有深色背景和良好光澤感的設(shè)計(jì)，可以有助于產(chǎn)品的售出。

　　美妙的漸變和光線(xiàn)，以及模擬該高科技設(shè)備本身質(zhì)感的紋理，好的設(shè)計(jì)應(yīng)該和產(chǎn)品本身相輔相成。

創(chuàng)意型的深底色設(shè)計(jì)

　　除了可以呈現(xiàn)出優(yōu)雅的氣質(zhì)，深底色設(shè)計(jì)可以比淺色設(shè)計(jì)帶有更多感情色彩，從而使他們成為一個(gè)創(chuàng)意型的項(xiàng)目。讓我們來(lái)盡可能展現(xiàn)一些創(chuàng)意型設(shè)計(jì)的案例。

　　這個(gè)網(wǎng)站內(nèi)容很少，但是布局非常另類(lèi)，深色背景是內(nèi)容很少網(wǎng)站的完美選擇。另外由于這種類(lèi)型需要更多的空白，所以設(shè)計(jì)師也有更多發(fā)揮余地。

　　Grunge (搖滾)風(fēng)格的網(wǎng)站的呈現(xiàn)形式多樣，由于grunge 風(fēng)格帶有黑暗和潦草的意味，所以深底色風(fēng)格一個(gè)匹配的選擇。

　　(譯注：grunge——另類(lèi)搖滾的同義詞。起源于西雅圖的類(lèi)金屬(metal-like)另類(lèi)搖滾。grunge漸漸形成一種時(shí)尚風(fēng)格，比如寬松、多層的衣服和撕破的牛仔褲等)

　　深底色Grunge風(fēng)格的Trozo 看起來(lái)打破了所有的設(shè)計(jì)規(guī)則，雜亂的紋理，擁擠的布局，數(shù)量眾多的顏色。但是這個(gè)網(wǎng)站依然看起來(lái)還不錯(cuò)，這是怎么回事呢?有如此眾多和混亂的元素?fù)诫s其中，對(duì)于設(shè)計(jì)初學(xué)者而言這可能非常棘手。維持這個(gè)設(shè)計(jì)平衡的關(guān)鍵是對(duì)元素進(jìn)行合理的組織。

　　首先，背景明確地界定出了區(qū)塊，可以引導(dǎo)用戶(hù)視線(xiàn)，也能將內(nèi)容放置到有組織的區(qū)塊里。其次，設(shè)計(jì)中有大量的空白。雖然背景是紋理，但重復(fù)的圖案實(shí)際上也是一種空白，可以幫助平衡布局中的輕重疏密。出現(xiàn)在logo左邊、導(dǎo)航下方和頁(yè)面右側(cè)的空白最為明顯。另外在“Exhibit 01″ 和 “Exhibit 02″之間的空白也是很常用的手法。

　　空白可以平衡布局，哪怕它看起來(lái)不像空白而是紋理。此為，較少的文本和區(qū)塊(此設(shè)計(jì)中只有3個(gè))有助于讓頁(yè)面看起來(lái)簡(jiǎn)潔。.

　　網(wǎng)站Drew Wilson 的設(shè)計(jì)看起來(lái)打破了使用精簡(jiǎn)配色方案的規(guī)則，但實(shí)際上鮮艷和豐富的顏色僅僅集中在頭部的一小塊區(qū)域，沒(méi)有全局濫用。暗色的背景可以讓光感和鮮艷的顏色看起來(lái)更明亮更突出。

　　一些設(shè)計(jì)在規(guī)則之外創(chuàng)造了完美的效果。但是依然應(yīng)該謹(jǐn)慎對(duì)待規(guī)則，避免讓太多漸變、紋理和顏色遍布整個(gè)頁(yè)面。

　　總結(jié)

　　深底色設(shè)計(jì)可以賦予設(shè)計(jì)優(yōu)雅的氣質(zhì)和創(chuàng)造力，令產(chǎn)品的展示更加完美。但是并不適合所有類(lèi)型的網(wǎng)站。對(duì)于一些大型網(wǎng)站，尤其是用戶(hù)中可能有視力缺陷或行動(dòng)不便者，千萬(wàn)不要使用深底色設(shè)計(jì)，哪怕你提供了界面切換模式。