作為設計師，就算你不使用柵格系統，那你也至少會頻繁地接觸到“柵格”這個概念。無論是設計網站、雜志，還是app，各類柵格應有盡有。但由于我最近接觸到了“8點柵格”，并對其產生了極大興趣。為一探究竟，我要搞清它對于我們的設計到底能帶來怎樣的好處？

歡迎關注作者的知乎專欄：Sketch 中文教程

沒它又如何？畢竟不用8點柵格不還是照樣能干好設計

我一直以來都使用Bootstrap或Foundation之類的系統進行設計，甚至有時會打造我自己的設計系統。但卻逐漸愈發地意識到一件事，那就是雖然這些系統可以幫助你定義各個控件自身的規范，但當元素越多，就越難以用統一的規范，將這些控件協調地串聯起來。

在下面這個對比中，你可以看到8點柵格系統內的padding或margin或sizing永遠是8的倍數。而非8點柵格系統則沒有相對嚴謹的約束，采用的是隨意值。

為何界面需要一致性？

雖然“一致性”并非必要條件。但，如果你希望你的作品足夠專業、足夠值得信賴。那么你就應該盡其所能去追求良好的一致性。我就因曾經在網購時，填寫信用卡信息的文本域樣式和其它部分的樣式看起來非常不同，因此而感到困惑、猶豫。。要知道，滴水能夠穿石，如果你放任微小的一致性問題置之不理，那么將來極容易引發該問題的滑坡效應。

為何類Bootstrap的系統不足以解決問題？

Bootstrap是一套強大的組件庫，它能讓設計師與工程師專注于內容本身。從而提高了無數網站的質量。但它卻缺少一套底層的、統一的測量單位，供多個設計師之間進行協作。這樣極容易導致padding、margin、sizing的分歧。

最近我們的項目就遇到了這個問題。雖然每個設計師對整套風格的理解是一致的，但細節處理卻略有不同，到底哪一種是錯的？

其實哪種都不算錯。盡管他們有著不同的高度和padding，但它們都缺乏一套背后的思想，從底層的角度去解釋，為什么該高度或padding該如此定義，以及為什么這套思想更優，人們應該遵從之。

說了這么半天，你行你上？

→ 8點柵格 ←（自帶BGM），簡而言之：就是以“8”為一個步進，來調整元素的間距及尺寸。這意味著任何padding、margin、sizing，都將是8的倍數。

為什么是8的倍數？

當今，屏幕尺寸和分辨率種類層出不窮，且趨勢有增無減。使得設計師對“維護適配性”的難度越來越大。而使用偶數（比如8）將更容易對元素進行不失真的縮放。

例如在某些設備上你的設計會以1.5x呈現，從而導致總會有奇數像素（比如5px）會出現半像素偏移。

OK，但為什么不是6的倍數、10的倍數，非得是8？

因為大多數的主流屏幕都可以被8整除，足夠普適。且以8為一個步進既不會使你的系統過于細碎（比如6點柵格），也不會使你的系統過于捉襟見肘（比如10點柵格）。最終你要拿捏一個最“合適”的步進作為你的柵格基礎。這套系統必須足夠易于上手且易于復用，才能稱之為好的系統。

（譯者：作者此處有循環論證之嫌，因為此處實際上只是解釋了一遍8為什么好（8的倍數最好，因為6和10都不夠好），至于為什么不夠好，只提出了“6過于細碎”而“10過于笨拙”，但分別具體如何導致的細碎/笨拙，從而導致了怎樣的弊端，以及細碎與笨拙的定義，都缺少進一步舉證。我并不是說此處錯，只是認為此處缺乏論證。）

8點柵格的價值幾何？

• 對于設計師：提升效率、減少決策、同時讓元素之間保持一種協調的節奏。
• 對于團隊：設計師和工程師之間更容易達成默契，工程師可以較輕松地用肉眼丈量8的倍數，而不是趴在那一個一個數像素。
• 對于用戶：這讓他們信賴的品牌得以保持高質量的一致性體驗。并且在自己的設備上也不會出現模糊的半像素偏移。

我該從何做起？

這有一些設計師和工程師對于8點柵格的探討，很有價值：

• Bryn Jackson的8點柵格?是從定義到實現的最全面的指南。
• Anthony Collurafici寫的關于Sketch工作流的文章?是一篇超贊的入門指南。 他也是Nudg.it?的創造者，大大加快了我的工作流程。
• Google Material Design - Metrics＆keylines?版塊是另一處極佳的資源，例子和注釋都非常詳實。
• Intuit的“Harmony設計系統”?對響應式柵格的基本原理也有很好的解釋。

「柵格相關好文推薦」

1. 《網頁設計中，如何突破柵格的限制又保持協調？》
2. 《最熱門工具推薦！為響應式網站而生的40款柵格神器》

原文地址：medium
譯者：@Alpha_Lynnn

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量190萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com