网站设计中的空间、网格和布局规则

空间的组织是每一个出色的网站设计的关键，空间系统、网格和布局提供规则，使您的网站设计具有一致的节奏、约束决策，并帮助团队保持一致，这种基础支架是所有设计系统的要求。在本指南中，我们将介绍定义空间基本单元、用网格创建关系规则以及为现代UI布局将它们组合在一起的基础知识。

什么是空间系统？

从按钮的高度到图标周围的空间，网站设计师每天都在做空间决策。空间系统是一组规则，用于度量UI元素的大小和空间。空间层次上的一致性使您的产品更加一致，使您的团队更好地进行沟通，并减少了网站设计师一天内必须做出的决策的数量。空间系统的一个例子是“8pt网格”。“然而，有许多变体和配置可供选择。

例如，请注意登录表单在没有立即可识别的空间模式时的感觉。对用户来说，这种设计可能会让人感觉廉价、不一致，而且通常不值得信任。节奏的可预测性是视觉上的愉悦，是你对自己信任的品牌的期待。

当这个相同的登录表单被调整为遵循一个8pt空间系统时，节奏变得可预测和视觉上的愉悦。对于用户来说，这种体验是经过修饰和可预测的，这增加了对品牌的信任和喜爱。

无论谁在设计，现在有一个一致的空间语言和选择，你必须大大减少。您可以轻松地从另一个网站设计师停止的地方开始，或者轻松地并行构建。由于这些决策也被捕获在代码库中，因此可以为工程师节省时间。

如何建立一个空间系统？

定义基本单元将允许您在空间系统中创建支持的大小范围，查看web上的不同产品，您将看到一些不同的实现方法。您将看到4pt、5pt、6pt、8pt、10pt增量系统。这里没有错误的答案，只要你知道这些方向促进和防止什么。

我喜欢的方法是对元素使用8pt线性比例，对间距图标或小文本块使用4pt半步。我喜欢4pt的基线网格，这意味着我的字体选择的行高总是能被4整除。该系统旨在减少混乱，但也易于实现。

当你探索建立自己的空间系统时，合理地考虑你的需求。这里有一些事情需要考虑：

用户需求

考虑你的设计的用户和你所追求的一般品牌审美，你想要一个宽敞的用户界面，大字体风格和有限数量的行动？您是否需要为技术用户构建具有复杂数据表和多个操作的信息密度？调查你现有的设计，并创建一个情绪板，以获得清晰度和对齐为您和您的团队。

数量的变量

选择较小的基本单元，如4pt、5pt或6pt，可能会导致系统中出现太多的变量。现在很难分辨12分和16分的差别，这使得整个球队很难保持一致。发现8pt增量是视觉上的距离与合理数量的变量之间的平衡。

奇数

在空间规则中引入奇数（如5pt基数）会使不拆分像素的元素难以居中。例如，25像素高的按钮中的居中文本和图标可能会为一些用户创建模糊的分割像素。在类似的方面，对于需要1.5倍缩放的不同移动和桌面屏幕，缩放ui将导致分裂像素的模糊。

如何应用空间系统？

对UI元素应用空间范围可以采用填充、空白、高度和宽度定义的形式。下面的示例显示，有时不能同时执行划桨操作，因为这是一个严格的高度定义。

在这个例子中，你可以看到这个文本的行高是20px，但是如果在顶部和底部使用8px的填充，按钮的高度将是36px。我应该优先考虑哪些度量？有两种方法可以解决这个问题：

元素优先（严格的元素分级）

在这种方法中，实体元素的大小在与预先确定的空间系统匹配时具有优先级。这包括按钮和表单输入。这些元素更可能具有可预测的内容，并且是在整体构图中创建节奏的关键。

内容优先

当内容的可预测性较差且我们关心其显示时，我们将希望强制执行严格的内部填充，并允许元素大小由其内容决定。这些元素的大小可能仍然符合您的空间系统规则，但这是次要的内容周围的间距。这对于用户内容不确定的表非常有用。

内部或外部的边界位置

概述的元素，如按钮或卡可以抛出一个扳手的东西。如何计算2px的边界？它在代码中的计数方式与在Figma中的不同。哪一个是你的真理之源？

Figma测量元素，而不是元素的边界。在网站设计上，有两种不同的处理方法。box-sizing属性可以是border-box或content-box。要查看它的实际操作，请查看这个代码页并阅读本文以了解更多信息。这里的TL;DR是指大多数现代web运行在border-box上。

您几乎总是可以使代码达到像素级的完美，但是如果您在实现上与团队不一致，您可能会牺牲简单性和可扩展性。再次，与你的团队进行这些对话来确定你自己的立场。

什么是网格？

空间系统定义大小和间距规则，而网格帮助您将内容安排成结构化的命题。早期的印刷网站设计师利用网格将文本块和图像组织成令人愉悦的视觉层次，这有助于提高可读性。随着设计的发展，同样的基本原则仍然适用于信息的二维组织。

列网格

列网格帮助您将内容组织成均匀间隔的垂直列，列之间的空间称为天沟大小。将您的空间系统规则应用到水槽将有助于在您的设计中驱动一致的节奏。一个常见的例子是12列网格，因为它允许您将给定的区域分成一半、三分之一、四分之一、六分之一。

模块化的网格

模块化网格考虑列和行来将内容组织成矩阵结构，模块化网格对于像书这样的严格格式布局是理想的，但是对于相对大小的响应式web布局可能会出现问题。记住，这并不一定要包含整个页面布局。模块化网格是一种组织工具。你决定在哪里开始和结束。

基线网格

在传统的平面设计中，基线网格用于设置从一行文本到下一行文本的引导。但是，在网站设计上，我们根据行高而不是基线来放置文本。这是一个细微的差别，但是在跨平台设计时应该注意这一点。不管你的排版是如何测量的，同样的基本原则适用——将排版设置在一个一致的网格上将更容易组织，创建垂直的节奏，并在美学上令人愉悦。

组成一个布局

布局是已定义的空间规则和内容组织成一个单一组成的顶点，将你的内容整合到一个有思想的结构中是比较容易的部分，让它在一个变化的平台和屏幕大小的海洋中清晰的层次结构中流动是比较困难的部分。

定义扩展逻辑现在是本地和web应用程序的需求，从台式机到手机，以及介于两者之间的所有产品，其屏幕大小和比例可能相差很大。这里有三个主要的概念来设计一个可以优雅伸缩的布局。有些设计需要同时使用这三个概念。

自适应

自适应布局是一种完全根据其格式进行更改的布局，例如，根据桌面、平板电脑和移动设备加载不同的体验。这为用户的设备提供了更加量身定制的体验，但将相同的功能重新构建成多种格式可能会变得昂贵。

响应

响应式布局是流动的，可以适应不断变化的格式大小。这是web上的一种常见做法，随着屏幕大小的变化越来越多，这已经成为本地应用程序的必要。这允许您一次性构建一个功能，并期望它可以跨所有屏幕大小工作。缺点是，触摸和鼠标交互非常不同，而且考虑到所有设备和用例的成本很高。

严格的

这个布局不会随着格式大小的变化而伸缩，固定布局通常用于促进特定的交互或信息布局，而这些布局在较小的尺寸下就会退化。数据表和图通常会创建一个特定大小的可滚动的严格布局，因为可读性和交互作用将显著降低到特定大小以下。

如何在现有的设计集上实现空间系统？

从零开始很容易，挑战在于改造现有的设计，第一步是让你的其他合作者参与到对话中来。如果不列出与他们的角色相关的价值，说服团队成员和涉众改变当前的产品开发过程是很困难的。工程师们想要更清晰的需求，而不是花时间在一个吹毛求疵的网站设计师告诉他们“填充物被去掉了”上。产品经理们想要更快地交付用户和业务价值。网站设计师希望他们的设计能够快速有效地直接转化为连贯的用户体验，所有这些都可以通过投资一个共享的空间系统来实现。

从小事做起，重建一切以适应一个新定义的空间系统似乎是艰巨的。寻找要转换的简单组件，如按钮，然后将其扩展为它们的公共兄弟元素，如表单字段。与你的团队一起建立动力和理解。监管设计系统就像赶猫一样。授权那些人，比如工程师，他们将执行系统来维护和执行它。

做出平衡决策，向利益相关者证明这一工作如何减少设计/技术债务，并在此过程中提高速度。完成一段工作后，比如组织图标从设计到实现的工作流程，花点时间通过采访团队来捕捉之前和之后。利用队友对你节省时间的评价来强化你工作的价值。无论您是为一家杂乱的初创公司还是大型企业工作，不投资于设计系统计划的常见原因是，业务是通过为用户提供价值而不是组织完美的空间系统来直接维持的。

保持这种势头，一旦你开始了，在脑海中有一个完成改变的愿景和日期。一半的工作被困在一个空间系统中，另一半工作被困在一个不确定的地方，这是一个艰难的处境。它使为用户创造新价值变得更加复杂。制定一个有明确里程碑的计划，为团队创建可见性，并分享过程中的进展。