柵格是什么？為什么要定義柵格？

柵格其實就是我們常規理解的網格，從基礎的作文本，再到圍棋棋盤，都有柵格的身影。

為什么設計師需要關注柵格呢？通過柵格中的網格系統，可以有效的將內容組織起來，形成內容布局的規律性，更易識別。

柵格于設計師的價值主要體現在以下2方面：

1. To用戶：提高內容布局規律性，減少認知成本

熟練運用網格系統能夠讓你的設計更有秩序和節奏感，頁面信息的展現更加清晰，提高用戶的閱讀和瀏覽效率，減少認知成本，提供更好的用戶體驗。

2. To設計師：提高布局統一性，提高效率

當多位視覺設計師共同參與一個項目時，需要統一的標準來對項目進行規范。通過柵格體系，多位視覺設計師可以一起協作，提高整體布局的統一性。同時，因為柵格的復用性，也避免了設計與開發在細節上反復溝通確認，提升整個效率。

大促活動柵格碰到的問題

在之前的活動中，我們并沒有完整&嚴密的柵格體系，只對常見的模塊邊距、1行2/1行3/1行4坑位的間距進行了定義。在實際的應用中，就會出現如下問題：

問題1：間距定義全憑設計師感覺，不統一

在同一個頁面設計中，不同的模塊間距定義比較隨性，全憑設計師的感覺，在750*1334px的畫布下，有的模塊間距是2px，有的是3px，有的是6px，沒有規律；這樣不利于整體平臺的設計統一性，也會影響設計的品質感。

問題2：間距標注效率較低

為了保證設計稿的還原度，視覺同學需要進行標注，同時開發同學也需要依據標注實現每個模塊的尺寸和間距，效率較低；基于以上的2個問題，我們進行一次活動柵格的深入研究，希望能夠構建更嚴密的活動柵格體系，保證統一性和效率；

大促活動柵格深入研究

在柵格的深入研究中，我們的主要思路如下，總共涵蓋了4個步驟。

Step 1：大促活動柵格畫布尺寸定義

如果要確定柵格，首先得定義設計和開發實現的畫布尺寸基準，只有確定了這一點，才能進行后續的柵格計算。針對畫布尺寸，我們主要進行了2方面的探索：了解相關概念 + 確定畫布尺寸

了解柵格畫布尺寸中涉及的常見概念

手機分辨率：手機屏幕的像素點數目，即屏幕像素寬高，比如iPhone 6s的手機分辨率是750px*1334px。

屏幕尺寸：用戶最直接感受到的手機屏幕物理寬高，比如iphone6s的屏幕尺寸是4.7寸。

密度（DPI）：手機屏幕上每英寸對應的像素點，其計算方式為：屏幕對角線像素/屏幕尺寸。以iPhone 6s為例，通過計算對角線為1530px，所以iPhone 6s的dpi為326。

安卓機型下，生產廠家眾多，有各種尺寸的屏幕以及分辨率。對于移動端剛入門的朋友，可能有個常見誤區：各個安卓手機的兼容，和手機的屏幕大小、手機分辨率相關。如果按照這個思路，設計和開發同學方案的工作量需要成N倍增加。但實際上，在前端進行兼容時，需要關注的值主要是密度（DPI）。同時為了便于適配，屏幕的DPI以初始的固定密度為準。目前常見值有：120、160、240、320、480。以百度統計可查的數據來看，以480占比居多。具體安卓下排名在前12的分辨率以及其對應的密度如下圖所示：

（取百度統計的數據是為了讓大家查找，實際上是以各自APP中數據為參考）

iOS官方有明確的設計規范，分辨率寬主要是750和1125，指定了2倍圖、3倍圖的使用范圍。目前iOS分辨率以及其對開發倍數如下圖所示：

確定畫布尺寸

在運營活動中，我們一般采用iPhone通用的750px寬作為設計稿基準。原因如下：

• 在iOS中，750的尺寸，往下可以兼容單倍的325，往上可以適配三倍圖的1125；
• 安卓占比大的分辨率，比如：1080*1920，720*1280，尺寸比例和750*1334幾乎相同。

因此采用750*1334是行業中一般做法，避免多個尺寸設計稿的資源浪費。

結論：最終我們確定了采用750*1334的畫布尺寸作為交互、視覺、前端確定的畫布尺寸。

Step2：明確柵格好壞判斷標準

確定了畫布尺寸之后，下一步就是明確柵格的判斷標準。這樣后續通過柵格公式進行計算之后，能夠直接選擇和判斷。經過溝通，我們對柵格主要有以下2個要求：適應性+ 靈活性。

較好的適應性：能夠滿足活動多樣的業務場景

活動頁面基數龐大，大型活動涉及到的活動頁非常多，例如主會場、預售會場、榜單會場、爆品會場、站內攻略等等。因此，為了滿足多樣的訴求，我們的柵格體系需要具有較好的靈活性，能夠滿足多樣業務場景。比如，有些活動頁面較少，對內容和畫布的間距有一定的要求，為了滿足透氣感，不能間距太??；有的活動頁面內容較多，如果內容和畫布的間距過大，則會中間內容布局太擠，影響內容的展示。

較強的靈活性：能夠啟發視覺同學進行創新

柵格系統定義的是底層規則，但是對上層的視覺表現而言，除了限制之外，更多的是啟發，我們需要保證柵格體系能夠給視覺同學充分的創造空間，而不是扼殺大家的創意。

Step 3：利用柵格公式計算柵格體系

明確了判斷標準之后，我們開始了細致的柵格計算。柵格計算公式如下：頁面寬 = 柵格寬 X 柵格數（m） + （柵格數-1）X 槽寬（a）+ 2 X 留白寬（b）

基于前文「頁面寬」為750px的前提，我們進行了柵格的計算。在「柵格數」m的數值選擇上，為了滿足視覺的靈活性要求，我們選擇了行業內常見的12、24兩個數值進行基礎計算，并且列出了所有的可能性，具體如下。

12柵格體系下所有的可能性

在12柵格體系下，將具體的值帶入公式，則有如下結果：750 = 柵格寬 X 12 + 11 X 槽寬（a）+ 2 X 留白寬（b）

我們針對所有的可能性進行了計算，計算結果如下:

其中12柵格體系下，柵格寬=54、槽寬=6、留白寬=18時，能夠滿足當前活動的場景。

24柵格體系下所有的可能性

通過對柵格公式的計算，在24柵格體系下，將具體的值帶入公式，則有如下結果：750 = 柵格寬 X 24 + 23 X 槽寬（a）+ 2 X 留白寬（b）

我們針對所有的可能性進行了計算，計算結果如下:

其中24柵格體系下，柵格寬=24、槽寬=6、留白寬=18時，能夠滿足當前活動的場景。

確定最終柵格

在上一步計算中，我們發現12柵格、24柵格均有合適的柵格布局，將兩個柵格對比后，我們發現有很多數值都是類似的：

上圖2個方案的槽寬、留白寬都是一樣的；主要的差別在于是分成12欄、還是24欄。和設計師一起商量后，為了保證靈活性，我們最終確定選用24柵格體系。

結論：最終確定為24柵格體系，當頁面分別為750px、1125px時，具體柵格尺寸如下：

Step4：確定「前端實現方式」

設計確定柵格體系后，前端針對實現方式也進行了梳理。在前端還原設計時，隨著移動端技術的發展、系統的更新，我們從Rem適配，轉換成采用vw（1% of viewport's width）彈性布局方案，這樣可以讓適配更純粹的放在CSS處理上。代碼設置層面，只需要設置對應設計稿尺寸即可：

柵格運用&延展

1. 使用場景延展

在實際運用的過程中，上述柵格體系能夠滿足絕大部分的使用場景。下圖列舉了模塊作為例子；

但是存在一類特殊的情況，有時為了體現更緊密的卡片關系，如果使用6px就會出現間距過大的情況。例如下圖中的單品緊湊布局。由于6px間距過大，導致內容關系并不緊密，略顯疏離?；诖朔N的緊密關系，我們也試驗了槽寬為2px的視覺效果。如下圖所示。

對比后發現，2px的間距更能傳達信息間的關系。

基于這種場景，我們對柵格體系進行了場景延伸，擴展了緊密關系、寬松關系2套間距。其中寬松布局適用于絕大多數場景，緊湊布局適用于卡片設計中緊密內容布局的場景。

2. 前端布局沉淀

結合確定的柵格體系，前端將不同的布局沉淀到代碼中，在固定左右留白間距的前提下，除了適配兩套體系，還增加了其他布局拓展。

基礎布局：24柵格布局，可任意設置每列柵格數。前端展示效果如下。

每列的寬度符合24柵格標準，前端可以方便的設置每列布局欄數（1-24），邊界落在柵格基線上。同時每列內部可以控制右側間隙以及分割線，來實現分隔。一般來說，視覺都會有間距，不會多有的內容無間距排列，基于此，我們從基礎布局演變出以下幾種常用布局：

寬松布局。在基礎布局上，每列增加內部間隔。如下圖所示：

以一行2的布局（col12）為例，可以看到，加上右側6px的間隔，和基礎布局中的一行2寬度是完全吻合的。

緊密布局。將a版本中的間距換成border（分割線），如下圖所示：

混合布局。一行中每列欄數不相同，每列分隔以分割線實現。如下圖所示：

3. 柵格體系是啟發，而不是限制

有些設計師會覺得，如果柵格定義的非常死了，是不是就沒有創新的空間了。其實并非如此。柵格系統只是一種布局輔助工具，可靈活根據實際項目需要在整體或局部合理應用。例如活動會場中，出現了IP類的重氛圍會場，這時其實沒有必要非要延續2等分/4等分的做法，可以回到24柵格框架，進行更不均等的布局劃分，也是在柵格的框架之內，進行創意的表達。

優化效果

通過確定柵格，讓布局變得有規律可循，對統一性確實有非常大的提升。下面兩個圖為柵格定義前和定義后的效果，大家可以感受下。

以上就是我們關于柵格的思考，希望能夠給到大家啟發，也歡迎互相交流學習。

更多柵格系統文章：

歡迎關注「京東設計中心JDC」的微信公眾號：