網(wǎng)格系統(tǒng)-讓你的設(shè)計看起來更高級

時間：2023-09-27 22:06:01 | 來源：網(wǎng)站運營

時間：2023-09-27 22:06:01 來源：網(wǎng)站運營

網(wǎng)格系統(tǒng)-讓你的設(shè)計看起來更高級：有時候我們看一個設(shè)計作品、體驗一個APP、或者一個公司的PC官網(wǎng)，就會覺得整個設(shè)計看起來很高級，但是又說不上哪里高級，是結(jié)構(gòu)?布局？間距？還是細(xì)節(jié)？

帶著這個問題，我想從網(wǎng)格系統(tǒng)入手，看能否找到答案！

一、什么是網(wǎng)格系統(tǒng)？

網(wǎng)格系統(tǒng)，系統(tǒng)英文為Grid Systems，也有人翻譯成柵格系統(tǒng)。

網(wǎng)格系統(tǒng)是利用一系列垂直和水平的參考線，將頁面分割成若干個有規(guī)律的列或格子，再以這些格子為基準(zhǔn)，控制頁面元素之間的對齊和比例關(guān)系，從而搭建出一個具有高度秩序性的頁面框架，能科學(xué)的把設(shè)計元素合理又不失秩序的安排在頁面中，如naver的shopping網(wǎng)站還有我們看到的很多海報，就是一個利用網(wǎng)格系統(tǒng)很好的例子

在沒有了解網(wǎng)格之前，我們總是感覺這樣的頁面規(guī)整、整齊、看起來舒適高級，為什么會傳達(dá)給我們這樣的感覺？又是如何分解網(wǎng)格系統(tǒng)并應(yīng)用在項目中的呢？首先我們先看下大體的網(wǎng)格分類

二、網(wǎng)格系統(tǒng)的分類？

在整理網(wǎng)格體系的過程中，大概把網(wǎng)格系統(tǒng)分成3種類型

1、常規(guī)網(wǎng)格

2、漸進式網(wǎng)格

3、水槽式網(wǎng)格

• 常規(guī)網(wǎng)格

用途：用于海報、常規(guī)web類型網(wǎng)站、畫冊等內(nèi)容相對簡單的布局

怎么定義每個小的網(wǎng)格比例？

一般每個網(wǎng)格的長寬比有以下幾種，比較常用的有

6:9 4:6 8:13 12:18 = 0.618

1：√2 3:4 5:7 7:10 10:14 = 1.414

1：1

相信很多寶寶們看到這些數(shù)字比例都蒙圈了，不知道怎么換算

用現(xiàn)在這個1920X1080的比例舉個例子

第一步：我們先在ps里面下載一個guideguide插件，我們先把列數(shù)想好，列數(shù)越多布局越緊湊，可根據(jù)自己的項目來

第二步：設(shè)置列 這個例子是按數(shù)列10列來計算的，web端起稿的寬度一般是1920（屏幕占有率相對較高）那么1920÷10=192，那么我們得到了每個格子的寬度是192px

第三步：設(shè)置高 高度的話我們?nèi)绻胗?：√2 這個比例，就用192÷1.414得到135px,寶寶們還記得我們的高度是1080嗎？

第四步：然后用1080÷135得出8行在guideguide里面輸入8就得到了我們想要的一個網(wǎng)格

so，在設(shè)計web端網(wǎng)頁時，可以考慮在每個模塊中間融入網(wǎng)格和比例的概念 ，讓模塊跟模塊之間看起來更加和諧，通過固定的靜中有序 ，適配時，我們可以保持這個這個概念，只需要減少列就能得到完美的適配方案

• 漸進式網(wǎng)格

-多數(shù)用于web端大型推廣頁面、后臺系統(tǒng)頁面，這種例子比較多，最常見的就是我們經(jīng)?？吹降暮笈_系統(tǒng)

設(shè)定方式：

設(shè)定一個最小單位a，加固定個數(shù)，或者倍數(shù)劇增

1、3、5、7、9 +2得出

2、4、6、8、10 2的倍數(shù)

1 、5 、9 1+4 5+4 固定加數(shù)

這個頁面的網(wǎng)格就是采用+2模式得出

• 水槽式網(wǎng)格（重點）

-多數(shù)用于APP、常規(guī)web頁面，如官網(wǎng)、3欄式布局feed頁面

重點來了，在平時設(shè)計APP的時候其實用到的最多的還是水槽式網(wǎng)格系統(tǒng)

那么什么叫水槽式網(wǎng)格系統(tǒng)呢？

先來看下整個水槽式網(wǎng)格的組成部分

1、單元格

谷歌的大多數(shù)測量都是應(yīng)用的8dp網(wǎng)格對齊，較小的組件（例如圖標(biāo)）可以與4dp網(wǎng)格對齊。




比如說，最小單位是8px，圖標(biāo)的占比是3個8也就是24px

2、外邊距

外邊距的選擇，一般跟自己的項目希望傳達(dá)給用戶的感覺要一致，是高級舒適的？還是豐富緊湊型？無線和web一般要做不同邊距，屏幕越大邊距相對更大一些，有一些國外的網(wǎng)站一套設(shè)計體系能兼顧APP和web 兩個端，比如instagram

當(dāng)然也要看整體設(shè)計要傳達(dá)給用戶的感覺是什么？來看2個實際的例子：愛彼迎的邊距為48px，網(wǎng)易云音樂的為32px，設(shè)計師在選擇邊距的時候不僅要考慮設(shè)計風(fēng)格還有每個頁面的一致性，是都采用一套網(wǎng)格體系還是特殊頁面可以單獨定義，要提前考慮清楚

愛彼迎首頁選擇大的邊距留白更舒適，而網(wǎng)易云音樂首頁則選用小間距內(nèi)容更加豐富緊湊

3、列和水槽

列和水槽，是在做設(shè)計之前要定義好，以京東結(jié)果頁和pinterest為例

但是在移動端設(shè)計中，列的數(shù)量不宜過多，一般是6、8、12因為手機屏幕寬度有限，列的數(shù)量越多，頁面就會被分割的越“碎”，在頁面設(shè)計時就會越難把控，在WEB端設(shè)計中，列數(shù)一般會采用12、16、24這些數(shù)值

三、怎么測量一個APP使用了什么樣的柵格？具體數(shù)值怎么測量呢？

第一步：我們先下載一個sketch插件fusion，也可采用sketch中的布局，fusion更方便一些，安裝上之后，導(dǎo)入我們需要測量的app截圖

第二步：測量邊距，如圖所示，淘寶頭購物車頁面的邊距是18px（750下）根據(jù)模塊之間的劃分，測量出水槽為24px

第三步：實驗列寬的數(shù)量，多試幾次，測出剛好卡到元素邊緣的合適的數(shù)值，就成功測出一個app的柵格體系了

四、建立網(wǎng)格？打破網(wǎng)格

我們在設(shè)置網(wǎng)格系統(tǒng)的時候，切記要活學(xué)活用，布局時也可以在這個區(qū)域就行，不需要所用元素完全卡在網(wǎng)格線上

大的黃色圓圈在網(wǎng)格以內(nèi)，設(shè)計人物的邊緣則可以適當(dāng)拓展出去，打破網(wǎng)格限制

帶有邊距的常規(guī)網(wǎng)格，采用4a布局

水槽式網(wǎng)格體系，馬蜂窩首頁，在頭像區(qū)域也沒有完全卡在網(wǎng)格的邊線上

所以在設(shè)計的時候也可以靈活運用網(wǎng)格體系，哪些元素可以利用網(wǎng)格體系，哪些可以打破網(wǎng)格體系，根據(jù)設(shè)計中遇到的實際情況定義




總結(jié)：

這3種是目前看到比較常見的網(wǎng)格系統(tǒng)，在評價一個好的設(shè)計作品時，不防從網(wǎng)格體系來看下這個作品的布局是否符合這幾種形式，也可以在自己的項目中進行練習(xí)

利用水槽式網(wǎng)格能快速產(chǎn)出一版電影詳情頁設(shè)計稿，效率加倍提升，不做糾結(jié)像素差

利用網(wǎng)格體系的好處：

1、更加理性的對待設(shè)計

不少設(shè)計師在做設(shè)計的時候依靠經(jīng)驗、對設(shè)計布局的敏感，或者基于競品這樣的角度去做，如果采用網(wǎng)格系統(tǒng)，一方面從理性的、可觀的，具有數(shù)學(xué)美感的角度去做出的設(shè)計，也讓設(shè)計更加有理有據(jù)，提高閱讀體驗

2、提高協(xié)同的效率

一個公司里面，會有多個設(shè)計師協(xié)作，如果有一套成熟的網(wǎng)格體系的話，那么大家就不會每個設(shè)計師出一套自己認(rèn)為合適的設(shè)計方案，而是在現(xiàn)有的框架下，更好、更快的完成設(shè)計任務(wù)，在效率和一致性上能更有保證

3、減少決定時間

不管你是設(shè)計執(zhí)行者，還是管理者，在設(shè)計時有時候就會糾結(jié)像素差，運用網(wǎng)格體系，能減少這樣的決策時間，能讓設(shè)計師在設(shè)計執(zhí)行上更加明確，有跡可循，也不再糾結(jié)于幾個像素，設(shè)計管理者也會更能提供有理有據(jù)的設(shè)計指導(dǎo)，讓設(shè)計師更快速理解到設(shè)計原則，較少在反復(fù)推敲過程中浪費時間 。

讓設(shè)計更高級的辦法，快快用起來吧！