從6個(gè)方面 深度解析柵格設(shè)計(jì)

時(shí)間：2023-09-27 03:12:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-27 03:12:01 來源：網(wǎng)站運(yùn)營

從6個(gè)方面 深度解析柵格設(shè)計(jì)：哈嘍～大家好！這里是龍貓喵哦設(shè)計(jì)鋪，之前在《B端數(shù)據(jù)可視化設(shè)計(jì)指南》中提到過柵格設(shè)計(jì)，我們在設(shè)計(jì)中遇到復(fù)雜的布局時(shí)，設(shè)計(jì)師是如何對整個(gè)布局進(jìn)行排版設(shè)計(jì)？面對多個(gè)分辨率又是如何進(jìn)行合理的適配呢？接下來深度解析柵格化設(shè)計(jì)。

01 什么是柵格

___

我們常見到頁面元素不是憑空想象隨意放在哪一個(gè)位置，而是有一定的方法和規(guī)律，平面設(shè)計(jì)中經(jīng)常使用網(wǎng)格來輔助設(shè)計(jì)信息的擺放，用來限制固定的寬度和高度。而UI設(shè)計(jì)中常使用柵格設(shè)計(jì)，主要來約束橫向延伸的內(nèi)容元素分布。

柵格設(shè)計(jì)是輔助設(shè)計(jì)師們做頁面布局的工具，幫助視覺重量感平衡，提高一致性，適用于網(wǎng)頁設(shè)計(jì)、移動端設(shè)計(jì)和設(shè)備端的設(shè)計(jì)。

02 為什么使用柵格

___

那我們?yōu)槭裁匆褂脰鸥裨O(shè)計(jì)呢？我們來分別從用戶、設(shè)計(jì)師和開發(fā)者角度看一下使用柵格設(shè)計(jì)的好處有哪些。

1.設(shè)計(jì)師角度

節(jié)省了在布局設(shè)計(jì)上的計(jì)算，效率提高，讓我們設(shè)計(jì)的內(nèi)容都有所依據(jù)，系統(tǒng)化設(shè)計(jì)，讓頁面更有秩序，優(yōu)化用戶體驗(yàn)。

2.用戶角度

頁面信息更加清晰，提高閱讀效率，減少認(rèn)知成本，合理布局和留白讓用戶閱讀起來更有順序和呼吸感。

3.開發(fā)者角度

“格子”式的設(shè)計(jì)方式，更符合開發(fā)框架構(gòu)思邏輯，減少解釋成本，提高視覺還原度，也有利于開發(fā)頁面響應(yīng)式自適應(yīng)。

03 柵格的構(gòu)成要素有哪些？

___

柵格的構(gòu)成要素有：容器(Container)、邊距(Margin)、列寬(Columns)、水槽(Gutters)。

1.容器

指的是我們需要布局的整個(gè)區(qū)域，列寬、水槽和邊距都基于容器的大小來計(jì)算，列寬、水槽和邊距的總和就是容器的總寬。

2.邊距

也稱為安全區(qū)，相當(dāng)于平面設(shè)計(jì)中的出血位。用來控制頁面內(nèi)容兩側(cè)的留白區(qū)，禁止放內(nèi)容。容器寬度固定的情況下，邊距值越小可放置的內(nèi)容就越多，相反邊距值越大可放置的內(nèi)容就越少。

3.列寬

也稱為欄，是比較寬松的那部分區(qū)域，主要用來對齊內(nèi)容，也是柵格的數(shù)量單位，比如我們常聽到的12柵格布局、24柵格布局。柵格數(shù)量越多內(nèi)容越細(xì)碎，柵格數(shù)量越少，內(nèi)容越稀疏。

4.水槽

是兩個(gè)列之間的間隔，水槽是不可以放頁面內(nèi)容的，主要用于頁面中的留白。

04 “盒子”模塊

___

在使用柵格設(shè)計(jì)前，我們來了解一下前端同學(xué)的“小盒子”概念，前端同學(xué)在寫頁面樣式時(shí)，把模塊看成一個(gè)個(gè)的“小盒子”，用來承載該模塊的內(nèi)容，每個(gè)盒子是一個(gè)整體，再進(jìn)行盒子里面的內(nèi)容細(xì)化。由內(nèi)容區(qū)(Content）來寫字體、字號、顏色、形狀等元素，內(nèi)間距（Padding）是對內(nèi)元素的留白距離，外間距（Margin）是對外模塊的留白距離。

我們在設(shè)計(jì)中也是由一個(gè)個(gè)小的“盒子“來布局承載模塊的內(nèi)容的，柵格主要是限制頁面中X軸的寬度和布局，看到的頁面是這樣的。

實(shí)則是根據(jù)柵格來對頁面內(nèi)容布局。

05 空間劃分

___

1.柵格數(shù)選擇

我們可以根據(jù)頁面的復(fù)雜程度選擇柵格數(shù)量，頁面內(nèi)容復(fù)雜可選用24柵格化，內(nèi)容比比較簡單時(shí)可以使用12柵格設(shè)計(jì)。柵格的數(shù)量不是固定不變的，比如業(yè)務(wù)需要5等分的，可以使用5、10柵格來布局。

常使用的柵格數(shù)量有12和24，因?yàn)檫@兩個(gè)可劃分的等分較多、布局兼容較靈活。比如12柵格化可以等分1、2、3、4、6、12，24柵格化可以等分1、2、3、4、6、8、12、24。

2.按比例劃分

也可以按照比例來劃分，以12柵格為例，可以劃為：1:1:1、1:2:1、1:2等比例。

06 柵格的應(yīng)用

___

1.確定需要做的布局方式

我們以WEB端設(shè)計(jì)為例，常見的布局方式有3種：上下式、左右式、T型布局，首先要確定布局樣式，再對內(nèi)容區(qū)域做柵格布局設(shè)計(jì)。

2.分辨率的選擇

主流設(shè)備的分辨率為：1920*1080、1440*900、1366*768、1280*720、1024*768，其中占比最大的是1920*1080，但在設(shè)計(jì)中要考慮到對不同分辨率適配，不會以最大的分辨率來進(jìn)行設(shè)計(jì)，WEB經(jīng)常使用的分辨率是1440*900，但并不是絕對的，可根據(jù)業(yè)務(wù)需要對目標(biāo)用戶群體做調(diào)研，再去定分辨率

3.柵格的計(jì)算方式

柵格計(jì)算方式：柵格數(shù)*列寬+（柵格數(shù)-1）*水槽寬+2*頁邊距=容器總寬度（注意水槽數(shù)量比柵格數(shù)量要少1個(gè)）以12柵格為例：12*列寬+11*水槽寬+2*頁邊距=容器總寬度。

結(jié)語

柵格設(shè)計(jì)是用來輔助設(shè)計(jì)師頁面設(shè)計(jì)中的參照，讓設(shè)計(jì)有所依據(jù)，柵格的數(shù)量以及分辨率不是固定不變的，需要根據(jù)業(yè)務(wù)需要去選擇柵格數(shù)量和分辨率。以上是個(gè)人在實(shí)踐中所得的一些案例和經(jīng)驗(yàn)分享，未來會持續(xù)在龍貓喵哦設(shè)計(jì)鋪更新設(shè)計(jì)經(jīng)驗(yàn)、案例分析和行業(yè)發(fā)展趨勢等?，F(xiàn)在是一名自由設(shè)計(jì)師，即將成立工作室，歡迎大家私信合作探討設(shè)計(jì)。