为更快地设计和开发创造一个可预测及和谐的空间系统框架
原文：https://blog.prototypr.io/a-framework-for-creating-a-predictable-and-harmonious-spacing-system-8eee8aaf773c
使设计和开发团队能够有意识地使用空间来提高产品的可读性和一致性。
简单总结我的方法
最近，我致力于为Practice Fusion的EHR(电子健康记录)产品定义空间系统，以确保提高所有页面的可读性和一致性。我提出了3个空间规则(提示:3个C的规则)和4个空间值，这与新的排版系统非常协调。
问题
当垂直放置元素时，设计者必须永远不应该让元素被随机放置。通常情况下，设计师们会通过按住shift和箭头键，在Photoshop中实现垂直增量:“我使用5或10px，这要看情况。这种方法对于水平方向是合理的，因为列是10的倍数，但是它不符合任何排版的现实。
— Robert Bringhurst (Author of “The Elements of Typographic Style”)
在Practice Fusion的EHR产品中，我们使用的是5px, 10px, 15px, 20px的边距。在使用这些间隔值时，我们没有遵循任何严格的指导方针。
外边距/内边距只是间距谜题的一部分。字体的行间距也在UI中添加了相当大的空间。我们没有为任何(旧的)类型样式设置行间距值。因此，UI开发人员必须假定行间距，并以额外的空白/填充值作为补充，以使整个空间与设计规范相匹配。由于这种方法，整个产品中添加了特殊的外边距/内边距。
类似的组件和内容在产品中看起来非常不同。这使得我们的EHR产品出现了一个整体的不一致的外观，并且由于数据密度的问题影响了流畅的阅读体验。
首先
不要在没有尺度的情况下排版。文字应该是定义几乎所有其他东西的尺度。
— Robert Bringhurst
第一步:确定正文行间距(以及作品的基线网格)
我从一个假设开始，即假设非常流行的8点基线网格(即8个间距的倍数/因数)将会起作用。因此，在我的实验中，我将我的正文字体的字体大小设为13px，行间距设为 8- 16px的倍数，然后是24px，看看这些值是否有作用。结果这两个值都不行——这意味着8点基线网格不会起作用。
然后，我将我的正文字体大小设为13px，甚至将行间距设为16px到24px之间值。一开始，我将它与18px(一个6的倍数)配对，如果它成功了，就意味着我采用了一个6点的基准网格，即6个点的倍数/因数(也就是2、3、6、12、18、24..)。然后，我尝试了20px的行高。它运行得很好，我清楚地知道，我可以采用了4点基线网格，即4个点的倍数/因数(也就是2、4、8、12、16、20的间隔值)。
第二步:Hick定律和几何级数来确定间隔值。
随着选择数量的增加，做出决定变得非常困难。
— Hick’s law
要想出一个可预测的系统来简化决策过程，将数值保持到最低要求。
间距值是基线网格数(第1步中确定的4)的因数或倍数，因此，我的间距值将从这个集合中来(2、4、8、12、16、20、24、28…)。
通常，4-5个值似乎显示了足够的差异，即使对于复杂的企业产品来说，也似乎足够了，但是如果您在探索过程中真正感到需要的话，您可以添加更多的间隔。
我决定选择使用几何级数导出的前4个值，因为它提供了更好的视觉感知间隔(用于显示层次结构)。我的间距值是(2,4,8,16)
参考 Nathan Curtis’s Spacing in Design systems 关于他选择数值的分析
如何以可预测的方式应用这些间隔值?答案是三个C。
我受到了内森·柯蒂斯(Nathan Curtis)所著的《Insets》、《stack & Inline》等词汇的影响。我决定在上面附加一层词汇表，以便让我的团队每个人更容易理解该内容的使用。我将所有的间隔规则分解为3个C:容器、内容和组件。Containers, Content & Components.
容器的规则使用洗手盘的概念(使用16px)
内容的规则使用堆栈概念(头栈使用2px和叶节点堆栈使用0、4、8、16px取决于内容类型)
组件的规则使用内联的概念(大多数情况下使用8px，关联关系使用4px)
1st C: Rule for Containers
容器是UI中包含内容的框架。通常这些都是页面、卡片、模型、窗格等等。由于容器在层次结构中处于最高级别，所以我确保所有容器的间距值都是最高的(在我的例子中是16px)(也定义为Nathan的“square inset”)。提示:在任何间距计算中都不包括边框。（Elliot Dahl’s 8-point grid: Borders and Layouts 这篇文章中做了很好的解释）
2nd C: Rules for Content
内容生活在容器内。内容包含:
标题(h1,h2,h3,h4,h5)
以段落、列表、表单、表(在标题层次结构的末尾出现，因此被称为“叶节点”)的形式对数据进行交互。
所有这些内容都是用空白间距垂直堆叠的。但是，文字行间距也增加了额外的间距到特定的边距。Nathan在他的文章中提到，使用一个混合来解决这些与行高度的冲突。我不知道如何以一致的方式去做，所以我创建了自己的处理堆栈的方法，同时考虑了行间距和边距。这是我的过程:
A)首先解决标题堆栈。
正如您在下图中所看到的，我从两个选项开始，分别是标题的行间距。想了解更多关于我如何做到这一点的细节，请阅读我的排版系统文章。 read my typography system post.
为了简化每个行间距在2个选项之间的决策，我为每个标题计算了间距比率，并决定将其设为大于或等于1.5。我还在犹豫这几个选项。但是，在进行了可视化的探索并在设计团队中回顾了结果之后，我们得到了一个明确采用什么行行距的选项。
视觉探索的过程
我从标题堆栈顶部的h1开始，尝试不同的间隔选项，依次从(0px)， 2px, 4px, 8px进行。36px行间距的大部分上下间距选项感觉很紧，但4px上下间距与行间距40px感觉恰到好处!
我接下来解决h2。在我们的产品中，h2恰好是白色页面容器中的第一个标题。根据容器的规则，顶部的h2在顶部有16px间距。我决定在所有h2上留出16px间距(最大允许间隔)，因为这个值使得父类层次结构非常清晰。
接下来，我用0px、2px、4px和8px的上下间距值在所有标题 (h2、h3、h4、h5)和叶节点(列表、段落、表、表单)之间尝试。2px和4px的间距已经感觉够近了，但是在我们在设计团队内部审查结果时发现2px的间距感觉稍微好一些。于是尽量只使用1个值，因为它简化了设计和开发过程。
B)接下来解决叶节点堆栈。
Practice Fusion的EHR有4种主要的叶节点:
表格(几乎占产品50%)
列表(几乎占产品的30%)
表单(可能占产品的15%)
段落(可能占产品的5%)
我开始处理最简单的内容类型——段落的间距。
每段段落之间的距离
这是最简单的部分——简单地将段落中的所有行都找出来，这样在两行之间就有0px的边距。所有看起来不像列表的东西(例如表中的2行内容)，也有段落间距。
两个连续段落之间的间距
我的第一个冲动是使用等于行间距20px的间距。但是,我想到WCAG SC 1.4.8那里说——"段落间距(至少)是行间距的1.5倍,我们指的间距是从一段的最后一行的顶部的250%距离是下段的第一行的顶部。" 假设%的值是根据13px的基本字体大小来计算的，我计算了两段之间的实际间距应该是(ps ——ls) = 13px，这将在CSS中使用margin-bottom: 13px来定义。现在，13px不是我们在步骤2中确定的间隔值。因此，我为段落选择了最接近的间隔值，大于13px，即16px的margin-bottom。
我发现这两种准则在值上没有对齐，但非常接近。我将第一行解释为ps = 1.5 x ls = 1.5 x 1.5 x 13px = 2.25 x 13px。第二行解释:ps = 2.5 x 13px。如果你们中有人以不同的方式解读这些指导方针，请在评论中告诉我。
当我对计算有疑问时，我总是用视觉探索来反复核对。与其他可能的值相比，段落之间的间隔为16px。(我认为12px的间距更好。但是，我不想为这个用例添加一个额外的值，因为我们的EHR产品没有很多段落，几乎没有连续的段落。
列表项中的间距。
列表是由多个同类数据项组成的数据结构。很重要的一点，由于列表将所有这些同类的数据项分组，所以列表项的间隔不像段落(在它们之间有16px)，段落通常具有不同的观点。与此同时，列表项仍然需要分开一些，否则它们可能看起来像一个段落。我尝试了在0px和16px之间的间隔。我用3个值来做实验- 2 4 8。结果列表项之间的4px间距看起来是层次结构最好的。
两个带有标签的连续输入框之间的间隔。
两个不带标签的连续输入框之间的间隔。
没有标签不是一个很好的可访问性的实践。然而，在某些情况下，似乎最好不要在UI中显示标签(但要继续在实现中声明标签以确保可访问性，并使用巨大的边距将其隐藏在视图中)。这些场景是:
当多个输入字段一起表示1个对象时(例如，在下面的地址部分中，“Address”自定义组件下的street Address 1, street Address 2, city, state, zip)
当标签太明显或者重复而难以拼写出来时(例如，搜索栏或查询生成器)
在这种情况下，取决于您是否使用自定义组件，具体问题具体分析，由于自定义组件字段意味着一个对象，所以它使用的间隔更少(8px)。但是，当您不希望正常地将输入框组作为为一个对象时，更多的间隔可以使用(16px)—就像连续的段落间距一样。
表格里的间距
表对于分组类似类型的数据非常有用，就像列表一样。但是，当数据更加密集且具有许多属性时，将使用表。因此，表的间距考虑略大于列表间距。如果数据间隔太近，则很难通过整个表行读取数据，而不会被相邻的行数据分心。通过在表文本和表行边界之间尝试加8px间距，我们得到了在两行之间的文本间距为16px。这与我们连续的段落间距16px非常相似。
第三个C:组件规则。
组件是按钮、输入框、图标等等。这些组件通常是相互水平放置在一起的(内联)。所有的组件都是大小为4(也为8)的倍数，所以按钮和输入框的内部空间高度为24px(加上1px顶部和1px底边框，整体高度为26px)。当单独的组件和文字完全在基线网格上，并且按比例间隔时，整体布局是完美对齐和协调的。
两个组件的间隔
我使用了一个简单的规则，将8px用于任意两个相邻组件之间的间隔。在一些情况下，我决定使用4px来显示两个组件之间的紧密关系(格式塔的接近法则)。
组件内的间距
我在组件内的任何左/右边框都使用了8px。
带有图标组件内的间距
再一次，应用Gestalt的接近法则，我将图标分组在一个组件中，将它们间隔为4px，而不是通常的8px。
组件和外部图标的间距
如果一个图标与一个组件相关联，那么它的间距为4px，显示关联关系(格式塔的接近原则)。但是，如果一个图标与一组组件相关联，那么它就会从最后一个组件的8px空间中间隔开来，以澄清它与最后一个组件无关，而是与整个集合相关联。
总结
遵循这个过程:
您将提出一个具有有限值和有限应用规则(Hick的定律)的间隔系统，这是非常容易和符合逻辑的(Gestalt的接近原则)。
您将在UI中使用间距，这样它会遵循信息层次结构，并遵循可访问性准则WCAG 1.4.8。这将使不同能力的人更容易地追踪和理解信息。
如果你读过我的排版系统，我这里可能听起来像打破纪录。但是，我将在这里重复一遍——设计开发的handoffs将会变得更快，因为开发人员也会了解间隔系统的所有应用规则，并且能够预测设计人员交付的原型的间距。
设计师可能不需要修改所有的内容。开发人员不需要花时间在诸如Zeplin之类的其他工具中检查原型。