26個(gè)精彩的網(wǎng)格布局網(wǎng)站欣賞
現(xiàn)在大量網(wǎng)頁(yè)設(shè)計(jì)基于網(wǎng)格布局。雖說(shuō)人們通常注意不到它,但雜亂無(wú)章的布局時(shí)代確實(shí)已經(jīng)過(guò)去了,現(xiàn)在是整齊結(jié)構(gòu)化的天下。無(wú)論從理論、美學(xué)和整齊來(lái)說(shuō),這樣的布局都很好平衡。網(wǎng)格結(jié)構(gòu)是所有現(xiàn)代網(wǎng)站的基礎(chǔ),它總能給最終用戶完美無(wú)暇的設(shè)計(jì)。
盡管通常網(wǎng)格設(shè)計(jì)僅僅是在規(guī)定的間隔下用沒(méi)有任何多余修飾的水平線和垂直線的交叉,但很多設(shè)計(jì)師們也會(huì)用一些明顯突出的幾何圖形來(lái)修飾網(wǎng)格。通常我 們會(huì)在展示類、博客和新聞相關(guān)的網(wǎng)站看到清晰的網(wǎng)格,但有時(shí)也有一些個(gè)人網(wǎng)站或其他創(chuàng)意網(wǎng)站通過(guò)巧妙的處理網(wǎng)格吸引用戶目光。不奇怪,它除了功能上的基本 優(yōu)勢(shì)外還有:
- 創(chuàng)造視覺(jué)通道引導(dǎo)用戶;
- 分類展示信息;
- 整合不同的部分同時(shí)能讓他們自我獨(dú)立開(kāi);
它也為完美展示穿針引線。
在下面這些案例中你會(huì)發(fā)現(xiàn)那些引人注目的網(wǎng)站設(shè)計(jì)都技巧性地使用了能一眼察覺(jué)的網(wǎng)格。
基于網(wǎng)格的網(wǎng)頁(yè)設(shè)計(jì)案例
Spazio Dipaolo
把主頁(yè)劃分成相等方塊加上黑色透明蒙版來(lái)展示不同類型的藝術(shù)圖片。
Bernd Kammerer
三列布局,每一列有自己的圖片流用來(lái)展示不同明度圖片。此外,當(dāng)你滾動(dòng)下拉網(wǎng)站其他圖片的紅色圓形鏈接會(huì)交替出現(xiàn)。
Adam Hayes
順序展示了那些滿是色彩和圖形的驚人藝術(shù)作品。
Necto
利用大小不一但相對(duì)平衡的網(wǎng)格來(lái)突出以前的項(xiàng)目,不同大小代表不同的強(qiáng)調(diào)程度,尺寸越大代表它的復(fù)雜程度越高。
Salon
是另一個(gè)不均勻網(wǎng)格的好案例,行的位置跟隨列變。
Christmas Gifs
用清晰均勻的網(wǎng)格展示圣誕節(jié)的各種動(dòng)態(tài)gif圖片。
Activation Group
是用黑色蒙版的絕好案例,每個(gè)單元格都有自己?jiǎn)为?dú)的蒙版。這樣的變化加上限制色彩使用給主頁(yè)一種棋盤(pán)的感覺(jué)。
Portal Portinari
是一個(gè)完全動(dòng)態(tài)的網(wǎng)站,它用時(shí)間線在基于網(wǎng)格的”畫(huà)廊”上展示了不同時(shí)期的藝術(shù)家的杰作,這些圖片占據(jù)了整個(gè)首頁(yè)。
Candy Buffet
用明亮的顏色和純幾何形狀搭配出現(xiàn)代干凈清晰的平面風(fēng)格。
Betel Bar and Kitchen
整齊地組織登陸頁(yè)、和諧地整合圖片和文本塊給人以震撼感。
RVLT
展示了這樣的主頁(yè)——把導(dǎo)航鏈接和位置多變方形的商品項(xiàng)目結(jié)合在一塊。
Stefan Froescher
標(biāo)準(zhǔn)的左邊項(xiàng)目列表,右邊展示圖片。
Jean-Georges
超大圖片的導(dǎo)航系統(tǒng),也可理解為是基于網(wǎng)格的。
SilkTricky
把每個(gè)單元分成兩半——一半圖片,一半文字。而且設(shè)計(jì)師們?cè)黾觽€(gè)幾個(gè)大方塊幻燈效果讓網(wǎng)格看起來(lái)很不一樣。
Bastian Preussger
看起來(lái)格外神秘獨(dú)特,黑色單色背景和適度混亂的網(wǎng)格展示藝術(shù)作品縮圖。
Daniel Vane
大量的黑白配色和規(guī)矩的網(wǎng)格讓網(wǎng)站看起來(lái)干凈漂亮。
Rosas and Co Films AG
通過(guò)網(wǎng)格系統(tǒng)用最常見(jiàn)的方法過(guò)濾展示結(jié)果排列這些視頻截圖。
Far From the Tree
首頁(yè)整版的縮略圖形成了一個(gè)完美而詳細(xì)的網(wǎng)格,盡管對(duì)一個(gè)網(wǎng)站來(lái)說(shuō)有點(diǎn)笨重和混亂。
Boomerang 2013
確實(shí)有爆炸的氣氛。整個(gè)設(shè)計(jì)聚焦用戶,動(dòng)員他們參與到獨(dú)特壯觀的動(dòng)畫(huà)里來(lái)。
Bobby Digital Studios
確實(shí)不錯(cuò),有序、準(zhǔn)確地展示他們的工作讓用戶馬上能夠了解他們。
Hommard
看起來(lái)時(shí)尚精致。網(wǎng)站在網(wǎng)格上展示了一系列高質(zhì)量圖片。
National Traveller
是一個(gè)有著大量的長(zhǎng)方形的功能塊且結(jié)構(gòu)非常好的常規(guī)博客。
My Poor Brain
很好的利用了這些狹窄的列來(lái)盡可能展示更多信息。
Nowy Teatr
特意用行列之間不同的間隔為網(wǎng)站增加了一點(diǎn)小混亂。
Woodwork Amsterdam
一列一列地展示視覺(jué)信息,和諧地避免了用線。這樣也能更好的展示大圖。
Karl Anders
大量留白讓用戶自由呼吸。設(shè)計(jì)師們把頁(yè)面協(xié)調(diào)地分成4列,給每個(gè)單元格加上一個(gè)大標(biāo)題和圖片描敘。
思考
網(wǎng)格是一個(gè)一秒鐘變混亂為整潔的整體設(shè)計(jì)工具,在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域這樣的技能尤為重要。大部分普通用戶想簡(jiǎn)單快速的獲取信息,提供良好結(jié)構(gòu)化的數(shù)據(jù)是首 選。但這樣并不意味著網(wǎng)站展示就該平淡無(wú)趣。即使是再簡(jiǎn)單的幾何圖形也能在色彩、圖片圖形的配合下絢麗奪目。而且,清晰的網(wǎng)格設(shè)計(jì)能完美地融入各種類型的 網(wǎng)站不論你是在線雜志還是創(chuàng)意展示。
那么,你是怎樣看這些基于網(wǎng)格的網(wǎng)站設(shè)計(jì)的?這些精心設(shè)計(jì)的單元塊能夠吸引你嗎?它只是適合創(chuàng)意設(shè)計(jì),還是更適合博客、在線雜志或者資訊類網(wǎng)站?
英文原文:designmodo
中文譯文:w3cplus
原文來(lái)自:優(yōu)設(shè)網(wǎng)
- 目前還沒(méi)評(píng)論,等你發(fā)揮!