站設(shè)計-案例和解析.jpg)
如今，Grid-based（基于柵格的）網(wǎng)頁設(shè)計已相當(dāng)普遍，這意味著網(wǎng)頁布局混亂的日子就要終結(jié)。盡管還無法用肉眼分辨，但我們的確是步入了有序和結(jié)構(gòu)化的時代。柵格布局整體趨于勻稱，通常會使網(wǎng)頁更加整潔美觀。同時，柵格框架已經(jīng)成為現(xiàn)代所有網(wǎng)站功能實現(xiàn)的基礎(chǔ)，這都要?dú)w功于它為終端用戶提供了完美不失真的設(shè)計體驗。
一般來說，柵格僅僅是水平線和垂直線隔出來的特定空間，它似乎很難承載任何設(shè)計元素，所以大部分設(shè)計師會根據(jù)路徑描繪出幾何特性。我們已然看慣畫廊、博客、以及新聞相關(guān)網(wǎng)站中那些干凈利落的柵格，但其實只需要巧妙地處理下這些框框條條，就能將用戶的目光吸引到內(nèi)容本身，增加訪客粘性。是滴，這不是天方夜譚！也不足為奇，因為柵格具有以下特性：
- 創(chuàng)造可以引導(dǎo)人們視覺的路徑；
- 展示有序的信息內(nèi)容；
- 在將各種元素組合的同時，使它們顯得自由獨(dú)立，模塊間可呼吸
接下來，您將在我們的展示中親眼目睹如何巧妙利用柵格來做出富有魅力的網(wǎng)頁設(shè)計。
Grid-based網(wǎng)站設(shè)計實例
主頁被分割成了相等的、正方的、和帶有漸暗效果的單元格，呈現(xiàn)了多種組合的圖像藝術(shù)。
主頁被分割成三列，每一列都用圖片瀑布設(shè)計漂亮地展示了形形色色的攝影作品。此外有意思的是，在您滾動頁面的同時，會交替出現(xiàn)(滾動視差)一些帶有鏈接的紅色圓圈，而每個鏈接都指向一個攝影系列集。
強(qiáng)化閱讀：網(wǎng)頁特效：滾動視差設(shè)計指南
將色彩及圖片有規(guī)律地布滿整個網(wǎng)頁，從而創(chuàng)造出了一個炫耀華麗的藝術(shù)作品。(伏地嗚咽)
運(yùn)用大小不同但勻稱的柵格突出前面的作品，并控制單元格的尺寸來說明內(nèi)容的重要性。越大尺寸，越重要復(fù)雜。
另一個巧妙運(yùn)用大小不同的柵格的范例，在這個設(shè)計中，行的位置取決于列。
充分利用了大小相等勻稱的柵格來裝載各種圣誕節(jié)主題的gif。
很好地運(yùn)用了暗沉色調(diào)，給每個單元塊都抹上了一塊陰影。這種既自由又束縛的色彩運(yùn)用，給整個主頁略微增添了是棋盤的錯覺。（譯者注：此網(wǎng)站為國人出品。）
一個充滿生氣的網(wǎng)站， 它通過整頁整頁的Grid-based畫廊般的方式展示各個時期畫家的杰出作品，并用時間軸來分類歸檔。
采用現(xiàn)代干凈清晰的平面風(fēng)格，并用鮮艷的色彩為簡潔的幾何圖形增添了幾分趣味。
恰當(dāng)?shù)靥幚砹藞D片和文字塊的組合，以整齊有序的頁面再現(xiàn)了強(qiáng)烈的視覺感受。
將導(dǎo)航鏈接塊與商品圖片放于矩形柵格之中，由此呈現(xiàn)了它的主頁。
一個傳統(tǒng)的左側(cè)菜單欄網(wǎng)站，它以一個普通攝影畫廊網(wǎng)站的形象來迎接用戶的光臨。
通過柵格，實現(xiàn)了令人振奮的大幅照片導(dǎo)航效果。
將每個單元格對半分隔，分別用主題相同的圖片和文字填充。除此之外，設(shè)計師還大膽增加了一些較大的方形滑塊，使整個柵格帶了點(diǎn)混亂感。
看起來相當(dāng)神秘和奇特，這都?xì)w功于它全黑的背景；以及它用來放作品縮略圖的柵格，擺放略微混亂。
為了使網(wǎng)站看起來整潔干脆，突出了黑白色調(diào)和柵格。
運(yùn)用了一個很常見的方式來排列并過濾視頻縮略圖，再以柵格系統(tǒng)展示出來。
將整個主頁布滿縮略圖，從而形成了一個精美細(xì)致的柵格頁面，盡管這使它看起來很繁瑣和凌亂。
創(chuàng)造了一個真正的爆炸氛圍。整個設(shè)計注重于用戶體驗，通過柵格使用戶參與到其獨(dú)一無二和無比精彩的動畫中。
將所有的畫廊元素運(yùn)用得淋漓盡致，它能快速地讓用戶熟悉網(wǎng)站作品是如何有序無誤地擺放的。當(dāng)然，這也是通過柵格實現(xiàn)的。
擁有一個很現(xiàn)代的精致外表。該網(wǎng)站主要是基于柵格和一大堆高清照片。
一個擁有大量矩形功能塊的傳統(tǒng)的，結(jié)構(gòu)完善的博客。
漂亮地運(yùn)用了窄列柵格來傳遞盡可能多的信息。
利用不同尺寸的行列間隔，為頁面增加了些許混亂感。
在豎列中放置可視化內(nèi)容，并恰如其分地移去線條，從而更好地展示了大幅照片。
通過大量留白創(chuàng)造出了一個清新的氛圍。設(shè)計師恰當(dāng)?shù)貙㈨撁娣指畛伤牧校謩e將大字標(biāo)題或照片穿插其中。
反思
柵格是一種不可或缺的設(shè)計工具，因為它簡化了混亂到有序的過程，而在網(wǎng)站設(shè)計中這樣的能力是相當(dāng)重要的。大多數(shù)普通用戶都希望以一種方便快捷的方式獲取信息，為滿足這個需求就有必要將信息有序化，結(jié)構(gòu)化。當(dāng)然，這并不代表網(wǎng)站的外觀就應(yīng)該變得樸素和平淡。就算是再簡單的幾何形狀也能被色彩，圖像和圖形消去本來的模樣，這樣的喧賓奪主卻使它變得更具魅力。另外，無論是在線雜志，還是創(chuàng)意作品集，對于任何類型的網(wǎng)站，顯性Grid-based設(shè)計都能完美地融入其中 。
那么，對于Grid-based網(wǎng)站設(shè)計您有何見解？這種很明顯帶有故意成分的分割設(shè)計會很有吸引力嗎？這是否算是一個得體的創(chuàng)意？又或者，這類設(shè)計會更適合博客，在線雜志，和新聞主題的網(wǎng)站？
優(yōu)設(shè)編輯：@林豪婕
翻譯小組:SDC番茄匠 @o798
原文地址：designmodo.com
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計講座：每月邀請國內(nèi)互聯(lián)網(wǎng)公司設(shè)計前輩及行業(yè)總監(jiān)在群內(nèi)及YY語音（YY頻道：15335158）分享實戰(zhàn)經(jīng)驗。
設(shè)計微博：擁有粉絲量27萬的人氣微博@優(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è)哥的全拼
您也可以通過掃描下方二維碼快速添加：
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場，未經(jīng)允許不得轉(zhuǎn)載。
繼續(xù)閱讀本文相關(guān)話題
發(fā)評論！每天贏獎品
點(diǎn)擊 登錄 后，在評論區(qū)留言，系統(tǒng)會隨機(jī)派送獎品
2012年成立至今，是國內(nèi)備受歡迎的設(shè)計師平臺，提供獎品贊助 聯(lián)系我們
MJ+SD智能設(shè)計
已累計誕生 772 位幸運(yùn)星
發(fā)表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓