在現(xiàn)代設(shè)計(jì)中，柵格系統(tǒng)作為一種重要的布局方案，能夠有效提升設(shè)計(jì)的秩序感。對(duì)于 UI 設(shè)計(jì)領(lǐng)域，柵格系統(tǒng)也廣泛用于跨屏幕的響應(yīng)式設(shè)計(jì)，幫助設(shè)計(jì)師打造更好的多端體驗(yàn)。本文將簡(jiǎn)要介紹柵格系統(tǒng)的基本概念和搭建方法，并提供 8 個(gè)實(shí)際應(yīng)用案例，讓大家快速通關(guān)柵格系統(tǒng)。
一、什么是柵格系統(tǒng)？
柵格系統(tǒng)是一種將頁(yè)面劃分為多個(gè)列和行的布局結(jié)構(gòu)，
柵格系統(tǒng)的核心優(yōu)點(diǎn)是規(guī)范布局、提升效率、優(yōu)化體驗(yàn)，具體可分為以下 4 點(diǎn)：
柵格通過(guò)設(shè)定固定列數(shù)、間距、邊距等規(guī)則，讓頁(yè)面中不同模塊（文字、圖片、卡片）的排列有統(tǒng)一基準(zhǔn)。無(wú)論是單頁(yè)面內(nèi)的元素分布，還是多頁(yè)面、多終端（PC / 移動(dòng)端）的設(shè)計(jì)銜接，都能保持風(fēng)格統(tǒng)一，避免布局雜亂，提升品牌視覺(jué)辨識(shí)度。
設(shè)計(jì)端無(wú)需反復(fù)糾結(jié)元素位置和間距，可直接基于柵格框架快速排版，減少無(wú)效調(diào)整；開(kāi)發(fā)端能通過(guò)柵格的固定參數(shù)（如列寬、響應(yīng)式斷點(diǎn)）編寫(xiě)統(tǒng)一代碼，降低適配成本，還能實(shí)現(xiàn)設(shè)計(jì)稿與開(kāi)發(fā)還原的精準(zhǔn)對(duì)齊，減少溝通返工。
柵格劃分的規(guī)整布局符合用戶視覺(jué)流動(dòng)習(xí)慣，讓信息呈現(xiàn)更有層次感和邏輯性。用戶能快速捕捉核心內(nèi)容，避免因布局混亂導(dǎo)致的閱讀疲勞，尤其在多信息、多模塊的復(fù)雜頁(yè)面（如官網(wǎng)、電商首頁(yè)）中，體驗(yàn)提升更明顯。
在數(shù)字設(shè)計(jì)中的“柵格”相比平面設(shè)計(jì)的“網(wǎng)格”更靈活一些，常常只制定縱向的分割規(guī)則。因?yàn)閿?shù)字界面的高度不像紙張等實(shí)體媒介，不需要嚴(yán)格確定縱向高度。
下圖中就是最常見(jiàn)的一個(gè)數(shù)字界面柵格結(jié)構(gòu)，包括：
-
列（Column）
-
水槽（Gutter）
-
邊距（Margin）
-
柵格總寬（Container）
-
容器盒子（Col-n）
在實(shí)際使用時(shí)，盡量讓內(nèi)容（容器盒子）在橫向占滿（N）列和（N-1）列水槽。比如上圖中的左側(cè)的容器盒子占據(jù)了 2 列和 1 列水槽，右側(cè)的容器盒子占據(jù)了 3 列和 2 列水槽。注意，盡量不要讓列和水槽數(shù)量相等，而是要讓水槽數(shù)量比列少一個(gè)，這樣可以讓內(nèi)容之間留出更自然的間隙。
二、如何搭建和使用柵格系統(tǒng)？
目前市面上主流的界面設(shè)計(jì)工具都支持柵格功能，我用的是摹客DT，搭建柵格系統(tǒng)的步驟如下：
1）創(chuàng)建新項(xiàng)目
打開(kāi)
摹客DT
（https://www.mockplus.cn/dt?hmsr=2409wenbjzz），使用快捷鍵 A 添加初始容器，并選擇合適的尺寸。
2）設(shè)置柵格
在右側(cè)屬性面板中，
找到并展開(kāi)“布局網(wǎng)格”模塊，激活“顯示布局”選項(xiàng)即可打開(kāi)
柵格
功能
。設(shè)置面板中“間距”即水槽值，在類(lèi)型中可以按需選擇拉伸（列寬自動(dòng)）還是居中（手動(dòng)設(shè)定列寬）。
3）使用柵格
直接在編輯窗口繪制設(shè)計(jì)內(nèi)容，元素靠近列時(shí)會(huì)有自動(dòng)吸附效果。合理地安排界面中的元素、文字等，讓他們恰好覆蓋整數(shù)倍的列，就能保證設(shè)計(jì)最大化利用了柵格的優(yōu)點(diǎn)。
三、柵格系統(tǒng)在產(chǎn)品設(shè)計(jì)中的8個(gè)應(yīng)用案例
1）Material Design
Material Design的柵格布局是一種響應(yīng)式設(shè)計(jì)系統(tǒng)，旨在確保用戶界面在不同設(shè)備和屏幕尺寸上的一致性和靈活性。它主要基于12列的柵格系統(tǒng)，允許設(shè)計(jì)師和開(kāi)發(fā)者在布局中有效地組織內(nèi)容。
Material Design的柵格布局是響應(yīng)式的，能夠根據(jù)設(shè)備的屏幕大小和方向自動(dòng)調(diào)整。設(shè)計(jì)師可以利用五個(gè)斷點(diǎn)（xs, sm, md, lg, xl）來(lái)定義在不同屏幕尺寸下的列數(shù)和布局方式，從而實(shí)現(xiàn)靈活的設(shè)計(jì)。
2）智能化
響應(yīng)式設(shè)計(jì)
利用柵格系統(tǒng)可以構(gòu)建優(yōu)秀的智能響應(yīng)式設(shè)計(jì)，使得網(wǎng)頁(yè)在不同設(shè)備上保持一致性和組織性。通過(guò)合理的布局和元素對(duì)齊，設(shè)計(jì)師能夠提升用戶體驗(yàn)和界面美觀性。
在上圖這個(gè)案例中，設(shè)計(jì)師利用柵格系統(tǒng)完成網(wǎng)頁(yè)（Web）設(shè)計(jì)后，可以輕松地借助柵格的特性和“摹客DT”中的自動(dòng)布局能力，自動(dòng)得到平板（Tablet）端和手機(jī)（Mobile）端的設(shè)計(jì)效果，極大地提升設(shè)計(jì)效率。
3）8點(diǎn)網(wǎng)格設(shè)計(jì)
8 點(diǎn)網(wǎng)格系統(tǒng)是設(shè)計(jì)界常用的標(biāo)準(zhǔn)，適用于各種屏幕尺寸。設(shè)計(jì)師通過(guò)使用 8 的倍數(shù)來(lái)定義元素的間距和尺寸，確保在不同設(shè)備上實(shí)現(xiàn)視覺(jué)一致性。這種方法特別適合移動(dòng)端設(shè)計(jì)，能夠提高布局的效率和準(zhǔn)確性。
在上圖的案例中，設(shè)計(jì)師盡可能使用 8 的倍數(shù)來(lái)定義所有的設(shè)計(jì)參數(shù)，包括按鈕的長(zhǎng)寬尺寸、按鈕的內(nèi)邊距（Download距離按鈕頂部的內(nèi)邊距）、按鈕和按鈕的間距等。8 點(diǎn)網(wǎng)格可以進(jìn)一步降低設(shè)計(jì)師的決策難度，提升設(shè)計(jì)效率。
4）
Bootstrap
柵格系統(tǒng)
Bootstrap 框架提供了一個(gè)強(qiáng)大的柵格系統(tǒng)，支持多種屏幕設(shè)備的響應(yīng)式設(shè)計(jì)。通過(guò)預(yù)定義的類(lèi)，開(kāi)發(fā)者可以快速構(gòu)建布局，確保在不同設(shè)備上的良好表現(xiàn)。
而在 Bootstrap 3 中，整個(gè)柵格系統(tǒng)一開(kāi)始就是對(duì)移動(dòng)設(shè)備友好的，整個(gè)框架的內(nèi)核中內(nèi)置了整套柵格機(jī)制的支持。也就是說(shuō)，使用 Bootstrap 可以獲得最佳的移動(dòng)端柵格效果。
5）文字基線網(wǎng)格系統(tǒng)
基線網(wǎng)格系統(tǒng)通過(guò)密集的水平行提供文本對(duì)齊和間距準(zhǔn)則，確保文本在設(shè)計(jì)中的一致性。這種方法在排版設(shè)計(jì)中尤為重要，能夠提升閱讀體驗(yàn)和視覺(jué)美感。
在上方的示例中，每8px行在紅色和白色之間交替。將文字的所有行高設(shè)置為基本單位（8x或4px）的倍數(shù)，可以讓文本和基線網(wǎng)格完美對(duì)齊。
6）B端用戶界面
在B端界面設(shè)計(jì)中，柵格系統(tǒng)用于布局和對(duì)齊界面元素，確保用戶界面的整潔和可用性。設(shè)計(jì)師可以利用柵格系統(tǒng)來(lái)創(chuàng)建直觀的導(dǎo)航和交互體驗(yàn)，提升用戶滿意度。由于B端界面中通常有固定的左側(cè)邊欄，此時(shí)可以利用混合柵格的策略，讓界面中僅內(nèi)容的部分符合柵格要求，固定的左邊欄不參與柵格布局。
在上方的示例中，登錄界面和B端的左側(cè)功能頁(yè)面都是固定的內(nèi)容，無(wú)需參與柵格布局。此時(shí)，可以將布局的重點(diǎn)集中在內(nèi)容區(qū)域，形成混合柵格的結(jié)構(gòu)，保證最佳的頁(yè)面響應(yīng)體驗(yàn)。
7）Ant Design
作為國(guó)內(nèi)流行前端設(shè)計(jì)框架，Ant Design在柵格上的定義也是非常經(jīng)典的。Ant Design 采用 24 柵格體系。以上下布局的結(jié)構(gòu)為例，對(duì)內(nèi)容區(qū)域進(jìn)行 24 柵格的劃分設(shè)置，如下圖所示。頁(yè)面中柵格的 Gutter 設(shè)定了定值，即瀏覽器在一定范圍擴(kuò)大或縮小，柵格的 Column 寬度會(huì)隨之?dāng)U大或縮小，但 Gutter 的寬度值固定不變。
對(duì)開(kāi)發(fā)者而言柵格是實(shí)現(xiàn)動(dòng)態(tài)布局的手段，而設(shè)計(jì)師對(duì)于柵格的理解源自平面設(shè)計(jì)中的柵格。在具體落地中視角的不同就容易造成偏差，最終影響還原度，繼而增加溝通成本。
8）Arco Design
Arco Design的柵格布局是一種靈活且高效的設(shè)計(jì)系統(tǒng)，主要用于字節(jié)跳動(dòng)的中后臺(tái)產(chǎn)品。其設(shè)計(jì)理念基于24柵格系統(tǒng)，能夠有效地組織和展示信息，確保頁(yè)面布局的一致性和邏輯性。
Arco Design的這套柵格布局不僅提升了設(shè)計(jì)的效率和美觀度，還通過(guò)模塊化和響應(yīng)式設(shè)計(jì)增強(qiáng)了產(chǎn)品的適應(yīng)性。設(shè)計(jì)師和開(kāi)發(fā)者可以通過(guò)這一系統(tǒng)更好地協(xié)作，實(shí)現(xiàn)高質(zhì)量的產(chǎn)品設(shè)計(jì)。
小結(jié)
在這篇文章中，我們深入探討了柵格系統(tǒng)的基本概念、搭建方法以及實(shí)際應(yīng)用案例。通過(guò)這8個(gè)應(yīng)用案例，我們不僅展示了柵格系統(tǒng)在設(shè)計(jì)和布局中的重要性，還揭示了如何在真實(shí)設(shè)計(jì)和開(kāi)發(fā)中去使用柵格系統(tǒng)，并提升工作效率和視覺(jué)美感。
實(shí)踐出真知，柵格系統(tǒng)的靈活性和適應(yīng)性使其成為設(shè)計(jì)師和開(kāi)發(fā)者不可或缺的工具。無(wú)論是在網(wǎng)頁(yè)設(shè)計(jì)、平面設(shè)計(jì)，還是在產(chǎn)品開(kāi)發(fā)中，掌握柵格系統(tǒng)都將為你的工作提供堅(jiān)實(shí)基礎(chǔ)。通過(guò)本篇文章，相信你已經(jīng)更深入地理解了柵格系統(tǒng)的價(jià)值，愿你在項(xiàng)目中大膽應(yīng)用這些知識(shí)，將知識(shí)轉(zhuǎn)化為項(xiàng)目成果，在實(shí)戰(zhàn)中去體會(huì)柵格系統(tǒng)的獨(dú)特優(yōu)勢(shì)吧！
