关于栅格制定与实践

上海/UI设计师/5年前/11930浏览

版权

关于栅格制定与实践

近一年中负责B端项目较多，常运用到栅格系统，近期整理并总结下栅格方面的知识点，如能帮助到大家，不胜荣幸！

1692年，新登基的法国国王路易十四感到法国的印刷水平不尽人意，因此命令成立一个管理印刷的皇家特别委员会。首要任务是设计出科学的，合理的，重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的排版，试验传达功能的效能，这是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。

到20世纪初，德国、荷兰、瑞士等国的平面设计师们发现通过维持视觉秩序，从而使版面能更加清晰有效地传递信息，二战后这种理念在瑞士得到了良好的发展，直到20世纪40年代后期，第一次出现了使用网格进行辅助设计的印刷作品。

由瑞士设计师大师Josef Müller-Brockmann(约瑟夫·米勒-布罗克曼)所著的《平面设计中的网格系统》一书，自1961年出版以来畅销至今，对设计界有着深远的影响。史称Swiss Typography Movement (瑞士新浪潮平面设计运动)，后来成为全球风靡的International Typographic Style (国际主义设计风格) 。

2、栅格的概念

栅格系统以规则的网络阵列来指导和规范网页中的版面布局以及信息分布。栅格系统有时候也称为网格系统。

栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。

而UI设计里常用的网页栅格系统是从平面栅格系统中发展起来，对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读、更具可用性，而且对于前端来说，网页将更加灵活与规范。

例如在网页设计中，如果把网页宽度平均切分为多个网格单元，每个单元之间预留一定的空隙，此时整个页面就如同一个栅格系统，

如图：站酷、UI中国、Ant Design Pro均为24栅格

二、使用栅格系统的好处

1、提高效率

栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考，它让页面设计变得有规律，从而减少了设计决策成本；熟练运用网格系统能够让你的设计更有秩序和节奏感，页面信息的展现更加清晰，提高阅读效率，从而提供给用户舒适的使用体验，加快认知速度。

最重要的是，它给整个产品的页面结构定义了一个标准；对于视觉设计师来说，不用再为产品的每一个页面都想一个宽度或高度了；对于前端开发工程师来说，页面的布局设计将完全是规范的和可重用的；对于内容编辑或广告销售来说，所有的广告都是规则的、通用的，再也不用做出一套多张不同尺寸的广告图了。这对于项目的开发和维护来说，能节约不少成本。

2、响应式

在科技快速发展的今天，90％的媒体互动都是基于屏幕的，通过手机，平板电脑，笔记本电脑，电视和智能手表来与外界产生联系；多屏设计已成为商业设计中不可或缺的一部分，响应式设计正迅速成为常态；响应式最大的优势是能兼容不同的设备尺寸，不管屏幕尺寸如何放大缩小都能自动适应，作为UI设计师，我们希望为我们的产品在不同尺寸下都能为用户提供良好的用户体验，栅格系统就可以帮助我们做到这一点。

3、规范设计/提高团队协作

当多位设计师共同设计产品时，一个统一标准就变得尤为重要。如果没有一个统一的框架去约束的话，我们产品的页面和组件的标准可能各式各样，这样的话整个产品的页面都会比较混乱；因此，栅格系统有助于将界面设计工作分开，因为多位设计师可以在统一的布局下进行不同部分工作，并且无缝集成并保持连贯。

4、加速开发并保证视觉还原度

大多数设计项目的实施，涉及到设计者和开发者之间的协作；栅格化提高了页面布局的一致性跟复用性；避免了设计师与开发者在细节上的反复沟通确认，从而提升了整个设计开发流程的效率，并能帮助开发者实现较为理想的设计还原。

三、栅格系统的结构与使用

1、8像素原则

如何定义栅格系统最小单位？参考已有的设计规范和前辈的经验，加上目前市场上主流的屏幕分辨率，以8像素作为一个步进单位的变化，在视觉上能感受到较为明显的差异，因此选取8做为栅格系统的原子单位。

主要原因：

1⃣️ 8作为偶数，既能适应绝大多数设备屏幕，又能保证在输出各种倍图时尺寸不出现奇数（iOS导出1、2、3倍图，Android导出1、1.5、2、3、4倍图均为偶数）

2⃣️ 8像素不大不小，利用8或8的倍数规范元素和间距大小，既能保证元素视觉上的统一，也能保证间距大小上存在较为明显的差异，

2、栏（Column）与水槽（Gutter）

栅格系统由若干个栏与水槽构成，栏上用于放置内容，水槽则用于控制内容左右之间的间距，把控页面内的留白

如图所示： G=水槽 C=栏 S=外间距 W=栅格系统总宽

通常情况下，水槽的宽度不变，栏的宽度随着屏幕尺寸的变化而变化，屏幕尺寸/分辨率越大，栏宽度越宽，屏幕尺寸/分辨率越小，栏的宽度越小，当达到临界值时水槽与栏的数量将会发生变化

例：设备750分辨率及以下使用6栅格，750～1366分辨率使用12栅格，1366～1920分辨率使用24栅格

（设计时具体使用6栅格、12栅格还是24栅格需根据产品的业务需求去分配，栅格的数量越多，页面就会被分割的越碎，设计中越难以把控，）

3、盒子

如图所示，产品中的元素（文字、图片、表单等）信息就放置在一个个蓝色的“盒子”内，而“盒子”大小又受到栅格系统的限制，栅格系统/设备分辨率大小在变换的同时会带动“盒子”大小的变化，从而使“盒子”内部元素发生变化，如：图片视频、输入框、卡片等尺寸发生变化，文字进行换行等

“盒子”会根据栅格数量的不同进行等分或不等分，比如：1：1：1、 1：2：1、 2：5：5、 3：4：5、 1：1：1：1，具体采用哪种组合需要我们根据产品的业务需求来定；比如当页面需要承载更多更杂的信息时，便可使用24栅格，然后根据24栅格我们对“盒子”进行更多的组合，从而放置更多更复杂的信息

但一定要切记，页面被分割的越碎时，设计中越难以把控！！！

以下是一些“盒子”的组合参考

4、栅格的设置

此处简单描述下Sketch汉化版中栅格设置的方法：

操作路径一：视图 👉 画布 👉 布局设置操作路径二：显示（工具栏）👉 布局设置

设置页面预览图

总宽：用于设置栅格系统的总宽度，当我们在开始设计产品时，希望页面中的内容区域可以在不同设备分辨率下自适应，假设这个内容区域的大小为1632px，那输入1632就对了

偏置：用于设置栅格系统的横向位置

列数：用于设置栅格系统的栅格数量（例：6栅格、12栅格、24栅格）

外围间距：外围间距=间距宽度/2，不可单独设置大小

间距宽度：用于控制内容左右之间的间距，把控页面内的留白，数值越大间距越大、留白越大

列宽：用于放置内容（文字、图片、视频等元素），列宽会根据之前输入的总宽、列数、外围间距、间距宽度的数值自动算出

四、响应式栅格的运用

设计师需要通过设计让内容在不同的平台上体验最大化，确保让用户在任何一个屏幕上看到内容的时候，会觉得这些内容就是为这个平台而设计的，而不是单纯的缩放而来；这种无缝的体验，才是跨屏幕设计的真正难点所在。

想要制定一套针对不同设备和屏幕的设计方案，你需要一整套的策略；用户体验同时包含了性能、交互、效率等多方面内容，也就是说，对于一个线上的响应式页面，我们不仅要关注视觉上看到的，也要关注我们操作、使用时的感受，这些综合因素最终影响着用户使用时的效率与体验。

响应式可以响应的前提有两点：页面布局具有规律性，元素宽高可用百分比代替固定数值，而这两点正是栅格系统本身就具有的典型特点，所以利用栅格系统进行响应式的设计是顺理成章的，也比较高效快捷，所以响应式与栅格化天生一对好搭档。

1、固定栅格/断点系统

固定栅格，在设备分辨率大小变化，而未达到一个临界值时（开发那边设置好的固定的值），栅格系统本身的栏宽与水槽宽不会发生改变，界面的排版布局也不会发生任何变化，直到设备分辨率达到一个临界值，栅格系统中列的数量才会发生变化；在此之前界面排版都是不变的，某部分就像是被切掉了。

通俗一点讲就是，在这种栅格中，页面元素尺寸和间距不变，每行能放多少就多少，摆不下就换行，逻辑非常简单。

典型例子：花瓣、爱奇艺、腾讯视频

优点：

这种栅格较为便捷，适用于内容信息较为简单，信息较为单一的产品，开发速度较快

缺点：

页边距不确定，所以为了视觉的平衡感，大多将列表居中（像Google Play那样坚持左对齐也不是不可以）；

一整页最好只有一种尺寸的卡片，否则边距无法不统一；

固定的卡片尺寸和边距可能在大屏里看起来太小，小屏里看起来又太大

2、弹性式栅格

这种栅格系统的间距和页边距是固定的，卡片尺寸在一定程度下弹性伸缩，以确保填满整个屏幕；因为间距和页边距固定，也不用担心卡片混排；窗口缩小时，内容将动态的发生变化，文本会进行换行，元素也会变窄；然而，这些元素在内容宽度缩小到下一个临界值之前，布局是不会变化的；在各种情况下，对用户来说，扩展内容的大小比扩展可见内容的数量更有用。