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

1、柵格的由來

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

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

2、UI 中的柵格是什么

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

3、為何要使用柵格

1. 邏輯性

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

2. 站在山上

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

3. 更有調理

設計師可以利用柵格讓畫面更加有調理，讓內容可讀性變高?？焖傩试卦诋嬅鎯鹊奈恢茫尞嬅娓悠胶?。讓版面更加有層次感，模塊化的管理元素。

4、柵格涉及的基本詞

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

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

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

1.960柵格系統(tǒng)

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

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

2.8 pt 柵格系統(tǒng)

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

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

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

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

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

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

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

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

7、柵格在設計中的應用

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

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

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

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

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

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

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

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

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

缺點：

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

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

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

當前文章：網頁設計中的柵格系統(tǒng)知識點
網頁路徑：http://jinyejixie.com/news20/172820.html

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

廣告

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