如今，Grid-based(基于柵格的)網頁設計已相當普遍，這意味著網頁布局混亂的日子就要終結。盡管還無法用肉眼分辨，但我們的確是步入了有序和結構化的時代。柵格布局整體趨于勻稱，通常會使網頁更加整潔美觀。同時，柵格框架已經成為現代所有網站功能實現的基礎，這都要歸功于它為終端用戶提供了完美不失真的設計體驗。

　　一般來說，柵格僅僅是水平線和垂直線隔出來的特定空間，它似乎很難承載任何設計元素，所以大部分設計師會根據路徑描繪出幾何特性。我們已然看慣畫廊、博客、以及新聞相關網站中那些干凈利落的柵格，但其實只需要巧妙地處理下這些框框條條，就能將用戶的目光吸引到內容本身，增加訪客粘性。是滴，這不是天方夜譚!也不足為奇，因為柵格具有以下特性：

　　創造可以引導人們視覺的路徑;

　　展示有序的信息內容;

　　在將各種元素組合的同時，使它們顯得自由獨立，模塊間可呼吸

　　接下來，您將在我們的展示中親眼目睹如何巧妙利用柵格來做出富有魅力的網頁設計。

　　Grid-based網站設計實例

　　Spazio Dipaolo

　　主頁被分割成了相等的、正方的、和帶有漸暗效果的單元格，呈現了多種組合的圖像藝術。

　　Bernd Kammerer

　　主頁被分割成三列，每一列都用圖片瀑布設計漂亮地展示了形形色色的攝影作品。此外有意思的是，在您滾動頁面的同時，會交替出現(滾動視差)一些帶有鏈接的紅色圓圈，而每個鏈接都指向一個攝影系列集。

　　強化閱讀: 無線滾動加載適用于你的作品么？

　　Adam Hayes

　　將色彩及圖片有規律地布滿整個網頁，從而創造出了一個炫耀華麗的藝術作品。(伏地嗚咽)

　　Necto

　　運用大小不同但勻稱的柵格突出前面的作品，并控制單元格的尺寸來說明內容的重要性。越大尺寸，越重要復雜。

　　Salon

　　另一個巧妙運用大小不同的柵格的范例，在這個設計中，行的位置取決于列。

　　Christmas Gifs

　　充分利用了大小相等勻稱的柵格來裝載各種圣誕節主題的gif。

　　Activation Group

　　很好地運用了暗沉色調，給每個單元塊都抹上了一塊陰影。這種既自由又束縛的色彩運用，給整個主頁略微增添了是棋盤的錯覺。(譯者注：此網站為國人出品。)

　　Portal Portinari

　　一個充滿生氣的網站， 它通過整頁整頁的Grid-based畫廊般的方式展示各個時期畫家的杰出作品，并用時間軸來分類歸檔。

　　Candy Buffet

　　采用現代干凈清晰的平面風格，并用鮮艷的色彩為簡潔的幾何圖形增添了幾分趣味。

　　Betel Bar and Kitchen

　　恰當地處理了圖片和文字塊的組合，以整齊有序的頁面再現了強烈的視覺感受。

　　RVLT

　　將導航鏈接塊與商品圖片放于矩形柵格之中，由此呈現了它的主頁。

　　Stefan Froescher

　　一個傳統的左側菜單欄網站，它以一個普通攝影畫廊網站的形象來迎接用戶的光臨。

　　Jean-Georges

　　通過柵格，實現了令人振奮的大幅照片導航效果。

　　SilkTricky

　　將每個單元格對半分隔，分別用主題相同的圖片和文字填充。除此之外，設計師還大膽增加了一些較大的方形滑塊，使整個柵格帶了點混亂感。

　　Bastian Preussger

　　看起來相當神秘和奇特，這都歸功于它全黑的背景;以及它用來放作品縮略圖的柵格，擺放略微混亂。

　　Daniel Vane

　　為了使網站看起來整潔干脆，突出了黑白色調和柵格。

　　Rosas and Co Films AG

　　運用了一個很常見的方式來排列并過濾視頻縮略圖，再以柵格系統展示出來。

　　Far From the Tree

　　將整個主頁布滿縮略圖，從而形成了一個精美細致的柵格頁面，盡管這使它看起來很繁瑣和凌亂。

　　Boomerang 2013

　　創造了一個真正的爆炸氛圍。整個設計注重于用戶體驗，通過柵格使用戶參與到其獨一無二和無比精彩的動畫中。

　　Bobby Digital Studios

　　將所有的畫廊元素運用得淋漓盡致，它能快速地讓用戶熟悉網站作品是如何有序無誤地擺放的。當然，這也是通過柵格實現的。

　　Hommard

　　擁有一個很現代的精致外表。該網站主要是基于柵格和一大堆高清照片。

　　National Traveller

　　一個擁有大量矩形功能塊的傳統的，結構完善的博客。

　　My Poor Brain

　　漂亮地運用了窄列柵格來傳遞盡可能多的信息。

　　Nowy Teatr

　　利用不同尺寸的行列間隔，為頁面增加了些許混亂感。

　　Woodwork Amsterdam

　　在豎列中放置可視化內容，并恰如其分地移去線條，從而更好地展示了大幅照片。

　　Karl Anders

　　通過大量留白創造出了一個清新的氛圍。設計師恰當地將頁面分割成四列，分別將大字標題或照片穿插其中。

　　反思

　　柵格是一種不可或缺的設計工具，因為它簡化了混亂到有序的過程，而在網站設計中這樣的能力是相當重要的。大多數普通用戶都希望以一種方便快捷的方式獲取信息，為滿足這個需求就有必要將信息有序化，結構化。當然，這并不代表網站的外觀就應該變得樸素和平淡。就算是再簡單的幾何形狀也能被色彩，圖像和圖形消去本來的模樣，這樣的喧賓奪主卻使它變得更具魅力。另外，無論是在線雜志，還是創意作品集，對于任何類型的網站，顯性Grid-based設計都能完美地融入其中 。

　　那么，對于Grid-based網站設計您有何見解?這種很明顯帶有故意成分的分割設計會很有吸引力嗎?這是否算是一個得體的創意?又或者，這類設計會更適合博客，在線雜志，和新聞主題的網站?