大概需要 5 - 7 分鐘閱讀

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

沒它又如何？畢竟不用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設計系統”對響應式柵格的基本原理也有很好的解釋。

原文地址：

https：//

medium。com/built-to-ada

pt/intro-to-the-8-point-grid-system-d2573cde8632#。yc2237qrx

原作者：Elliot Dahl

譯者：Sketch U&I ？

微博關注，定時乾貨

軟廣硬發：更多“Sketch中文教程”及“Sketch優質素材”，盡在 Sketch 素材網 ???