設(shè)計(jì)師版式寶典!從零開始教你掌握網(wǎng)格系統(tǒng)

1 評(píng)論 8049 瀏覽 6 收藏 10 分鐘

【Martin導(dǎo)讀】有很多剛?cè)腴T的設(shè)計(jì)師并不了解網(wǎng)格系統(tǒng),也不會(huì)利用網(wǎng)格系統(tǒng)來讓畫面更加有條理,更可以讓內(nèi)容更易讀,實(shí)際上它是超級(jí)實(shí)用的工具,今天轉(zhuǎn)載的一篇基礎(chǔ)教程,手把手帶你入網(wǎng)格系統(tǒng)的大門!

學(xué)會(huì)和理解如何排版是成為一個(gè)設(shè)計(jì)大師中超級(jí)重要的一部分,有很多剛?cè)腴T的設(shè)計(jì)師并不了解網(wǎng)格系統(tǒng),也不會(huì)利用網(wǎng)格系統(tǒng)來校準(zhǔn)元素在畫面內(nèi)的位置,讓畫面更加平衡。網(wǎng)格系統(tǒng)為什么這么好用呢?因?yàn)樗梢灾圃鞂哟胃校K化地管理元素。而且,合理地利用網(wǎng)格系統(tǒng),并不會(huì)讓畫面千篇一律,還會(huì)讓畫面更加有條理,更可以讓內(nèi)容更易讀,有更好的體驗(yàn)。

網(wǎng)格的類型

許多設(shè)計(jì)師都會(huì)在網(wǎng)格系統(tǒng)上開始一個(gè)新的設(shè)計(jì)。不同的人有不同的習(xí)慣,有人喜歡12列的網(wǎng)格,有人則喜歡16列網(wǎng)格,還有人喜歡24列的網(wǎng)格等等等等。重點(diǎn)不在于網(wǎng)格一共有多少種類型,而在于你實(shí)際應(yīng)用的那一個(gè)!在網(wǎng)頁(yè)設(shè)計(jì)中,網(wǎng)格系統(tǒng)是十分常見的,響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的推廣,網(wǎng)格的地位又得到了提升呢!

我個(gè)人更喜歡12列的網(wǎng)格。每一列的寬度取決于最終輸出的稿件應(yīng)用在哪,比如打印或網(wǎng)頁(yè),還有就是參考整體的寬度來進(jìn)行分割。如果我設(shè)計(jì)的東西有許多許多小元素,我會(huì)切換到24列網(wǎng)格。區(qū)塊之間的間隔根據(jù)內(nèi)容進(jìn)行相應(yīng)的調(diào)整。如果我創(chuàng)建一個(gè)瀑布流的布局,我可能只會(huì)給間隔留1-2px。這個(gè)真的要隨機(jī)應(yīng)變。

設(shè)計(jì)師版式寶典!從零開始教你掌握網(wǎng)格系統(tǒng)

我喜歡12或24列的網(wǎng)格是因?yàn)槲铱梢栽谶@個(gè)基礎(chǔ)上衍生出很多不同的排版方案。你可以在24列中的一列里寬度上排列內(nèi)容,也可以是12列中的2列,還可以用8列分欄中的3列來擺放一個(gè)元素,甚至還可以是6列分欄中的4列等等,完全看你個(gè)人的喜好。你看,雖然網(wǎng)格系統(tǒng)是一個(gè)限定,但是應(yīng)用起來也是超級(jí)靈活的,這使得你的設(shè)計(jì)可以有很高的延展性,通過匹配不同的組合,就可以做出完全不同的排版來。是時(shí)候拋棄對(duì)稱布局了,感受一下下面的案例,你可以利用同一個(gè)網(wǎng)格系統(tǒng)創(chuàng)造出各式各樣的排版。

設(shè)計(jì)師版式寶典!從零開始教你掌握網(wǎng)格系統(tǒng)

從上面的例子中我們可以看出,我們有著無(wú)窮盡的選擇來創(chuàng)造不同的排版。有些設(shè)計(jì)師害怕使用網(wǎng)格,他們覺得網(wǎng)格系統(tǒng)會(huì)局限住將他們的思維和畫面的結(jié)構(gòu)。但是事實(shí)上呢,網(wǎng)格結(jié)構(gòu)的選擇和組合幾乎可以說是無(wú)止盡的!那么多種組合,等你用完那天再來說局限住你的思維了吧!而且網(wǎng)格系統(tǒng)的應(yīng)用真的是超級(jí)廣泛!下面是一個(gè)網(wǎng)格系統(tǒng)的實(shí)例,導(dǎo)航橫跨了整個(gè)寬度,主要內(nèi)容大概占用了60%的寬度,側(cè)邊欄占用了剩下的40%;在下面一個(gè)版塊中,左邊60%的寬度被三等分??梢钥闯鰞?nèi)容和內(nèi)容之間留足了空間,閱讀起來很舒服。

設(shè)計(jì)師版式寶典!從零開始教你掌握網(wǎng)格系統(tǒng)

下面這個(gè)網(wǎng)站則是簡(jiǎn)單的三欄布局,這給了圖片足夠的空間,并且把大段的文字打散成一個(gè)一個(gè)小板塊。這樣的布局也十分適合貼廣告。

設(shè)計(jì)師版式寶典!從零開始教你掌握網(wǎng)格系統(tǒng)

InDesign中的網(wǎng)格系統(tǒng)

網(wǎng)格系統(tǒng)起源于傳統(tǒng)的印刷設(shè)計(jì),在印刷介質(zhì)中,網(wǎng)格系統(tǒng)的輔助作用很強(qiáng),為印刷而做的網(wǎng)格系統(tǒng)也十分簡(jiǎn)單。通常在InDesign中就可以完成。不過也可以在AI中建立網(wǎng)格開始設(shè)計(jì)。在InDesign中新建文檔的時(shí)候會(huì)跳出一個(gè)對(duì)話框,對(duì)話框里有十分豐富的選項(xiàng)喲。

設(shè)計(jì)師版式寶典!從零開始教你掌握網(wǎng)格系統(tǒng)

像往常一樣新建一個(gè)ID文件,但是要改變其中幾個(gè)關(guān)鍵的設(shè)置,就可以建立一個(gè)多列的網(wǎng)格。默認(rèn)的單位是像素,也可以改成英寸、厘米或者其他會(huì)讓你感覺更舒服的單位,你可以根據(jù)你的喜好改變InDesign的度量單位。在初始的設(shè)置菜單中,改變列數(shù)就會(huì)讓網(wǎng)格系統(tǒng)的布局發(fā)生改變。有些設(shè)計(jì)師很喜歡5列網(wǎng)格,有些設(shè)計(jì)師則有不同的看法?!癎utter”即每列之間的留白空間,應(yīng)該盡可能地多留,但是也不能留太多,根據(jù)內(nèi)容來調(diào)節(jié)。頁(yè)邊距是內(nèi)容周圍的留白空間,我想大家都不希望印刷出來的成品文字都被裁掉吧?所以記得留出足夠的頁(yè)邊距。

Illustrator中的網(wǎng)格系統(tǒng)

在Illustrator中,創(chuàng)建網(wǎng)格的過程有一點(diǎn)小小的不同。不是在創(chuàng)建文件的時(shí)候來創(chuàng)建網(wǎng)格,而是在創(chuàng)建新的文件之后,選擇文字工具,然后創(chuàng)建一個(gè)文本框,這種方法獨(dú)特的地方在于你要先確定頁(yè)邊距,然后再把文本框放進(jìn)精心設(shè)置的網(wǎng)格系統(tǒng)中。

設(shè)計(jì)師版式寶典!從零開始教你掌握網(wǎng)格系統(tǒng)

然后在頂部的菜單中找到“類型”,然后選擇“區(qū)域類型選項(xiàng)”。這里將會(huì)出現(xiàn)一個(gè)對(duì)話框,這個(gè)對(duì)話框和之前在InDesign中看到的十分類似,只有幾個(gè)不同之處,比如可以沿著分欄新建一行之類的功能。所以,你可以用這個(gè)工具做垂直、水平或是混合在一起的網(wǎng)格系統(tǒng)。在這里一樣要對(duì)于“Gutter”設(shè)置保持高度關(guān)注。在AI中,你可以通過預(yù)覽來檢查剛剛創(chuàng)建的網(wǎng)格,這個(gè)功能真是超級(jí)有用呢!在“選項(xiàng)”菜單中,你可以決定文本框里的文字是水平的還是垂直的,由此產(chǎn)生的設(shè)置如下圖所示,大家可以感受一下。

設(shè)計(jì)師版式寶典!從零開始教你掌握網(wǎng)格系統(tǒng)

下面是一個(gè)InDesign網(wǎng)格的案例。利用5列分欄布局,我們用其中三列來顯示主內(nèi)容,其他兩欄作為副內(nèi)容,還要注意一下文章的標(biāo)題。這里的副標(biāo)題有點(diǎn)意思,主內(nèi)容雖然是占據(jù)了3列分欄,但是副標(biāo)題只占據(jù)了其中2列分欄,但是這樣看起來也很舒服。網(wǎng)格系統(tǒng)是作為一個(gè)參考,我們?cè)趯?shí)際案例中并不一定非得完全絲毫不差地去強(qiáng)行匹配,就像下圖中的頁(yè)碼23,也沒有完全填充某一個(gè)分欄,只是利用分欄給自己找了個(gè)舒服的位置而已!

設(shè)計(jì)師版式寶典!從零開始教你掌握網(wǎng)格系統(tǒng)

總結(jié)

在你的設(shè)計(jì)中使用網(wǎng)格可以讓你更有邏輯地進(jìn)行你的設(shè)計(jì)工作,并且網(wǎng)格系統(tǒng)可以更好地組織畫面中的信息,讓重要的元素更加鮮明,讓設(shè)計(jì)稿有更好的結(jié)構(gòu),帶來更好的體驗(yàn)。設(shè)計(jì)師的工作說白了是盡可能更有創(chuàng)意地傳遞信息,網(wǎng)格系統(tǒng)是讓信息更具條理的方式之一,但我們不一定非得100%完全遵循網(wǎng)格的分欄進(jìn)行設(shè)計(jì),我們也要適時(shí)打破網(wǎng)格系統(tǒng),這也是創(chuàng)建視覺興趣點(diǎn)的好方法!

文章來源:優(yōu)設(shè)? ? ? ? ??原文地址:sitepoint? ??優(yōu)設(shè)網(wǎng)翻譯:@木草彌生

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 產(chǎn)品經(jīng)理如何應(yīng)用網(wǎng)格呢?

    來自北京 回復(fù)