1. 為什么要學(xué)習(xí)網(wǎng)格

有效有規(guī)律的設(shè)計布局是設(shè)計的一個基本原則，網(wǎng)格無處不在,，可能只是你沒有注意到它的存在,，簡單理解就是把一個頁面，根據(jù)版心劃分為無數(shù)統(tǒng)一尺寸的網(wǎng)格,，廣泛應(yīng)用于雜志,、畫冊、門戶網(wǎng)站,、UI設(shè)計等平面設(shè)計領(lǐng)域,。它能讓你的設(shè)計更有秩序更有規(guī)律，簡單來說就是用更科學(xué)的方法去排版,。

▲ 谷歌material響應(yīng)UI基于12列網(wǎng)格布局,。該網(wǎng)格在布局之間創(chuàng)建視覺一致性，同時允許各種設(shè)計的靈活性,，網(wǎng)格列的數(shù)量根據(jù)斷點系統(tǒng)而變化,。

2. 網(wǎng)格的基礎(chǔ)概念

列

列是網(wǎng)格的垂直部分也可以理解為內(nèi)容區(qū)域。網(wǎng)格中的列越多,，其靈活性越大,，但是列并不是越多越好，PC端一般是12列,，移動端一般是6列,，特別是移動端不適合列太多，列太多會讓頁面更碎,。

▲ PC端970為分辨率網(wǎng)格分為12列

▲ 移動端一般分為6列

行

行是網(wǎng)格的水平部分,。也是橫向部分，它們通常在網(wǎng)頁設(shè)計中被省略,。具有行和列的網(wǎng)格稱為模塊化網(wǎng)格,。移動端行間距用的比較少可以忽略,，一般在UI設(shè)計師中就是橫向的間距。

內(nèi)容模塊

也叫內(nèi)容區(qū)域,，填充設(shè)計內(nèi)容,，模塊是由行和列交叉創(chuàng)建的空間單位。

組合區(qū)域

區(qū)域是形成組合元素的列,，行或模塊的分組,。

水槽

列和行由水槽分隔。溝渠越緊,，視覺張力就越大,。如果你希望你界面間距大點，水槽就可以留大,，相反水槽越小,，越緊湊，注意一點,，水槽里面是不要放內(nèi)容,，除非和區(qū)域一樣組合使用，內(nèi)容盡量放在模塊里面,。

▲ 圖中橙色區(qū)域就是水槽,，這里做設(shè)計時候是模塊和模塊之間間距，最好不要放內(nèi)容,。

屏幕邊距

邊距是網(wǎng)格列和行之外的空間,。不要填充內(nèi)容，移動端主要是兩側(cè)空間和屏幕邊緣的距離,，這里設(shè)計時候切忌不要填充內(nèi)容,，保持頁面骨架邊界。

▲ 黃色區(qū)域就是屏幕邊距,，設(shè)計時候切忌填充內(nèi)容,，保持設(shè)計骨架統(tǒng)一。

上述基本就是網(wǎng)格的一些常用單位,，當(dāng)然還有更細分的流線,，標(biāo)記，還有各種網(wǎng)格類型,，但是今天我們主要學(xué)習(xí)移動端的網(wǎng)格,，只需要掌握:移動端一般分為6列，內(nèi)容區(qū)域（UI設(shè)計元素,，內(nèi)容）一般放置到內(nèi)容模塊和組合模塊,，水槽和屏幕邊距保持留白，不放內(nèi)容,。

3. 如何定網(wǎng)格,，各模塊大小

知道了網(wǎng)格的基礎(chǔ)概念,，那么我們?nèi)绾巫约憾x一套科學(xué)標(biāo)準的網(wǎng)格系統(tǒng)和骨架，來保證骨架的科學(xué)性和設(shè)計連續(xù)性,。

第一步：定最小設(shè)計單位

我們都學(xué)過化學(xué),，在化學(xué)里面有最小單位原子，原子可以組成分子,，分子可以組成更多的化學(xué)元素,，那么在UI系統(tǒng)中其實也一樣，我們先要保證你的這個世界里面的元素是有個基礎(chǔ)的,，常用的單位有3,，（淘寶，天貓,蘑菇街等最小單位）,，4（funcy）,，5（eaby，亞馬遜,，pinterest等）這個具體看你們產(chǎn)品的復(fù)雜程度，目前整體設(shè)計區(qū)域是最小單位越來越大,，像Airbnb,，pinterest等都是大留白，單位都是5甚至6,。

第二：定邊距和水槽大小

前面說過,，先定最小單位，假如我們最小單位是5,，總寬是375（sketch1倍設(shè)計尺寸）產(chǎn)品內(nèi)容我希望整個系統(tǒng)設(shè)計風(fēng)格別那么滿,，留白稍微多點，我左右邊距是10,，中間內(nèi)容和內(nèi)容之間也想留10,，這里注意，單位一定是前面我們定的5的倍數(shù),。

計算得出：

（375（屏幕總寬）-邊距左右兩邊20- 水槽五個50 ） ?  6（內(nèi)容移動端是6）= 51(四舍五入) 

• 邊距：10

• 水槽：10

• 內(nèi)容：51

這就是我們定的柵格,，系統(tǒng)骨架，設(shè)計時候必須保證每個設(shè)計元素,，在框架內(nèi),，保持規(guī)則，邊距不要出現(xiàn)內(nèi)容,，水槽不要放置內(nèi)容,，如果放置，盡量以組的形式,。

必然會出現(xiàn)除不盡的情況這個避免不了,，取整數(shù),，有個內(nèi)容區(qū)域面積會少1個px，這個沒關(guān)系,。

也可以根據(jù)不同情況,，做出不同組合的網(wǎng)格，具體看業(yè)務(wù)場景,。

第三：定橫向間距

前面雖然說過,，在定骨架時候可以忽略橫向，但是在UI系統(tǒng)設(shè)計中還是需要對橫向的設(shè)計間距進行統(tǒng)一,，多人協(xié)作時需要保證所有設(shè)計師界面中的間距一致性,，這有個科學(xué)方法：

費波那契數(shù)列又譯為費波拿契數(shù)、斐波那契數(shù)列,、費氏數(shù)列,、黃金分割數(shù)列。

在數(shù)學(xué)上,，費波那契數(shù)列是以遞歸的方法來定義：用文字來說,，就是費波那契數(shù)列由0和1開始，之后的費波那契系數(shù)就是由之前的兩數(shù)相加而得出,。

費波那契系數(shù)是：0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233

我也研究過很多國外設(shè)計系統(tǒng),，都是類似有節(jié)奏的設(shè)計間距來搭建系統(tǒng)，結(jié)合前面我們定的5的柵格,，可以得出：

▲ 當(dāng)然這個間距只是一個運用費波那契數(shù)列的一個參考,，如果在運用過程中如果覺得間距不夠用，完全可以去添加或者調(diào)整,，但是一定要在系統(tǒng)的原則基礎(chǔ)上加有規(guī)律的間距,。

至此網(wǎng)格大概就講完了，也通過前面推導(dǎo)得出了一套網(wǎng)格系統(tǒng),，后續(xù)就是需要大家在自己項目里面去使用了,。

國外運用案例