2014-10-20 藍(lán)藍(lán)設(shè)計(jì)的小編
網(wǎng)格布局就像是Metro和卡片式設(shè)計(jì)的結(jié)合體。這兩者的融合讓網(wǎng)頁(yè)設(shè)計(jì)少了一些中規(guī)中矩，變得不那么嚴(yán)肅，也更多了一些生命力。正是因?yàn)槿绱耍W(wǎng)格布局才能應(yīng)用在各種風(fēng)格主題的網(wǎng)頁(yè)中，無(wú)論是官方網(wǎng)站、電子商務(wù)網(wǎng)站，亦或是個(gè)人博客，邏輯清晰的網(wǎng)格元素都能輕松hlod住。
如果你也常常會(huì)為網(wǎng)站的布局設(shè)計(jì)而煩惱，那就讓我們搜集的案例為你帶來(lái)最實(shí)在的靈感。
1. Nearly Impossible的網(wǎng)站使用了比較正統(tǒng)的網(wǎng)格布局方式。但扁平化的設(shè)計(jì)風(fēng)格和巧妙的色彩搭配讓整體看起來(lái)很是活潑清新。網(wǎng)格布局雖然讓用戶(hù)在瀏覽時(shí)有比較明確的視覺(jué)所向，但由于格局本身的一些問(wèn)題，一旦設(shè)計(jì)師處理不當(dāng)就會(huì)造成區(qū)域性的擁擠和混亂。如該案例所示，每個(gè)網(wǎng)格之間適當(dāng)?shù)目粘鲆恍┝舭祝芴嵘?huà)面的整潔度，網(wǎng)頁(yè)也需要呼吸的空間。
2.TOYOTA的網(wǎng)站除了左側(cè)邊的常規(guī)導(dǎo)航欄以外，網(wǎng)格布局部分形成了一些熱門(mén)欄目的導(dǎo)航。這一做法在歐美風(fēng)的網(wǎng)站中比較常見(jiàn)，不僅能讓用戶(hù)更準(zhǔn)確的理解內(nèi)容，圖文并茂的形式更是讓網(wǎng)站充滿(mǎn)了吸引力。
3.CapitolCouture的網(wǎng)站用具有透明度的色塊構(gòu)成了一個(gè)很獨(dú)特的網(wǎng)格布局設(shè)計(jì)。昏暗的暗色系色調(diào)讓全局看起來(lái)時(shí)尚精致，并且賦予了網(wǎng)頁(yè)層層神秘感和干凈的藝術(shù)氣息，黑白而又規(guī)整。
4.這個(gè)案例用大小并不一致的色塊拼湊出了一個(gè)網(wǎng)格布局網(wǎng)頁(yè)，盡管網(wǎng)格尺寸不均勻，但合理的配色以及模糊程度卻讓整體看起來(lái)形成了一種相對(duì)的平衡，避免用戶(hù)在瀏覽時(shí)視覺(jué)疲勞的快速產(chǎn)生。
5.該網(wǎng)站用不規(guī)則設(shè)計(jì)成就了一種平面雜志的現(xiàn)代簡(jiǎn)約風(fēng)格。這個(gè)案例給我們的啟示是，如果采用保守的做法，一旦使用了比較有新意的布局，在圖片或是色彩上盡量減少一些花哨的元素，甚至可以使用相對(duì)較大面積的留白，以此來(lái)體現(xiàn)現(xiàn)代極簡(jiǎn)主義。
6.Lamb’s Navy Rum的網(wǎng)站用了新穎的蜂窩狀網(wǎng)格布局設(shè)計(jì)令我們眼前一亮。每一個(gè)六邊形的風(fēng)格都被故意做舊，與網(wǎng)站整體的復(fù)古系很契合的融合在一起。
7.上文中的第五個(gè)案例表現(xiàn)的是由規(guī)則圖形帶來(lái)的不規(guī)則設(shè)計(jì)感，而下面這個(gè)案例表現(xiàn)的則是用很多種幾何形狀疊加或組成的網(wǎng)格排版。統(tǒng)一的色調(diào)輕重分明，適度混亂的布局讓網(wǎng)頁(yè)充滿(mǎn)時(shí)尚感。
8.ALEXSIGN的網(wǎng)格布局體現(xiàn)的十分巧妙，設(shè)計(jì)師借助實(shí)物圖片將原本單調(diào)的首屏分割出一個(gè)隱隱的網(wǎng)格結(jié)構(gòu)。圖片與文本之間互相和諧融合，不均勻的分割卻形成了一種別樣的時(shí)代感。
9.全局扁平化看起來(lái)通常會(huì)覺(jué)得比較清新可愛(ài)，而Etch為了表現(xiàn)出神秘感，只在小部分中運(yùn)用了扁平化的元素。Etch的網(wǎng)格布局是比較規(guī)則的，色彩上也不繁復(fù)，這樣更利于用戶(hù)的瀏覽和點(diǎn)擊。
10.RAINDROP的左側(cè)是很標(biāo)準(zhǔn)的導(dǎo)航欄，右邊部分是網(wǎng)格布局的圖片展示，不僅如此，大背景下的水印效果圖也利用了這種布局方式，形成了一種內(nèi)外畫(huà)面呼應(yīng)，但卻毫不沖突違和的效果。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.lzhte.cn