前言

总结：网格帮助设计师构建和谐的排版设计，帮助终端用户轻松扫读、使用界面。好的网格能够适应多种屏幕尺寸和方向，保证跨平台的一致性。

如果你曾去过纽约，并在城市里步行过，你就会发现：因为该城市规划依托的网格系统，你能很轻松地从一个地方到另一个地方。

纽约城曼哈顿地图的部分截图（图源谷歌地图）。几乎所有道路（白色线条）都以网格形式分布。

就像可预测的城市网格系统可以帮助市民和游客自如地通行，网页的网格也可以让页面结构化，从而指导用户和设计师本身。网格作为持续性的参考点，能够提升页面的可读性、扫读性，帮助人们快速理解自己应该前往页面的哪个部分。

定义：网格由若干列、列与列之间的间距和列与边之间的边距组成，为页面上所有元素的排版提供了结构。

网站和页面中，常见的网格有三种：列式网格、单元式网格和层级式网格。

界面设计常用的网格有列式、单元式、层级式三种。

列式网格将一个页面划分为垂直的若干列。UI 元素和内容与这些列对齐。

单元式网格进一步拓展了列式网格，往里面加入了行。这种行和列的交错产生了单元，而元素和内容与这些单元对齐。单元式网格很适用于电商和列表页，因为重复的行很方便向下浏览。

层级式网格：通过列、行和模块的使用，按照重要性排序来组织内容。最重要的元素和内容块占据网格里最大的那些部分。

一、网格的组成部分

无论你使用的是哪种类型的网格， 它都是由三种元素构成的：列、间距、边距。

列：列是网格里占据最多屏幕空间的部分。元素和内容都被放置在列里。为了能够适应所有屏幕尺寸，列宽一般都是由百分比而非绝对数值来确定。列的数目也有很大灵活性，例如，移动端的设计可能只有 4 列，而桌面端设计可能会有 12 列。

间距：间距是列与列之间的距离，它区分了不同列的元素和内容。间距是固定的数值，但会根据不同的断点（针对不同屏幕大小的响应式设计中的临界屏幕尺寸）而有不同数值。例如，大屏幕更适合用更宽的间距，而小屏幕如手机端的间距则会更短。

边距：它指页面最边上的列与屏幕最左端和最右端的距离。该空间内没有任何内容。该距离可以是固定值，也可以由屏幕宽度的百分比表示，同样也可以在不同的断点有不同数值。

任何网格都由三个部分组成：（1）列，（2）间距，（3）边距

二、网格的应用实例

2.1 实例 1：层级式网格

第一个例子是《纽约时报》网站。该页面运用了层级式网格，打造了类似于读报纸的阅读体验。在桌面端尺寸下，该页面主要有两列。最重要的新闻故事在网格中占据了最多的空间，即左上角的部分。次级和再次的新闻占据的空间依次递减，即屏幕右边的模块。

《纽约时报》网站使用了层级式网格来打造类似于阅读报纸的阅读体验。（这里，我们用黄色来表示列，蓝色来表示间距，紫色来表示边距。）

2.2 实例 2：列式网格

第二个例子来自于 Ritual.com，该公司主要售卖维生素。该设计使用的是列式网格，来打造吸引人的视觉体验。在截图所示的屏幕尺寸，四个等距的列组成了网格结构，所有元素与这些列对齐，并保证在这些列之中。间距，即这些列之间的空间，同样也是相等的，并帮助用户从视觉上分隔 不同的产品。边距则是另外一种尺寸，并且左右两边距离相等。

Ritual 的四列网格让用户可以轻松扫读所有产品。（这里，我们用黄色来表示列，蓝色来表示间距，紫色来表示边距。）

2.3 实例 3：单元式网格

这里的例子来源于 Behance，是一个设计库。该网站的设计是单元式网格，构建了令人愉悦的浏览体验。在桌面端尺寸上，列和行构成了每行 4 个同样大小的模块。水平间距比垂直间距稍宽一些，而两侧的边距也是相等的。和上一个例子类似，这些间距非常清楚地从视觉上区分了每个元素。

Behance 的设计使用了单元式网格，帮助用户轻松浏览。（这里，我们用黄色来表示列，蓝色来表示间距，紫色来表示边距。）

2.4 实例 4：打破网格

最后一个例子，Shrine，来自于谷歌的材料设计语言。该设计使用了列式网格：该网格基于左侧导航栏，并且它占用了 2 列的宽度。仔细观察会发现，一些产品图片向间隔对齐，而另一些则没有。这样的打破网格会让快速扫读产品图片或专注于某个产品图片很困难，并且更强调其中的一些图片。只要你有合理的理由，这样频繁地打破网格也是可以的。

打破网格造成一种杂乱的浏览体验。（这里，我们用黄色来表示列，蓝色来表示间距，紫色来表示边距。）

三、网格的益处

使用网格让用户和设计师同等受益：

• 设计师可以快速确定页面应该如何对齐。
• 基于网格的、可预测的界面帮助用户轻松扫读。
• 好的网格能够自如适应多种屏幕尺寸和朝向。实际上，网格式设计是响应式网页设计的基础组成部分。响应式设计用断点来确定屏幕尺寸的临界阈值，从而针对处于不同阈值的屏幕尺寸显示不同的设计。例如，桌面端界面可能有 12 个网格列，而这些对移动端而言太挤了，因而后者可能只有 4 列。

Behance 网页在移动端只有 1 列（左侧），它是右边的 4 列网格结构适应屏幕尺寸的结果。

更重要的是，网格并不是一个随意的概念，设计师、程序员都会用到它。在进行设计时，一定要和对接的开发人员就网格进行沟通，保证他们正确地实现该结构。

四、选择和搭建适合你的网格

你设定和创建的网格，是打造精心设计的排版和最终体验的基础。

根据需求，选择正确的网格。花时间思考哪种类型——列式、单元式还是层级式网格——最符合你的需求。如果你的界面上总会有一些比其他元素更重要的内容，层级式网格可能最适合你。例如，层级式网格很适合线上新闻平台。如果你要展示的内容的变动性很大，可以考虑使用一个基础的列式或单元式网格，因为它们为设计提供了很大的灵活性。例如，元素和内容可以按照设计需求占据多个列或者单元格，也可以只占 1 格。

花时间搭建网格。一旦确定了哪种网格能满足你的需求，就可以开始搭建它了。确定相对于各种屏幕尺寸的列的数量，以及边距和间距的尺寸。一般需要为手机端、平板端、桌面端准备不同的尺寸。对笔记本和台式电脑而言，12 列网格基本上就足够灵活、可以满足绝大多数的设计需求了。随着屏幕尺寸减少，列的数量也会递减。绘制线框图的工具，例如 Sketch 和 Figma，都有快速、简单的搭建和修改网格的功能，在开始设计后也可以轻松修改。

在 Figma 中，可以轻松地设置列的数量、间距和边距。

永远把内容放在列里，而非列与列的间隔中。在网格里放置内容时，记得把间隔空出来，这样可以明确地区分和对齐内容和元素。

内容和元素应该被放置在列中间，而非间隔中。

考虑使用 8 像素的网格系统。对于绝大多数的设备，以像素表示的屏幕尺寸都是 8 的倍数。一般来说，把网格元素的数值定为 8 的倍数可以帮助网格付诸实施，并适应不同尺寸。

结论

网格并不仅仅为设计师提供了排版所依托的结构，同时也为终端用户提升了页面的可读性和扫读性。使用优秀的网格系统可以轻松适应多种屏幕尺寸。

附录

原文地址：https://www.nngroup.com/articles/using-grids-in-interface-designs/

版权声明
本文版权属尼尔森诺曼集团（Nielsen Norman Group）所有。欢迎转发至朋友圈，如需转载，请邮件 Support@nngroup.com。未经授权的转载、翻译是侵权行为，版权方将保留追究法律责任的权利。
© 2022 Nielsen Norman Group. All Rights Reserved.