深底色頁面設計要點

 　　用更多的空白

　　在這裡或許我們應該稱之為“空黑”。

　　有效地利用空白，在任何設計中都是重要的，對於深底色風格而言更必不可少。

　　深色的設計令人感到“沉重”，擁擠的布局會加重這種感受。 看看一些流行的深底色設計，可以注意到他們運用了大量的空白。

　　網站 Black Estate 陳列了互聯網上優秀的深底色頁面設計，它本身也是一個值得關注的卓越設計。 其設計中運用了大量的空白，還有獨到之處：有效地在某些重要元素旁邊使用空白。

　　首先，用戶會第一眼看見的元素——logo，旁邊有大量的空白。 然後用戶會注意到主內容區和右側的酒瓶。 如你所見，空白完美地反襯出了內容區的主標題和酒瓶上的文字。

　　文字間距

　　由於可讀性是深底色設計的頭號問題，所以設計師應該更多地關注文本的設計。在整體設計中，改善可讀性的一個途徑是增加文本的段落間距，字距及行高。

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

　　另一種方式來改善網站的可讀性的方式是增加字號。 如同本文中提到的大部分規則，更大的字體意味這更多的空白。 字母越大，字母的中間和四周就會出現更多空白。如下圖中的”a“字，字號越大，除了四周的空白越大，字母“a ”字臂和字谷中的空白也更大。

　　要注意，淺色背景上的小號文本比暗色背景上的更容易閱讀。 所以在設計新網站時，要使用一些虛擬文本來做測試，以確保文本的易讀性， 如果不行，嘗試增加字號看是否有幫助。

　　文本的對比度

　　很多人都同意，深底色設計容易造成眼睛疲勞，過高或過低的對比度通常是罪魁禍首。 那如何找到完美的平衡點呢?

　　假設你在一個漆黑的房間裡，突然有明亮的光線進入，你肯定會感到非常不適。 但如果是在一個不太黑的屋子裡，射入不那麼亮的光線，則會好受得多。 這同樣適用於web設計。

　　尋找完美的對比度，意味著要找到背景暗度和文本亮度之間的平衡點。

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

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

　　如何選用字體

　　字體在設計中扮演著重要的角色，在深底色設計中我們應該更謹慎地考慮字體的選用。 下圖中示范了在深色背景中14號無襯線字體和襯線字體的顯示效果。

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

　　無襯線字體可讀性更強， 但許多設計師仍然選用襯線字體來表現設計中優雅的部分。其中的訣竅是僅在大字號文本上選用襯線字體，大字號的襯線字體會帶來更多額外的空白，從而令每個字母都顯得非常清晰。

　　使用精簡的配色方案

　　為了讓深底色設計具有簡潔明快的外觀，設計者應該選用精簡的配色方案。

　　從下面的幾個案例中，我們可以看出，炫目的配色方案在深底色設計中並不適用，因為對比太強烈了。

　　堅持只使用一種或兩種顏色。

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

　　當然，許多深底色的頁面設計中擁有激動人心的配色方案。 你可以在使用正確技巧的情況下打破規則約束。

　　不過，一般狀況下，過多的顏色容易讓頁面看起來髒亂， 由於背景色已經讓頁面顏色很深，所以請謹慎使用顏色。

　　提供切換模式

　　雖然我們已經掌握了很多技巧令深底色設計更具吸引力，但是我們還可以再做一點努力已滿足更多的用戶。務必增加一個樣式表，以便用戶可以選擇切換到效果為“淺色背景+深色文字”的另一版本。

　　同時創建2個樣式表可以保證這一點，一個用於默認的深底色風格，一個用於替換為淺底色。

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

　　最適合使用深底色風格的設計類型

　　如前所述，很大一部分用戶認為，深底色的頁面設計可以適用於某些網站類型，但那份調查中並沒有說清楚究竟是哪些類型。

　　一般而言，深底色風格適合用於創意型或優雅型的設計，比如：對於摩登時尚網站，深背景色可以顯得別致優雅。對於手繪風格的網站，深色背景可用於更好地體現個性與創意。

　　別致的深底色設計

　　深色但帶給人的感覺是縱深，權威的，有力的。在使用得當的時候會看起來非常別致優雅。這裡有一些使用深底色風格設計的案例和技法。

　　網站Larissa Meek 在背景裡使用了古典風格的紋理，創建了優雅的基調。其它另類的特性令人對此設計印象深刻。

　　這種技法可應用與多種類型的網站。復古和景點的紋理可以創造兼具優雅和個性化的風格。

　　大部分人會把古典的紋理和高檔關聯起來，所以使用這種方法可以很容易地創建讓網站看起來有檔次。

　　總結

　　深底色設計可以賦予設計 優雅的氣質和創造力，令產品的展示更加完美。但是並不適合所有類型的網站。

　　對於一些大型網站，尤其是用戶中可能有視力缺陷或行動不便者，千萬不要使用深底色設計，哪怕你提供了界面切換模式。

　　希望在您需要設計一個深底色背景風格的網站時，上述提示和策略可以對您有所幫助