在版式設(shè)計(jì)中，將網(wǎng)格視為一種秩序系統(tǒng)來(lái)進(jìn)行使用，是設(shè)計(jì)師某種特定的精神和態(tài)度的表達(dá)，因?yàn)樗w現(xiàn)了設(shè)計(jì)師是以一種結(jié)構(gòu)性、預(yù)見(jiàn)性的方式進(jìn)行構(gòu)思和設(shè)計(jì)的。

設(shè)計(jì)師的作品應(yīng)該是易懂的、客觀的、功能性的和具有教學(xué)美感的。

一個(gè)合適的網(wǎng)格使得視覺(jué)設(shè)計(jì)變得更容易：

1. 可以通過(guò)視覺(jué)傳達(dá)的手段客觀地構(gòu)建主題；
2. 可以系統(tǒng)和邏輯地構(gòu)建文本和插圖類(lèi)材料；
3. 可以在一個(gè)緊湊的空間中根據(jù)文本和插圖的特點(diǎn)建立節(jié)奏關(guān)系。

網(wǎng)格系統(tǒng)通常被應(yīng)用在平面設(shè)計(jì)、UI設(shè)計(jì)、甚至于空間設(shè)計(jì)中。

下面我們就平面設(shè)計(jì)和UI設(shè)計(jì)，展開(kāi)對(duì)網(wǎng)格系統(tǒng)的探討。

平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)

版心

版心是頁(yè)面中主要內(nèi)容所在的區(qū)域。在確定版心之前，設(shè)計(jì)師必須明確設(shè)計(jì)的性質(zhì)和目的，即在頁(yè)面中有多少的文本和圖片需要設(shè)計(jì)。

經(jīng)典的版心設(shè)計(jì)

基于黃金分割比例的頁(yè)面

網(wǎng)格的結(jié)構(gòu)

在開(kāi)始設(shè)計(jì)之前，版面的分欄數(shù)是需要進(jìn)行考慮的要點(diǎn)之一。

一般分為兩欄、三欄、四欄，四欄還可以進(jìn)一步分成八欄、十六欄甚至更多。

確定版心；將版心分欄

將欄分成單元格；劃分單元格

8格網(wǎng)格系統(tǒng)

8格網(wǎng)格系統(tǒng)的版面經(jīng)常用于廣告宣傳單和畫(huà)冊(cè)的設(shè)計(jì)。在很多情況下，只需通過(guò)對(duì)8種不同尺寸的圖片進(jìn)行組合，就可以解決許多簡(jiǎn)單的問(wèn)題。

在8格網(wǎng)格系統(tǒng)中，可以組合成8種不同尺寸的圖片，版面足以容易各種大小的插圖。

20格網(wǎng)格系統(tǒng)

利用20格網(wǎng)格系統(tǒng)來(lái)編排，可以產(chǎn)生20種尺寸參與排版的可能性。在設(shè)計(jì)前期更多的嘗試，將會(huì)發(fā)現(xiàn)網(wǎng)格的創(chuàng)造力是無(wú)窮的。

總之，我們可以說(shuō)，善于利用網(wǎng)格系統(tǒng)來(lái)進(jìn)行版面設(shè)計(jì)的設(shè)計(jì)師們，總是可以非常專(zhuān)業(yè)的設(shè)計(jì)出豐富多樣且令人滿(mǎn)意的作品。

32格網(wǎng)格系統(tǒng)

相對(duì)與20網(wǎng)格來(lái)說(shuō)，32網(wǎng)格系統(tǒng)可以為設(shè)計(jì)師提供更多的可能性，甚至可以說(shuō)是無(wú)限的可能性。

32格網(wǎng)格系統(tǒng)提供了非常多的編排方案，幾乎涵蓋了所有類(lèi)型的版面設(shè)計(jì)，尤其對(duì)于那些涉及到大量圖片的設(shè)計(jì)作品。

UI設(shè)計(jì)中的網(wǎng)格系統(tǒng)

有些設(shè)計(jì)師對(duì)于網(wǎng)格系統(tǒng)有點(diǎn)陌生，但是在互聯(lián)網(wǎng)設(shè)計(jì)領(lǐng)域，提到柵格系統(tǒng)，想必都是有所耳聞的。

柵格系統(tǒng)就是利用均分的垂直和水平線，將頁(yè)面分割成若干有秩序的格子，按照這些分割好的格子去安排頁(yè)面的設(shè)計(jì)元素，控制元素之間的節(jié)奏關(guān)系。

在谷歌的Material Design和蘋(píng)果的Ios設(shè)計(jì)規(guī)范中，都有對(duì)柵格作出一定的建議，設(shè)備系統(tǒng)中的原生軟件也都是嚴(yán)格按照規(guī)范去實(shí)施設(shè)計(jì)的。而在Web端的設(shè)計(jì)中，各互聯(lián)網(wǎng)大廠也有制作相應(yīng)的設(shè)計(jì)規(guī)范來(lái)統(tǒng)一自家產(chǎn)品的設(shè)計(jì)。

下面我們將通過(guò)四個(gè)基本概念，分別對(duì)PC端和移動(dòng)端的柵格設(shè)計(jì)展開(kāi)探討：

1. 柵格的最小單位：柵格系統(tǒng)基礎(chǔ)，定義柵格的步進(jìn)距離；
2. 欄目：柵格系統(tǒng)的容器，盛放文本、圖片等元素；
3. 水槽：相鄰兩欄之間的間距，控制整體頁(yè)面的留白；
4. 安全邊距：內(nèi)容區(qū)域與屏幕兩端留出的間距。

PC端

對(duì)于PC端來(lái)講，欄目和水槽交替形成欄柵格系統(tǒng)，欄目主要放置內(nèi)容，水槽則控制頁(yè)面元素的間距。

欄目和水槽的寬度則是以柵格的最小單位為基準(zhǔn)，所以在頁(yè)面柵格化之前先定義好柵格的最小單位。

8的倍數(shù)

如何定義柵格系統(tǒng)最小單位？參考已有的設(shè)計(jì)規(guī)范和前輩的經(jīng)驗(yàn)，加上目前市場(chǎng)上主流的屏幕分辨率，以8像素作為一個(gè)步進(jìn)單位的變化，在視覺(jué)上能感受到較為明顯的差異，因此選取8做為柵格系統(tǒng)的原子單位。

12等分和24等分

確定好了柵格系統(tǒng)的最小單位，接下來(lái)就可以確定欄目（8n）和水槽（8m）的寬度，并以此形成初步的柵格。

目前主流的等分方式有12等分和24等分

而在多數(shù)業(yè)務(wù)情況下，我們需要在設(shè)計(jì)區(qū)域解決大量信息收納的問(wèn)題， 24等分可以更多樣性的布局排版，適合更加復(fù)雜的場(chǎng)景。

盒子

在經(jīng)過(guò)等分之后，劃分出的信息區(qū)塊我們稱(chēng)之為“盒子”，盒子便是頁(yè)面承載內(nèi)容的容器，而每一個(gè)盒子的寬度，則是根據(jù)具體的業(yè)務(wù)內(nèi)容去分配的。

建議橫行排列的盒子數(shù)量最多四個(gè)，最少一個(gè)。設(shè)計(jì)部分基于盒子的單位定制盒子內(nèi)部的排版規(guī)則，以保證視覺(jué)層面的舒適感。

下面介紹幾個(gè)案例：

移動(dòng)端

在設(shè)計(jì)移動(dòng)端產(chǎn)品的時(shí)候，我們會(huì)考慮到色彩、文本、圖形、結(jié)構(gòu)等要素，往往忽略來(lái)網(wǎng)格系統(tǒng)的構(gòu)建。

網(wǎng)格系統(tǒng)可以說(shuō)是整個(gè)產(chǎn)品的骨架，所有的頁(yè)面都按照網(wǎng)格系統(tǒng)有理、有序的搭建，產(chǎn)品的整體性也會(huì)有很大的提高。

最小單位

和PC端類(lèi)似，移動(dòng)端的網(wǎng)格系統(tǒng)也是由一個(gè)個(gè)的最小單位構(gòu)成。

根據(jù)移動(dòng)端物理設(shè)備的特性，我們建議以4或者8像素作為步進(jìn)單位，但是4像素會(huì)把頁(yè)面分割過(guò)度，所以整體上還是以8像素做為網(wǎng)格最小單位，只有在某些特殊的場(chǎng)景使用4像素。

安全邊距

我們?cè)赑C端的時(shí)候沒(méi)有提到安全邊距，因?yàn)閣eb設(shè)計(jì)基本不設(shè)置安全邊距，或者直接在中間960像素布局內(nèi)容。

而在移動(dòng)設(shè)備的特殊性，一般存在8px-48px的安全邊距

欄目和水槽

確定好了安全邊距和最小單位，就可以根據(jù)產(chǎn)品的風(fēng)格去設(shè)置欄目和水槽的寬度。

建議在實(shí)際使用中以12列欄目或者6列欄目為主，水槽以8像素或者16像素為主。

盒子

網(wǎng)格的作用就是去控制盒子的布局，而移動(dòng)端屏幕小，可設(shè)置的更加緊湊。橫行分割1-6等分都是合適的。

下面介紹幾個(gè)案例：

sketch柵格設(shè)置

總結(jié)

如果在設(shè)置網(wǎng)格系統(tǒng)或者說(shuō)是柵格系統(tǒng)的時(shí)候，出現(xiàn)了小數(shù)點(diǎn)，不用擔(dān)心，直接取整就好。一套完美的網(wǎng)格系統(tǒng)也不可能在所有的分辨率下完美適應(yīng)，1像素以?xún)?nèi)的尺寸都是肉眼不可分辨的。

在平面設(shè)計(jì)版式構(gòu)成中，我們提到版式設(shè)計(jì)的原則都是僅供參考的，我們只有在充分理解原則的情況下，去做突破，才能讓頁(yè)面規(guī)范有序、具有節(jié)奏感，同時(shí)不失靈動(dòng)。

作者：設(shè)計(jì)師日記，公眾號(hào)：設(shè)計(jì)師的私人日記

本文由 @設(shè)計(jì)師日記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議