深底色網站：制造視覺沖擊力深底色網站的設計指南

1、(1)站類型，但并非全部。這種風格應當在恰當的條件下使用。往適得其反。失敗的設計會導致可讀性差，難以吸引用戶，無法使用傳統(tǒng)的設計元素等問題。最的調查表示，47%色背景上的亮色文字，那樣眼睛簡潔疲乏從而導致不適的閱讀體驗。相比之下，10%的受訪者傾向于深底36%的認為將取決于網站類型而定。設計學問資源網那什么是正確的答案呢?面設計，有時甚至是他們的首選。作為網頁設計師必需了解如何為自己和客戶創(chuàng)立更有效的深底色設計。同時我們必需信任深底色風格可以增加其可讀性和友好性。使用更多的空白在這里或許我們應當稱之為“空黑”。有效地利用空白，在任何設計中都是重要的，對于深底色風格而言更必不行少。深色的設計令人

2、感到“沉重”可以留意到他們運用了大量的空白。網站 Black Estate 陳設了互聯(lián)網上優(yōu)秀的深底色頁面設計，它本身也是一個值得關注的卓越設計。 其設計中運用了大量的空白，還有獨到之處：有效地在某些重要元素旁邊使用空白。首先，用戶會第一眼觀察的元素logo酒瓶。 如你所見，空白完善地反襯出了內容區(qū)的主標題和酒瓶上的文字。Tictoc 的設計中，精選內容及相關圖片協(xié)作大片的空白共同構成。隨著頁面下移，我們可以覺察空白越來越少，這樣我們的留意力就會轉移到縮呈現(xiàn)的內容。其關鍵是：空白可以逐步引導用戶到頁面底部面才如此吸引人。設計學問資源網設計學問資源網Mark Dearman的布局中應用了大量對稱

3、分布的空白。每個內容區(qū)塊間的空白供給了足夠的呼吸空間，在用戶視線掃瞄到下一區(qū)塊前，供給很好的休息點。大量的空白是深底色設計中必不行少的，它能夠令布局簡潔，突出重要的元素，令整體外觀更優(yōu)雅。文字間距文字間距由于可讀性是深底色設計的頭號問題，所以設計師應當更多地關注文本的設計。在整體設計中，改善可讀性的一個途徑是增加文本的段落間距，字距及行高。以下圖中比較了在深底色和淺底色中不同文本間距造成的效果。展覽工程包裝袋包裝袋設計更多的空白。 字母越大，字母的中間和四周就會消滅更多空白。如以下圖中的”a“字，字號越大，除了四周的空白越大，字母“a字臂和字谷中的空白也更大。文原來做測試，以確保文本的易讀性，

4、 假設不行，嘗試增加字號看是否有幫助設計學問資源網的平衡點呢?web 設計。查找完善的比照度，意味著要找到背景暗度和文本亮度之間的平衡點。品牌戰(zhàn)略以下圖中簡單地說明白背景和文本之間的比照狀況。 你可以留意到背景和文本的亮度都在梯次降低。通常不使用純黑或純白能帶來更好的效果。如何選用字體14 號無襯線字體和襯線字體的顯示效果。(Serif 的“S”母曲線兩端的小筆畫，那就是襯線。中文中的襯線字體是宋體，無襯線字體是黑體。襯線字體除了有筆畫頂端的裝飾筆畫，線條有明顯的粗細變化。而無襯線字體往往筆畫是粗細是全都的，或變化格外不明顯。)在大字號文本上選用襯線字體，大字號的襯線字體會帶來更多額外的空白，

5、從而令每個字母都顯得格外清楚。以下圖的案例中， 襯線字體和無襯線字體的使用形成了美麗的搭配。在大字號的文本(如標題，導航和頁面頭部)上使用襯線字體，可令設計倍增優(yōu)雅。 在正文局部使用了簡潔的無襯線字體，又提高可讀性和比照度。使用精簡的配色方案為了讓深底色設計具有簡潔明快的外觀，設計者應中選用精簡的配色方案。從下面的幾個案例中，我假設要嘗試更多的顏色，試試與背風光同色系的搭配。不過，一般狀況下，過多的顏色簡潔讓頁面看起來臟亂， 由于背風光已經讓頁面顏色很深，所以請慎重使用顏色。設計學問資源網雖然我們已經把握了很多技巧令深底色設計更具吸引力，但是我們還可以再做一點努力已滿足更多的用戶。務必增加一個

6、樣式表，以便用戶可以選擇切換到效果為“淺色背景+深色文字”的另一版本。同時創(chuàng)立2 個樣式表可以保證這一點，一個用于默認的深底色風格，一個用于替換為淺底色。SitePoint 上有不錯的教程講到了這一點 : Build a Simple Style Switcher in CSS.如何使用css創(chuàng)立風格簡潔的界面切換功能。 在這里僅需創(chuàng)立深色和淺色兩份樣式表，而無需其它顏色(如橙色、藍色、白色)的界面皮膚。最適合使用深底色風格的設計類型婚紗攝影戶外廣告名片設計注冊公司網站優(yōu)化品牌代理廣告設計如前所述，很大一局部用戶認為，深底色的頁面設計可以適用于某些網站類型，但那份調查中并沒有如前所述，很大一局

7、部用戶認為，深底色的頁面設計可以適用于某些網站類型，但那份調查中并沒有說清楚到底是哪些類型。一般而言，深底色風格適合用于創(chuàng)意型或優(yōu)雅型的設計，比方：對于摩登時尚網站，深背風光可以顯得別致優(yōu)雅。對于手繪風格的網站，深色背景可用于更好地表達共性與創(chuàng)意。別致的深底色設計深色但帶給人的感覺是縱深，權威的，有力的。在使用得當的時候會看起來格外別致優(yōu)雅。這里有一Larissa Meek 在背景里使用了古典風格的紋理，創(chuàng)立了優(yōu)雅可以制造兼具優(yōu)雅和共性化的風格。DepthDepth Core 的設計格外簡潔，深色背景提升了風格和檔次，也很明確的表達了網站全部者的風格。別致的設計可以提升你所呈現(xiàn)的作品的價值。設

8、計學問資源網請留意，這款設計中沒有紋理，也沒有任何logo 和作品呈現(xiàn)之外的圖片。否則這個設計將會顯得很臃腫，而照現(xiàn)在這樣，內容區(qū)的呈現(xiàn)格外精巧和緊湊。設計中一個比較好的流程是先參加全部必不行少的元素，然后再一個一個參加所需的元素，設計師在此過程中可以不斷停下來思考下每個元素的添加是否必要，布局有沒有因此而過于飽和。Tapbots ，一個擁有深色背景和良好光澤感的設計，可以有助于產品的售出。奇特的漸變和光線，以及模擬該高科技設備本身質感的紋理，好的設計應當和產品本身相輔相成。創(chuàng)意型的深底色設計創(chuàng)意型的深底色設計除了可以呈現(xiàn)出優(yōu)雅的氣質，深底色設計可以比淺色設計帶有更多感情顏色，從而使他們成為一

9、個創(chuàng)意型的工程。讓我們來盡可能呈現(xiàn)一些創(chuàng)意型設計的案例。這個網站內容很少，但是布局格外另類，深色背景是內容很少網站的完善選擇。另外由于這種類型需要更多的空白，所以設計師也有更多發(fā)揮余地。畫冊設計VI 設計Grunge (搖滾)風格的網站的呈現(xiàn)形式多樣，由于grunge 風格帶有黑暗和潦草的意味，所以深底色風格一個匹配的選擇。(譯注：grunge另類搖滾的同義詞。起源于西雅圖的類金屬(metal-like)另類搖滾。grunge 漸漸形成一種時尚風格，比方寬松、多層的衣服和撕破的牛仔褲等)Grunge 風格的Trozo 看起來打破了全部的設計規(guī)章，雜亂的紋理，擁擠的布局，數量眾多的學者而言這可能格外麻煩。維持這個設計平衡的關鍵是對元素進展合理的組織?！癊xhibit01 “Exhibit02之間的空白也是很常用的手法。(3 個)有助于讓頁面看起來簡潔。. 在頭部的一小塊區(qū)域，沒有