一開始「網(wǎng)格系統(tǒng)」的出現(xiàn)，就是為了解決平面設(shè)計師在進(jìn)行大量的圖片和文本混排時的效率以及美觀的問題。特別是針對大篇幅、多版面的報刊、雜志、書籍、畫冊和期刊的排版時，設(shè)計師可以按需求來設(shè)置各類文本、圖片尺寸和圖表，通過網(wǎng)格系統(tǒng)來規(guī)范設(shè)計內(nèi)容，不僅工作效率上得到大幅提升，而且還可以輕松的創(chuàng)作出更具有功能性、邏輯性和充滿美感的版面視覺效果。

但是在UI設(shè)計里，我們也需要視覺表現(xiàn)出具有節(jié)奏且信息層級清晰，讓用戶能夠舒適的閱讀以及很好地使用產(chǎn)品；

UI設(shè)計相對于傳統(tǒng)平面設(shè)計更強調(diào)動態(tài)化、體系化的思考。而網(wǎng)格系統(tǒng)就可以輔助我們制定UI設(shè)計的界面規(guī)則，將界面中所有的設(shè)計元素高效有序地組織起來，從而讓整個產(chǎn)品的設(shè)計具有高度的一致性和邏輯性，避免設(shè)計師們憑感覺做設(shè)計。

1. 網(wǎng)格系統(tǒng)的定義

網(wǎng)絡(luò)系統(tǒng)是利用一系列的垂直與水平的參考線，將畫面分割成若干個有規(guī)律的正方形格子，再用這些正方形格子作為參考，控制視覺元素間的數(shù)量與組合，從而創(chuàng)造出一種緊湊、清晰易懂、整潔有序的設(shè)計。
關(guān)于「網(wǎng)格與柵格」
我理解的網(wǎng)格與柵格本質(zhì)上是相同的，都是用來規(guī)范設(shè)計內(nèi)容的。而不同的是，網(wǎng)格更多的是在平面設(shè)計使用中，利用一定規(guī)律的格子，將文本與圖片填入到固定的格子就可以了。而在網(wǎng)頁或者移動端的設(shè)計中，因為高度無法確定，使用的是具有一定規(guī)律的列去編排視覺元素的。

2.網(wǎng)格系統(tǒng)的基本構(gòu)成

網(wǎng)格系統(tǒng)是由單元格、內(nèi)容區(qū)域、外邊距、列數(shù)、水槽、橫向間距組成的，它們之間的比例關(guān)系與布局劃分，構(gòu)成了一個基本的網(wǎng)格系統(tǒng)。

1)單元格：網(wǎng)格系統(tǒng)是由一系列垂直與水平的參考線，將畫面分割成若干個有規(guī)律的正方形格子，而這些正方形小格子就是網(wǎng)格系統(tǒng)里面最基本的元素「單元格」。

2)內(nèi)容區(qū)域：在做界面設(shè)計前會先確定一個尺寸，由于內(nèi)容的多少是不確定的，所以高度我們無法確定，但內(nèi)容區(qū)域的寬度是可以定的，也可以理解為網(wǎng)格寬度。頁面的內(nèi)容區(qū)域由N個列和（N-1）個水槽組成。
3)安全邊距：在界面設(shè)計中，我們會先確定好設(shè)計尺寸與內(nèi)容區(qū)域，而所有內(nèi)容都會顯示在內(nèi)容區(qū)域里，那么內(nèi)容區(qū)域與內(nèi)容的左右兩端所留出的空間，被稱為安全邊距。安全邊距數(shù)值越大，頁面顯得越寬松，數(shù)值越小越顯得比較緊湊，因此需要根據(jù)自己產(chǎn)品的實際需求去確定具體數(shù)值。

4)列：列是網(wǎng)格的數(shù)量單位，通常設(shè)定網(wǎng)格數(shù)量說的就是列的數(shù)量。

5)水槽：就是列與列之間的間距，水槽寬度的數(shù)值對界面的影響，與完全邊距大體上相似，即數(shù)值越大界面留白越多，界面視覺越寬松；反之，界面視覺就會越緊湊。

3.網(wǎng)格系統(tǒng)的運用

1)定義設(shè)計尺寸與內(nèi)容區(qū)域：當(dāng)我們開始著手設(shè)計一個產(chǎn)品時，首先應(yīng)考慮設(shè)計多大的尺寸范圍，也就是確定網(wǎng)格區(qū)域的寬度范圍。

2)定義最小單位：最小單元格的數(shù)值，大多數(shù) APP/WEB 會選擇4-10這個范圍內(nèi)一個偶數(shù)。但是這個數(shù)值不是隨便可以定義的，第一需要考慮到是否能被大多數(shù)屏幕的寬度所整除，即廣泛的適用性；第二從頁面的兼容性與可擴(kuò)展性來講，還需要考慮的更加長遠(yuǎn)，遵循「偶數(shù)原則」可以最大程度上避免各種潛在的問題。因此我們需要根據(jù)產(chǎn)品的實際需求選擇合適的數(shù)值，4px或6px單元格比較適合界面內(nèi)容信息較多、布局排版比較復(fù)雜的產(chǎn)品，例如：淘寶、京東等電商類產(chǎn)品；而8px單元格對一般的設(shè)計場景都可以很好的滿足，比較適合大多數(shù)的產(chǎn)品。

3)梳理組件之間的間距：既然確定了最小單元格的數(shù)值，那么頁面里所有的間距、組件尺寸等都需要以最小單位的增量去定義，以達(dá)到具有統(tǒng)一性與邏輯性的視覺效果。例如單元格選擇為8px，那么所有用到的間距尺寸將會是8px、16px、24px、32px、40px……

4)確定列的數(shù)量：我們在設(shè)計頁面時，列的數(shù)量可以是6、8、12、16、24等數(shù)值，在定義的過程中，需要考慮這個數(shù)值怎樣才能最大程度的滿足自身產(chǎn)品的實際需求。在 WEB端設(shè)計中，列的數(shù)值一般會采用12、16、24，但是在移動端設(shè)計中，列的數(shù)量不宜過多，因為手機屏幕寬度有限，列的數(shù)量越多，頁面就會被分割的越零散，因此在實際使用中還是以8列和6列為主。24列會比較適用于業(yè)務(wù)信息量大、信息分組較多的產(chǎn)品，例如后臺界面設(shè)計；相對12列，24列變化更加靈活，更適合內(nèi)容比較多樣復(fù)雜的場景。

5)通過sketch的布局設(shè)置：利用sketch的布局設(shè)置功能，可以快速搭建出網(wǎng)格系統(tǒng)的參考布局，但在設(shè)置的過程中每一項對應(yīng)的內(nèi)容都需要注意。

4.網(wǎng)格系統(tǒng)在使用中需要注意以下問題：

1)網(wǎng)格系統(tǒng)不要生搬硬套：在設(shè)計界面的過程中并不是每個元素都必須要與網(wǎng)格對齊的，要根據(jù)自己的實際需求而定。

2)網(wǎng)格出現(xiàn)奇數(shù)或者不能被整除怎么辦？理想狀態(tài)下，我們應(yīng)該調(diào)整內(nèi)容區(qū)域的大小，使其盡可能成為被最小單元格整除的尺寸，但在實際運用中，有時也會出現(xiàn)奇數(shù)或不被整除的情況，其實這屬于正?，F(xiàn)象，偶爾“不完美”的尺寸是允許的，因為網(wǎng)格系統(tǒng)的最終目的是使界面具有一致性、邏輯性與視覺美感。

5.總結(jié)

網(wǎng)格系統(tǒng)是視覺設(shè)計師強有力的輔助工具，它能指導(dǎo)我們用更科學(xué)的方式打造 APP界面，從而讓頁面布局規(guī)范有序、統(tǒng)一，讓設(shè)計師效率翻倍。

然而網(wǎng)格參數(shù)種類繁多，因此需要根據(jù)產(chǎn)品的自身需求，不斷地去調(diào)整構(gòu)建一個適合自己和更符合產(chǎn)品調(diào)性的網(wǎng)格系統(tǒng)。這不僅僅需要設(shè)計師的設(shè)計能力強，還需要具備一定的組織能力。因為在調(diào)整的過程中，需要將信息通過邏輯、秩序以及主次關(guān)系來體現(xiàn)在恰當(dāng)?shù)呐虐嬖O(shè)計中。