無論你是在(zai)網頁(ye)設(she)計還(huan)是印(yin)刷(shua)設(she)計中(zhong)工作，你都(dou)需要了(le)解網格理論。盡(jin)管一(yi)些設(she)計師(shi)積極地(di)避開網格，轉而使用更直觀、更自由(you)的布局，但(dan)最成功(gong)的是多(duo)年來一(yi)直與網格合作-他(ta)們在(zai)打破(po)規(gui)則(ze)之前就已經(jing)了(le)解了(le)規(gui)則(ze)。

對(dui)于(yu)自學成(cheng)才的(de)(de)(de)設計師來(lai)說，作為設計工具的(de)(de)(de)網(wang)格(ge)背后的(de)(de)(de)許多理(li)論(lun)和(he)合理(li)化都沒有被典型(xing)的(de)(de)(de)博客文章和(he)會議討論(lun)所覆蓋。我們來(lai)這(zhe)里(li)是要把(ba)這(zhe)個口袋大小的(de)(de)(de)指南直接放在(zai)網(wang)格(ge)上(shang)，包(bao)括少量(liang)的(de)(de)(de)理(li)論(lun)。讓我們開始吧。

1、柵格建立了韻律和(he)節奏

網格(ge)(至少是(shi)(shi)平(ping)面設計)的首(shou)要目的是(shi)(shi)為(wei)元素在(zai)布局中的位置(zhi)(zhi)建立一(yi)套指(zhi)導原則。一(yi)個有效的網格(ge)不僅為(wei)設計提供(gong)了(le)(le)節奏，而(er)且還(huan)定義了(le)(le)儀表(biao)。這是(shi)(shi)使內容可訪問(wen)的重(zhong)要部分，并幫助查看器了(le)(le)解在(zai)布局中查找下一(yi)條信息的位置(zhi)(zhi)。它設定了(le)(le)預期，并定義了(le)(le)規則、音(yin)色和設計的聲音(yin)。把網格(ge)看作是(shi)(shi)你的游(you)覽者旅行的路(lu)線(xian)圖。

2、網格定義(yi)和(he)反(fan)映(ying)比例

網(wang)格的(de)(de)一個關(guan)鍵(jian)方面是它幫助確定(ding)和(he)定(ding)義比(bi)例的(de)(de)能(neng)力。在(zai)印(yin)刷中，比(bi)例通常與媒(mei)體(ti)的(de)(de)大小相呼應;例如，紙張的(de)(de)形(xing)狀(zhuang)和(he)方向經常反映在(zai)布局中包含的(de)(de)圖(tu)像(xiang)的(de)(de)大小和(he)形(xing)狀(zhuang)上。

這感覺很(hen)舒(shu)服，因為(wei)讀者潛意識(shi)地理(li)解(jie)布(bu)局的(de)(de)(de)(de)上下文，是(shi)由于交付(fu)機制(zhi)的(de)(de)(de)(de)物理(li)形(xing)狀(zhuang)(zhuang)和(he)(he)大小(xiao)的(de)(de)(de)(de)結果(guo)，比如一張紙。在web上，反射的(de)(de)(de)(de)概念并不那么(me)重要，但是(shi)網格(ge)可以(yi)用(yong)同(tong)樣(yang)的(de)(de)(de)(de)方式將內容(rong)錨定(ding)到屏幕上。屏幕可以(yi)更(geng)流暢(chang)，作為(wei)一個設計師，也不可能(neng)知道用(yong)同(tong)樣(yang)的(de)(de)(de)(de)信心，屏幕的(de)(de)(de)(de)大小(xiao)和(he)(he)形(xing)狀(zhuang)(zhuang)將被用(yong)來查(cha)看內容(rong)。無論(lun)如何，比例和(he)(he)規模都是(shi)布(bu)局中的(de)(de)(de)(de)重要工具，因此使用(yong)網格(ge)來確定(ding)和(he)(he)執行(xing)規則(ze)有(you)助于定(ding)義所有(you)重要的(de)(de)(de)(de)標志，使讀者能(neng)夠訪問和(he)(he)理(li)解(jie)內容(rong)。

3、網格與黃金比例一起(qi)工作(zuo)

一(yi)個(ge)(ge)確定的(de)(de)(de)網(wang)格系統的(de)(de)(de)整個(ge)(ge)概念是(shi)在設計的(de)(de)(de)世界中一(yi)個(ge)(ge)相對較新(xin)的(de)(de)(de)發(fa)明。自人(ren)類繪(hui)畫(hua)和寫作的(de)(de)(de)早(zao)期開(kai)始，網(wang)格就(jiu)已經直觀地存在了，但(dan)直到最近才(cai)開(kai)始以學術(shu)的(de)(de)(de)方式來考慮(lv)布局，因此它從未與(yu)其(qi)(qi)他最佳實踐布局規則隔離開(kai)來。其(qi)(qi)中一(yi)個(ge)(ge)交叉的(de)(de)(de)例子就(jiu)是(shi)黃金比例與(yu)電網(wang)的(de)(de)(de)關系。

黃金比(bi)例(li)(也稱為(wei)“黃金分割”)決定了元素最令人滿(man)意的(de)比(bi)例(li)，并簡化為(wei)“三分法(fa)則(ze)(ze)”。當與網格(ge)結合使用時(shi)(shi)，這些簡單的(de)大(da)(da)小、位(wei)置和比(bi)例(li)規則(ze)(ze)可(ke)以(yi)幫助確保(bao)布局看起來是連貫的(de)，同時(shi)(shi)也具有(you)美(mei)觀的(de)吸引力(li)。這很重要，因(yin)為(wei)它可(ke)以(yi)幫助使內容(rong)更容(rong)易訪問。請記住，網格(ge)是內容(rong)背后的(de)無形(xing)的(de)粘(zhan)合劑——在大(da)(da)多數情況(kuang)下(xia)，它應(ying)該(gai)對查看器是透明的(de)。

4、網(wang)絡上有(you)一個(ge)960網(wang)格系統

一(yi)旦你知道(dao)了(le)建立一(yi)個(ge)(ge)網(wang)格(ge)系統的(de)好(hao)處，那么web設(she)計人員就可(ke)以使(shi)用(yong)(yong)(yong)網(wang)格(ge)了(le)。為(wei)(wei)了(le)使(shi)產品(pin)更實用(yong)(yong)(yong)，一(yi)些常見(jian)的(de)尺(chi)寸(cun)(cun)已經成(cheng)為(wei)(wei)標(biao)準。最(zui)常見(jian)的(de)是960px的(de)網(wang)格(ge)系統。960px是一(yi)個(ge)(ge)很好(hao)的(de)尺(chi)寸(cun)(cun)，因(yin)為(wei)(wei)它(ta)有很多因(yin)素(整數可(ke)以分(fen)(fen)為(wei)(wei)):1、2、3、4、5、6、8、10、12、15、16、20、24、30、32、40、48、60、64、80、96、120、160，等等。能(neng)夠以這種方式劃分(fen)(fen)網(wang)格(ge)為(wei)(wei)列的(de)寬(kuan)度提(ti)供了(le)很大的(de)靈(ling)活性(xing)，提(ti)供了(le)一(yi)個(ge)(ge)多用(yong)(yong)(yong)途(tu)的(de)、可(ke)重用(yong)(yong)(yong)的(de)網(wang)格(ge)系統。不用(yong)(yong)(yong)說，許多設(she)計師都在忙著(zhu)把960px的(de)網(wang)格(ge)打包(bao)成(cheng)一(yi)組有用(yong)(yong)(yong)的(de)CSS庫。一(yi)個(ge)(ge)這樣的(de)例子可(ke)以在960年找(zhao)到。gs，但如果你環顧四周，還有其他可(ke)用(yong)(yong)(yong)的(de)。

5、網格提(ti)供(gong)了(le)堅實(shi)的基礎(chu)

正(zheng)如我們(men)所(suo)看(kan)到的(de)，網(wang)格的(de)存(cun)在(zai)主要是為(wei)了(le)幫(bang)助確(que)定(ding)布局中的(de)位置和(he)平衡(heng)。提供這種堅實的(de)基礎可(ke)以(yi)幫(bang)助確(que)保內(nei)容(rong)以(yi)易于理解的(de)順序(xu)呈現，但也可(ke)以(yi)通(tong)過將(jiang)內(nei)容(rong)從網(wang)格中分離出來來突出內(nei)容(rong)的(de)特定(ding)區域(yu)。觀眾會自然而然地(di)識別出這些突破(po)，并被(bei)吸引(yin)到他們(men)面前，讓設計師有(you)機(ji)會運用布局的(de)層次(ci)結(jie)構，并調整作(zuo)品的(de)意義。

6、網格(ge)與(yu)其(qi)他關(guan)鍵設計(ji)原則一起工作

不(bu)要(yao)忘記，網(wang)(wang)格(ge)(ge)只是(shi)一(yi)個(ge)工具，旁邊(bian)還有許多可(ke)以(yi)用來增強(qiang)布(bu)局的(de)基本原(yuan)(yuan)則(ze)。不(bu)要(yao)過(guo)于嚴(yan)格(ge)(ge)地使用網(wang)(wang)格(ge)(ge)——一(yi)些最好的(de)設計(ji)(ji)打破(po)了網(wang)(wang)格(ge)(ge)布(bu)局的(de)所有規則(ze)，而且這樣(yang)做更成功。了解如何(he)以(yi)及(ji)何(he)時使用網(wang)(wang)格(ge)(ge)只能來自(zi)經驗(yan)，所以(yi)要(yao)進行實(shi)驗(yan)。請參閱下面的(de)設計(ji)(ji)理論下面的(de)其(qi)他文章，以(yi)獲取其(qi)他有用的(de)工具和原(yuan)(yuan)則(ze)，您可(ke)以(yi)使用這些工具來提高您的(de)設計(ji)(ji)。