關(guān)于柵格設(shè)計(jì)的總結(jié)筆記

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

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

關(guān)于柵格設(shè)計(jì)的總結(jié)筆記：


什么是柵格系統(tǒng)




柵格系統(tǒng)介紹

網(wǎng)格起源印刷設(shè)計(jì)，現(xiàn)在隨著傳播媒介變化網(wǎng)格系統(tǒng)也延伸到網(wǎng)頁設(shè)計(jì)（響應(yīng)式網(wǎng)站）甚至于移動(dòng)端的設(shè)計(jì)中了。網(wǎng)格設(shè)計(jì)是將版面分成不同形式的列或模塊組成的垂直或交叉的格子。這些格子可以幫助我們更好的排列所要傳達(dá)的內(nèi)容，管理內(nèi)容在版面中元素之間的比例。

柵格設(shè)計(jì)不是簡(jiǎn)單的將文字、圖片、圖標(biāo)圖形等版面中可見元素排列起來，而是遵循畫面結(jié)構(gòu)相互聯(lián)系延伸來的一種形式法則。

它的特點(diǎn)是：重視比例、秩序還有連續(xù)感。

在使用柵格設(shè)計(jì)時(shí)，有效可視區(qū)域內(nèi)的元素盡量對(duì)齊格子，并按照格子的劃分參照某種比例有序的分布和組織。







01

柵格的作用

保持內(nèi)容的清晰和一致

通過合理的比例、節(jié)奏、留白和層級(jí)提升版面的閱讀效率，網(wǎng)格系統(tǒng)下有助于在版面中清晰的劃分出來；

提升效率方便協(xié)作

多個(gè)設(shè)計(jì)可以分別按照這套柵格系統(tǒng)來處理不同的組件和設(shè)計(jì)細(xì)節(jié)。

易于修改和重復(fù)使用

柵格幫助設(shè)計(jì)師將不同的設(shè)計(jì)元素按照某種比例與聯(lián)系組在一起，來構(gòu)建更好的產(chǎn)品以此來實(shí)現(xiàn)有效的層次結(jié)構(gòu)統(tǒng)一和一致，使設(shè)計(jì)更有條理。




02

柵格的要素

邊距

安全距離或版心區(qū)域，由于展示媒介的不同，安全距離不一樣。

列

列是網(wǎng)格縱向排布的依據(jù)，列數(shù)越多縱向排布內(nèi)容就越細(xì)致，版面的內(nèi)容就會(huì)變得更稠密內(nèi)容較零碎，一般移動(dòng)端為6列，網(wǎng)頁設(shè)置為12列。

水槽

列與列之間的分隔間距，它有助于分離內(nèi)容

水槽的寬度可以根據(jù)實(shí)際情況來設(shè)置，當(dāng)水槽的寬度比安全距離寬時(shí)，眼睛向外指向并且存在更多的張力，當(dāng)水槽的寬度比安全距離窄時(shí)，眼睛向內(nèi)引導(dǎo)并且張力得到緩解。通常如果水槽為X的話，則安全距離通常為 1X 、1.5x、2X、2.5X，也可以根據(jù)項(xiàng)目情況進(jìn)行設(shè)置

模塊

模塊是行和列的交叉形成的獨(dú)立空間單元格

最小單位

在制定柵格之前還需要了解一個(gè)最小單位，這些柵格都是有這個(gè)最小單位組成的。目前比較常用的最小單位有4、5、6也有用8的Materia Design就是基于8作為最小單位。

由于近期比較忙還有下半部分就安排在下一篇

03 制定柵格

04 案例應(yīng)用.....