8點網格流行有一段時間了，我最早知道這種設計方式是在看了Google的Material Design設計規範之後開始認識的。
發現這種設計方式實在是太適合我這種理科出生的設計師了，所以在這裡也給大家科普一下為什麼要使用8點網格。
看完本文你會學到：
1. 8點網格系統的意義
2. 為什麼使用8點網格系統
3. 8點網格系統的技巧有哪些
什麼是8點網格
就是建立8點為一個單位的網格，所有的元素尺寸都是8的倍數。
為什麼是 8點？
為什麼是基於8點去定義網格，而不是6點或者10點？引用下Quora上一個提問的回答：
If you use 8, you can easily resize without ending up with half or quarter pixels. 8/2=4, 4/2=2 and 2/2=1. If you start with 10 you'll end up with 2.5 pixels, and then 1.25 (10, 5, 2.5, 1.25 …) you get the idea. 8 gives you more flexibility than 10. /Sjur O. Sundin, Senior UX Architect / Design Manager – San Diego, CA/
意思是：如果你用8作為設計的最小單位，你可以很方便的縮小的你的設計尺寸，8/2=4,4/2=2,2/2=1。
如果你從10開始，你縮小到的網格單位可能是2.5像素，在往下是1.25像素。
為什麼要使用這套系統?
這裡引用一些Material Design中的設計指導和Spec的一篇文章中的信息，結合自己的經驗來說明下：
1. 更統一的UI
當所有的元素尺寸都符合同樣的規則時，你自然就獲得了一套更加統一的UI。
2. 更少的選擇=節約更多的時間
也許在設計某個元素的時候，或者定義某個空隙的時候，你用8好像稍微寬了點，於是你一點一點地調整。
但你在選擇空隙是7還是8的時間時，你做其他事情的時間也就被浪費了，最後效果的差異其實並沒有那麼大。
更可怕的是最後你的設計稿裡這裡是6，那裡是8，沒有一套清楚的規則的時候，會影響到開發對你設計稿元素間尺寸的認知，於是你精心調好的細節也會沒有那麼好的被還原。
試想你跟開發達成一種默契：如果我這裡的標註小於8，那你看成8就好。其他的，一定是8的倍數。
3. 多平台的響應式設計
基本的主流螢幕尺寸都至少在橫豎一個軸的維度上能被8整除，很多時候兩個軸的未讀都可以。甚至，有些平台的設計規範（比如Material Deisgn）會特別要求建立4pt或8pt為基準的網格，這樣整套系統就能自然的符合這一規則。
執行這套方案的技巧
1. 建立網格並對齊網格
幾乎所有設計軟體都有「對齊到網格」的選項。如果你的設計絕對符合這套系統的話，設置好相應的網格選項並對齊絕對會給你很大的幫助。所以，你要先確保你打開了「對齊到網格」選項。
2. 確定你自己的增量習慣
大多數設計軟體都可以調整移動增量值，我喜歡把我的大增加值（按住command移動的增量）從默認的10調整到8，這會方便很多。
3. 快捷鍵
很多應用程序都有快捷鍵，可以讓你在設計時快速移動元素、調整大小。記住這些快捷鍵，配合網格使用可以大大提高你的效率。
4. 建立icon的框架
5. 放大、縮小
如果你一直放大到1600%來設計，你可能會丟失垂直方向上的佈局感受。相反，如果你一直在50%的縮放比例下查看你的UI稿，你可能會丟失一些重要的細節，比如完美像素。所以記住要經常放大縮小界面，在各種比例下查看你的設計。
Material Design設計規範：https://material.io/guidelines
Spec文章鏈接： https://spec.fm/specifics/8-pt-grid
