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

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

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

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

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

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

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