如何有效布局信息繁雜的網(wǎng)站?

2014-4-29    藍藍設計的小編

轉(zhuǎn)載藍藍設計(   m.820esy.cn  )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設計 、 cs界面設計 、  ipad界面設計   、  包裝設計 、  圖標定制 、  用戶體驗 、交互設計、   網(wǎng)站建設 、平面設計服務

來源:http://m.820esy.cn/blog/?post=1838

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中,   請點這里

互聯(lián)網(wǎng)信息時代,很多內(nèi)容為主的網(wǎng)站都信息過載,這導致了載入速度過慢。電商網(wǎng)站如此,新聞類網(wǎng)站也是如此,而一些UI設計師作品集網(wǎng)站或者設計機構(gòu)的網(wǎng)站設計也是如此,老實說,作為設計師,應該避免信息過載現(xiàn)象的出現(xiàn)。而一旦你掌握這些技巧,那么你離高薪酬的資深界面設計師也就不遠咯。今天藍藍設計的的這篇文章,涵蓋了一堆信息量大,但是卻不雜亂的網(wǎng)頁設計,具備愉悅的即視感。不吹牛,您可以挨個點看感受一下:)

Butterfly
信息密集的作品集網(wǎng)站,設計師很有技巧的利用色彩和扁平的圖像來中和”繁雜的信息”

Butterfly

Health
著名的在線雜志,信息結(jié)構(gòu)層次分明,背景干干凈凈。

Health

My Own Corks
干凈優(yōu)雅,扁平化的區(qū)塊帶來了額外的呼吸空間。

My Own Corks

Karl Anders
結(jié)構(gòu)堅實有力,標準的平鋪式格局。黑白配色,去除了繁雜感。

Karl Anders

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

Tomorrow Counts

REI 1440
從來沒見過吧,概念化、、效果令人振奮。
通過鍵盤便可以實現(xiàn)縮略圖的滾動。

REI 1440 Project

The Camry Effect 
很好的將功能不同的區(qū)塊和數(shù)據(jù)良好的結(jié)合到了一起,網(wǎng)站也提供了過濾功能,讓用戶自行定制顯示內(nèi)容。

The Camry Effect

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

Phillips Internet Consulting

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

Accuel AZKS

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

Etch

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

Vogue

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

The New York Times

How Cool
又一個流行時尚類網(wǎng)站,主要通過圖片的視覺表現(xiàn)來吸引用戶注意。主頁面看起來非常協(xié)調(diào)整齊,因為對留白區(qū)域的合理運用。

How Cool

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

Mamo

結(jié)論

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

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.820esy.cn

存檔