柵格的前世今生

產品設計從理解用戶到定義問題，再到探索方案并輸出草圖乃至視覺稿，每一個階段都關系到一個產品的成敗。而其中交互設計與視覺設計是與設計師密切相關的兩個階段，也是最大程度占據我們工作場景的內容。其中關鍵的信息設計、導航設計、界面設計都能從柵格工具中受益，因為它們概括下來，都涉及到組織信息以提供更合規、流暢、且符合用戶習慣的瀏覽體驗。

在面對復雜信息的排版與布局時，設計師如何進行決策，是憑借感覺經驗不經思考的隨意擺放，還是有一套自洽的理論體系得以遵循并規范化整個設計，且延伸至整個產品線，多業務，多平臺成為通用的布局準則。我們當然皆希望成為后者。

1. 什么是柵格

一句話概括：柵格系統是用于規范化信息布局，輔助設計人員組織信息的工具，且能夠盡可能保證設計與開發過程的規范高效，并提高布局視效的一致性、韻律感、秩序嚴謹、比例良好等方面。

在平面設計領域通常采用“網格”的方式來規范化布局，網格就像設備屏幕上的一個個像素點，平面設計師將物料核心版面區域拆分為等分的方格，以保證、對齊、節奏、比例、視覺面積等方面的協調感和一致性，從而保證設計美感和視覺傳達效率。

但在應用程序相關的產品設計領域，鑒于設備屏幕橫向寬度受限但縱向高度無限延展的背景，及真實體驗設計場景下，使用無限下拉交互方式承載復雜內容的規則，在產品設計領域往往只需要制定縱向列式分割規則，以規范 X 軸向內容的對齊、比例等布局效果。這就是我們所說的的柵格（與網格作一定區分，常用與產品設計領域）。

柵格系統不是令人“談之色變”的超高深技巧，而是設計界約定俗成且廣泛運用于平面設計及產品設計領域的設計工具。在涉及到組織信息的工作內容時，合理的使用柵格系統能夠從設計效率、設計質量、多角色設計協作等多方面推動設計師的工作。

2. 網格/柵格的發展歷程

早在文藝復興時期，人們便有意識的使用輔助線疊加在圖片上的形式來模擬透視關系，且已經開始使用黃金比例矩形。13 世紀，法國建筑師 Villard de Honnecourt 創作了一張圖表，試圖實現“和諧的設計”。該圖將網格系統與黃金比例合并，以產生基于固定比例的邊距的頁面布局。該技術至今仍在使用，大多數印刷書籍和雜志的設計師都使用 Villard de Honnecourt 的圖來創建平衡的設計。

工業革命標志著大規模生產的開始。報紙，海報，傳單和各種廣告等印刷產品的興起，對印刷設計師提出了很高的要求。設計師必須解決兩個問題：將不同的消息傳達給不同的人群，并允許自然的掃視瀏覽行為，同時要防止不同部分爭奪讀者的注意力。可以看到已經有了柵格的雛形。

△ 帶廣告的報紙頁面，法國巴黎，1919 年

而我們今天所使用的網格更多的是受瑞士版式影響。第一次世界大戰時，一直保持中立的瑞士成為了歐洲各地富有創造力人士的聚會場所。由于必須以三種官方語言（德語，法語和意大利語）設置印刷出版物，因此設計師需要一種新的網格系統來實現這一目標。像 Jan Tschichold 和 Herbert Bayer 這樣的印刷商都采用了模塊化的方法。第一次，間距留白被用作布局設計中的動態組件，這促使網格系統的發展。（Josef Muller-Brockmann）的圖形設計網格系統，1961 年。

可以發現，柵格是用于組織信息的工具，不論是幾個世紀前的印刷物，還是如今基于屏幕的信息布局，都可以利用柵格來實現更規則、一致、和諧的信息展示效果。

小游戲：在兩張紙上繪制一個圖形，怎么保證位置一致？給一些人分配兩張空白紙，給一些人分配兩張帶有網格的紙

柵格要素

1. 基本構成

一個柵格系統主要由 Container：容器、Columns :列寬、gutters：水槽、出血：Margin 四部分組成。

其中容器指的是我們需要布局信息的版面區域，一般為整個屏幕，或排除固定浮動區域的其他部分。柵格系統的其他三大元素都要基于該容器的大小去計算。

Columns 列寬一般指的是縱向分割空間中較寬松的部分，常用與放置主要信息，其邊界對應著模塊化信息 Box 的外邊框。在設計軟件中一般以帶有顏色的矩形的形式展示，很容易分辨。

Gutters 水槽處于 Columns 之間，用于放置留白空間，以實現版式呼吸感及分割信息元素。也就是我們在設計中經常講的間距。Gutters 是我們在界面設計中需要特別關注甚至需要專門賦予其特殊值的柵格要素，如根據約定俗成的一些布局規則將其定義為 16、24 等 8 倍 px 值。

Margin 出血則比較好理解，源自平面設計印刷設計領域，是包圍在信息區四周的空白區域，在印刷領域用于裁剪以保證輸出成品的尺寸的規整，而在產品設計領域則用于兩側間距以增加界面呼吸感，優化界面視覺精致度乃至信息的瀏覽體驗。

2. 空間劃分

柵格主要劃分橫向 X 軸屏幕的比例，以保持整體設計的規范化一致性，保證信息展示的節奏感，韻律感，以及保證同類信息同層級信息的視覺重量不會偏差。由于不論是移動設備還是 PC，橫向屏幕的展示空間都是固定值，因此可以利用柵格定義并提煉橫向間距規則為通用規則，來適配整個產品的所有界面?？v向由于可以無限延展，因此沒有必要做柵格劃分。只需要根據產品設計早期定義的常用間距規范來適配。在常規的設計系統中，往往會將柵格和間距分作兩部分來講，因為兩者既有互補關系又有界限模糊的區域。其中間距系統可以用來解決縱向信息布局的設計問題，而柵格則解決橫向，而實際工作場景，兩者界限可能會融合間距系統定義的間距值可能會和柵格系統的間距重合，這并沒有什么問題，具體場景以設計師判斷為準。

tips：縱向主要影響布局精確性的問題是字體，需要了解不同字體不同行高場景下對應的字體高度、上下間距留白，將由行高與字號計算來的空白納入間距規則。一般字體上下一側的留白為行高減去字號/2。

12 柵格與 24 柵格 n 倍柵格

在產品設計中，最常用的柵格系統為 12 柵格與 24 柵格，而其中最為通用的則是 12 柵格系統。

一般情況 12 柵格能適應大部分場景，因為 12 能夠被 2、3、4、6 整除，這意味著你可以將屏幕空間等分為 2、3、4、6 份，可以滿足各種復雜信息的拆分布局的場景。

除了等分布局，12 柵格在不對稱布局時也能進行較和諧的比例劃分，如雙欄布局時的 4+8 柵格，3+9 柵格。三欄布局時的 2+8+2 柵格，3+3+6 柵格。

而在屏幕較大，且需要精細化布局的場景下可以采用 24 柵格的布局方式。針對 24 柵格有個很簡單的解釋——列越多越靈活。使用與否主要看需要進行處理的信息內容層級的多寡，當需要對屏信息進行多個模塊的拆分，24柵格允許你進行更多劃分提高布局靈活性。

如下方的 Antdesign 柵格系統，作為 web 端通用的設計系統，Antdesign 需要適配不同設備環境，滿足不同產品的訴求，因此為了保證最大的靈活性而選擇 24 柵格。

當然，我們不要被局限在 12 柵格和 24 柵格，柵格只是一種工具，可以靈活根據實際設計場景來選擇柵格列數，例如比較簡單的卡片布局，可能僅僅使用 4 分柵格就能完成規范化的設計與排版。再例如，我橫向布局元素為奇數 5 個，那我可以使用 5 柵格，要進一步精細化布局（5 分的模塊內可能仍然有信息需要拆分對齊）可以使用 10 柵格等等。下圖展示了比較靈活的柵格用法，而不是強制 12 或 24 柵格。

下圖展示了針對“金剛區”五分柵格的靈活運用示例。（當然在實際設計金剛區元素時布局會更加謹慎，這里作為柵格操作示例）。未經調整時為完全等分的效果，然而設計師需要將核心區域進行聚焦，因此會考慮增加兩側 margin 值，來進一步突出中心元素。另外在柵格數量的選擇上，根據實際需求我們可以選擇五分柵格，但為了追求靈活性及后續延展性，可以把 5 柵格進一步劃分為 10 柵格，但他們實現的均衡效果是一致的。

3. 柵格的作用

在正式開始講解柵格的作用前，我們可以先來做一個小游戲。由兩個人分別代表 A 和 B 組，每人拿到對應組的兩張紙稿。其中一張標有紅色圓點，而兩個人需要做的是在另一張紙上還原這個點的位置。其中 B 組就是使用設計師祖傳鈦合金眼睛來定位，但結果必然無法做到完美。而 A 組，在柵格的指導下，可以以高精準度和高效率完成圓點的繪制，這個小游戲很好的幫助我們理解柵格在實際設計中發揮的作用。

視覺角度

讀過《寫給大家看的設計書》的設計師應該都知道，優秀的版面由親密性、對齊、重復、對比四大要素組成。而這四大元素基本都與柵格緊密相關，能在其指導下得到更好的執行。

1. 對齊

柵格的所有元素的邊界都能作為對齊參考線。優秀的設計師連 1 像素的對齊失誤都能肉眼識別，我們之所以如此在意對齊，不僅僅因為它從設計師的角度定義了限制規則來幫助我們更好的執行設計，更是因為對齊直接影響了閱讀受眾瀏覽信息的體驗。對齊線恰好是閱讀的起點，對齊的內容能夠使用戶在無意識的狀態下瀏覽信息而無需花費過多成本去轉移視角，從而大大減少了閱讀時的附屬行為，使人沉浸于內容本身。

當然，對齊的內容自有其因秩序而產生的美感，姑且算是一個因素。

2. 間距

為了更好的理解間距的本質，我們可以稱它為留白。甚至你可以將其擬人為人類的隱私權。如果你與他人距離為 1cm，和距離 1m 相比，哪一個會更加舒適？信息同理，信息不可能無限量，同時人在單位時間內的閱讀量，注意力同樣有限。信息需要被分割為多個區塊來依次被閱讀，人也需要短暫的休憩來緩解一段時間專注所造成的疲憊。這正是間距的作用，概括來說，間距使復雜的信息被拆分以更易于閱讀，同時使人的單位時間專注力得到適量分配，總體而言提升了人們閱讀瀏覽信息的體驗。除此之外，我們也會稱其有利于秩序與節奏感呼吸感等方面，其實也是對提升瀏覽體驗的其他解讀。

柵格控制的不是所有間距而是主要間距，以保證模塊層級分割的節奏感與一致性。例如柵格控制 margin 出血的間距，以圈定內容區面積,兩側留白能制造良好的呼吸感。同時柵格的 gutter 則是用來控制 X 軸向元素間距、模塊間距的通用間距。

3. 分割比例

在信息排版中，良好的比例關系能夠極大提升閱讀體驗與信息美感。同時典型的比例關系易于降低設計師決策成本，增加設計確定性。如下圖中的兩個案例。X 軸同時存在兩組或三組重要性等同的信息時，我們自然會選擇等分設計，將 12 柵格分為兩份 6+6 及三份 4+4+4。如此，設計師可以保證每組信息所占的視覺重量基本相等，頁面得以平衡。下方是標準等分柵格的示例，及標準非對稱柵格的示例（導航等輔助區域+主內容區=1/4+3/4）

在如下方我在日常工作中運用柵格的一個實操案例。作為一個標準的 Landing page 落地頁，核心利益點由配圖+文案組成，由于總的內容較少，最終決定采用左右混排的布局以充實版面，為了保證左右視覺版面的平衡，利用柵格計算其面積，平衡視覺效果。其中紫色文案區域基于 Box 給予 1/2Gutter 空隙來判定其寬度，居中處理?？v向模塊間距則采用 2 倍 gutter.

通過上面兩個示例，我們能看出采用通用比例能夠大大降低設計決策成本及提高輸出物的確定性，從設計師角色角度講，無論是其提供設計闡述依據還是提高設計效率的功用都大有裨（bi）益。從視覺角度講，柵格比例關系與黃金比例規則結合，利于輸出平衡有秩序感的優秀版面，并間接提高用戶瀏覽體驗。

設計角色角度

提高設計效率與統一性：設計師使用柵格系統能夠降低決策成本，快速定義通用規則并執行設計，提高設計確定性。它幫助設計師節省了在基礎設計操作上花費的時間，如移動元素、計算間距等。由于組件化與模塊化同樣是基于柵格系統和間距系統進行設計的，因此柵格同樣利于設計師和開發人員對組件和模塊的復用，進一步提升效率。

柵格還利于規范化設計，當存在多設計師協作的設計項目時，柵格系統利于幫助統一設計一致性，統一輸出標準。避免了多方參與導致的主觀因素的影響。

開發角度

還原度始終是設計與開發對接中存在的問題，而柵格系統能夠很好的幫助我們規避常規的橫向間距類問題（縱向間距問題主要受字體的設置影響），以提高設計還原度。

1. 自適應方案 ,屏幕適配

柵格同時能夠指導頁面在多平臺多屏幕尺寸下的自適應設計。便于與開發對接，闡明流動布局或端點布局等適配方案，保安證還原度的同時降低溝通成本。優秀的自適應方案能夠使產品脫穎而出，在不同設備不同環境下都呈現出優秀的展示效果。下方是一個自適應方案的演示。更建議大家打開Dribbble 直接縮小瀏覽器窗口來了解。

4. 規范角度+總結

柵格系統是設計系統/設計規范的關鍵組成部分，符合多個利益相關者的需求，如對用戶，提供高質量的視覺層面的排版、布局、界面；對設計師提供統一、一致、規范化的設計規則參考，保證設計輸出的統一性一致性，對開發人員，保證設計稿還原度、提高開發效率。

且由于柵格系統在產品設計領域已經成為約定俗成的規則，因此在當前用戶使用的所有產品中，都存在柵格系統的規則影響，因此用戶對柵格系統下形成的模塊化固定化的信息布局方式已經養成交互、瀏覽的習慣，如常見的兩分布局形式。這將盡可能保證你的設計符合用戶對產品界面的預期，也就能夠使用戶快速完成任務，實現用戶體驗目標，且使這個過程盡可能的流暢高效，自然無意識。

開始建立柵格

下面我們可以開始正式建立柵格了，只需要按照下面幾個步驟，我們可以計算出符合需求的柵格系統。

1. 選擇柵格列數

在正式計算柵格元素的數值前，你首選要進行抉擇的是柵格的列數。前面也有講到我們最常使用的是 12 柵格和 24 柵格，但柵格本來就是一個靈活工具。此時你需要結合真實需求來判斷，涉及到需求的內容規格，上線平臺，交互模式等。假設，該需求需要發布在多平臺，涵蓋 PC 和移動端，同時內容較為簡單，采用常規的交互與導航，那你可以選擇 12 柵格來兼顧移動端和 PC 端，并能夠很好地解決平臺自適應的問題。

但如果該需求發布于 PC 平臺，且功能復雜，內容繁多，我們擁有了大屏幕、復雜內容規格的判斷條件，因此可以考慮采用靈活性更高的 24 柵格。

2. 確定容器寬度 container

需要強調，適用柵格的設計區域并不一定是你的設計稿尺寸，需要根據真實場景判斷，只有真正需要放置主要信息，或者需要進行多平臺適配的區域才是容器區域。排除存在誤導的區域可以使柵格更易于劃分。

例如在一個常規 web 落地頁的需求設計中，我們會基于 1920 或 1440 尺寸來定義整個設計稿的寬度，而用于布局主要信息的核心區域實際僅有 1024，兩側留白則是用于適配不同屏幕尺寸，這也是最常規簡單的適配方案。

另外假設在一個復雜的 B 端產品設計中，左側存在常駐的菜單導航，該菜單導航雖然也屬于整個產品 UI 的一部分，但所有時間都基本保持不變（寬度），它所占用的區域為浮動區域，可以不計算在柵格中，而僅在排除浮動區域后的靈活組織信息區域設定柵格。

定義出血值 margin 及通用間距 Gutter

產品 UI 中的 margin 值對最終視覺呈現有較大影響，margin 值越大，信息越集中緊湊，兩側留白充裕呼吸感較強，但可布局信息的區域越小。反之，則核心區域版面充足，布局亦可更加寬松，但兩側空間狹窄容易產生壓迫感。

通常，無論是 PC 還是移動端，我們都有一些約定俗成的 margin 規則，因此關于定義 margin 值我們可以直接沿用典型的間距系統下的標準?；诂F代屏幕的 UI 設計都離不開 4 倍 8 倍間距系統的規范，人盡皆知所以這里便不做贅述。一般最為常用的基礎間距為 4，8，16，24，32，48，將其中最為常用的 16px 作為基準值，1Rem=16px，則可以生成下方這一套常用間距系統。(Rem 是開發常用的計算方式，基于此建立柵格與間距系統利與理解，降低溝通成本，提高還原度）

通常其中的 1Rem 值就用來定義 Gutter 值，因為它最通用，覆蓋場景最廣。而 margin 值通常為 2Rem 或者 1.5Rem。例如在移動端我們基于 16px 標準間距將 margin 定義為 32 或 24px。

主流軟件中的柵格

1. 手動繪制

手動繪制的方法是早期沒有出現專業的 UI 設計軟件時設計師的選擇。例如使用 PS 設計 UI 界面的工作場景。在 UI 設計軟件日益發達的今天，無論使用 Sketch 還是 Figma、XD，我們都可以使用軟件自帶的柵格功能來快捷繪制柵格。這里仍然分享手動繪制的方法的原因是，一方面避免忽略小部分受軟件和設備限制的人群，一方面手動繪制柵格需要進行主動計算，這個計算過程有利于你們進一步理解柵格的生成規則，規避錯誤認知，及警醒設計師不要盲目信奉軟件計算的柵格系統，需要意識到不可整除等現實問題。

在下圖中，我以 750 尺寸的 Iphone 設備為例。假設我們希望以 16px 為通用間距（16px=1Rem），32px=2Rem 為出血值。則此時公式如下：12C+11*16+2*2*16=750（12Column+11Gutter+2Margin=Container）

求出的結果為 42 余 6.大部分情況我們都沒辦法使柵格系統剛好整除，因此需要專門處理多余的像素值，將多出的 6px 分配到 12 柵格上正好構成了 6 個 42px 的 Column+6 個 43px 的 Column.

2. 基于 Figma

Figma 自帶的 Layout Grid 功能是我目前體驗過的最佳柵格工具。它不僅僅提供柵格同時提供網格功能。最關鍵的是，它計算柵格的邏輯契合設計師布局的訴求。如下圖，設計師只需要選中想要使用柵格的對應畫板，通過右側檢查器中的 Layout Grid 添加一個柵格，它默認為 Grid 模式，需要在左上角切換為 Column 模式。然后如圖所示將 Count 柵格數量與 margin 出血、Gutter 間距三個元素配置好，即可生成最終柵格。經過測量，該柵格中的每一條 Column 為 42、43 相間排列，與我們計算的結果相契合。

3. 基于 sketch

Sketch 則更加繁瑣些，首先想要使用柵格需要在視圖/畫布/顯示布局中開啟。而需要設置柵格的具體值則需要在視圖/畫布/布局設置中進行處理。其中總寬度指的是柵格紅色區域的面積，即排除 Margin 的寬度，因此在 750 尺寸下，排除 32*2 的 margin 后，其總寬為 686，偏置 32 則控制的 Margin 值，間距對應 Gutter，列寬對應 Column.

至此，你應該已經學會了如何根據實際工作場景來劃分柵格，如何定義柵格的各個關鍵數值以幫助你更好的統一視覺輸出，提高協作效率及解決一致性問題。但在真實工作場景中，很可能還會遇到各種沒有闡述到的場景，這是很正常的事情，不同需求業務，不同設備與上下文背景都會成為限制設計的因素，我希望你有能力用已知的規則去拓展并適配在真實工作場景中，當然我在這里還是提前總結下較高頻出現的誤解，幫助大家在做柵格相關的設計決策時更有底氣，相對的也更加高效。

Tips：對柵格的誤解

1. 強制對齊

柵格不是強制對齊的規則，很多時候可以也應當根據實際情況打破柵格，不要害怕超出柵格，但要清楚的認識到打破柵格的目的是合理的，是符合需求的。例如下圖中的標題與配圖為了實現疊加的縱深感樣式，不必遵循二等分的柵格配比，而是可以突破柵格，延伸到圖片區域。而在更多場景下，一組布局元素中，柵格僅僅需要控制總容器的位置與比例關系，而該復雜容器內部的細分元素是無法嚴格按照柵格排布的。

2. 柵格整除

柵格無法永遠精準整除，或者說，大部分情況下柵格都是無法整除的狀態。而相差的像素值往往是無法被用戶以肉眼察覺的，我很贊同大家對于每一像素的執著，但你們應該很容易能理解，柵格本質上不是為了保證像素級精確，而是為了保證瀏覽視覺級別的秩序、協調與統一。就像之前提到的案例，當我計算完 12 柵格的數值分配后，發現其中 6 個 42px，6 個 43px，每條柵格 1px 差距，當將他們組合排布后，肉眼很難識別其中的差距。下方的真實設計案例解釋的就是此類非整除場景。

3. 柵格區域

柵格不一定是整個屏幕或界面，實際上我們只需要在活動區域、主要內容區域進行柵格化，例如左側導航欄一般屬于固定占位的控件，不會跟隨屏幕尺寸或內容量的變化而變化，其占據的界面區域也不需要用來布局其他功能及內容。

4. 柵格嵌套

我們通常使用一組標準柵格來控制全局的視覺效果，但有些時候無法僅用一組柵格來適配產品需求中的所有細分業務，細分界面。例如在下方示例場景中，在偶數柵格中需要添加三張圖片，那我們可以將圖片區域作為單獨劃分的柵格區域來重新定義柵格值，對齊進行三等分。 在實際需求中有很多場景需要在總的柵格系統中嵌入一些小模塊對應的柵格系統。

另外我所在的團隊正在招聘優秀的設計師，我們屬于 Shopee 供應鏈設計團隊，因此希望有 B 端設計經驗的優秀設計師，或者 C 端有超強能力但想轉換領域的設計師快快加入。面試高效透明，僅兩次專業面，Leader 面后直接 Boss 面。20+HC，崗位機會超多。外企環境，彈性工作不打卡，無限量零食供應各種福利。薪資保底 15+月，有新加坡換崗的出國工作機會。建議加我微信直接推到 leader 手中，簡歷趕快砸過來吧。

聯系微信：15029041458

最后，我近期使用 Figma 搭建了個人博客，感興趣的可以點擊下方鏈接查看，需要登錄 Figma。點擊進入博客 https://www.figma.com/proto/JqMkIjLXTFYXjswpG3VIVM