別再說不懂柵格系統了

0 評論 5191 瀏覽 24 收藏 17 分鐘

編輯導語:對于設計師來說,柵格系統是一種可以更有邏輯地進行工作的布局思想。它有哪些優勢?又是如何與前端聯系的?本文作者對柵格系統進行了分析,希望能給你帶來幫助。

一、柵格系統的定義

講解柵格系統之前,先來了解一下什么是柵格系統。不妨來看看百度百科跟維基百科是怎么解釋的:

  • 百度百科:柵格系統英文為“grid systems”,也有人翻譯為“網格系統”,運用固定的格子設計版面布局,其風格工整簡潔,在二戰后大受歡迎,已成為今日出版物設計的主流風格之一。
  • 維基百科:柵格設計系統(又稱網格設計系統、標準尺寸系統、程序版面設計、瑞士平面設計風格、國際主義平面設計風格),是一種平面設計的方法與風格。

二、柵格系統的簡介

1692年,新登基的法國國王路易十四感到法國的印刷水平不盡人意,因此命令成立一個管理印刷的皇家特別委員會。他們的首要任務是設計出科學的、合理的, 重視功能性的新字體。

委員會由數學家尼古拉斯加宗(Nicolas Jaugeon)擔任領導,他們以羅馬體為基礎,采用方格為設計依據,每個字體方格分為64個基本方格單位,每個方格單位再分成36個小格,這樣,一個印刷版面就有2304個小格組成。在這個嚴謹的幾何網格網絡中設計字體的形狀、版面的編排、試驗傳達功能的效能,這是世界上最早對字體和版面進行科學實驗的活動,也是柵格系統最早的雛形。

說白了這玩意就像小時候學習寫字的田字格,橫平豎直的。其實它更多的作用是哪怕你的字再難看,最起碼整體看起來還是顯得規整。

首先是規整,然后字的大小整齊劃一,最后熟練度高了,自然會慢慢寫好看。再舉個例子,故宮一共有房間八千七百零七間,可從沒感覺規劃的亂。所以有良好的秩序是美最基礎的前提。這就是柵格系統最重要的作用之一。

三、柵格系統的原理

在網頁設計中,我們把寬度為“W”的頁面分割成n個網格單元“a”,每個單元與單元之間的間隙設為“i”,此時我們把“a+i”定義“A”。他們之間的關系如下:

W =(a×n)+(n-1)i

由于a+i=A,可得:

(A×n) – i = W

四、柵格系統的優勢

對于設計師來說,柵格系統更多的是一種布局思想,可以更有邏輯地進行設計工作。靈活地運用柵格系統,不僅可以讓整個網站各個頁面的布局保持一致,讓網頁的信息呈現更加美觀易讀,讓設計稿有更好的結構,更可以通過匹配不同組合,做出很多優秀和獨特的排版設計。

使用網格系統,可以使網頁設計給用戶正式感和規范感,還具有一種結構分明的設計感,提升用戶體驗。網格系統不意味著循規蹈矩,一味按照網格線來進行布局。網格系統的意義在于更靈活的幫助設計師有序布局,而不是限制設計師的設計。

對于前端開發人員來說,柵格系統的使用,給整個網站的頁面結構定義了一個標準,大大提高了網頁的規范性。在柵格系統下,頁面中所有組件的尺寸都是有規律的,可重用的,這對于大型網站的開發和維護來說,能節約不少成本。

隨著響應式設計的流行,柵格系統開始被賦予新的意義,那就是,一種響應式設計的實現方式。響應式的要點是為同一個頁面設計多種布局形態,分別適配不同屏幕尺寸的設備。

五、柵格系統與前端的結合

由于柵格系統最早出現在印刷品中,起到的作用更多就是規范布局。但是在現在的UI設計中,柵格系統的實際用途除了規范我們平時設計稿的布局以外,更重要的原因一切設計稿都是為了與前端開發結合,形成自適應布局。前端css中有個叫Flexbox。

https://getbootstrap.com/docs/4.0/layout/grid/這個網站算是前端第三方的界面框架,開發利用第三方的框架會高效很多。

我們通常定義柵格系統為12個列(根據實際項目需求可能存在不同),柵格布局中的12是1,2,3,4,6的最小公倍數,意思是要實現1等分,2等分,3等分…..而12是最小的數,也是最好的,當然如果分成16列,24列,32列,就需要更多的代碼來開發維護項目。

以下圖為例,第一行三個模塊平分,一個模塊就占據4列。第二行2個模塊,左邊就占了12格的8列,右邊就占了4列。

結合實際案例,以我的語雀為例,網頁的大框架分為三列:

隨著瀏覽器寬度縮小,整個網頁的比例也在發生變化,第二列在不停地縮小。當瀏覽器寬度縮小到某個特定的數值,第三列消失,只有第一列和第二列。這個就是俗稱的自適應。

六、設計與前端的聯系

下圖的某一個色塊代表內容的一部分,每個色塊的寬度并不是隨便畫的。是有規劃的想要每個色塊占多少個柵格。這就是與前端開發聯系的點。當然我們也可以隨意的拉伸,但不管怎么拉伸,所占的柵格比例是不變的。

七、柵格系統三個重要的屬性

柵格系統主要是三部分構成,列、水槽、邊距。

顧名思義,“列”就是柵格的寬度,“水槽”是兩個柵格之間的間距;“邊距”是柵格與畫布的邊距。

根據列寬屬性不同,可以分為兩種網格,一種是流動網格,也可以叫拉伸網格,是根據尺寸不同實時做變化;

八、常用的柵格系統

1. 960柵格系統

960柵格系統是:寬度為960px,12列,每列60px,水槽為20px。內容區域總寬度為940px。

秉承知其然知其所以然的原則,特意查了一下來源。以下內容牽扯部分數學問題,略微枯燥,有興趣的可以嘗試了解一下。

根據上面的簡單分析可以認為:當搭建頁面結構復雜的門戶型網站時,開發工程師們不約而同地都選擇將頁面寬度定為950px/960px。上面的“自然”出現,細究自然是不讓人信服的。

蘋果系統的設計者們在沒有喝醉酒的情況下選擇了960,而不是其它什么1000之類的整數,自然另有奧妙。

科學界有很多問題都可以歸結到數學問題上,我們也從數學著手:960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數倍:2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480。共26種(26 = 7 * 2 * 2 – 2, 減去2是去掉1和960自身),我們標記為:N(960) = N(2^6 * 3 * 5) = 26。

根據上面的算法,可以得到:

  • N(360) = N(2^3 * 3^2 * 5) = 22
  • N(480) = N(2^5 * 3 * 5) = 22
  • N(720) = N(2^4 * 3^2 * 5) = 28
  • N(750) = N(2 * 3 * 5^3) = 14
  • N(800) = N(2^5 * 5^2) = 16
  • N(960) = N(2^6 * 3 * 5) = 26
  • N(1000) = N(2^3 * 5^3) = 14
  • N(1024) = N(2^10) = 9
  • N(1440) = N(2^6 * 3^2 * 5) = 34
  • N(1920) = N(2^7 * 3 * 5) = 30

根據直覺(嚴格證明也不難,不過還是留給數學系的學生去證明吧),我們得到一個有趣的結論——要使得N(width)最大,width的取值有兩個系列:

  1. A系列:……320, 720, 1440……
  2. B系列:……480, 960, 1920……

N越大,可組合的寬度值就越多。對柵格系統來說,這意味著越靈活!

2. 8pt柵格系統

8pt柵格系統,也稱8點柵格?;镜氖褂迷瓌t是,設計是在設計中需要一致的使用8的倍數來定義元素的尺寸、填充和編劇。也就意味著在開發的世界中任何padding、margin、sizing都是8的倍數。

秉承知其然知其所以然的原則,有興趣的可以嘗試了解。

在iPhoneX的例子中,有賴于它的Super Retina屏幕,在實際屏幕分辨率下每英寸顯示出來的像素是畫布的三倍。通過最小尺寸設計,我們可以輕松地將組件放大到其他設備需要的屏幕尺寸,同時確保渲染具有完美的像素清晰度。這意味著,1個像素可以被轉化成4px(@2x分辨率),9px(@3x分辨率),如此類推。

所以如果我們有一個大小為16px的icon,當我們導出到@2x和@3x的分辨率,渲染出來的icon大小分別就是32px和48px,并適用于Rentina和Super Retina的屏幕。

那為什么是8?

  1. 以8個像素為基礎單位的尺寸可以完美地轉化成其他不同的屏幕尺寸(包括安卓的0.75倍和1.5倍)
  2. 理由是,盡管沒有解釋過多,Apple和Google都有建議這樣做。
  3. 以4或8為倍數的尺寸很容易計算,它們靈活且一致。用這個倍數設定組件之間的間距,也比較明顯(如下圖)

九、常見的響應式柵格

1. 排列式柵格

顧名思義,這種柵格中,卡片(即內容區塊)尺寸和間距不變,每行能放幾張卡片就放幾張,擺不下就換行,邏輯非常簡單。典型的例子有 Youtube 、Pinterest、Behance ……

這么簡單的響應式柵格系統,其問題也很明顯:頁邊距不確定,所以為了視覺的平衡感,大多將列表居中(像 Google Play 那樣堅持左對齊也不是不可以)。一整頁最好只有一種尺寸的卡片,否則邊距無法不統一。

固定的卡片尺寸和邊距可能在大屏里看起來太小,小屏里看起來又太大。但是如果產品夠簡單,列表單一的話,用這種是沒問題的。

2. 彈性式柵格

這種柵格系統的間距和頁邊距是固定的,卡片尺寸在一定程度下彈性伸縮,以確保填滿整個屏幕。因為間距和頁邊距固定,也不用擔心卡片混排。典型的例子有: Google Drive 、Spotify ……

3. 定制式柵格

其實國內的大部分網頁并沒有做響應式布局(比如知乎、淘寶、愛奇藝等),即便是部分做了的(比如簡書、京東、騰訊視頻等),也大多沒有使用上面講的那兩種自適應的柵格,而是定制類響應式布局。

以騰訊視頻為例,你可以看到它的尺寸伸縮并不是依賴一套通用的規范,而是人為設計了幾種尺寸。這個例子還算相對復雜了,如果你去看國內其它響應式界面,可能因為是人力設計,所以大多變化范圍并不大,最大尺寸和最小尺寸之間的差別有限。

十、如何創建柵格系統

1. 設置屏幕總寬度

做界面設計前會先設置一個個尺寸,寬度是固定的,因為內容不定所以高度也是情況而定,使用布局設置,sketch中默認屏幕內容寬度是960,是現在最常用的一個網頁寬度。

2. 設置列數

就是縱向分欄數量,sketch默認分為12列,也可以分為24列,這是網頁端的常用分法,移動端一般是6列。

3. 設置水槽寬度

布局設置中間距寬度就是水槽,紅色區域寬度就是水槽(間隔),水槽寬度越大,頁面留白和呼吸感會更好,反之則更緊湊。水槽可以將內容更規范地區分開來。

 

本文由 @卡洛設計 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash ,基于 CC0 協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!