爲何柵格系統以8爲基數？好處有哪些？

以前寫過一個關於柵格系統 的簡述文章；如今來看只能做爲簡單的視覺佈局參考，更多的是從排版佈局的角度出發。最近被問到選擇幾做爲柵格基數比較好這個問題，對此作一下整理。

其實柵格在各個平臺開發佈局中都有所定義。

淺析三大平臺的開發佈局方式

通俗介紹 簡單瞭解一下開發佈局中柵格的變革

Web端

Web端最多見的佈局Bootstrap ；

它是Twitter的設計師Mark Otto和Jacob Thornton合做開發的一款強大的前端框架，至今仍被普遍使用，已經更新到V4版本了。

Bootstrap中的柵格系統是一套響應式、移動設備優先的瀑布流式柵格系統。

它將系統分爲12列，固然也能夠經過變量來改變列數和列寬，水槽寬度，屏幕浮動寬度；

其實設置屏幕浮動寬度就是咱們看到的屏幕自適應，就是根據屏幕寬度來選擇顯示參數。

Bootstrap中的柵格流只能做爲大的佈局定義，那麼針對最小單位是該用八、十、15仍是多少也是須要根據需求去作分析。

iOS端

iOS佈局方式不少，經常使用的能夠概括爲Frame、Autoresizing、Constraint、StackView和Masonry 五種；

其中，

Frame用來描述UIView的位置和大小；

Autoresizing早期用來適配屏幕；

Constraint比Autoresizing更加靈活，適配效果更好；

瞭解一下，

StackView 它是iOS9時新增的一個視圖類，能夠把它理解成一個容器，添加到容器內的控件能夠按照行或列進行佈局。

Masonry 是一個輕量級的佈局框架，是基於NSLayoutConstraint的一種第三方框架；通俗來說用它實現適配佈局更簡潔更輕量。

Android端

先簡單瞭解一下Android開發中的六大基本佈局

LinearLayout 線性佈局：最經常使用的以垂直和水平方向的佈局方式

RelativeLayout 相對佈局：能夠基於父或兄弟控件來佈局

FrameLayout 層佈局：就是控件蓋控件的那種佈局方式

AbsoluteLayout 絕對佈局：基於絕對座標xy佈局，沒法自適應

瞭解一下，

TableLayout 表格佈局：多行多列的佈局方式

GridLayout 網格佈局：以網格的方式進行佈局

在引入的表格佈局和網格佈局中其實就是爲了更加方便系統柵格化

根據以上內容對於三大平臺的經常使用佈局作一個簡單的分析

總結：

Web端引入的Bootstrap、Android端的表格和網格佈局以及iOS9以後引入的Stachview和Masonry都是爲了能更好的適配以及進行系統的柵格佈局；

也體現了設計中須要柵格定義的重要性。

以上佈局框架僅是從開發層面的一個佈局演變

轉換到設計中來，如何去定義？如何站在多個角度去思考柵格佈局？

看到過不少關於柵格佈局的文章，如今理解以爲有些片面，可能僅是做爲從設計的角度去理解， 不少的柵格方式都是從平面排版設計中的柵格演變過來的，基數可能比較隨性，而且沒有嚴格貼合系統去作。

柵格系統以多少爲基數比較好，好在哪裏？

站在巨人的肩膀上，仍是從這三大平臺來看，看一下官方給出的建議。

簡單看一下Bootstrap的柵格參數， 經過下表能夠詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工做的。

* https://v3.bootcss.com/css/#grid-options

由表知Bootstrap的默認水槽寬度是30px(每列左右是15px)，固然這些是可自定義的，Bootstrap的主要目的是爲了適配屏幕進行自適應佈局；

咱們設計時設置柵格的時候大多數狀況下是以非自適應網頁來作的柵格，柵格最小單位通常是10，15等不定參數；

雖然Web端的可視範圍比較大瀏覽方式和移動端不同，

可是咱們發現針對一些內容較多的網頁或者說對卡片內的信息去作佈局，基數是10或15就會很難呈現出想要的效果。

8點柵格，以8爲基數作柵格

以8爲基數的柵格系統漸漸被使用，以8爲基數 好在哪裏？

以前國外的一個博客中(spec.fm *一個開發者和設計師共同搭建的博客，設計細節中會從多個緯度去考量)， 有一篇文章 提到過使用8點柵格的好處。

* https://spec.fm/specifics/8-pt-grid

總結一下他們在Web端分析出的好處點有哪些；

Bootstrap或其餘的框架只做爲一個大的佈局系統，對於設計 沒有一個設計單位去衡量 排版很難一致性，使用8點的好處在哪：

對於設計：效率，減小決策，同時能保持元素之間的節奏。

對於團隊：開發人員更容易理解，在開發眼裏8更有說服性。

對於用戶：一致審美，減小設備上出現模糊的半像素偏移問題。

iOS端

咱們來看iOS的 Human Interface Guidelines 如何去給出佈局建議。

iOS是個封閉的系統，在 Human Interface Guidelines 能夠看到iOS使用Auto Layout自動佈局，iOS的系統徹底自主更新，終端設備也徹底由本身決定，所以系統能夠作到強制規範化。但在這裏提到的基數也是 8 。

* Human Interface Guidelines

在佈局中說到的約束，就是咱們來定義的柵格基數，他給的建議也是 8 。

下邊咱們找一下iOS官方組件，看一下自適應佈局的限制區域是否是基數 8 。

在Sketch中置入一個iOS官方頁面組件將其拆解：

其實咱們發如今iOS系統設計中的基數也是以8爲基準。

上邊說到的 Spec.fm 中的那篇文章中有提到Points，關於iOS的@1x，@2x，@3x圖，用 8 爲基數可減小出現是奇數形成一像素偏移模糊的狀況。

Android端

Android端的 Material Design 佈局給出的建議。

* Material Design

在 Material Design 給出的建議中是以8dp爲基準，小的控件以4dp爲基準。

Material Design 定義的柵格佈局更像Bootstrap，它能夠適應多平臺，結合它豐富的視覺語言能搭建出更加嚴謹的移動應用或網頁。

站在巨人的肩膀上

從以上三大平臺來看，移動端官方給出的建議都是以8爲基準。

從以上分析

我我的以爲，

從系統的角度，首先要保證是偶數；只研究移動端平臺：二、四、六、八、10；

其實 我以爲用2的次方計算會更加貼合： 2^一、2^二、2^三、2^4 : 二、四、八、16；

在這些數字中2做爲基數過小了咱們視覺能看到的2個點過小，而且使用起來很麻煩每次都要進行計算；

那麼10或16做爲基數又太大了，在移動端很難避免信息過多小屏幕須要考慮排版的問題；

取在這兩組數中的交集還剩下 4 和 8 ；

以上Material Design給出的建議中也是以8爲基準，小的控件以4爲基準。

從不少角度來看 8 點柵格是最爲理想的柵格基礎單位

下面再總結一下8點柵格的好處：

一、Web端佈局更加靈活。

二、視覺一致性，保證元素之間的節奏。

三、減小出現奇像素偏移形成模糊。

四、開發更容易理解的數字8。

五、能被最多的屏幕尺寸整除適配，這也是Material Design和iOS建議的主要緣由之一。

END / THX