为何栅格系统以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