在版式設計中，将網格視為一種秩序系統來進行使用，是設計師某種特定的精神和态度的表達，因為它體現了設計師是以一種結構性、預見性的方式進行構思和設計的。

設計師的作品應該是易懂的、客觀的、功能性的和具有教學美感的。

一個合适的網格使得視覺設計變得更容易：

1. 可以通過視覺傳達的手段客觀地構建主題；
2. 可以系統和邏輯地構建文本和插圖類材料；
3. 可以在一個緊湊的空間中根據文本和插圖的特點建立節奏關系。

網格系統通常被應用在平面設計、UI設計、甚至于空間設計中。

下面我們就平面設計和UI設計，展開對網格系統的探讨。

平面設計中的網格系統

版心

版心是頁面中主要内容所在的區域。在确定版心之前，設計師必須明确設計的性質和目的，即在頁面中有多少的文本和圖片需要設計。

經典的版心設計

基于黃金分割比例的頁面

網格的結構

在開始設計之前，版面的分欄數是需要進行考慮的要點之一。

一般分為兩欄、三欄、四欄，四欄還可以進一步分成八欄、十六欄甚至更多。

确定版心；将版心分欄

将欄分成單元格；劃分單元格

8格網格系統

8格網格系統的版面經常用于廣告宣傳單和畫冊的設計。在很多情況下，隻需通過對8種不同尺寸的圖片進行組合，就可以解決許多簡單的問題。

在8格網格系統中，可以組合成8種不同尺寸的圖片，版面足以容易各種大小的插圖。

20格網格系統

利用20格網格系統來編排，可以産生20種尺寸參與排版的可能性。在設計前期更多的嘗試，将會發現網格的創造力是無窮的。

總之，我們可以說，善于利用網格系統來進行版面設計的設計師們，總是可以非常專業的設計出豐富多樣且令人滿意的作品。

32格網格系統

相對與20網格來說，32網格系統可以為設計師提供更多的可能性，甚至可以說是無限的可能性。

32格網格系統提供了非常多的編排方案，幾乎涵蓋了所有類型的版面設計，尤其對于那些涉及到大量圖片的設計作品。

UI設計中的網格系統

有些設計師對于網格系統有點陌生，但是在互聯網設計領域，提到栅格系統，想必都是有所耳聞的。

栅格系統就是利用均分的垂直和水平線，将頁面分割成若幹有秩序的格子，按照這些分割好的格子去安排頁面的設計元素，控制元素之間的節奏關系。

在谷歌的Material Design和蘋果的Ios設計規範中，都有對栅格作出一定的建議，設備系統中的原生軟件也都是嚴格按照規範去實施設計的。而在Web端的設計中，各互聯網大廠也有制作相應的設計規範來統一自家産品的設計。

下面我們将通過四個基本概念，分别對PC端和移動端的栅格設計展開探讨：

1. 栅格的最小單位：栅格系統基礎，定義栅格的步進距離；
2. 欄目：栅格系統的容器，盛放文本、圖片等元素；
3. 水槽：相鄰兩欄之間的間距，控制整體頁面的留白；
4. 安全邊距：内容區域與屏幕兩端留出的間距。

PC端

對于PC端來講，欄目和水槽交替形成欄栅格系統，欄目主要放置内容，水槽則控制頁面元素的間距。

欄目和水槽的寬度則是以栅格的最小單位為基準，所以在頁面栅格化之前先定義好栅格的最小單位。

8的倍數

如何定義栅格系統最小單位？參考已有的設計規範和前輩的經驗，加上目前市場上主流的屏幕分辨率，以8像素作為一個步進單位的變化，在視覺上能感受到較為明顯的差異，因此選取8做為栅格系統的原子單位。

12等分和24等分

确定好了栅格系統的最小單位，接下來就可以确定欄目（8n）和水槽（8m）的寬度，并以此形成初步的栅格。

目前主流的等分方式有12等分和24等分

而在多數業務情況下，我們需要在設計區域解決大量信息收納的問題， 24等分可以更多樣性的布局排版，适合更加複雜的場景。

盒子

在經過等分之後，劃分出的信息區塊我們稱之為“盒子”，盒子便是頁面承載内容的容器，而每一個盒子的寬度，則是根據具體的業務内容去分配的。

建議橫行排列的盒子數量最多四個，最少一個。設計部分基于盒子的單位定制盒子内部的排版規則，以保證視覺層面的舒适感。

下面介紹幾個案例：

移動端

在設計移動端産品的時候，我們會考慮到色彩、文本、圖形、結構等要素，往往忽略來網格系統的構建。

網格系統可以說是整個産品的骨架，所有的頁面都按照網格系統有理、有序的搭建，産品的整體性也會有很大的提高。

最小單位

和PC端類似，移動端的網格系統也是由一個個的最小單位構成。

根據移動端物理設備的特性，我們建議以4或者8像素作為步進單位，但是4像素會把頁面分割過度，所以整體上還是以8像素做為網格最小單位，隻有在某些特殊的場景使用4像素。

安全邊距

我們在PC端的時候沒有提到安全邊距，因為web設計基本不設置安全邊距，或者直接在中間960像素布局内容。

而在移動設備的特殊性，一般存在8px-48px的安全邊距

欄目和水槽

确定好了安全邊距和最小單位，就可以根據産品的風格去設置欄目和水槽的寬度。

建議在實際使用中以12列欄目或者6列欄目為主，水槽以8像素或者16像素為主。

盒子

網格的作用就是去控制盒子的布局，而移動端屏幕小，可設置的更加緊湊。橫行分割1-6等分都是合适的。

下面介紹幾個案例：

sketch栅格設置

總結

如果在設置網格系統或者說是栅格系統的時候，出現了小數點，不用擔心，直接取整就好。一套完美的網格系統也不可能在所有的分辨率下完美适應，1像素以内的尺寸都是肉眼不可分辨的。

在平面設計版式構成中，我們提到版式設計的原則都是僅供參考的，我們隻有在充分理解原則的情況下，去做突破，才能讓頁面規範有序、具有節奏感，同時不失靈動。

作者：設計師日記，公衆号：設計師的私人日記

本文由 @設計師日記 原創發布于人人都是産品經理 ，未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部