前言

現(xiàn)如今隨著設(shè)備尺寸的多種多樣，產(chǎn)品在設(shè)計(jì)過(guò)程中需要適配到更多尺寸，布局方案與柵格系統(tǒng)的搭配使用，可以很好的做到跨平臺(tái)跨尺寸適配，極大的提升設(shè)計(jì)效率。之前有小伙伴分享過(guò)適配選型的文章中也提到過(guò)柵格，大家可以回顧一下【W(wǎng)eb產(chǎn)品的適配設(shè)計(jì)選型】。

其實(shí)，絕大多數(shù)的設(shè)計(jì)師都知道柵格很重要，市面上很多企業(yè)級(jí)系統(tǒng)也都在用柵格系統(tǒng)去規(guī)范化信息內(nèi)容的排版布局，但很多設(shè)計(jì)師直接面對(duì)結(jié)論大多是一知半解，自己做設(shè)計(jì)時(shí)有些無(wú)從下手。

作者瀏覽了大量文章結(jié)合工作中的經(jīng)驗(yàn)總結(jié)分享給大家，希望能幫助理解柵格系統(tǒng)的本質(zhì)，并能舉一反三應(yīng)用在產(chǎn)品設(shè)計(jì)中，首先從基礎(chǔ)的柵格系統(tǒng)解析開(kāi)始吧。

文章概覽

一、柵格的由來(lái)

最早的柵格概念，來(lái)源于平面設(shè)計(jì)中的“網(wǎng)格”，早在1692年，新登基的法國(guó)國(guó)王路易十四不滿于法國(guó)當(dāng)時(shí)印刷水平，命人成立了管理印刷的皇家特別委員會(huì)。旨在設(shè)計(jì)出科學(xué)的，合理的，重視功能性的新字體。委員會(huì)由數(shù)學(xué)家尼古拉斯加宗（Nicolas Jaugeon）擔(dān)任領(lǐng)導(dǎo)，以羅馬體為基礎(chǔ)，采用方格為設(shè)計(jì)依據(jù)，每個(gè)字體方格分為64個(gè)基本方格單位，每個(gè)方格單位再分成36個(gè)小格，這樣，一個(gè)印刷版面就有2304個(gè)小格組成，在這個(gè)嚴(yán)謹(jǐn)?shù)膸缀尉W(wǎng)格網(wǎng)絡(luò)中設(shè)計(jì)字體的形狀，版面的排版，試驗(yàn)傳達(dá)功能的效能，這是世界上最早對(duì)字體和版面進(jìn)行科學(xué)實(shí)驗(yàn)的活動(dòng)，也是柵格系統(tǒng)最早的雛形。

再后來(lái)，20世紀(jì)初，平面設(shè)計(jì)師們發(fā)現(xiàn)通過(guò)維持視覺(jué)秩序，能使版面更加清晰有效地傳遞信息，由此便逐漸演變出一種平面設(shè)計(jì)的方法，直到20世紀(jì)40年代后期，第一次出現(xiàn)了使用網(wǎng)格進(jìn)行輔助設(shè)計(jì)的印刷作品。

這里給大家推薦一本書(shū)，由瑞士設(shè)計(jì)師大師Josef Müller-Brockmann(約瑟夫·米勒-布羅克曼)所著的《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》一書(shū)，自1961年出版以來(lái)暢銷至今，對(duì)設(shè)計(jì)界有著深遠(yuǎn)的影響。史稱Swiss Typography Movement (瑞士新浪潮平面設(shè)計(jì)運(yùn)動(dòng))，后來(lái)成為全球風(fēng)靡的International Typographic Style (國(guó)際主義設(shè)計(jì)風(fēng)格) 。

二、柵格是什么

簡(jiǎn)單來(lái)說(shuō)：柵格是通過(guò)規(guī)則的網(wǎng)格陣列，形成穩(wěn)定的基礎(chǔ)框架，來(lái)規(guī)范界面中模塊的布局與信息元素的分布，輔助設(shè)計(jì)師組織信息的工具。前面講到UI設(shè)計(jì)中常用的柵格系統(tǒng)是從平面網(wǎng)格系統(tǒng)中發(fā)展而來(lái)，柵格與網(wǎng)格的本質(zhì)其實(shí)是相通的。那么有同學(xué)會(huì)問(wèn)，兩者區(qū)別在哪呢？

【平面設(shè)計(jì)】中網(wǎng)格應(yīng)用的媒介一般為固定的紙張規(guī)格，寬度和高度都是固定的，網(wǎng)格的劃分方式是一個(gè)個(gè)等分的方格。

【UI設(shè)計(jì)】中柵格寬度受設(shè)備寬度變化而變化，高度由內(nèi)容多少來(lái)決定。

因此設(shè)計(jì)時(shí)只需制定縱向的分割規(guī)則，以規(guī)范縱軸方向內(nèi)容的對(duì)齊、間隔等元素的排布，這也是我們看到柵格往往都是一列一列呈現(xiàn)的原因。

三、為什么使用柵格

1、to 用戶

內(nèi)容布局的規(guī)律性，減少了用戶的認(rèn)知成本：

柵格一定程度上從設(shè)計(jì)師的角度定義了對(duì)齊關(guān)系，留白關(guān)系，圖文的比例分割關(guān)系等排版中重要內(nèi)容的排布規(guī)則，幫助我們更好的執(zhí)行設(shè)計(jì)，輸出更具有平衡感和秩序感的版面，清晰的頁(yè)面信息展現(xiàn)，有利于提高用戶的閱讀和瀏覽效率，減少認(rèn)知成本。

2、to 設(shè)計(jì)師

提升決策效率與設(shè)計(jì)輸出的統(tǒng)一性：

對(duì)于較大的團(tuán)隊(duì)，設(shè)計(jì)師使用柵格系統(tǒng)能夠降低決策成本，采用一套統(tǒng)一的標(biāo)準(zhǔn)來(lái)對(duì)設(shè)計(jì)師進(jìn)行約束和高效協(xié)同，讓設(shè)計(jì)師快速定位通用規(guī)則并執(zhí)行設(shè)計(jì)，提高設(shè)計(jì)師的決策效率，規(guī)范設(shè)計(jì)產(chǎn)出的質(zhì)量。同時(shí)也避免了各式各樣頁(yè)面出現(xiàn)的混亂場(chǎng)面，當(dāng)存在多業(yè)務(wù)線共用同一系統(tǒng)規(guī)范或者多設(shè)計(jì)師協(xié)作設(shè)計(jì)項(xiàng)目時(shí)，柵格系統(tǒng)利于幫助加強(qiáng)設(shè)計(jì)一致性，統(tǒng)一輸出標(biāo)準(zhǔn)。

3、to 開(kāi)發(fā)

提高設(shè)計(jì)還原度，減少解釋成本：

在與開(kāi)發(fā)側(cè)對(duì)接協(xié)作過(guò)程中，我們有一套自上而下的有規(guī)可循的設(shè)計(jì)規(guī)律，且規(guī)則計(jì)算的原理與開(kāi)發(fā)習(xí)慣保持一致，能避免細(xì)節(jié)的反復(fù)溝通，提高開(kāi)發(fā)的設(shè)計(jì)還原度，減少不必要的解釋成本。此外柵格同樣利于設(shè)計(jì)師和開(kāi)發(fā)人員對(duì)組件和模塊的復(fù)用，進(jìn)一步提高協(xié)作效率。

4、to 響應(yīng)式

更加規(guī)律性、合理性的實(shí)現(xiàn)自適應(yīng)：

現(xiàn)如今多屏設(shè)計(jì)是商業(yè)設(shè)計(jì)中不可或缺的一部分，響應(yīng)式設(shè)計(jì)自然也已成為設(shè)計(jì)中必不可少的一環(huán)，柵格系統(tǒng)的建立，可以讓響應(yīng)式布局變得有規(guī)可循，兼容不同的設(shè)備尺寸，更加規(guī)范合理的完成頁(yè)面在多平臺(tái)多尺寸下的自適應(yīng)設(shè)計(jì)。

四、柵格的構(gòu)成要素

1. 網(wǎng)格（Gird）：柵格系統(tǒng)的最小單元
2. 列（Column）
3. 水槽（Gutter）
4. 邊距（Margin）
5. 柵格總寬（Container）
6. 容器盒子（Col-n）
7. 
   

市面上各系統(tǒng)對(duì)于柵格的名詞描述各有不同，新手往往看的越多，越迷惑，其實(shí)大可不必糾結(jié)具體叫法上的細(xì)微差異，萬(wàn)變不離其宗，理解其本質(zhì)表達(dá)的意思和柵格的結(jié)構(gòu)原則即可，下面會(huì)對(duì)這些基礎(chǔ)名詞進(jìn)行一些解釋。

1、網(wǎng)格（Gird）：最小單元-8像素原則

網(wǎng)格（Gird）的基本構(gòu)成就是單元格，由格子組成網(wǎng)，形成網(wǎng)格。最小單元格是界面的單位基礎(chǔ)，所有界面元素都按照這個(gè)基礎(chǔ)單位布局分布，它對(duì)于創(chuàng)造性的決策具有重要的指導(dǎo)意義。

通常，我們利用 8 作為最小單元格建立網(wǎng)格。（文字分開(kāi)圖片跟隨文字也分開(kāi)）

使用 8 的倍數(shù)來(lái)定義模塊的間距與元素的尺寸

那么為什么是8，而不是別的數(shù)字？原因如下：

1.偶數(shù)思維：8作為偶數(shù)，能適應(yīng)市面上絕大多數(shù)設(shè)備屏幕，更為普適，且又能保證在輸出各種倍圖時(shí)尺寸不出現(xiàn)奇數(shù)以及0.5、0.75等次像素的出現(xiàn)（iOS導(dǎo)出1、2、3倍圖，Android導(dǎo)出1、1.5、2、3、4倍圖均為偶數(shù)）

2.規(guī)律性：所有元素以8像素為步進(jìn)單位，利用8或8的倍數(shù)規(guī)范元素和間距大小，（例如使用4、8、16、24、32等和8具有規(guī)律關(guān)系的數(shù)字）有規(guī)可循

3.節(jié)奏感：相比于6、10 等數(shù)字，以8為單位，在視覺(jué)感受上既不顯得過(guò)于瑣碎，也不會(huì)因?yàn)殚g隔太大而顯得內(nèi)容分散，更容易保證頁(yè)面效果的協(xié)調(diào)性

4.目前市面上眾多開(kāi)源代碼也都以8的倍數(shù)作為默認(rèn)設(shè)計(jì)大小，可行性已經(jīng)得到多輪的驗(yàn)證，設(shè)計(jì)師在與開(kāi)發(fā)對(duì)接過(guò)程中對(duì)頁(yè)面有較為統(tǒng)一的理解，有效降低合作成本，在設(shè)計(jì)還原度上也更有保障

劃重點(diǎn)：注意這里給的是建議尺寸，最小單位的制定還需要結(jié)合具體的使用場(chǎng)景來(lái)決定，我們以解決問(wèn)題為最終目的

2、列（Column）

列（Column）的作用通常是用來(lái)對(duì)齊內(nèi)容，列也是柵格的數(shù)量單位，大家可以理解設(shè)置柵格數(shù)量就是設(shè)置列的數(shù)量，如 12 柵格就有 12 列、24 柵格就有 24 個(gè)列，通過(guò)控制列數(shù)，可控制界面排版的呼吸節(jié)奏，列數(shù)越多，內(nèi)容排布可以越精細(xì)，也容易分割的太細(xì)碎，反之列數(shù)越少，內(nèi)容排布也越容易稀疏松散。

3、水槽（Gutter）

理解了列，再來(lái)說(shuō)水槽（Gutter），水槽就是列與列之間的分隔間距，這里水槽的作用是幫助區(qū)塊內(nèi)容做分隔，需要注意，水槽內(nèi)不可放置任何板塊內(nèi)容。

水槽寬度在一定程度也會(huì)對(duì)界面的風(fēng)格有影響，水槽越大，留白越多呼吸感越好，適合一些輕松的內(nèi)容瀏覽類頁(yè)面展示，相反水槽越小，留白小內(nèi)容緊湊，適合一些嚴(yán)謹(jǐn)?shù)墓ぞ咝兔姘孱悆?nèi)容展示，各有利弊，大家可根據(jù)設(shè)計(jì)目標(biāo)權(quán)衡設(shè)計(jì)策略。

4、邊距（Margin）

邊距（Margin）有時(shí)候也會(huì)被叫安全邊距，是指設(shè)計(jì)內(nèi)容距離屏幕邊緣的距離，顧名思義，安全邊距內(nèi)是禁止放內(nèi)容的，可以類比為平面設(shè)計(jì)里的出血概念，主要用來(lái)控制屏幕核心內(nèi)容的展示邊界。

邊距值越小，界面核心內(nèi)容的有效利用空間越大，布局相對(duì)來(lái)說(shuō)會(huì)比較寬松，相反，邊距值越大，兩側(cè)留白大，呼吸感強(qiáng)，但有效利用區(qū)域相對(duì)小，內(nèi)容排布相對(duì)更緊湊，也可能會(huì)容易擁擠。

這里建議界面的邊距可以根據(jù)屏幕尺寸做適配，通過(guò)斷點(diǎn)響應(yīng)變化，這樣可以更好的保證在不同屏幕上界面呼吸節(jié)奏都相對(duì)舒適。

5、柵格總寬（Container）

柵格總寬（Container）就是指頁(yè)面柵格系統(tǒng)的總寬度，即所有列寬加水槽寬度加安全邊距的總和。

6、容器盒子（Col-n）

建立好基礎(chǔ)柵格之后，我們可以根據(jù)內(nèi)容去定義一塊內(nèi)容占用幾個(gè)列的寬度，我們把這個(gè)區(qū)域理解為容器盒子，容器用來(lái)結(jié)合下級(jí)組件，也可以是對(duì)文字、圖片、按鈕等多個(gè)復(fù)雜元素的集合，

按照頁(yè)面結(jié)構(gòu)可以由小到大依次從組件 – 容器 – 模塊 – 頁(yè)面 – 場(chǎng)景進(jìn)行組合拼裝最終形成設(shè)計(jì)方案

五、如何制定柵格系統(tǒng)

定義柵格系統(tǒng)之前，我們先了解熟悉下計(jì)算公式，

如果你已經(jīng)理解了前面的柵格要素的作用和用法，那么接下來(lái)就可以按照以下步驟在自己的畫(huà)板上創(chuàng)建柵格系統(tǒng)

1、確定柵格區(qū)域

注意柵格區(qū)域不一定是畫(huà)布的全部區(qū)域，我們可以先將頁(yè)面按照功能模塊劃分為全局控制層、內(nèi)容層、背景層、臨時(shí)層。通常我們大多是對(duì)內(nèi)容層進(jìn)行柵格化。

通常web端常用的三種布局如下圖所示，建議按照實(shí)際使用場(chǎng)景靈活的選擇布局形式后，再確定需要柵格化的區(qū)域。

當(dāng)我們遇到一個(gè)wed端的內(nèi)容瀏覽類網(wǎng)站，一般會(huì)采用上下布局，通常會(huì)基于 1920 或 1440 尺寸作為設(shè)計(jì)稿寬度，但由于需要適配主流尺寸中的最小尺寸，核心內(nèi)容展示會(huì)控制在 1024（這里不是絕對(duì)值，不同產(chǎn)品根據(jù)實(shí)際情況數(shù)字會(huì)有上下浮動(dòng)），其他空白區(qū)域即為安全邊距，這是web網(wǎng)頁(yè)中常見(jiàn)的一種適配方案。

2、選擇柵格列數(shù)

12柵格和24柵格是目前比較常見(jiàn)的列數(shù)結(jié)構(gòu)。選擇使用哪種柵格結(jié)構(gòu)，取決于產(chǎn)品對(duì)設(shè)計(jì)的要求。

12柵格：當(dāng)產(chǎn)品涉及到多平臺(tái)發(fā)布，內(nèi)容較為簡(jiǎn)單，單個(gè)容器盒子內(nèi)信息面積較大時(shí)，可以考慮采用12柵格來(lái)兼容。

24柵格：如果當(dāng)前產(chǎn)品發(fā)布于pc，內(nèi)容較多，且功能繁雜時(shí)，則需要更靈活的柵格系統(tǒng)去規(guī)范信息內(nèi)容的布局，這時(shí)我們可以考慮采用24柵格，國(guó)內(nèi)較為主流的企業(yè)級(jí)設(shè)計(jì)系統(tǒng) Ant Design采用的是24 柵格。

3、定義水槽（Gutter）和邊距（Margin）

前面講到過(guò)在產(chǎn)品 UI 中邊距（Margin）的值對(duì)視覺(jué)的呈現(xiàn)的影響，這里就不做過(guò)多贅述。這里科普一個(gè)叫做“Rem”的計(jì)算單位，(Rem 是開(kāi)發(fā)常用的計(jì)算方式，設(shè)計(jì)和開(kāi)發(fā)基于同一套原理進(jìn)行設(shè)計(jì)，在協(xié)作過(guò)程中能夠極大提高協(xié)作效率，并且減少維護(hù)成本），通常制定柵格系統(tǒng)時(shí)，我們可以用1Rem的值來(lái)定義水槽（Gutter），它的靈活最強(qiáng)，可作為柵格系統(tǒng)的基準(zhǔn)值。而邊距（Margin）的值通常就是1.5Rem 或者 2Rem。

基于常用的4倍或者8倍間距系統(tǒng)規(guī)范，一般最為常用的基礎(chǔ)間距為 4，8，16，24，32，48，我們可以在這些基礎(chǔ)值里去選擇匹配產(chǎn)品的柵格系統(tǒng)基準(zhǔn)值。

通過(guò)Rem基準(zhǔn)值，我們還可以輕松得到一套匹配的間距系統(tǒng)，以1Rem=16為例，可以得到以下間距系統(tǒng)：

掌握以上要點(diǎn)，即可get一套匹配產(chǎn)品設(shè)計(jì)要求的柵格系統(tǒng)。

六、柵格系統(tǒng)使用要點(diǎn)

1、固定柵格

簡(jiǎn)單來(lái)講，在固定柵格中，頁(yè)面拉伸時(shí)，元素的尺寸和間距都是固定的，頁(yè)面每到一個(gè)斷點(diǎn)尺寸，就會(huì)減少或增加最邊緣的內(nèi)容元素。體現(xiàn)到柵格上，頁(yè)面寬度變化過(guò)程中未達(dá)到預(yù)設(shè)臨界值時(shí)，柵格系統(tǒng)本身的列與水槽寬度不變，頁(yè)面所有元素布局也不會(huì)有變化，直到到達(dá)臨界值，柵格列數(shù)會(huì)隨著瀏覽器寬度，增加或減少，邊緣內(nèi)容進(jìn)行換行顯示

案例：Dibbble、Behance

優(yōu)點(diǎn)：

適配規(guī)則簡(jiǎn)單，實(shí)現(xiàn)成本低

缺點(diǎn)：

適用范圍小，拉伸過(guò)程邊距不是固定的，大多只適用于內(nèi)容居中的上下布局類型產(chǎn)品

一個(gè)頁(yè)面盡量只有一種卡片尺寸，否則邊距不統(tǒng)一

卡片尺寸固定，在過(guò)大或者過(guò)小的屏幕尺寸上，比例容易顯得不協(xié)調(diào)

2、流動(dòng)?xùn)鸥?/span>

流動(dòng)?xùn)鸥裰许?yè)面邊距和內(nèi)容間距固定不變的，頁(yè)面內(nèi)容隨著頁(yè)面尺寸變化而變化，可以是增刪邊緣元素展示個(gè)數(shù)，可以是調(diào)整元素展示比例，最終效果是始終保持內(nèi)容卡片橫向充滿屏幕可用空間，這種彈性布局能更好的適應(yīng)不同分辨率。

體現(xiàn)到柵格上，頁(yè)面邊距和水槽寬度是固定不變的，列數(shù)在適配過(guò)程中也是固定不變的，拉伸過(guò)程中的實(shí)際列寬是通過(guò)柵格區(qū)域的百分比縮放而來(lái)，這時(shí)列的寬度就不一定最小單位倍數(shù)了。

案例：花瓣

優(yōu)點(diǎn)：

可以兼容不同尺寸的卡片混排。

頁(yè)面邊距也能保持一致，拉伸過(guò)程中拉伸過(guò)程中過(guò)渡平滑，不顯得突兀。

缺點(diǎn)：

頁(yè)面伸縮時(shí)，不可避免會(huì)出現(xiàn)卡片尺寸忽大忽小。

3、混和柵格

在實(shí)際項(xiàng)目中，流動(dòng)?xùn)鸥窈凸潭鸥竦慕M合使用也是比較常見(jiàn)的做法，一些后臺(tái)系統(tǒng)設(shè)計(jì)、工具型的界面設(shè)計(jì)會(huì)較經(jīng)常使混合柵格的形式。

混合布局既有固定的內(nèi)容寬度，也有流動(dòng)的寬度，靈活性更高，對(duì)于內(nèi)容復(fù)雜的產(chǎn)品十分友好。

案例：Ant Design Pro

優(yōu)點(diǎn)：

容器承載內(nèi)容靈活性高，不同分辨率下都能達(dá)到較為理想的視覺(jué)效果。

缺點(diǎn)：

規(guī)則復(fù)雜，實(shí)現(xiàn)成本高。

七、柵格系統(tǒng)使用要點(diǎn)

最后再來(lái)總結(jié)下柵格系統(tǒng)在使用過(guò)程中一些使用要點(diǎn)：

1.內(nèi)容區(qū)塊的定義要從列開(kāi)始到列結(jié)束，可以任意分割，比如 6×2、3×4、4×3。

2.水槽內(nèi)禁止放置任何內(nèi)容元素。

3.安全邊距內(nèi)禁止放置任何內(nèi)容元素。

4.除非特意設(shè)計(jì)，否則不要在列之外區(qū)域放置元素。

5.只要框架（父級(jí)）元素對(duì)齊柵格，原子組件（子級(jí)）可以不完全對(duì)齊列。

6.對(duì)于柵格的區(qū)域選擇，可以根據(jù)實(shí)際業(yè)務(wù)場(chǎng)景靈活應(yīng)用，不一定非要整個(gè)畫(huà)布區(qū)域。

7.可以使用嵌套柵格，我們通常會(huì)用一套柵格標(biāo)準(zhǔn)來(lái)全局控制整個(gè)界面，但不乏有些產(chǎn)品中會(huì)出現(xiàn)一些典型模塊的內(nèi)容密度和全局柵格的匹配度不高，這種情況我們可將特定區(qū)域單獨(dú)定義柵格值，嵌入到總的柵格系統(tǒng)中結(jié)合使用

結(jié)束語(yǔ)

事物都有兩面性，我們使用柵格系統(tǒng)為設(shè)計(jì)提供便捷，目的是更好的達(dá)到目標(biāo)，但不是為了限制設(shè)計(jì)，所以在實(shí)際設(shè)計(jì)過(guò)程中，應(yīng)當(dāng)謹(jǐn)慎考慮規(guī)范細(xì)則的制定。

關(guān)于柵格的一些基礎(chǔ)知識(shí)的總結(jié)就到這啦，敬請(qǐng)期待【秩序之美（下）】給大家分享柵格在b端工具型產(chǎn)品中的實(shí)際應(yīng)用案例～

來(lái)源網(wǎng)絡(luò)