設(shè)計(jì)師應(yīng)該懂的柵格系統(tǒng)

時(shí)間：2023-09-29 01:54:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-29 01:54:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

設(shè)計(jì)師應(yīng)該懂的柵格系統(tǒng)：

一、柵格系統(tǒng)簡(jiǎn)述

1692年，新登基的法國(guó)國(guó)王路易十四感到法國(guó)的印刷水平不盡人意，因此命令成立一個(gè)管理印刷的皇家特別委員會(huì)。他們的首要任務(wù)是設(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)最早的雛形。柵格最早起源于平面設(shè)計(jì)，以方格為設(shè)計(jì)基礎(chǔ)，將一個(gè)印刷版面分成上千個(gè)小格，這就是最早的柵格雛形。再后來(lái)，慢慢演變成運(yùn)用固定的格子設(shè)計(jì)版面的平面設(shè)計(jì)風(fēng)格。

UI中的柵格

我們將網(wǎng)頁(yè)端的柵格和移動(dòng)端的柵格都稱(chēng)為UI中的柵格，定義為以規(guī)則的網(wǎng)格陳列來(lái)指導(dǎo)規(guī)范界面中的版面布局以及信息分布，通俗一點(diǎn)講，就是根據(jù)一定邏輯，在界面中繪制出一個(gè)一個(gè)的小格子，然后將內(nèi)容擺在這一個(gè)一個(gè)小格子里組合起來(lái)的一種設(shè)計(jì)形式。

柵格化的優(yōu)勢(shì)

1、邏輯性

很多時(shí)候自己做的設(shè)計(jì)越細(xì)小的地方越?jīng)]有辦法解釋它為何這么做，不能有理有據(jù)的闡述自己的設(shè)計(jì)，但是商業(yè)設(shè)計(jì)是邏輯性解決問(wèn)題的設(shè)計(jì)方式，通過(guò)柵格化的使用，這些界面中的尺寸細(xì)節(jié)問(wèn)題就能完美的解釋了。

2、便捷性

設(shè)計(jì)師除了本身的視覺(jué)設(shè)計(jì)工作外，還需要跟進(jìn)對(duì)接開(kāi)發(fā)，對(duì)是否可落地、實(shí)現(xiàn)方式、實(shí)現(xiàn)的規(guī)范性，復(fù)用性的高低、性?xún)r(jià)比是否合適，這些問(wèn)題都是現(xiàn)實(shí)存在的，而柵格化設(shè)計(jì)方式可以間接的推動(dòng)和解決這些問(wèn)題。

3、條理性

設(shè)計(jì)師可以利用柵格讓界面更加有條理性，讓內(nèi)容可讀性變高，快速校準(zhǔn)元素在界面內(nèi)的位置，讓界面更加穩(wěn)定平衡，讓版面更加有層次感、模塊化的管理元素。

二、柵格的基本要素

柵格系統(tǒng)的基礎(chǔ)要素主要有：最小單位、屏幕總寬度、列數(shù)、列寬、水槽、安全邊距、內(nèi)容區(qū)域。

1、最小單位

柵格系統(tǒng)中的最小單位就是界面的網(wǎng)格單位基礎(chǔ)，內(nèi)部設(shè)計(jì)元素、版式都是按照這個(gè)基礎(chǔ)單位建立和布局的，定義了最小單位之后，后續(xù)內(nèi)容元素和布局規(guī)則都是基于它整數(shù)倍遞增，最小單位也可視具體情況而定。

2、屏幕總寬度

在做設(shè)計(jì)之前需要設(shè)定屏幕尺寸，這個(gè)尺寸將是規(guī)范整個(gè)布局尺寸以及統(tǒng)一的標(biāo)準(zhǔn)規(guī)范。

例如：網(wǎng)頁(yè)尺寸設(shè)定為960、1280、1440等常規(guī)尺寸，各種電商主要以960居多，移動(dòng)端主要以375、750、1280等為常規(guī)設(shè)計(jì)尺寸。

3、列

列=小列+水槽

比如屏幕總寬度為a，被分為n列，就可以計(jì)算出小列和水槽的寬度，列數(shù)n越多，那么排布在版面內(nèi)的內(nèi)容就越精細(xì)，通過(guò)控制列數(shù)，就可以控制版面的留白和呼吸感，網(wǎng)頁(yè)端：12列、24列；移動(dòng)端：6列（常用等分?jǐn)?shù)列，并不是固定的，可根據(jù)實(shí)際內(nèi)容設(shè)定列數(shù)）

4、行

行和列的概念是互通的，是刪格系統(tǒng)的橫向布局，由于現(xiàn)今網(wǎng)頁(yè)設(shè)計(jì)的內(nèi)容高度不是固定的，隨機(jī)性很高，所以一般情況下大家會(huì)忽略行的布局，但是在比較嚴(yán)謹(jǐn)數(shù)據(jù)可視化的后臺(tái)設(shè)計(jì)中，還是需要橫向的行布局，因?yàn)楹笈_(tái)設(shè)計(jì)中，高度很多都是可控的，而且頁(yè)面元素和數(shù)據(jù)較多，這樣可以精細(xì)化布局，讓頁(yè)面更有邏輯和節(jié)奏感。

5、水槽

水槽就是小列與小列之間的分割間距，可以幫助分離內(nèi)容?？筛鶕?jù)頁(yè)面風(fēng)格設(shè)置水槽的寬度，水槽越大則頁(yè)面留白呼吸感越好，反之則緊湊，但是水槽內(nèi)不可放置任何版塊元素。

6、安全邊距

安全邊距指的是在柵格內(nèi)容和屏幕邊緣之間的距離，它的作用主要是讓信息和屏幕之間有個(gè)安全距離，避免太緊貼邊緣，影響視覺(jué)內(nèi)容，可以提高可讀性、美觀度，增加頁(yè)面的呼吸感，安全邊距內(nèi)禁止放置任何內(nèi)容，它和平面柵格中的出血是一個(gè)概念。

7、內(nèi)容區(qū)域

內(nèi)容區(qū)域是整個(gè)刪格系統(tǒng)的匯總，橫向的行和縱向的列交叉區(qū)域，在這個(gè)交叉區(qū)域可以進(jìn)行排布設(shè)計(jì)元素。

三、柵格系統(tǒng)的應(yīng)用準(zhǔn)則

1、柵格系統(tǒng)的核心思想是內(nèi)容元素必須位于若干列上

核心思想就是內(nèi)容元素必須位于若干列上，可以任意分割，比如6x2、3x4、4x3,下面例子中是4x3的分割方式。

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

內(nèi)容元素應(yīng)該要在列寬以?xún)?nèi)，而不能流出在水槽之外，這樣會(huì)違背柵格化的目的。

3、父級(jí)元素對(duì)齊柵格，子級(jí)可以不完全對(duì)齊列

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

所有重要的內(nèi)容都應(yīng)該與總寬度相適應(yīng)，有時(shí)候也不能把總寬度當(dāng)作全部?jī)?nèi)容區(qū)域，還需給它設(shè)定一個(gè)內(nèi)邊距，此時(shí)它就充當(dāng)起了留白的作用，不要再網(wǎng)格內(nèi)部利用列寬當(dāng)成內(nèi)邊距，而是要與網(wǎng)格最邊緣保持對(duì)齊，利用網(wǎng)格外部的間距來(lái)當(dāng)作留白區(qū)域，比如在設(shè)計(jì)1200px寬度的網(wǎng)頁(yè)設(shè)計(jì)，實(shí)際內(nèi)容占位為960，其余的空間為外邊距。

5、特殊的設(shè)計(jì)風(fēng)格，可以有例外規(guī)則

下面的兩個(gè)網(wǎng)頁(yè)設(shè)計(jì)屬于完全出血的設(shè)計(jì)形態(tài)，這就是一個(gè)例外的規(guī)則，當(dāng)背景顏色或者背景圖片在完全出血的情況下，這時(shí)候開(kāi)發(fā)同學(xué)就會(huì)把它理解為一個(gè)全面屏的設(shè)計(jì)，但這種設(shè)計(jì)樣式，設(shè)計(jì)同學(xué)得能接受在完全出血范圍內(nèi)的元素被裁掉部分的情況，此時(shí)背景可以脫離刪格化設(shè)計(jì)規(guī)則。

四、柵格系統(tǒng)中的8像素原則

基本使用原則是設(shè)計(jì)師在設(shè)計(jì)中需要一致的使用8的倍數(shù)來(lái)定義元素尺寸、填充和邊距。

為什么是8像素，而不是2、4、6、10、12？

因?yàn)楝F(xiàn)在iOS和安卓物理屏幕尺寸分辨率很多，這時(shí)候就用到了“偶數(shù)思維”，當(dāng)我們采用偶數(shù)的時(shí)候，元素不會(huì)因?yàn)檫m配不同屏幕而變得模糊、失真。

而且那么多偶數(shù)，之所以選擇8，是因?yàn)?作為最小單位，進(jìn)可攻、退可守，就是8可以縮小一倍到4,4可以縮小一倍到2，像2、4數(shù)值太小，會(huì)感覺(jué)很碎，也不會(huì)像6、10、12一樣不能被成倍縮小三次，而且10、12數(shù)值有過(guò)大，不能精準(zhǔn)把控細(xì)節(jié)，所以現(xiàn)在基本采用以8像素為原則，這樣讓界面更有邏輯，更統(tǒng)一，更有規(guī)范性，提高復(fù)用性。

五、總結(jié)

柵格系統(tǒng)有助于我們讓更好的去設(shè)計(jì)，但規(guī)范總歸是規(guī)范，在設(shè)計(jì)中可靈活變通，不可死搬硬套，在設(shè)計(jì)中可能運(yùn)用的不只是一個(gè)單獨(dú)的知識(shí)點(diǎn)，也許是很多知識(shí)點(diǎn)交叉并用然后得出的更加科學(xué)合理的頁(yè)面，要想做出優(yōu)秀的設(shè)計(jì)，還需要進(jìn)一步了解設(shè)計(jì)背后的科學(xué)方法論，不僅要在視覺(jué)上突破，更要在設(shè)計(jì)方法論上得到求證，讓做出的設(shè)計(jì)作品科學(xué)合理有理有據(jù)，希望能對(duì)大家有所幫助，謝謝！