互聯網信息時代，很多內容為主的網站都信息過載，這導致了載入速度過慢。電商網站如此，新聞類網站也是如此，而一些設計師作品集網站或者設計機構的網站也是如此，老實說，作為設計師，應該避免信息過載現象的出現。而一旦你掌握這些技巧，那么你離高薪酬的資深設計師也就不遠咯。

內容主導的頁面布局會自然而然的繁雜、問題多，設計這種網站的過程，也是一個艱難的挑戰，而且網站擁有者的目的是想給用戶提供更多的信息，信息會越來越多。當然，可以聽聽專家指導，堅持一些亙古不變的設計原則，來確保布局的組織良好和架構分明，這就能減少很多不必要的繁雜。

推薦閱讀：
聊聊網頁設計創新式布局與交互

今天涵蓋了一堆信息量大，但是卻不雜亂的網頁設計，具備愉悅的即視感。不吹牛，您可以挨個點看感受一下：）

Action Film
相當復雜的網站，但是在布局上很聰明將一堆小視頻組織的條理分明。登錄頁分成好幾條線，是精確的多媒體側邊欄。

組織有序，不同尺寸的很多照片排列在一起也非常有序，打破了單調布局的常規。

House
柵格布局，整齊、靈活，不同區域的縮略圖和文字看上去很舒服，很有區分性。

W Magazine
有樣、精致，內容區域文本和圖像的高度對比，黑色的背景也起到了良好的陪襯。

Served MCR
強烈的手繪風格，極其沖擊的視覺表現。細節到位，草圖很有趣，一點點精致的水彩效果，幾組手繪風字體，多而不亂。

Butterfly
信息密集的作品集網站，設計師很有技巧的利用色彩和扁平的圖像來中和"繁雜的信息"

Health
著名的在線雜志，信息結構層次分明，背景干干凈凈。

My Own Corks
干凈優雅，扁平化的區塊帶來了額外的呼吸空間。

Karl Anders
結構堅實有力，標準的平鋪式格局。黑白配色，去除了繁雜感。

Tomorrow Counts
大量的文本和信息，因此他們仔細的調整了布局，以便達到更好的可讀性。柔軟的綠色，活力的橙色，這兩種顏色作為點綴，點亮了整個頁面。

REI 1440
從來沒見過吧，概念化、獨一無二、效果令人振奮。
通過鍵盤便可以實現縮略圖的滾動。

The Camry Effect
很好的將功能不同的區塊和數據良好的結合到了一起，網站也提供了過濾功能，讓用戶自行定制顯示內容。

Phillips Internet Consulting
標準的圖像滑動，屏幕只有一半用來顯示圖像，這給導航元素留下了大量的空間。不過，深邃的背景和較大的字體有點讓人感覺雜亂。

Accuel AZKS
簡明、直觀、高效，讓用戶快速了解設計師作品，深色效果，每個作品的風格不一，彼此襯托。欄式布局有效的防止了視覺混淆。

Etch
整個網站，黑色支配，但是Lomo風的圖像賦予整個頁面一種活力。內容之間留下了充足的空間，讓頁面變得很有序。

Vogue
信息量大，內容非常的流行。沒有沿襲雜志等紙媒傳統，完美無瑕的展示各個照片，通過白色背景作為間隔。三欄式布局。

The New York Times
深思熟慮的設計，如何在內容量大的前提下保證信息組織的效率？類似報紙的風格。盡管這個頁面的第一印象是繁雜，但是仔細觀察，你會發現頁面的分割、組織其實非常有效率，易于消化。

How Cool
又一個流行時尚類網站，主要通過圖片的視覺表現來吸引用戶注意。主頁面看起來非常協調整齊，因為對留白區域的合理運用。

Mamo
很用心的布局，僅僅包含了Logo、標題以及圖像。讓整個頁面很干爽。

Time
三欄布局，如有需要可切換成四欄

Direnduvar
非常規的網站，插畫風格，精致的小涂鴉，手繪風字體。拖拉起來非常爽，非常有趣的探索體驗。

Kod and Form
留白區域很足，有機協調的布局，潤滑流暢的字體。整體看起來不錯。

結論

大體上來說，網格式布局可以幫助信息量大的網站有效組織布局，合理設置信息層級，達到一致性的視覺效果。
你是如何通過布局來防止信息過載的？有什么訣竅嗎？求分享！

原文地址: http://designmodo.com/content-heavy-website-designs/
作者：Nataly Birch
優設網翻譯：@MartinRGB
轉摘請注明優設網譯文出處，謝謝各位小編。

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：156982）分享實戰經驗。
設計微博：擁有粉絲量55萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：