交互设计里的网格系统是什么？怎么用？

本文转自墨刀翻译自 MADS SOEGAARD 的The Grid System: Building a Solid Design Layout。

网格，主要是跟设计的结构和背景相关。设计师们很容易忽网格的力量，而更多地去考虑想要创建的元素。许多传统设计师仍然在一系列线框上画出他们的杰作。为了帮助我们最大限度地利用我们的工作界面并精确地设计，我们设计师有一个利器：我们称之为网格系统。

网格的故事

实现工整设计的最简单方法之一是用网格系统。这是一种久经考验的技术，最早在印刷版式中得到青睐。（它拥有）低技术门槛和便宜（的特性），对作为设计师的你来说的一个很棒的资源，可以把他列入你办公室的十大工具。交互设计中的网格也有助于在具有不同屏幕大小的多个设备上提供一致的体验。当用户看到熟悉的功能如他们所期望的那样显示出来时，他们会很高兴。

网格系统根据列和行的顺序来对齐页面元素。我们使用这种基于列的结构，在整个设计中以一致的方式放置文本、图像和功能。每个元素都有它特定的位置，我们可以立即看到它的位置，并复制到其他地方。回想我们在地图上找到的网格。岛屿、城镇、湖泊出现在地图确切的部位，在一组南北/东西坐标上。在其他地图上，它们始终出现的同一位置。GPS会获取这些坐标位置来为我们导航；想象一下，如果没有坐标体系，GPS对我们的导航将会是一片混乱！

网格系统最一开始是用于纸张上的手写体，后来用于出版印刷中。考虑到纸质页面和电子页面有很多共同点，我们在web和app设计中也使用它，也就不足为奇了。在电子页面创建网格系统比为纸质页面创建网格系统要复杂一点——浏览器处理信息的方式不同，屏幕大小也不同。不过值得庆幸的是，原理是一样的。

但这并不是说没有人反对网格系统，也有一些设计师认为：网格限制了创造力。虽然这点可能是真的，但重要的是你要意识到现在许多设计师经常使用网格系统，因为它在组织信息面非常有效。

最好的布局是——不让内容分心的布局。由于它的数学式的精准度，网格系统就是一个典范布局方式。

以网格为设计原则

13世纪的法国设计师维拉德·德·霍内科特（Villard De Honnecourt）将网格系统与黄金比例相结合，以产生基于固定比例的页边距的纸质页面布局。这种方法一直延续到今天，你可以从大多数纸质印刷书籍和杂志中看出来。出版商、编辑和设计师之所以如此努力地保持这一传统，不仅是因为这是众所周知最好的方式，还有一个重要原因：读者（即用户）希望在该在的地方找到该有的元素。记住，人的眼睛是被元素吸引的； 如果布局让它困惑，或者出现一个它没预料的问题，视觉上就会感到不适。

作者/版权所有人Jason Prini。版权条款和许可：CC BY-NC-SA 2

让我们尝试一个快速的实验，来看看网格有多有效。如果你手边有两张空白纸，可以在其中一张纸上随意画出四、五个形状。这只是一个简单的说明，不用担心整洁问题和几何形状。完成后，尝试把它们复制在第二个空白页上（不许将第二页放在第一页下面，然后再次描绘痕迹来画形状这样来作弊）。即使你有一个非常敏锐的眼睛和特别稳的手，你也会注意到：几乎不可能复制第一个设计，保证所有元素都出现在同一个位置。

这项实验的第二部分是可选的，但它将有助于我们理解这一点。如果有方格纸或图表纸，再重复上述步骤。有参考能“引导”你的手时，复制你的原稿是多么容易哈！ 因为这种特殊纸张上的相交线构成的网格给了我们参考标准。 通过练习我们眼睛记住它们位置在第几横行、第几竖行的位置，我们可以用手复制出几乎像复印机一样完美复本。

本文顶部的图片说明了打印页面的组成部分：页眉、页脚以及左右页边距。在页边距内，设计师创建了大小相等的列（ column），列之间有一个空格，称为间隔（gutter）。知道页面可以包含一个或多个列（row），设计师可以在这些列中放置图像和文本等元素，与其余内容对齐。图像和文本段落也许会在一列或多列中重叠。

与垂直网格线创建这些有用列的方式类似，水平网格线将指导设计中元素的高度。网格的这些部分称为行。作为设计师，我们希望使每行的高度与列的宽度成比例。例如，列宽与行高之比为3:2、4:3等。

请注意，我们如何在页面布局中均匀地排列行，以及如何在每行之间插入“间隔”。然后，我们可以将页面内容的元素放在一行或多行中，如顶部的图所示。

交互设计中的网格

在交互设计中，网格系统在组织页面上的元素的行为与“打印”布局类似。此外，它还为设计师创建支持不同屏幕大小、响应主题的多个布局提供了参考指南。

我们将网页布局划分为列，列之间用空白分隔。列的宽度和边距相等，我们可以根据设计的布局将内容放置在一列或多列中。

网格的应用意味着设计可以分成多个列，这些列可以帮助设计师组织内容。例如，我们可以有一、二、三、六、十二或更多列。与早期的计算机相比，今天的屏幕分辨率达到了非常大的尺寸。即使如此，使用960像素的宽度可以确保设计在许多计算机屏幕上正确显示。它还可以帮助设计师修改移动设备的布局。

原型设计工具墨刀就提供了“网格”功能，在原型项目的「页面设置」里，你可以自己设置网格显示与否，并设置网格的“行数”，“列数”和“间隔”，以让用户更好地进行界面设计。

网格系统长期以来一直在帮助各种类型的设计师（包括创作者）。网格系统最初被13世纪的一位设计师使用，他将其与黄金比例相结合，几个世纪以来一直是一种经过尝试、测试和信任的方法。它首先赋予了创作者在纸上书写整齐的位置，后来成为出版业的普遍标准。各地出版社都严格遵守网格系统，制作出用户既赏心悦目又符合预期的版本。

作者/版权所有人：劳伦·曼宁。版权条款和许可证：CC by 2.0

关于设置元素，网格提供了极好的精度。我们可以在地图上最明显地看到这一原理，并指出如何使用代表坐标的网格线来精确定位位置。对精确制图的追求将使导航员能够发现世界上许多未知地区的新地方。现在，借助同时标出经度和纬度的网格线，GPS设备使我们能够到达想要去的任何地方。

然而，制图者的地图代表了固定的“设计”，这些设计在很多年里只有很小的变化。制图学可能是一门科学，但网格，以其数学精度，也是设计师们非常需要的杰出工具。纵观历史，设计师们一直在利用网格线来规划和绘制自己的图像，这些图像捕捉到了最佳、最令人愉悦的比例。

网格易于创建且几乎免费，它还使web和app设计师能够以精确、有组织的方式来安排我们的工作。网格使我们能在交线框中插入元素，能够在多个设备上获得一致的用户体验。例如，我们电脑和智能手机屏幕的尺寸和布局不同。 对我们的工作进行规划，使其可以调整以出现在不同的平台上，从而使我们的设计保持完整，按比例，并在用户希望找到它们的地方保持不变。

设计师使用列和行，根据设置的列宽和行高比例（如3:2或4:3）以及“间隔“（这些“框”之间的空间）来以最佳方式呈现我们设计的元素。

尽管我们拥有非常高的屏幕分辨率，可以显示出更加令人印象深刻和逼真的设计，但是通过使用基于960像素宽度的网格，我们可以确保我们的设计能够正确转换以显示在许多屏幕上 电脑屏幕和移动设备（例如手机）。然而，我们有丰富的资源可以利用，帮助我们微调我们的网格系统的选择，使其与所需的设计相匹配。

论使用网格系统来构建设计，都应牢记其他原则，例如黄金分割率。为了创建一致的用户体验，还需要创建一个令人愉快的用户体验，该体验将在许多设备上保持一致。如果你要你的选择与用户的眼睛的已知趋势相一致，那么你将能够创建外观更好的醒目设计，如用户在计算机、平板电脑或手机屏幕上看到的那样。