UI設計師告訴你，網(wǎng)格對版式的作用

在網(wǎng)格系統(tǒng)中，其實理解起來非常的容易，講起來特別輕松，但是應用是一個比較難的過程，目前我理解的網(wǎng)格系統(tǒng)分別為多列網(wǎng)格系統(tǒng)／模塊網(wǎng)格系統(tǒng)／一個字的網(wǎng)格系統(tǒng)／模塊網(wǎng)格系統(tǒng)+一個字的網(wǎng)格系統(tǒng)，基線網(wǎng)格系統(tǒng)共五個環(huán)節(jié)。如果你平時用倒的排版不多，簡單的多列網(wǎng)格系統(tǒng)足夠你用。

多列網(wǎng)格就是通過縱向分欄，2欄以上都可以理解多列網(wǎng)格系統(tǒng)，多列網(wǎng)格系統(tǒng)為基礎的網(wǎng)格系統(tǒng)。

那么有的人理解，認為先建立網(wǎng)格系統(tǒng)，然后才確定文本，實質網(wǎng)格系統(tǒng)只是一個工具，在頁面上建立網(wǎng)格系統(tǒng)，不只是為了擺放和規(guī)范各種文字和圖象元素的需要，而是旨在通過看不見的網(wǎng)格重新梳理信息并賦予信息清晰的邏輯和內在的韻律。

網(wǎng)格適用于 VI、網(wǎng)頁設計及平面廣告上進行排版。那么我通過以下簡單的案例來詮釋多列網(wǎng)格系統(tǒng)。

+01

我首先截圖幾張其他設計師設計的第一張圖，封面。

大感覺分析

01  /  沒有視覺沖擊力

02  /  文字層級不明確

03  /  文字組合不理想

深度分析

是什么原因導致沒有

沖擊力

A－沒有一些比例關系 （簡稱為通、直、白）

B－文字沒有層級關系 （簡稱為傻、大、粗）

C－裝幀方式?jīng)]有足夠的新穎感覺

－

封面用了12欄網(wǎng)格系統(tǒng)，在網(wǎng)格系統(tǒng)中沒有嚴格的一定要用多少欄，但是網(wǎng)格數(shù)目越多，也就是你的版式越精細，但是3、4、5、6欄中最好用的就是6欄。

－

封面沒有細節(jié)的講，因為這個封面的大問題在文字層級和位置關系后期講文字層級關系可以細講。

左邊文字部分和右邊比例為：1:1.4=（5欄:7欄）

1.4是日本的白銀分割，因為在書籍設計中，我覺得遵循1:1.4的關系較多，也是比較舒服，比如日本的一些建筑，還有我們這個開本的比例都是這樣的比例關系，當然行間距和字號的關系盡量遵循1.618的關系。

采用了獨特的裸背裝，在形式上就打破了第一個很平淡的問題，當然信息的層級也很重要。

+02

我首先截圖幾張其他設計師設計的第二張圖

大感覺分析

01  /  沒有視覺沖擊力

02  /  對齊方式不統(tǒng)一

03  /  版心不明確

04  /  版式不飽滿

05  /  版式?jīng)]有細節(jié)

06  /  層級和文字的間距都不對

當然這個大家可能看不到，文字太模糊

深度分析

是什么原因導致沒有

沖擊力

A－內文沒有一些比例關系 （簡稱為通、直、白）

B－沒有分析層級關系 （簡稱為傻、大、粗）

做好基礎規(guī)則，基礎邊距   邊距比例關系為  / 1.5:1:1:1

A

我們現(xiàn)在解決第一個問題,如何讓內文有比例關系

這里我所用的工具是網(wǎng)格系統(tǒng)

這里是12欄，最早喜歡3欄，到后來的5欄，現(xiàn)在的12欄

欄即12欄，（平均分配）6是一個很特殊的數(shù)字，既能比單數(shù)整除也能比整數(shù)整除（個人建議用12欄）。

B

我們現(xiàn)在解決第二個問題，怎么樣搞清楚層級，層級粗講。

作為客戶和用戶的角度，如果那表現(xiàn)了來講，客戶想表現(xiàn)的層級應該是a>c>b,我們在網(wǎng)格系統(tǒng)里面變化。

設計雖然做了，但是人物沒有細節(jié)，比較粗糙。

我們縮小客戶圖片，文字層級拉開

1.中文字體 / 博雅宋   臺灣細明體

2.西文字體 / Garamond Premier Pro

3.內文字號 / 8.5pt

4.文字間距 / 8.5ptX1.8

5.網(wǎng)格系統(tǒng) / 12欄

6.欄 間 距 / 5mm

做了調整，但是a部分，不夠跳躍，我只能做加法運算，b部分屬于正常，c部分雖然分欄，但是沒有破掉網(wǎng)格系統(tǒng)。

我繼續(xù)做a部分的加法，c部分的破圖，細節(jié)的增加。

網(wǎng)格系統(tǒng)在于建立，但是也在于破掉網(wǎng)格系統(tǒng)，這一點幾乎支撐我了好多設計，包含去年的項目微軟和央視的都一樣的規(guī)則道理。

+03

我們改第三張圖，下圖為設計師的原圖。

進行更改，然后網(wǎng)格破圖，注意紅色序號的地方都是上下左右對齊關系的。

更改方案一

更改方案二

任然遵循網(wǎng)格系統(tǒng)，只是在局部應用了客戶的書法局部。

+04

我們改第四張圖下圖為設計師的原圖，剩下的這幾個我就不仔細講解了。

更改方案一

更改方案二

+05

我們改第五張圖,下圖為設計師的原圖。

更改方案一

+06

我們改第六張圖，下圖為設計師的原圖。

更改方案一

最后的更改部分展示

結束
相關文章《會改作品集之后，收到的offer翻倍啦》