網(wǎng)格在有規(guī)律的設(shè)計(jì)布局中是設(shè)計(jì)的一個(gè)基本原則，網(wǎng)格的應(yīng)用能夠讓你的設(shè)計(jì)更有秩序、更有規(guī)律。簡(jiǎn)單的說(shuō)，網(wǎng)格的使用就是用更科學(xué)的方法去排版。

網(wǎng)格設(shè)計(jì)是一種有效、有規(guī)律的布局方式，被廣泛應(yīng)用于雜志、畫(huà)冊(cè)、門(mén)戶網(wǎng)站、UI設(shè)計(jì)等平面設(shè)計(jì)領(lǐng)域。通過(guò)將頁(yè)面劃分為無(wú)數(shù)統(tǒng)一尺寸的網(wǎng)格，可以讓設(shè)計(jì)更有秩序、更有規(guī)律，從而用更科學(xué)的方法去排版。

在網(wǎng)格中，列是垂直部分，也可以理解為內(nèi)容區(qū)域；行是水平部分，在網(wǎng)頁(yè)設(shè)計(jì)中通常被省略。具有行和列的網(wǎng)格稱為模塊化網(wǎng)格，移動(dòng)端行間距用的比較少可以忽略，一般在UI設(shè)計(jì)師中就是橫向的間距。內(nèi)容模塊填充設(shè)計(jì)內(nèi)容，由行和列交叉創(chuàng)建的空間單位；組合區(qū)域是形成組合元素的列、行或模塊的分組。水槽列和行由水槽分隔，溝渠越緊則視覺(jué)張力越大。

定制一個(gè)科學(xué)標(biāo)準(zhǔn)的網(wǎng)格系統(tǒng)和骨架需要三個(gè)步驟：第一步是定最小設(shè)計(jì)單位；第二步是定邊距和水槽大?。坏谌绞嵌M向間距。最小單位根據(jù)產(chǎn)品復(fù)雜程度而定，目前整體設(shè)計(jì)區(qū)域最小單位越來(lái)越大。邊距和水槽大小需要保證單位是最小單位的倍數(shù)，并且保持留白不放置內(nèi)容。橫向間距可以運(yùn)用費(fèi)波那契數(shù)列來(lái)確定。

總之，在進(jìn)行網(wǎng)格設(shè)計(jì)時(shí)需要保證每個(gè)設(shè)計(jì)元素都在框架內(nèi)，并且遵循規(guī)則：邊距不要出現(xiàn)內(nèi)容，水槽不要放置內(nèi)容。這樣才能保證骨架的科學(xué)性和設(shè)計(jì)連續(xù)性。

國(guó)外已經(jīng)有很多運(yùn)用案例了，并且還有很多工具可以幫助我們進(jìn)行網(wǎng)格制作，比如PS推薦輔助線工具guideguide以及Sketch推薦插件craft等。

掌握好移動(dòng)端6列網(wǎng)格布局以及以上提到的基本原則與方法后，在實(shí)際項(xiàng)目中進(jìn)行網(wǎng)格布局會(huì)事半功倍。