用更多的空白
在這里或許我們應(yīng)該稱之為“空黑”。
有效地利用空白,在任何設(shè)計(jì)中都是重要的,對(duì)于深底色風(fēng)格而言更必不可少。
深色的設(shè)計(jì)令人感到“沉重”,擁擠的布局會(huì)加重這種感受。 看看一些流行的深底色設(shè)計(jì),可以注意到他們運(yùn)用了大量的空白。
網(wǎng)站 Black Estate 陳列了互聯(lián)網(wǎng)上優(yōu)秀的深底色頁面設(shè)計(jì),它本身也是一個(gè)值得關(guān)注的卓越設(shè)計(jì)。 其設(shè)計(jì)中運(yùn)用了大量的空白,還有獨(dú)到之處:有效地在某些重要元素旁邊使用空白。
首先,用戶會(huì)第一眼看見的元素——logo,旁邊有大量的空白。 然后用戶會(huì)注意到主內(nèi)容區(qū)和右側(cè)的酒瓶。 如你所見,空白完美地反襯出了內(nèi)容區(qū)的主標(biāo)題和酒瓶上的文字。
文字間距
由于可讀性是深底色設(shè)計(jì)的頭號(hào)問題,所以設(shè)計(jì)師應(yīng)該更多地關(guān)注文本的設(shè)計(jì)。在整體設(shè)計(jì)中,改善可讀性的一個(gè)途徑是增加文本的段落間距,字距及行高。
下圖中比較了在深底色和淺底色中不同文本間距造成的效果。
另一種方式來改善網(wǎng)站的可讀性的方式是增加字號(hào)。 如同本文中提到的大部分規(guī)則,更大的字體意味這更多的空白。 字母越大,字母的中間和四周就會(huì)出現(xiàn)更多空白。如下圖中的”a“字,字號(hào)越大,除了四周的空白越大,字母“a ”字臂和字谷中的空白也更大。
要注意,淺色背景上的小號(hào)文本比暗色背景上的更容易閱讀。 所以在設(shè)計(jì)新網(wǎng)站時(shí),要使用一些虛擬文本來做測試,以確保文本的易讀性, 如果不行,嘗試增加字號(hào)看是否有幫助。
文本的對(duì)比度
很多人都同意,深底色設(shè)計(jì)容易造成眼睛疲勞,過高或過低的對(duì)比度通常是罪魁禍?zhǔn)住?那如何找到完美的平衡點(diǎn)呢?
假設(shè)你在一個(gè)漆黑的房間里,突然有明亮的光線進(jìn)入,你肯定會(huì)感到非常不適。 但如果是在一個(gè)不太黑的屋子里,射入不那么亮的光線,則會(huì)好受得多。 這同樣適用于web設(shè)計(jì)。
尋找完美的對(duì)比度,意味著要找到背景暗度和文本亮度之間的平衡點(diǎn)。
下圖中簡略地說明了背景和文本之間的對(duì)比狀況。 你可以注意到背景和文本的亮度都在梯次降低。
在深底色背景上,為文字尋找合適的亮度要困難得多。要找到完美的平衡點(diǎn),必須要試驗(yàn)不同的配色。 通常不使用純黑或純白能帶來更好的效果。
如何選用字體
字體在設(shè)計(jì)中扮演著重要的角色,在深底色設(shè)計(jì)中我們應(yīng)該更謹(jǐn)慎地考慮字體的選用。 下圖中示范了在深色背景中14號(hào)無襯線字體和襯線字體的顯示效果。
(譯注:襯線:例如右邊Serif的“S”字母曲線兩端的小筆畫,那就是襯線。中文中的襯線字體是宋體,無襯線字體是黑體。襯線字體除了有筆畫頂端的裝飾筆畫,線條有明顯的粗細(xì)變化。而無襯線字體往往筆畫是粗細(xì)是一致的,或變化非常不明顯。)
無襯線字體可讀性更強(qiáng), 但許多設(shè)計(jì)師仍然選用襯線字體來表現(xiàn)設(shè)計(jì)中優(yōu)雅的部分。其中的訣竅是僅在大字號(hào)文本上選用襯線字體,大字號(hào)的襯線字體會(huì)帶來更多額外的空白,從而令每個(gè)字母都顯得非常清晰。
使用精簡的配色方案
為了讓深底色設(shè)計(jì)具有簡潔明快的外觀,設(shè)計(jì)者應(yīng)該選用精簡的配色方案。
從下面的幾個(gè)案例中,我們可以看出,炫目的配色方案在深底色設(shè)計(jì)中并不適用,因?yàn)閷?duì)比太強(qiáng)烈了。
堅(jiān)持只使用一種或兩種顏色。
如果要嘗試更多的顏色,試試與背景色同色系的搭配。
當(dāng)然,許多深底色的頁面設(shè)計(jì)中擁有激動(dòng)人心的配色方案。 你可以在使用正確技巧的情況下打破規(guī)則約束。
不過,一般狀況下,過多的顏色容易讓頁面看起來臟亂, 由于背景色已經(jīng)讓頁面顏色很深,所以請(qǐng)謹(jǐn)慎使用顏色。
提供切換模式
雖然我們已經(jīng)掌握了很多技巧令深底色設(shè)計(jì)更具吸引力,但是我們還可以再做一點(diǎn)努力已滿足更多的用戶。務(wù)必增加一個(gè)樣式表,以便用戶可以選擇切換到效果為“淺色背景+深色文字”的另一版本。
同時(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)格簡潔的界面切換功能。》。 在這里僅需創(chuàng)建深色和淺色兩份樣式表,而無需其它顏色(如橙色、藍(lán)色、白色)的界面皮膚。
最適合使用深底色風(fēng)格的設(shè)計(jì)類型
如前所述,很大一部分用戶認(rèn)為,深底色的頁面設(shè)計(jì)可以適用于某些網(wǎng)站類型,但那份調(diào)查中并沒有說清楚究竟是哪些類型。
一般而言,深底色風(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ì)
深色但帶給人的感覺是縱深,權(quán)威的,有力的。在使用得當(dāng)?shù)臅r(shí)候會(huì)看起來非常別致優(yōu)雅。這里有一些使用深底色風(fēng)格設(shè)計(jì)的案例和技法。
網(wǎng)站Larissa Meek 在背景里使用了古典風(fēng)格的紋理,創(chuàng)建了優(yōu)雅的基調(diào)。其它另類的特性令人對(duì)此設(shè)計(jì)印象深刻。
這種技法可應(yīng)用與多種類型的網(wǎng)站。復(fù)古和景點(diǎn)的紋理可以創(chuàng)造兼具優(yōu)雅和個(gè)性化的風(fēng)格。
大部分人會(huì)把古典的紋理和高檔關(guān)聯(lián)起來,所以使用這種方法可以很容易地創(chuàng)建讓網(wǎng)站看起來有檔次。
總結(jié)
深底色設(shè)計(jì)可以賦予設(shè)計(jì) 優(yōu)雅的氣質(zhì)和創(chuàng)造力,令產(chǎn)品的展示更加完美。但是并不適合所有類型的網(wǎng)站。
對(duì)于一些大型網(wǎng)站,尤其是用戶中可能有視力缺陷或行動(dòng)不便者,千萬不要使用深底色設(shè)計(jì),哪怕你提供了界面切換模式。
希望在您需要設(shè)計(jì)一個(gè)深底色背景風(fēng)格的網(wǎng)站時(shí),上述提示和策略可以對(duì)您有所幫助