栅格布局一般怎么用_栅格界面3步法则，入门小白从此不迷茫

目录

什么是栅格系统？

栅格系统有什么意义？

如何建立栅格系统？

Sketch中栅格布局设置

案例分析

栅格系统听起来好像很简单，作为设计师基本都听过，但是对于栅格你究竟了解多少呢？今天我们就来聊一下栅格系统使用的3步法则！

什么是栅格系统

简单来说，栅格就是格子。它并没有多高深复杂，可以把他想象成一个个的格子组合起来，就很容易理解了，比如我们小时候用过的方格本，以及现在流行的像素本。所以栅格就是利用网格进行分类排版，由网格演变而来的另一种说法。

栅格早在20世纪初被应用到平面设计的文字编排，20世界40年代后期开始应用到印刷品，目前网格系统广泛地运用在杂志、平面设计、网页设计、移动端界面设计之中。

栅格系统有什么意义

栅格系统在UI界面中的应用究竟有什么作用、意义，为什么要使用它呢？

1、减少了设计决策成本

栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考，在页面布局和细节处理上更明确、高效。可以保持整体设计的一致性、专业性；避免无效的设计尝试，专注于有意义的设计方向。

2、提高团队协作设计效率

遵循栅格系统的设计细节无论是元素、模块或页面，都有规律可循，提高了页面布局的一致性跟复用性，减少设计决策的时间、减少外部的沟通损耗，提升了整个设计开发流程的效率、并能帮助开发者实现较为理想的设计还原。

3、具有科学性

栅格系统的应用，可以为页面信息的展现更加清晰，提高阅读效率，从而提供给用户舒适的使用体验，设计更加有据可循。

如何建立栅格系统

一、栅格的最小单位

最小单位需要优先定好，因为后面的所有规则都基于它来制定。

一般这个最小单位的数值范围是4px-10px的偶数值。

怎么选择这个数值要考虑两个因素：

1.考虑该数值的手机普遍适用性，即能否被大多数手机屏幕宽度整除

适用性方面 4、6、8、10都可满足(数值必须是偶数)，4px和6px适合页面模块较多，布局复杂的产品

2.考虑具体应用时是否具备灵活性

4px灵活性最佳，但是页面分割的十分琐碎，反倒给设计带来不便。因此选择8px(同时也是4px的倍数)来作为基本单位，能够适应大部分app场景。

二、确定关键数据，组件间距的增量关系

确定了最小单位的数值，那么页面里所有的间距(包括水槽、外边距、横向间距等)、组件尺寸等都需要是最小单位的整数倍，以达到统一视觉节奏的目的。横向间距一般不用栅格定义，可用等分和五分原则。

例如单元格选择为8px，那么所有用到的间距尺寸将会是8px、16px、24px、32px、40px……

三、确定列的数量

列是栅格系统纵向排布的依据

为何会如此选择列

在APP设计中，列的数量不宜过多，一般为6列或12列。因为手机屏幕宽度有限，列的数量越多，页面就会被分割的越碎，在页面设计时就会越难把控。常见的栅格系统有：6列、8列、12列、24列。我们发现12列和24列除了5等分外，其他情况都可以满足，6列相对稍微差了一点，即结果为：12列=24列>6列>8列。所以在实际使用中还是以12列和6列为主。

Sketch栅格布局设置

利用 sketch 的网格设置和布局设置功能，可快速搭建出网格系统的参考布局

网格设置：设定网格大小为8px

1.打开Sketch，显示>画布>网格设置

2.网格显示切换快捷键 control+G

布局设置：设定网格大小为8px

1.显示>画布>布局设置

2.布局显示切换快捷键 control+L

动态演示：

用栅格定义移动端布局会更专业和高效，避免重复的设计尝试。遵循栅格的设计细节有效减少决策和沟通时间，提高工作效率。特别适用于瓷片区、列表流等的设计。

案例分析

好啦，上面讲了这么多理论知识，下面来看实际UI界面中栅格系统的应用

以网易云音乐为案例进行分析

第一步定义最小单元格，我们选择8px

第二步确定组件间距的增量关系。外边距为32px，运用等分原则确定每列间距16px。栅格图如下：

第三步实际运用效果：

从图中可以看出元素的规范对齐瓷片区的模块大小反复使用，从而提高工作效率。也提升了和程序对接的成本，还有和产品的沟通成本。用栅格一目了然的总结为什么要这么做。

虾米音乐案例

定义最小单元格为8px，外边距为36px，12列，运用等分原则确定每列间距18px。

并且由此栅格还可以在保证间距的情况下快速做出更多变化的编排布局尝试。例如：

具体瓷片区分成几块根据项目内容决定设计。栅格起到快速定位板块的作用。

下面看一下视频类APP，其页面以剧集、综艺、电影等视频封面展示为主，侧重表现图片的视觉冲击力，因此页面内容区域占绝大部分比例，重要板块区域紧贴外边距。

以优酷视频为例

设定系列水槽宽度(水槽宽度的设定是为了减少设计决策成本)，并定义好每个宽度对应的使用场景，然后根据每个场景使用对应数值。

优酷APP界面水槽的值是4、6、12、20。

总结

栅格的设置，能让我们更直观的安排、调整内容的位置及对齐方式，可以使内容变得规律、有序，方便用户浏览阅读，帮助用户提高获取信息的效率。

栅格系统的三步法则:

1、确定最小单元格

2、确定组件间距的增量关系

3、确定列的数量

掌握了这3步，轻松应用栅格，学会了吗，是不是很简单。