@happysha 現(xiàn)在大量網(wǎng)頁設(shè)計基于網(wǎng)格布局。雖說人們通常注意不到它，但雜亂無章的布局時代確實(shí)已經(jīng)過去了，現(xiàn)在是整齊結(jié)構(gòu)化的天下。無論從理論、美學(xué)和整齊來說，這樣的布局都很好平衡。網(wǎng)格結(jié)構(gòu)是所有現(xiàn)代網(wǎng)站的基礎(chǔ)，它總能給最終用戶完美無暇的設(shè)計。

盡管通常網(wǎng)格設(shè)計僅僅是在規(guī)定的間隔下用沒有任何多余修飾的水平線和垂直線的交叉，但很多設(shè)計師們也會用一些明顯突出的幾何圖形來修飾網(wǎng)格。通常我們會在展示類、博客和新聞相關(guān)的網(wǎng)站看到清晰的網(wǎng)格，但有時也有一些個人網(wǎng)站或其他創(chuàng)意網(wǎng)站通過巧妙的處理網(wǎng)格吸引用戶目光。不奇怪，它除了功能上的基本優(yōu)勢外還有：

• 創(chuàng)造視覺通道引導(dǎo)用戶；
• 分類展示信息；
• 整合不同的部分同時能讓他們自我獨(dú)立開；

它也為完美展示穿針引線。
在下面這些案例中你會發(fā)現(xiàn)那些引人注目的網(wǎng)站設(shè)計都技巧性地使用了能一眼察覺的網(wǎng)格。

相關(guān)推薦：
《高手之路！網(wǎng)頁設(shè)計師應(yīng)該知道的網(wǎng)格系統(tǒng)》
《提升網(wǎng)頁設(shè)計感的實(shí)用方法：合理利用對齊》

基于網(wǎng)格的網(wǎng)頁設(shè)計案例

Spazio Dipaolo

把主頁劃分成相等方塊加上黑色透明蒙版來展示不同類型的藝術(shù)圖片。

Bernd Kammerer

三列布局，每一列有自己的圖片流用來展示不同明度圖片。此外，當(dāng)你滾動下拉網(wǎng)站其他圖片的紅色圓形鏈接會交替出現(xiàn)。

Adam Hayes

順序展示了那些滿是色彩和圖形的驚人藝術(shù)作品。

Necto

利用大小不一但相對平衡的網(wǎng)格來突出以前的項目，不同大小代表不同的強(qiáng)調(diào)程度，尺寸越大代表它的復(fù)雜程度越高。

Salon

是另一個不均勻網(wǎng)格的好案例，行的位置跟隨列變。

Christmas Gifs

用清晰均勻的網(wǎng)格展示圣誕節(jié)的各種動態(tài)gif圖片。

Activation Group

是用黑色蒙版的絕好案例，每個單元格都有自己單獨(dú)的蒙版。這樣的變化加上限制色彩使用給主頁一種棋盤的感覺。

Portal Portinari

是一個完全動態(tài)的網(wǎng)站，它用時間線在基于網(wǎng)格的"畫廊"上展示了不同時期的藝術(shù)家的杰作，這些圖片占據(jù)了整個首頁。

Candy Buffet

用明亮的顏色和純幾何形狀搭配出現(xiàn)代干凈清晰的平面風(fēng)格。

Betel Bar and Kitchen

整齊地組織登陸頁、和諧地整合圖片和文本塊給人以震撼感。

RVLT

展示了這樣的主頁——把導(dǎo)航鏈接和位置多變方形的商品項目結(jié)合在一塊。

Stefan Froescher

標(biāo)準(zhǔn)的左邊項目列表，右邊展示圖片。

Jean-Georges

超大圖片的導(dǎo)航系統(tǒng)，也可理解為是基于網(wǎng)格的。

SilkTricky

把每個單元分成兩半——一半圖片，一半文字。而且設(shè)計師們增加個幾個大方塊幻燈效果讓網(wǎng)格看起來很不一樣。

Bastian Preussger

看起來格外神秘獨(dú)特，黑色單色背景和適度混亂的網(wǎng)格展示藝術(shù)作品縮圖。

Daniel Vane

大量的黑白配色和規(guī)矩的網(wǎng)格讓網(wǎng)站看起來干凈漂亮。

Rosas and Co Films AG

通過網(wǎng)格系統(tǒng)用最常見的方法過濾展示結(jié)果排列這些視頻截圖。

Far From the Tree

首頁整版的縮略圖形成了一個完美而詳細(xì)的網(wǎng)格，盡管對一個網(wǎng)站來說有點(diǎn)笨重和混亂。

Boomerang 2013

確實(shí)有爆炸的氣氛。整個設(shè)計聚焦用戶，動員他們參與到獨(dú)特壯觀的動畫里來。

Bobby Digital Studios

確實(shí)不錯，有序、準(zhǔn)確地展示他們的工作讓用戶馬上能夠了解他們。

Hommard

看起來時尚精致。網(wǎng)站在網(wǎng)格上展示了一系列高質(zhì)量圖片。

National Traveller

是一個有著大量的長方形的功能塊且結(jié)構(gòu)非常好的常規(guī)博客。

My Poor Brain

很好的利用了這些狹窄的列來盡可能展示更多信息。

Nowy Teatr

特意用行列之間不同的間隔為網(wǎng)站增加了一點(diǎn)小混亂。

Woodwork Amsterdam

一列一列地展示視覺信息，和諧地避免了用線。這樣也能更好的展示大圖。

Karl Anders

大量留白讓用戶自由呼吸。設(shè)計師們把頁面協(xié)調(diào)地分成4列，給每個單元格加上一個大標(biāo)題和圖片描敘。

相關(guān)推薦：
《高手之路！網(wǎng)頁設(shè)計師應(yīng)該知道的網(wǎng)格系統(tǒng)》
《提升網(wǎng)頁設(shè)計感的實(shí)用方法：合理利用對齊》

思考

網(wǎng)格是一個一秒鐘變混亂為整潔的整體設(shè)計工具，在網(wǎng)頁設(shè)計領(lǐng)域這樣的技能尤為重要。大部分普通用戶想簡單快速的獲取信息，提供良好結(jié)構(gòu)化的數(shù)據(jù)是首選。但這樣并不意味著網(wǎng)站展示就該平淡無趣。即使是再簡單的幾何圖形也能在色彩、圖片圖形的配合下絢麗奪目。而且，清晰的網(wǎng)格設(shè)計能完美地融入各種類型的網(wǎng)站不論你是在線雜志還是創(chuàng)意展示。

那么，你是怎樣看這些基于網(wǎng)格的網(wǎng)站設(shè)計的？這些精心設(shè)計的單元塊能夠吸引你嗎？它只是適合創(chuàng)意設(shè)計，還是更適合博客、在線雜志或者資訊類網(wǎng)站？

英文原文：designmodo
中文譯文：w3cplus

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計指南http://hao.uisdc.com/ps/。
設(shè)計微博：擁有粉絲量61萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：