響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中的柵格化設(shè)計(jì)怎么設(shè)計(jì)？

時(shí)間：2024-02-13 01:35:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-13 01:35:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中的柵格化設(shè)計(jì)怎么設(shè)計(jì)？：為大家分享的是柵格系列，結(jié)合我自己后臺(tái)設(shè)計(jì)的經(jīng)驗(yàn)，關(guān)于柵格文章我分為上下兩篇，本篇文章跟大家聊聊「柵格的概念」以及「柵格是如何搭建的」。下篇將會(huì)分享柵格在響應(yīng)式設(shè)計(jì)中的運(yùn)用，脫離了開發(fā)其實(shí)柵格的意義并不大。

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

柵格最早來(lái)源于平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)，英文Gird Systems。在 1692 年時(shí)，法國(guó)國(guó)王路易十四因?yàn)閲?guó)家印刷水平差強(qiáng)人意，命人成立了一個(gè)管理印刷的皇家特別委員會(huì)。他們以羅馬體為基礎(chǔ)，采用方格為設(shè)計(jì)依據(jù)，每個(gè)字體方格分為 64 個(gè)基本方格，每個(gè)方格再分為 36 個(gè)小格，一個(gè)印刷版面就有 2304 個(gè)小格組成。
再后來(lái)，逐漸演變成運(yùn)用固定的格子設(shè)計(jì)版面的平面設(shè)計(jì)風(fēng)格，平面設(shè)計(jì)中稱之為網(wǎng)格，這就是柵格的雛形?；ヂ?lián)網(wǎng)發(fā)展之后，界面設(shè)計(jì)將這一概念借用過(guò)來(lái)，簡(jiǎn)易的理解柵格就是一種有規(guī)則的參考線。

UI中的柵格

網(wǎng)格與柵格的本質(zhì)其實(shí)是相同的，都以英文單詞“Grid”來(lái)表示，平面設(shè)計(jì)中稱為“網(wǎng)格”，而在網(wǎng)頁(yè)端或移動(dòng)端中稱為“柵格”。其區(qū)別在于：

網(wǎng)格尺寸是固定的：平面設(shè)計(jì)一般用到的紙張規(guī)格（尺寸），不管是英國(guó)、美國(guó)、日本或ISO采用的德國(guó)DIN紙張規(guī)格全部都是固定的尺寸，寬度和高度都是固定的，也就是絕對(duì)的。

柵格尺寸是變化的：而網(wǎng)頁(yè)或App的設(shè)備尺寸不是固定的，其橫向?qū)挾仁芟抻谠O(shè)備寬度，由設(shè)備屏幕寬度來(lái)決定，而縱向高度則是隨著內(nèi)容的多少來(lái)決定的?？紤]到真實(shí)設(shè)計(jì)場(chǎng)景下，可能會(huì)使用無(wú)限下拉交互方式承載復(fù)雜內(nèi)容的規(guī)則，所以往往只需要制定縱向列式分割規(guī)則，以規(guī)范 X 軸向內(nèi)容的對(duì)齊、比例等布局效果。

柵格的價(jià)值

對(duì)用戶：提高內(nèi)容布局規(guī)律性，減少認(rèn)知成本
設(shè)計(jì)更有秩序和節(jié)奏感，頁(yè)面信息的展現(xiàn)更加清晰，從而提高用戶的閱讀和瀏覽效率，提供更好的用戶體驗(yàn)。

對(duì)設(shè)計(jì)師：提高效率與規(guī)范化
幫助設(shè)計(jì)師快速校準(zhǔn)元素在界面內(nèi)的位置，節(jié)省了基礎(chǔ)操作上的時(shí)間，如移動(dòng)元素、計(jì)算間距等。同時(shí)也避免了間距憑設(shè)計(jì)師感覺造成不統(tǒng)一的現(xiàn)象

對(duì)開發(fā)：提高設(shè)計(jì)還原度，節(jié)約時(shí)間成本
柵格系統(tǒng)提高了網(wǎng)頁(yè)的規(guī)范性。一方面可以幫助開發(fā)同學(xué)規(guī)避常規(guī)的橫向間距類問(wèn)題（縱向間距問(wèn)題主要受字體的設(shè)置影響），以提高設(shè)計(jì)還原度，另一方面有利于開發(fā)人員對(duì)組件和模塊的復(fù)用，進(jìn)一步提升效率。

響應(yīng)式布局
柵格能夠指導(dǎo)頁(yè)面在多平臺(tái)多屏幕尺寸下的響適應(yīng)設(shè)計(jì)，便于與開發(fā)對(duì)接，闡明流動(dòng)布局或端點(diǎn)布局等適配方案，保證還原度的同時(shí)降低溝通成本

柵格的構(gòu)成
柵格系統(tǒng)主要由列、水槽、邊距三個(gè)基本元素構(gòu)成

• 列Column：也被稱為欄，用來(lái)盛放文本、表格、圖片等內(nèi)容及元素。列的寬度稱為列寬，常用百分比來(lái)定義，而不是固定值（使用固定刪格的時(shí)候會(huì)采用固定值，會(huì)在下篇響應(yīng)式柵格中講到），前端同學(xué)通過(guò)百分比可以靈活適應(yīng)屏幕大小。
• 水槽 Gutter：也被稱為溝/間距，水槽是相鄰兩個(gè)列寬之間的間隔，用來(lái)分割內(nèi)容，水槽的值越大，頁(yè)面中留白部分的面積越多，視覺效果越松散；反之，頁(yè)面越緊湊。水槽通常設(shè)為固定值
• 邊距 Margin：網(wǎng)頁(yè)內(nèi)容和屏幕邊緣之間的間隔，通常為固定值。左右大邊距是計(jì)算在柵格的總寬之內(nèi)的，邊距值的大小決定了每個(gè)屏幕尺寸的最小呼吸空間，一般邊距值≥水槽值。

此外還有最小單位、總寬度、列數(shù)三個(gè)計(jì)算因子

• 最小單位：柵格的基礎(chǔ)單位，柵格內(nèi)容元素和布局規(guī)則（如水槽、邊距的值）都是基于它的整數(shù)倍遞增的。如最小單位是8px，水槽的寬度可設(shè)為8n
• 列數(shù)：列的數(shù)量即柵格數(shù)量，如12柵格就有12列、24柵格就有24個(gè)列。列數(shù)n越多，那么排布在版面內(nèi)的內(nèi)容就越精細(xì)，通過(guò)控制列數(shù)，就可以控制版面的留白和呼吸感
• 總寬度：頁(yè)面中自適應(yīng)內(nèi)容部分容器寬度，而非屏幕寬度，總寬度=列寬*列數(shù)n+水槽*（n-1）+邊距*2

案例-搭建柵格

以下圖「數(shù)據(jù)總覽」頁(yè)面為例，設(shè)計(jì)稿尺寸為1440*900px，左側(cè)導(dǎo)航欄常駐，該頁(yè)面是沒有用柵格搭建的。乍一看問(wèn)題似乎不大，但是資深的設(shè)計(jì)師很容易就能看出實(shí)則切割混亂，無(wú)規(guī)律。另還有一致命的點(diǎn)在于填充內(nèi)容的容器無(wú)法換算成百分比，前端同學(xué)無(wú)法做自適應(yīng)，想要適配是很困難的。

那下面將以此頁(yè)面為案例教大家如何一步步搭建柵格：

Step 1: 確認(rèn)容器范圍

設(shè)計(jì)師在規(guī)劃產(chǎn)品用戶界面時(shí)，首先需要考慮頁(yè)面的整體布局，以便確認(rèn)布局柵格的容器。柵格容器不一定是整個(gè)屏幕或界面，需要根據(jù)真實(shí)場(chǎng)景判斷，一般只需要在內(nèi)容層進(jìn)行柵格化，約束內(nèi)容自適應(yīng)比例。

單頁(yè)基礎(chǔ)布局：柵格容器=屏幕寬度



存在固定控件布局：柵格容器<屏幕寬度
存在常駐的控件，如側(cè)邊導(dǎo)航欄一般屬于固定占位的控件，不會(huì)跟隨屏幕尺寸或內(nèi)容量的變化而變化，屬于全局控制層，其占據(jù)的界面區(qū)域也不需要用來(lái)布局其他功能及內(nèi)容，所以其不屬于柵格區(qū)域。有贊的幫助中心同理




案例屬于側(cè)邊導(dǎo)航布局，所以案例容器范圍=屏幕寬度-側(cè)邊導(dǎo)航=1440-側(cè)邊導(dǎo)航

Step 2:確定列數(shù)、水槽值、邊距

1）確定柵格列數(shù)
目前有兩種比較主流的等分方式：12等分與24等分。

12等分的柵格系統(tǒng)：在流行的前端開發(fā)開源工具庫(kù)Bootstrap與Foundation中廣泛使用，適用于業(yè)務(wù)信息分組較少，單個(gè)盒子內(nèi)信息體積較大的中后臺(tái)頁(yè)面設(shè)計(jì)；12柵格的優(yōu)勢(shì)在于其在相對(duì)較小的數(shù)字中最容易被整除，保證了設(shè)計(jì)師切分區(qū)塊的靈活性，同時(shí)又不至于使頁(yè)面過(guò)于瑣碎




24等分的柵格系統(tǒng)：適用于業(yè)務(wù)信息量大、信息分組較多、單個(gè)盒子內(nèi)信息體積較小的中后臺(tái)頁(yè)面設(shè)計(jì)；相對(duì)12柵格系統(tǒng)，24柵格系統(tǒng)變化更加靈活，更適合內(nèi)容比較多樣復(fù)雜的場(chǎng)景。我們常見的中后臺(tái)設(shè)計(jì)發(fā)布于 PC 平臺(tái)，且功能復(fù)雜，內(nèi)容繁多，且考慮到后期的擴(kuò)展性，因此中后臺(tái)常用靈活性更高的 24 柵格，比如ant design和zan design，柵格系統(tǒng)大小=24列+23列間距+2大邊距



所以，案例中我們將采用24柵格系統(tǒng)

2）確立柵格的最小單位

由于列跟水槽的寬度是以網(wǎng)格作為基本單位來(lái)增加或者減小，所以柵格化的重要一步就是需要先定義好柵格的原子單位「網(wǎng)格」的大小。中后臺(tái)中目前最普適易用的就是 8 點(diǎn)網(wǎng)格，我們可以建立 8點(diǎn)為一個(gè)單位的網(wǎng)格，使用 8 的倍數(shù)來(lái)定義模塊的間距與元素的尺寸。




在適用性方面，4、6、8、10 這四個(gè)數(shù)值都是基本可以滿足的，在靈活性方面，4pt表現(xiàn)最佳，那為什么不選4而是8呢？8 點(diǎn)網(wǎng)格有如下幾點(diǎn)優(yōu)勢(shì)：

1）目前主流桌面設(shè)備的屏幕分辨率在豎直與水平方向基本都可以被 8 整除，使用 8 作為最小原子足夠普適。可以確保不同布局之間的視覺一致性，同時(shí)可以靈活的適配多種尺寸的設(shè)計(jì)




2）靈活性方面，4pt最佳，8pt次之。但是使用4pt頁(yè)面就會(huì)被分割的非常細(xì)碎，在設(shè)計(jì)時(shí)比較難于把控，它比較適合頁(yè)面內(nèi)容信息較多，布局排版比較復(fù)雜的產(chǎn)品。而8pt柵格一般的設(shè)計(jì)場(chǎng)景都可以很好的滿足，比較適合大多數(shù)的項(xiàng)目，因此是比較推薦使用的

3）開發(fā)工程師使用的前端開源組件庫(kù)比如 Metronic、Antdesign 等也是基于 8 的原子單位來(lái)設(shè)計(jì)，因此如果設(shè)計(jì)師也使用以 8 為基本單位的柵格系統(tǒng)，開發(fā)與設(shè)計(jì)師相互對(duì)接就會(huì)更加方便，開發(fā)實(shí)現(xiàn)頁(yè)面時(shí)也能更高品質(zhì)地去還原我們的設(shè)計(jì)。

3）確定水槽寬度和頁(yè)邊距
按照親密性原則，我們可以按照8n定義幾個(gè)常用的間距值。人眼對(duì)于距離的認(rèn)知不是均勻、等分的，而是漸變的，通過(guò)對(duì)比幾種經(jīng)典的數(shù)列模型，選擇基于斐波那契數(shù)列生成一組數(shù)組作為間距值，得到8、16、24、40系列數(shù)值，為了區(qū)分它們的使用場(chǎng)景我們依次為其命名為XS、SM、MD、LG、XL。




經(jīng)過(guò)實(shí)踐經(jīng)驗(yàn)，在中后臺(tái)系統(tǒng)下，水槽寬度為16px時(shí)，頁(yè)邊距為24px時(shí)視覺效果最佳。
水槽=16px：此時(shí)列間距在保證頁(yè)面空間被高效利用的同時(shí)，也可以維持良好的呼吸感，不至于讓內(nèi)容過(guò)于緊湊。
頁(yè)邊距=24px：需要通過(guò)距離區(qū)分模塊與模塊之間的信息，同時(shí)也讓內(nèi)容區(qū)更加緊湊

Step 3:利用柵格公式計(jì)算柵格體系

柵格計(jì)算公式如下：內(nèi)容區(qū)寬度==24欄+23水槽+2頁(yè)邊距=屏幕寬度-左側(cè)導(dǎo)航寬度
基于前文屏幕寬度為1440px，采用24柵格布局，頁(yè)邊距取24px，水槽取16px的前提下。通過(guò)對(duì)柵格公式的計(jì)算，將具體的值帶入公式：
1440-左側(cè)導(dǎo)航寬度=24欄+23*16+2*24

Step 4:組織內(nèi)容，分配頁(yè)面比例

建立好柵格系統(tǒng)后，就可以根據(jù)自己的實(shí)際業(yè)務(wù)，在柵格系統(tǒng)上組織內(nèi)容分配頁(yè)面比例了。我們把頁(yè)面上最終承載內(nèi)容稱為“盒子（Box）”,這個(gè)盒子的寬度則由欄目與水槽按比例組合得到，高度則由內(nèi)容多少?zèng)Q定。

拓展小知識(shí)：盒子的概念
在柵格系統(tǒng)上容納業(yè)務(wù)內(nèi)容的容器我們把它稱之為盒子（Box），柵格系統(tǒng)上的盒子其實(shí)跟前端工程師寫頁(yè)面時(shí)用到的盒子是一致的。如圖所示，當(dāng)我們?yōu)g覽任何一個(gè)網(wǎng)頁(yè)時(shí)，右鍵>檢查元素（審查元素），然后在style菜單下就可以看到這個(gè)盒子結(jié)構(gòu)了。
Padding就是主體內(nèi)容距離盒子外側(cè)的距離，（主體內(nèi)容可以是一個(gè)按鈕、一段文本、一張圖片或者一個(gè)表格等）；Margin就是相鄰兩個(gè)盒子的距離，對(duì)應(yīng)在后臺(tái)柵格系統(tǒng)就是水槽的大小




了解完?yáng)鸥裣到y(tǒng)的盒子模型之后，下一步我們需要根據(jù)具體業(yè)務(wù)內(nèi)容來(lái)確定盒子的寬度。以24柵格系統(tǒng)為例，一個(gè)24柵格系統(tǒng)可以根據(jù)業(yè)務(wù)需要被2等分、3等分、4等分、6等分、8等分、12等分，還可以被1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5等不對(duì)稱分割。



上圖中只列舉了部分比例，同一個(gè)頁(yè)面上控制在5組以內(nèi)的比例值組合來(lái)布局比較合適，組合形式過(guò)多頁(yè)面就會(huì)顯得瑣碎、雜亂，不利于閱讀和使用。因?yàn)楹凶拥母叨雀鶕?jù)內(nèi)容來(lái)定，故圖中沒有體現(xiàn)高度這一維度的變化規(guī)律

根據(jù)具體業(yè)務(wù)內(nèi)容最終得出下圖中的盒子的具體比例



最終效果如下：




到此，我們的柵格系統(tǒng)就搭建完成了，但是這就結(jié)束了？ ? ?

No、No、No...當(dāng)然要物盡其用，前文中我們定義柵格原子單位為8，這意味頁(yè)面上各元素間距的變化也應(yīng)遵循8n的規(guī)律，當(dāng)然也就包括每個(gè)盒子卡片里的內(nèi)容。一致的變化規(guī)律讓頁(yè)面富有節(jié)奏感跟韻律感，在提高頁(yè)面一致性的同時(shí)也減少了設(shè)計(jì)決策成本。
&amp;amp;amp;amp;lt;br/>拓展步驟:元素對(duì)齊與間距設(shè)定

柵格系統(tǒng)中水槽與邊距的變化也遵循8n的變化規(guī)律，此處n為大于0的正整數(shù)，即n=1、2、3...，用于規(guī)范元素間距的8n，n最好是取這樣的整數(shù)。但是也可以根據(jù)業(yè)務(wù)情況取0.5、1.5這類包含二分之一8的情況，原因是實(shí)際工作中，我們面臨的情況是復(fù)雜的，這樣處理可以讓間距的設(shè)定適應(yīng)一些特殊的場(chǎng)景，從而使其更靈活普適。




柵格系統(tǒng)大的層面可以幫助設(shè)計(jì)者更好的進(jìn)行版式設(shè)計(jì)與內(nèi)容布局，而小的方面可以輔助設(shè)計(jì)師規(guī)范頁(yè)面內(nèi)各種元素的對(duì)齊與間距的設(shè)定。從用戶體驗(yàn)角度來(lái)講，這兩者同等重要，從執(zhí)行層面來(lái)講，我們一般先做版式設(shè)計(jì)與布局，然后再填充內(nèi)容、調(diào)整細(xì)節(jié)。

Q&A

Q1: 當(dāng)柵格系統(tǒng)中出現(xiàn)無(wú)法整除的情況，如何處理?
A1:理論上來(lái)說(shuō)，可以通過(guò)調(diào)整固定區(qū)域如導(dǎo)航的寬度來(lái)改變內(nèi)容區(qū)域的大小，使列寬可以整除，且邊距和槽寬能被最小原子單位（如8）整除。但如果仍然出現(xiàn)無(wú)法整除的情況，可以優(yōu)先調(diào)整頁(yè)邊距的數(shù)值，無(wú)需追求完全整除




Q2: 盒子模型填充柵格時(shí)，盒子對(duì)齊的是柵格還是水槽，里面內(nèi)容的元素也要同等對(duì)齊嗎？
A2: 盒子模型對(duì)齊的是柵格而非水槽。而這個(gè)盒子里面的內(nèi)容元素不受柵格的約束。只要父級(jí)模塊對(duì)齊柵格，子級(jí)元素可以不對(duì)齊水槽，同時(shí)子模塊也可以有自己的柵格系統(tǒng)




Q3: 一套柵格搭建完成后，是否全局都要強(qiáng)制對(duì)齊柵格？
A3: 并不是，柵格用在典型頁(yè)面工作臺(tái)、數(shù)據(jù)概覽、卡片頁(yè)居多，非常規(guī)設(shè)計(jì)時(shí)不需要柵格系統(tǒng)，甚至在特定情況下，我們也可以打破布局柵格設(shè)置，來(lái)組織頁(yè)面內(nèi)容。打破布局柵格可以使元素突出，吸引視覺焦點(diǎn)（比如：全站橫幅，或是市場(chǎng)運(yùn)營(yíng)類內(nèi)容）；但需要注意對(duì)中后臺(tái)系統(tǒng)而言，過(guò)多使用會(huì)導(dǎo)致頁(yè)面凌亂。


柵格上篇正式完結(jié)撒花啦～
敬請(qǐng)期待下篇「柵格在響應(yīng)式設(shè)計(jì)中的運(yùn)用」




本文由@慕子璐原創(chuàng)，未經(jīng)許可，禁止轉(zhuǎn)載。