UI設計師在設計壹個APP的時候，首先要制定壹套完善可行的設計規範，包括定義元素，比如顏色、文字、圖標、結構、布局、間距等等。但是很多設計師往往忽略了壹個重要的東西，那就是網格系統的構建。網格系統可以說是整個頁面的骨架。它將頁面中的所有設計元素高效有序地組織起來，使得整個APP的設計具有高度的壹致性和規律性，提高了設計師的工作效率，避免了憑感覺設計。什麽是網格系統？
網格系統利用壹系列垂直和水平的參考線將頁面劃分成若幹規則的列或網格，然後基於這些網格控制頁面元素之間的對齊和比例關系，從而構建出高度有序的頁面框架。比如Google的材質設計，把整個頁面看成壹個網格，所有頁面元素都和網格線對齊。這個規律貫穿了整個產品設計。
為什麽要研究網格系統？
1/提高團隊協同設計的效率。
當幾個設計師壹起設計壹個APP的時候，網格系統就變得尤為重要。每個設計師都有自己的設計方法和習慣。如果沒有壹個統壹的框架來約束，就有可能在設計類似的組件或者頁面時，給出不同的設計方法和大小，這樣整個APP中的頁面就會比較混亂。比如下圖，設計師A和B各自按照壹套尺寸規格搭建了壹個頁面，但是設計出來的結果卻給人完全不同的感覺。
因此，擁有壹個統壹的網格系統，可以保證設計者的輸出具有高度的壹致性和規律性，合作更加高效。
2/設計更加理性。
UI設計在數理邏輯上需要理性、客觀、美觀。巧妙的使用網格系統可以讓妳的設計更加有序有節奏感，更清晰的展示頁面信息，提高閱讀效率，給用戶提供舒適的體驗。
3/減少做決定的時間。
很多設計師，在處理頁面細節的時候，往往會為了更好的視覺效果而三思(他們好像在說我)，甚至會擔心壹個圖標到底應該用20px還是24px，大大影響了設計效率。即使幾個頁面的設計都達到了各自滿意的視覺效果，也很可能因為使用了不同的大小規則而導致設計缺乏統壹性。
壹個完善的網格系統可以讓設計師在頁面布局和細節處理上更清晰、更自信、更高效。所有的設計動作都有理有據，減少壹些細節造成的不必要的時間成本，拒絕為設計拍腦袋。
網格系統的基本要素
每個單元格1
網格中最基本的元素“單元格”
2/外部邊距
在APP頁面中，所有內容都會顯示在中間的內容區域，所以內容區域與屏幕左右兩端之間的空白區域稱為外邊距。
從外面看，值越大，頁面顯得越松散，值越小，顯得越“飽滿”。具體數值妳需要根據自己的實際情況來確定。比如Airbnb產品的調性比較簡單，整體布局比較松散，所以外沿的值是48px。比如網易雲音樂專註於專輯封面和歌單。在頁面中，註意圖片的視覺沖擊。所以頁面內容區域的比例會比較大，外邊距的值是32px。
3/柱和接收器
頁面的內容區域由N列和(N-1)個接收者組成。在網頁設計中，n的取值壹般為12、16、24，但在手機設計中，列數不宜過大，因為手機屏幕寬度有限，列數越多，頁面分割就會越“碎”，在頁面設計中會更難控制。通常使用六個網格。
下沈寬度值對頁面的影響類似於外邊距，即值越大，頁面越松散，反之亦然。比如Airbnb選擇了24px，網易雲音樂選擇了16px。
4/橫向間距
在雜誌的設計排版中，經常使用基線系統，即在水平方向上分布等間距的參考線，以調整文字與圖片在水平方向上的節奏關系。但是，圖形布局的大小是相對固定的，移動終端上的屏幕寬度和元素組件的高度是不確定的。所以這個基線系統不能直接照搬，需要根據情況來使用。
在文字段落中，可以使用基線系統進行水平間距，以規範文字在水平方向上的節奏關系，這種情況經常出現在閱讀產品的文字頁面中。基線的距離值取決於自身產品的實際情況。比如下圖的基線間距設置為4px，那麽字體大小和行距都是4px的整數倍，所以每壹行字都會準確地壓在基線上，保證視覺節奏的壹致性。
但組件之間的水平間距和垂直間距的使用規則是壹致的，即選擇單元格的整數倍最小的壹系列值來調整組件在水平方向上的節奏關系。例如，如果下圖中的最小單元格設置為8px，則水平間距的值將為8px、16px、24px、32px等。(重點)
APP設計中如何使用網格系統？
1/定義最小的單元格。
最小的單元格值，大部分app會選擇4-10範圍內的偶數。那麽哪個值最合適呢？
這需要從兩個方面來考慮。壹方面是這個數值是否能被大部分手機屏幕的寬度整除，即適用性廣，另壹方面是在具體使用中是否有壹定的靈活性。適用性方面，4，6，8，10四個數值基本令人滿意。從靈活性上來說，4px是最好的，但是頁面會非常碎片化，在設計上很難控制。
所以我們需要根據app的實際情況選擇壹個合適的值。
4px或6px單元格更適合內容信息較多、布局復雜的產品，如淘寶、考拉等電商APP；
8pxcell可以很好的滿足壹般的設計場景，更適合大部分APP產品，推薦使用。
2/確定組件間距的增量關系。
因為確定了最小單元格的值，所有間距(包括下沈、外邊緣、橫向間距等。)並且頁面中組件的大小需要是最小單元的整數倍，才能達到統壹視覺節奏的目的。
例如，如果單元格是8px，那麽所有使用的間距大小將是8px，16px，24px，32px，40px？(知識點)
3/確定列數
在設計壹個APP頁面時，最常用的布局方式是等分布局，即將頁面的內容區域分成n等份，根據屏幕寬度自適應調整各部分的寬度。所以從這個角度來說，想想頁面的網格裏應該設置多少列，才能最大程度的滿足各種平等布局的需求。
以下為典型案例(4列，10列，16列等。)都列出來了。有興趣的可以自己試試，這裏就不壹壹列舉了)。我們發現12列和24列可以滿足除5以外的所有其他條件，6列相對較差，即結果為:12列=24列>；；第6列>:8列。但是24列顯然把有限的手機屏幕分成了太多的區塊，所以實際使用中以12列和6列為主。
4/草圖布局設置
Sketch自帶布局設置功能，可以快速搭建網格系統的參考布局。在設計過程中可以經常使用L快捷鍵來切換布局顯示(知識點:1。總寬度=總屏幕寬度-外部邊距x2；2.偏移=外邊緣距離；3.不要勾選“裝訂線在外面”。)
5/實際應用
主頁設計前期還沒有使用完整的網格系統進行標準化，組件之間的間距規則基本是10px，20px，30px。版面模塊之間沒有內在聯系，視覺節奏不流暢，風格不統壹。接下來的兩頁，大部分元素都沒有貼網格，布局不規則，沒有客觀參考。
現在，我們開始使用8px和12列網格系統來優化主頁的布局。在下面的三張圖中，我們可以看到頂部圖標、入口圖標、豎蓋和橫蓋都被網格系統串聯成壹個整體。他們不再是無組織、獨立的個體，所以閱讀起來更流暢。水平間距也開始使用8px的整數倍，給用戶更有節奏感的瀏覽體驗。
網格系統的使用需要註意哪些問題？
1/網格系統不能機械復制。
並非每個元素都必須與網格對齊。這要看妳的實際需求。如果妳強迫它進入網格，頁面看起來會很奇怪。圖中左頁的三個選項卡標題想和網格上的封面對齊，但是標題之間距離太大，看起來不舒服。這裏，三個選項卡標題之間的間距是壹個固定值，不需要根據屏幕寬度進行調整。所以應該把三個tab標題看成壹個整體，也就是壹個tab組件，組件的左端可以粘貼在網格上。
2/網格不可分怎麽辦？
做設計稿時，最常用的畫布尺寸可能是iPhone6/7/8的750*1334px。我們會發現，如果8px是這個尺寸中最小的單元格，那麽畫布是不可分的，也就是750px的寬度去掉所有的外邊距和下沈後，每個紅柱的寬度實際上是42.5px，那麽就會有疑問:在這種情況下，網格系統是否意味著不能使用？
其實這是很正常的現象，因為任何屏幕分辨率都沒有可以完美劃分的網格體系。而且是同樣的8px電池，在750px手機上不能整除，但是在720px手機上就沒有問題。
例如，在下面顯示的大小中，代表外邊緣和下沈的藍色值是我們需要為開發提供的固定值，而紅色值是根據屏幕的實際寬度計算的。因此，我們只需要確保提供給開發的值遵循網格系統的規則。至於頁面中的計算值，0.5px的偏差肉眼是察覺不到的。
摘要
網格系統是視覺設計師強有力的輔助工具。可以指導我們用更科學的方式搭建APP界面，讓頁面布局規範有序，節奏統壹，設計師效率倍增。但正如本文所說，網格參數有很多種，我們需要根據自己的需求，構建適合自己，符合產品調性的網格體系。
原文鏈接網易UEDC
如何在xd軟件中制作布局網格？
將鼠標移動到中間的粉色區域，鼠標會變成雙箭頭，拖動進行調整。
在sketchup軟件中哪裏可以找到“在網格中創建”這個命令？
妳的意思是地形，草圖大師8-繪圖-沙盒-從網格，輸入網格間距，點擊三次-完成。其他問題，窗口-參數設置-擴展欄，查看沙盒工具。
用IQOO手機怎麽調整方格桌面？
可以通過OriginOS提供的變形器功能壹鍵返回華容網格界面，非常方便。
華融電網是新OriginOS系統的第壹個功能。設計靈感來自童年玩具華容道，正式命名為“華容格”。重新設計底部網格的間距，重新排列桌面元素的順序，帶來更幹凈高效的體驗。它在桌面上建立了壹個新的結構。用戶可以根據自己的習慣和喜好調整桌面上的元素，比如圖標小程序，圖標的大小和間距可以自己調整。OriginOS給了用戶很大的自由度，不再受傳統桌面框架的限制，可以根據自己的個性組合多種桌面元素。
如何設置cad網格的面積？
在cad軟件中調整網格大小的具體步驟如下:
1.首先打開要編輯的CAD圖紙，進入編輯頁面。
2.然後單擊下面的打開網格圖標按鈕。
如何設置id網格？
答:打開InDesign並創建壹個新項目。
在頂部菜單欄中找到視圖，然後單擊網格和參考線。
基線網格和文檔網格都可以添加。
也可以在場景中單擊鼠標右鍵進行選擇。
ID是壹款專業的圖文排版軟件。書籍、畫冊排版時，壹般只設置豎排。創建新文件時，選擇頁邊距和分欄。
只需在對話框中設置頁邊距、列間距和列數:
然後執行布局創建指南，
分別設置行數、列數和列間距:
設置網格如下:
(按W鍵隱藏或顯示網格)
在設計時設置網格是為了幫助妳讓頁面中的元素布局更加規範統壹，便於用戶理解。網格的靈活運用不僅會限制布局形式，還會使布局更加清晰、生動、統壹、有條理。