網(wǎng)頁設(shè)計(jì)中的柵格系統(tǒng)知識(shí)點(diǎn)

創(chuàng)新互聯(lián)與你分享《網(wǎng)頁設(shè)計(jì)中的柵格系統(tǒng)知識(shí)點(diǎn)》，這是一篇讓你明白、學(xué)會(huì)柵格系統(tǒng)的文章。

1、柵格的由來

柵格最早來源于平面設(shè)計(jì)中，在1692年時(shí)，法國(guó)國(guó)王路易十四因?yàn)閲?guó)家印刷水平差強(qiáng)人意，命人成立了一個(gè)管理印刷的皇家特別委員會(huì)。他們以羅馬體為基礎(chǔ)，采用方格為設(shè)計(jì)依據(jù)，每個(gè)字體方格分為64個(gè)基本方格，每個(gè)方格再分為36個(gè)小格，一個(gè)印刷版面就有2304個(gè)小格組成。這就是柵格最早的雛形。再到后來，逐漸完善演變成是一種平面設(shè)計(jì)的方法與風(fēng)格，運(yùn)用固定的格子設(shè)計(jì)版面布局，其風(fēng)格工整簡(jiǎn)潔。所以市面上幾乎所有平面軟件都有網(wǎng)格這個(gè)功能。

拿平面中的板式設(shè)計(jì)作為例子，柵格系統(tǒng)利用了水平和垂直的參考線，將版面分割成格子，根據(jù)這些格子作為參考來構(gòu)造秩序性版面。帶來的直接好處就是明確了版面的對(duì)齊關(guān)系、留白關(guān)系、圖文關(guān)系等。

2、UI 中的柵格是什么

為什么這里說 UI 中的柵格，我們將網(wǎng)頁端的柵格和移動(dòng)端的柵格都稱為 UI 中的柵格，定義為以規(guī)則的網(wǎng)格陣列來指導(dǎo)規(guī)范界面中的版面布局以及信息分布。用通俗易懂的話來講，就是根據(jù)一定邏輯，在界面中繪畫一個(gè)一個(gè)的小格子，然后將內(nèi)容擺在這一個(gè)一個(gè)格子里組合起來.

3、為何要使用柵格

1. 邏輯性

很多時(shí)候你會(huì)沒辦法解釋為什么這個(gè)按鈕100 px ,為什么這個(gè)導(dǎo)航750 px ,越細(xì)節(jié)的地方越是沒辦法解釋，但是商業(yè)設(shè)計(jì)是邏輯性解決問題的設(shè)計(jì)方式。通過柵格的使用，這些尺寸都可以被好解釋。

2. 站在山上

設(shè)計(jì)師除了本身視覺工作外，還需要對(duì)是否可落地，實(shí)現(xiàn)方式，是否規(guī)范，復(fù)用性是否高，性價(jià)比是否高這些問題上有一定高度的認(rèn)知。柵格可以間接推動(dòng)這些問題。

3. 更有調(diào)理

設(shè)計(jì)師可以利用柵格讓畫面更加有調(diào)理，讓內(nèi)容可讀性變高?？焖傩?zhǔn)元素在畫面內(nèi)的位置，讓畫面更加平衡。讓版面更加有層次感，模塊化的管理元素。

4、柵格涉及的基本詞

想讀懂柵格，首先要了解柵格系統(tǒng)里的基本名詞的意思，接下來詳細(xì)介紹后柵格里涉及到的基本詞。

這6個(gè)基本詞就是棚格中的基本概念，要對(duì)這些概念非常熟悉才能熟練的運(yùn)用棚格系統(tǒng)。在剛開始設(shè)計(jì)的時(shí)候，很多人會(huì)猶豫是分為12列昵還是24列還是其他列數(shù)，我想說的是不管是幾列，都要根據(jù)具體的界面內(nèi)容。但是或許24列用起來會(huì)更加靈活一些，可以在這個(gè)系統(tǒng)里衍射出很多不同的板式方案。

5、市面常用的柵格系統(tǒng)

1.960柵格系統(tǒng)

960柵格系統(tǒng)是在早期被運(yùn)用的最廣的棚格系統(tǒng)。棚格寬度為960PX, 12列，每列60px，水槽為20px。內(nèi)容區(qū)域的總寬度為940px。

市面上大型的門戶網(wǎng)站、電商網(wǎng)站基本上都采用了960的棚格，比如下列。

2.8 pt 柵格系統(tǒng)

8pt柵格系統(tǒng)，也稱8點(diǎn)柵格 # 基本的使用原則是，設(shè)計(jì)師在設(shè)計(jì)中需要一致的使用8的倍數(shù)來定義元素的尺寸、填充和邊距。也就意味著，在開發(fā)的世界中任何padding、margin、sizing都是8的倍數(shù)。

會(huì)有人困惑，為什么8pt棚格系統(tǒng)采用的是8的倍數(shù)，而不是2、4、6、10、12？其實(shí)這可以分兩點(diǎn)去說。

其一，現(xiàn)在不論是i〇S還是Android,物理屏幕尺寸和分辨率應(yīng)有盡有，那么設(shè)計(jì)師該按照哪個(gè)界面標(biāo)準(zhǔn)去設(shè)計(jì)就是一個(gè)問題，這時(shí)候引入一個(gè)“偶數(shù)思維”，當(dāng)我們采用的值是偶數(shù)的時(shí)候，元素不會(huì)因?yàn)槿ミm配不同的屏幕而變得模糊，失真。舉個(gè)例子。

其二，那么多雙數(shù)，選擇了8,是因?yàn)橐?作為最小單位，退可守進(jìn)可攻，不會(huì)像2、4、6這樣很碎顯得頁面分割感重，也不會(huì)像10、12—樣在小細(xì)節(jié)里無法精致把控。

總體而言，現(xiàn)在市面上越來越多的設(shè)計(jì)者開始選用8pt柵格，可以以更有邏輯的方式讓元素協(xié)調(diào)統(tǒng)一，也大大減少了與工程師的溝通成本。在每一個(gè)細(xì)節(jié)都達(dá)到一致和邏輯性，從用戶層面上也能逐漸建立信任感。比如市面上，使用8點(diǎn)棚格的案例。

6、如何在設(shè)計(jì)稿中定義柵格系統(tǒng)

我們要在畫板里建立自己的棚格系統(tǒng)，首先我們先強(qiáng)化一下柵格的關(guān)鍵詞，用專業(yè)詞匯帶入學(xué)習(xí)公式,

當(dāng)然，現(xiàn)在sketch的運(yùn)用已經(jīng)廣泛被大家接受的吋候，sketch特有的強(qiáng)拓展性，讓設(shè)計(jì)師們解放了計(jì)算器，不用苦苦的去計(jì)算?？芍苯釉趕ketch中使用網(wǎng)格設(shè)鬣功能，輕松設(shè)霊出自己的柵格系統(tǒng)。以960柵格為例子，演示一次棚格的設(shè)置。

7、柵格在設(shè)計(jì)中的應(yīng)用

那么，看到現(xiàn)在，其實(shí)棚格的大部分信息你已經(jīng)了解了。而且也已經(jīng)制作好了可使用的棚格系統(tǒng)，那么如何來應(yīng)用呢。

其實(shí)，應(yīng)用柵格很關(guān)鍵的一句話是，在界面中的區(qū)塊的定義要從列開始到列結(jié)束，水槽和安全距離內(nèi)不可單獨(dú)使用內(nèi)容。

舉幾個(gè)例子，如果純按照棚格來定義一切內(nèi)容，

1.定義導(dǎo)航寬度的時(shí)候，就是如下圖#記號(hào)1#的寬度，也不用糾結(jié)說為什么導(dǎo)航是220px、240px。

2.定義彈出的S度旳時(shí)候，就如下圖#記號(hào)2#的寬度，所有的尺寸大小一定是確定且符合邏輯的，

8、如何利用柵格定義間距

布局中，柵格和間距冥實(shí)是息息相關(guān)的?？梢赃@么理解兩者的關(guān)系，柵格定義的是布局中大棋塊的邏輯性定位和排布，那間距定義的是版面中所有細(xì)節(jié)的間距、步進(jìn)、適配 #以8pt柵格舉例，柵格中定義了安全距離、列寬、水檣等基本詞的值 # 都是以8為基本單位然后進(jìn)行步進(jìn)，那么在間距中，元素與元素之間的距離就可以定義成8的倍數(shù)，所有元素之間的間距都是8的倍數(shù)。就可以讓轚個(gè)界面的設(shè)計(jì)*有節(jié)奏，在定義元素尺寸的時(shí)候有非常強(qiáng)的邏輯性支捋，在一致性上也會(huì)很好的達(dá)到。

9、柵格系統(tǒng)的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：通篇都在說棚格的優(yōu)點(diǎn)不做贅述，基本可以概括成一致性、有邏輯、加強(qiáng)團(tuán)隊(duì)協(xié)作和統(tǒng)一、培養(yǎng)信任感等。

缺點(diǎn)：

1、 新手設(shè)計(jì)師在運(yùn)用的時(shí)候，可能會(huì)覺得被束縛，這時(shí)候建議邊設(shè)計(jì)邊調(diào)整的方式。

2、 柵格系統(tǒng)有一定的學(xué)習(xí)成本，但是強(qiáng)烈建議設(shè)計(jì)師一定要花時(shí)間弄懂柵格，百益而無一噻。

綜上是上海網(wǎng)站建設(shè)公司——?jiǎng)?chuàng)新互聯(lián)為你分享的《網(wǎng)頁設(shè)計(jì)中的柵格系統(tǒng)知識(shí)點(diǎn)》

網(wǎng)站欄目：網(wǎng)頁設(shè)計(jì)中的柵格系統(tǒng)知識(shí)點(diǎn)
標(biāo)題來源：http://muchs.cn/news/172820.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、面包屑導(dǎo)航、定制網(wǎng)站、虛擬主機(jī)、網(wǎng)頁設(shè)計(jì)公司、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)