国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

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

2014-3-6    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   paul-jarrel.com  )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

來(lái)源:http://www.uisdc.com/100-things-you-should-know-about-design

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

互聯(lián)網(wǎng)信息時(shí)代,很多內(nèi)容為主的網(wǎng)站都信息過(guò)載,這導(dǎo)致了載入速度過(guò)慢。電商網(wǎng)站如此,新聞?lì)惥W(wǎng)站也是如此,而一些設(shè)計(jì)師作品集網(wǎng)站或者設(shè)計(jì)機(jī)構(gòu)的網(wǎng)站也是如此,老實(shí)說(shuō),作為設(shè)計(jì)師,應(yīng)該避免信息過(guò)載現(xiàn)象的出現(xiàn)。而一旦你掌握這些技巧,那么你離高薪酬的資深ui設(shè)計(jì)師也就不遠(yuǎn)咯。

內(nèi)容主導(dǎo)的頁(yè)面布局會(huì)自然而然的繁雜、問(wèn)題多,設(shè)計(jì)這種網(wǎng)站的過(guò)程,也是一個(gè)艱難的挑戰(zhàn),而且網(wǎng)站設(shè)計(jì)擁有者的目的是想給用戶提供更多的信息,信息會(huì)越來(lái)越多。當(dāng)然,可以聽(tīng)聽(tīng)專家指導(dǎo),堅(jiān)持一些亙古不變的界面設(shè)計(jì)原則,來(lái)確保布局的組織良好和架構(gòu)分明,這就能減少很多不必要的繁雜。

今天藍(lán)藍(lán)設(shè)計(jì)涵蓋了一堆信息量大,但是卻不雜亂的網(wǎng)頁(yè)設(shè)計(jì),具備愉悅的即視感。不吹牛,您可以挨個(gè)點(diǎn)看感受一下:)

Action Film 
相當(dāng)復(fù)雜的網(wǎng)站,但是在布局上很聰明將一堆小視頻組織的條理分明。登錄頁(yè)分成好幾條線,是的多媒體側(cè)邊欄。

Action Film

Salon’s
組織有序,不同尺寸的很多照片排列在一起也非常有序,打破了單調(diào)布局的常規(guī)。

Salon homepage

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

House

W Magazine
有樣、精致,內(nèi)容區(qū)域文本和圖像的高度對(duì)比,黑色的背景也起到了良好的陪襯。

W Magazine

Served MCR
強(qiáng)烈的手繪風(fēng)格,極其沖擊的視覺(jué)表現(xiàn)。細(xì)節(jié)到位,草圖很有趣,一點(diǎn)點(diǎn)精致的水彩效果,幾組手繪風(fēng)字體,多而不亂。

Served MCR

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

Butterfly

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

Health

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

My Own Corks

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

Karl Anders

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

Tomorrow Counts

REI 1440
從來(lái)沒(méi)見(jiàn)過(guò)吧,概念化、、效果令人振奮。
通過(guò)鍵盤(pán)便可以實(shí)現(xiàn)縮略圖的滾動(dòng)。

REI 1440 Project

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

The Camry Effect

Phillips Internet Consulting 
標(biāo)準(zhǔn)的圖像滑動(dòng),屏幕只有一半用來(lái)顯示圖像,這給導(dǎo)航元素留下了大量的空間。不過(guò),深邃的背景和較大的字體有點(diǎn)讓人感覺(jué)雜亂。

Phillips Internet Consulting

Accuel AZKS
簡(jiǎn)明、直觀、,讓用戶快速了解設(shè)計(jì)師作品,深色效果,每個(gè)作品的風(fēng)格不一,彼此襯托。欄式布局有效的防止了視覺(jué)混淆。

Accuel AZKS

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

Etch

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

Vogue

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

The New York Times

How Cool
又一個(gè)流行時(shí)尚類(lèi)網(wǎng)站的界面設(shè)計(jì),主要通過(guò)圖片的視覺(jué)表現(xiàn)來(lái)吸引用戶注意。主頁(yè)面看起來(lái)非常協(xié)調(diào)整齊,因?yàn)閷?duì)留白區(qū)域的合理運(yùn)用。

How Cool

Mamo
很用心的布局,僅僅包含了Logo設(shè)計(jì)、標(biāo)題以及圖像。讓整個(gè)頁(yè)面很干爽。

Mamo

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

Time

Direnduvar 
非常規(guī)的網(wǎng)站設(shè)計(jì),插畫(huà)風(fēng)格,精致的小涂鴉,手繪風(fēng)字體。拖拉起來(lái)非常爽,非常有趣的探索體驗(yàn)。

Direnduvar

Kod and Form
留白區(qū)域很足,有機(jī)協(xié)調(diào)的布局,潤(rùn)滑流暢的字體。整體看起來(lái)不錯(cuò)。

Kod and Form

結(jié)論

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

日歷

鏈接

個(gè)人資料

存檔