別緻的深底色設計
深色但帶給人的感覺是縱深，權威的，有力的。在使用得當的時候會看起來非常別緻優雅。這裡有一些使用深底色風格設計的案例和技法。
**larissa meek 在背景裡使用了古典風格的紋理，建立了優雅的基調。其它另類的特性令人對此設計印象深刻。
這種技法可應用與多種型別的**。復古和景點的紋理可以創造兼具優雅和個性化的風格。
大部分人會把古典的紋理和高檔關聯起來，所以使用這種方法可以很容易地建立讓**看起來有檔次。
depth core 的設計非常簡潔，深色背景提公升了風格和檔次，也很明確的體現了**所有者的風格。別緻的設計可以提公升你所展示的作品的價值。
請注意，這款設計中沒有紋理，也沒有任何logo和作品展示之外的。否則這個設計將會顯得很臃腫，而照現在這樣，內容區的呈現非常精美和緊湊。
設計中乙個比較好的流程是先加入所有必不可少的元素，然後再乙個乙個加入所需的元素，設計師在此過程中可以不斷停下來思考下每個新元素的新增是否必要，布局有沒有因此而過於飽和。
被優雅背景襯托的藝術品會看起來更有價值，所以對於產品展示**，例如** tapbots ，乙個擁有深色背景和良好光澤感的設計，可以有助於產品的售出。
美妙的漸變和光線，以及模擬該高科技裝置本身質感的紋理，好的設計應該和產品本身相輔相成。
創意型的深底色設計
除了可以呈現出優雅的氣質，深底色設計可以比淺色設計帶有更多感**彩，從而使他們成為乙個創意型的專案。讓我們來盡可能展現一些創意型設計的案例。
這個**內容很少，但是布局非常另類，深色背景是內容很少**的完美選擇。
另外由於這種型別需要更多的空白，所以設計師也有更多發揮餘地。
grunge （搖滾）風格的**的呈現形式多樣，由於grunge 風格帶有黑暗和潦草的意味，所以深底色風格乙個匹配的選擇。
（譯註：grunge——另類搖滾的同義詞。起源於西雅圖的類金屬(metal-like)另類搖滾。grunge漸漸形成一種時尚風格，比如寬鬆、多層的衣服和撕破的牛仔褲等）
深底色grunge風格的trozo 看起來打破了所有的設計規則，雜亂的紋理，擁擠的布局，數量眾多的顏色。但是這個**依然看起來還不錯，這是怎麼回事呢？
有如此眾多和混亂的元素摻雜其中，對於設計初學者而言這可能非常棘手。維持這個設計平衡的關鍵是對元素進行合理的組織。
首先，背景明確地界定出了區塊，可以引導使用者視線，也能將內容放置到有組織的區塊裡。
其次，設計中有大量的空白。雖然背景是紋理，但重複的圖案實際上也是一種空白，可以幫助平衡布局中的輕重疏密。
出現在logo左邊、導航下方和頁面右側的空白最為明顯。另外在「exhibit 01″ 和 「exhibit 02″之間的空白也是很常用的手法。
空白可以平衡布局，哪怕它看起來不像空白而是紋理。此為，較少的文字和區塊（此設計中只有3個）有助於讓頁面看起來簡潔。.
**drew wilson 的設計看起來打破了使用精簡配色方案的規則，但實際上鮮豔和豐富的顏色僅僅集中在頭部的一小塊區域，沒有全域性濫用。
暗色的背景可以讓光感和鮮豔的顏色看起來更明亮更突出。
一些設計在規則之外創造了完美的效果。但是依然應該謹慎對待規則，避免讓太多漸變、紋理和顏色遍布整個頁面。
總結深底色設計可以賦予設計 優雅的氣質和創造力，令產品的展示更加完美。但是並不適合所有型別的**。
對於一些大型**，尤其是使用者中可能有視力缺陷或行動不便者，千萬不要使用深底色設計，哪怕你提供了介面切換模式。
希望在您需要設計乙個深底色背景風格的**時，上述提示和策略可以對您有所幫助。
kayla knight 為wdd特別撰稿。
文章出處：標準之路(
CSS設計指南 5章 頁面布局
5.1 布局的基本概念 多欄布局有三種基本實現方案 固定寬度 流動 彈性 固定寬度 固定寬度布局的大小不會隨使用者調整瀏覽器視窗大小變化，一般是900到1100畫素寬度。其中960畫素是最常見的，因為這個寬度適合所有現代瀏覽器。960 grid 流動布局 流動布局的大小會隨使用者調整瀏覽器視窗大小而...
前端開發頁面設計風格優化指南
從ant design element風格談起 1 ant design提出的原則 足不出戶 能在這個頁面解決的問題，就不要去其它頁面解決，因為任何頁面重新整理和跳轉都會引起變化盲視 change blindness 導致使用者心流 flow 被打斷。頻繁的頁面重新整理和跳轉，就像在看戲時，演員說完...
設計指南 布局
設計指南 布局 布局 是指頁面內容的尺寸 間距及位置。有效的布局對於幫助使用者快速找到他們想要的內容至關重要，並可以在結構外觀上令使用者感到舒服。什麼是布局？布局 是指頁面內容的尺寸 間距及位置。有效的布局對於幫助使用者快速找到他們想要的內容至關重要，並可以在結構外觀上令使用者感到舒服。如何設計有效...