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

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

1、柵格的由來

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

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

2、UI 中的柵格是什么

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

3、為何要使用柵格

1. 邏輯性

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

2. 站在山上

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

3. 更有調(diào)理

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

4、柵格涉及的基本詞

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

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

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

1.960柵格系統(tǒng)

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

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

2.8 pt 柵格系統(tǒng)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

缺點：

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

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

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

當(dāng)前文章：網(wǎng)頁設(shè)計中的柵格系統(tǒng)知識點
網(wǎng)頁路徑：http://www.muchs.cn/news20/172820.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、手機網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、虛擬主機、微信小程序

廣告

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