简谈界面设计中网格系统的应用

原创 WeDesignCenter We-Design

2020年07月01日 13:00

Sharing

当我们在做界面设计的时候，一个绕不开的话题便是网格系统 (Grid System) 的搭建。网格系统本身作为一个已经诞生了将近一个世纪的设计方法，是如何在现代平面设计中帮助设计师更好的完成日常工作的呢？

什么是网格系统

跟随着现代主义在 20 世纪初期的发展，高度理性化、几何形式化的排版系统也在慢慢形成。许多网格系统的奠基作品，如 Die neue Typographie (1928) 都出现在这个时期。

▲ 图一 · Die nenue Typographie 书本截图

网格系统最初是被使用在印刷制品上。通过一系列的基准线 (Baseline)，对纸张的平面空间进行划分。而之后在填充内容时，内容则依附于基准线进行排布。

由于最初在制定基准线时，设计师们往往会让空间的分布是有一定韵律的。因此被填充的内容也会呈现出非常优雅的排布方式。

▲ 图二 · 印刷品的网格基准线示意

我们为什么需要网格系统

网格系统能够帮助平面设计师更有条理地规划空间，因此在填充内容时，元素与元素之间的关系会更加清晰与平衡。对于阅读类型的版式内容，清晰与平衡尤为重要，因为这样读者才能以较为低的阅读成本来理解内容。此外，当设计师在处理多个版面时，网格系统能更好的规范不同版面之间的视觉风格，让最终呈现出来的视觉是统一且具有延续性的。

规范化的设计语言在多个设计师在合作完成同一个项目时的起到了润滑剂的作用。网格系统通过简单的数学规则，让工作在同一项目上的所有设计师都够以较低的学习与合作成本，创造出具有极大灵活性，且视觉上有统一性的设计方案 [1]。这样最终呈现出来的设计效果在用户看来就像是 “出自同一人” 之手。

如何在界面设计中制定一套网格系统

网格系统的搭建由制定基准线开始。当我们在处理印刷品时，我们只需要依据纸张的大小，去画基准线就好了。我们可以想象一下工作过程，首先我们通过一把刻度尺先量出合适的长度，再依据这段长度去对纸张进行平面空间的分割，进而搭建出我们的基准线网格。

然而在电子屏幕上，纸张所对应的是一个虚拟的界面，那么我们如何去准确地度量一个虚拟界面呢？

第一步：确定基本度量单位

要理解虚拟界面的度量方式，我们首先需要了解一些计算机图形学的基础知识。

如果我们用放大镜去看每一块屏幕，就会发现我们的显示屏是由一个个发光的方块组合而成。这个方块被称作 “物理像素 (Physical Pixel)”，也是一个显示屏所能显示的最小的一个单位。这个物理像素的密度，就是我们常说的屏幕分辨率。分辨率越大的屏幕，它的显示效果就越细腻，呈现效果就越清晰。

▲ 图三 · 屏幕上的物理像素矩阵示意

屏幕上所有被显示出来的物体，都会以这个物理像素为基准。例如我们可以让屏幕去显示一条宽度为 1 物理像素，长度为 10 物理像素的线条。

不过由于不同厂商的屏幕分辨率有大有小，1 物理像素宽度的线条在低分辨率的屏幕上显示效果可能会比较粗，在高分辨率的屏幕上显示效果可能会细到无法分辨。如果我们以物理像素作为度量的基本单位，那么我们很难去控制一个图形在不同界面上的最终显示效果。

因此，为了节省程序员和设计师们在绘制图形时需要考虑不同分辨率屏幕下的显示效果问题，每一个图形化的计算机系统都会提供一个有动态兼容性的 “虚拟基本显示单位”。这个虚拟基本显示单位保证了一个图形在不同屏幕分辨率下能有同样的显示效果。我们只需要通过这个虚拟基本显示单位来描述一个物体的尺寸就好了。

- iOS 系统使用的是逻辑分辨率 (Logical Resolution)，使用的基本单位为 “点数 (point)”，记为 “pt”。[2]

- 在 Android 系统中使用的基本单位 “设备独立像素 (Density Independent Pixel)”，记为 “dp”。[3]

- 在网页浏览器内基本单位为 “CSS 像素 (CSS Pixel)”，记为 “px”。[4]

▲ 图四 · 不同屏幕下的显示效果示意

第二步：确定网格的基本单位

在确定了度量单位后，我们需要去定义网格的基本单位。网格的基本单位通常是一个正方形的平面空间区域，这个正方形的宽高是基本度量单位的整倍数。通过着一个个正方形小块，我们可以均匀地对整个虚拟界面进行划分。而这些方块边界所组成的网状结构，便是 “网格系统” 中网格的由来。

我们以浏览器内的界面举例，假定我们的基本度量单位为 1px，在下图中，我们将一个宽 56px，高 56 px 的界面区域，分别以 8px 和 4px 的网格基本单位进行划分。可以发现，网格的基本单位越小，对于界面的划分就越密，基准线就越多。那么当设计师根据基准线来对内容进行排布时，可以选择的位置也就越多。

▲ 图五 · 8px 和 4px的网格划分示意

网格基本单位的决定着网格系统的灵活性与限制性。如果我们的网格基本单位定的太小，那么过密的基准线对设计师来说就失去了参考价值，因为这意味着设计师可以在界面上几乎任意位置放置内容，网格系统失去了其限制性。相反，如果网格基本单位定的过大，界面上稀疏的基准线则给予设计师的选择过少，网格系统就失去了灵活性。因此在确定网格系统的基本单位时，我们要充分地对其限制性与灵活性进行平衡。

▲ 图六 · 不同密度的网格划分示意

在大部分的网格系统中，通常会以 8 倍基本度量单位为网格的基本单位尺寸。例如在 Material Design 中，网格的基本单位为 8 dp (其主要应用平台为 Android 系统，因此度量单位为 dp)。

那么为什么是取 8 倍基本度量单位，而不是 4、5 或者 6 倍呢？这里还是基于对灵活性和限制性的考量。

首先，这个倍数需要是一个偶数，因为如果倍数是奇数，当图像在被放大 1.5 倍时，我们会碰到半像素的情况 (如下图所示)，而半像素通常在显示屏上无法被正常显示出来。

▲ 图七 · 奇数倍数的网格在等比放大时的缺陷

同样，我们还需要考虑图像需要被缩小显示的情况。若以 4 或者 6 为倍数，那么我们的图像仅仅支持被缩小一倍。而 8 则允许图像能被等比缩小两次而不出现半像素，提供了更高的灵活性。

第三步：硬网格、软网格的交替使用

在实际使用过程中，通常有两种网格对齐方式。我们常说的 “以基准线为依据” 的对齐方法，属于 “硬网格 (Hard Grid)”。硬网格是一种自上而下的排版方式，如下图所示，我们通常会依照内容区域的边界对内部进行均等划分，此后所有的元素则需要按照基准线来进行摆放。

▲ 图八 · 硬网格的排版示意

而软网格系统的版式排布规则较为松散，不会参照内容版面的大小对内容区域进行均等划分，仅仅对元素之间的距离进行规定。如下图所示。

▲ 图九 · 软网格的排版示意

在实际使用中，我们通常需要根据所排布元素的特征，在硬网格和软网格之间交替使用。针对卡片类容器，由于有确定的基准线，硬网格会更加适合作为排版参照。而针对文字内容的排版时，因为文字长度和行高往往不为 8 的倍数，因此更适合用软网格进行内容排布。

如下图所示，左侧所有的元素都严格地按照硬网格的基准线进行排布。此时我们会发现，文字下方的几何图案由于需要紧贴基准线，与上方的间距拉的太大，导致整体排版失去了视觉上的节奏感。而在右侧，文字下方的元素则处理成软网格的排版方式，保证文字与上下元素之间的间隔都是一个基本网格单位，即 8px，使得右侧的元素排版的韵律更加整齐。

▲ 图十 · 硬网格和软网格的排版展示效果

总结

由于篇幅的关系，我们仅对网格系统做了简单的介绍和探讨。网格系统本身的作用不止于此，在界面适配，响应式布局的规则制定中有着巨大的作用。相比于传统印刷制品设计，在界面设计中的网格系统是一个相对于年轻的设计准则，由于技术的进步和我们使用的电子设备的迭代，其本身依然在不断的进化和被完善当中。作为一个在虚拟空间内进行平面设计的设计师来说，了解并且运用好网格系统，是一个非常必要的技能。在文章的最后，我想用一位现代网格系统的奠基人 Josef Muller-Brockman 的一段寄语来作为结尾。

“The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one. must learn how to use the grid, it is an art that requires practice.” [5]

— Josef Mueller-Brockman, prominent founder of the modern grid system.

“网格系统是一个辅助工具，而并非是一个（设计上的）万能灵药。它给予了设计师一些可以借鉴的、且可以定制化的设计处理准则。设计师必须要掌握网格的基本方法，如何把它使用好是一个需要长期练习的过程。”

— Josef Muller-Brockman，现代网格系统的奠基人之一。

— The end —

附录一：参考资料

[1] The Grid System, Design system quickbooks, 2017.

[2] Displays, iOS Developer Reference, 2017.

[3] Pixel density, Material Design, 2020.

[4] CSS Pixel, Mozilla Developer Documents, 2019.

[5] Grid system, Design system quickbooks, 2020.

附录二：引用图源

[图一] Die nenue Typographie 书本截图，源自 “Deconstructed Graphic Design & Art Direction”。

[图二] 印刷品的网格基准线示意，源自 “Think With Type”。

[图七] 奇数倍数的网格在等比放大时的缺陷，源自 “Intro to The 8-Point Grid System”。

作者：CD

See you space cowboy...

继续滑动看下一个