作者：sky，微信公眾號(hào)“我們的設(shè)計(jì)日記 ”
有效、有規(guī)律的設(shè)計(jì)布局是設(shè)計(jì)的一個(gè)基本原則，網(wǎng)格無(wú)處不在，可能只是你沒(méi)有注意到它的存在，簡(jiǎn)單理解就是把一個(gè)頁(yè)面，根據(jù)版心劃分為無(wú)數(shù)統(tǒng)一尺寸的網(wǎng)格，廣泛應(yīng)用于雜志、畫冊(cè)、門戶網(wǎng)站、UI設(shè)計(jì)等平面設(shè)計(jì)領(lǐng)域。
它能讓你的設(shè)計(jì)更有秩序、更有規(guī)律，簡(jiǎn)單來(lái)說(shuō)就是用更科學(xué)的方法去排版。
▲ 谷歌material響應(yīng)UI基于 12 列網(wǎng)格布局
該網(wǎng)格在布局之間創(chuàng)建視覺(jué)一致性，同時(shí)允許各種設(shè)計(jì)的靈活性，網(wǎng)格列的數(shù)量根據(jù)斷點(diǎn)系統(tǒng)而變化。
列是網(wǎng)格的垂直部分也可以理解為內(nèi)容區(qū)域，網(wǎng)格中的列越多，其靈活性越大。但是列并不是越多越好，PC端一般是 12 列，移動(dòng)端一般是 6 列，特別是移動(dòng)端不適合列太多，列太多會(huì)讓頁(yè)面更碎。
▲ PC端 970 為分辨率網(wǎng)格分為 12 列
▲ 移動(dòng)端一般分為 6 列
行是網(wǎng)格的水平部分，也是橫向部分，它們通常在網(wǎng)頁(yè)設(shè)計(jì)中被省略。具有行和列的網(wǎng)格稱為模塊化網(wǎng)格，移動(dòng)端行間距用的比較少可以忽略，一般在UI設(shè)計(jì)師中就是橫向的間距。
也叫內(nèi)容區(qū)域，填充設(shè)計(jì)內(nèi)容，模塊是由行和列交叉創(chuàng)建的空間單位。
區(qū)域是形成組合元素的列，行或模塊的分組。
列和行由水槽分隔。溝渠越緊，視覺(jué)張力就越大。如果你希望你界面間距大點(diǎn)，水槽就可以留大，相反水槽越小，越緊湊，注意一點(diǎn)，水槽里面是不要放內(nèi)容，除非和區(qū)域一樣組合使用，內(nèi)容盡量放在模塊里面。
▲ 圖中橙色區(qū)域就是水槽
這里做設(shè)計(jì)時(shí)候是模塊和模塊之間間距，最好不要放內(nèi)容。
邊距是網(wǎng)格列和行之外的空間，不要填充內(nèi)容，移動(dòng)端主要是兩側(cè)空間和屏幕邊緣的距離，這里設(shè)計(jì)時(shí)候切忌不要填充內(nèi)容，保持頁(yè)面骨架邊界。
▲ 黃色區(qū)域就是屏幕邊距，設(shè)計(jì)時(shí)候切忌填充內(nèi)容，保持設(shè)計(jì)骨架統(tǒng)一
上述基本就是網(wǎng)格的一些常用單位，當(dāng)然還有更細(xì)分的流線，標(biāo)記，還有各種網(wǎng)格類型。但是今天我們主要學(xué)習(xí)移動(dòng)端的網(wǎng)格，只需要掌握：移動(dòng)端一般分為 6 列，內(nèi)容區(qū)域（UI設(shè)計(jì)元素，內(nèi)容）一般放置到內(nèi)容模塊和組合模塊，水槽和屏幕邊距保持留白，不放內(nèi)容。
QQ客服