谢谢大佬 
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
如何合理创建间距系统，来更快的实现设...
- 经验类型经验/观点原作者：Priyanka Godbole
- 经验属性自译外文
- 经验版权署名-非商业性使用-相同方式共享
14924
42
113
2019-03-20
让设计师和开发团队有意识的利用好间距系统，可以提高产品的可读性和一致性。
Cheatsheet总结了我的方法
我最近致力于为电子健康记录（EHR）产品定义间距系统，以改善产品页面的可读性和一致性。我提出了3个间距规则（3C规则）和以4为基准的间距网格，并且这些规则与新的印刷系统配合得非常好。
存在的问题
当定位垂直元素时，设计师不应做出随意或者任其自然的判断。通常设计师通过按住Shift和上下箭头键在Photoshop中实现垂直增量：“根据实际情况来决定使用5px或10px。”这种方法虽然是10的倍数并且可用，但是它不符合任何印刷要求的规范。
——Robert Bringhurst，著有《印刷风格元素》一书。
我们在EHR产品中使用了5px、10px、15px、20px的边距/填充，但是在何时何种情况下使用这些间距，我们并没有一个严格的规范。
边距/填充只是间距系统的一部分，字体行高也会增加额外的高度空间，但目前我们没有为现有（旧的）文字样式创建行高规范。
相似的组件和内容在产品中看起来不一致，这造成了EHR产品的整体样式不统一，并且因为数据疏密程度不同，造成了阅读体验的不流畅。
解决问题
步骤1：确定文本行高（确定基准网格）
首先我们假设使用非常流行的8点基准网格（即以8的倍数为一个间距规单位）会达到好的效果，因此在实验中，我把基准主体字体大小设置为13px，行高设置为8的倍数即16px或则24px然后看看这两个行高规则是否有用。如果没用，则意味着8点基准网格是不适用的。
然后我将基准字体大小设置为13px，并在16px和24px之间的偶数寻找行高值。开始我将它与18px（6的倍数）匹配，如果成功那就意味着我采用了6点基准网格，也就是6的倍数（间距会是3、6、12、18、24）。后来我尝试了20px的行高，使用起来效果很好，所以我采用了4点基准栅格（也就是间距为2、4、8、12、16、20等）。
步骤2：用希克定律和几何级数来确定间距值
“随着可选择数量的增加，做出决定的难度将会增加。”
——希克定律
我们要想出一个可感知的间距系统来简化设计决策，另外将所需值的数量保持在一个最小范围内。
间距值是基准网格的倍数数值（如步骤1中确定的4点基准网格），因此我的间距值为4点基网格（2、4、8、12、16、20、24、28…)
一般来说，4–-5个间距值已经为产品设计提供了足够的差异性，即使对于复杂的企业产品也足够了，但是在实际过程中可能需要灵活的在规范中增加间距值。
我决定使用4点基准网格，因为它提供了更好的视觉可感知区间，对于层次结构的展示来说非常好，因此间距值应该是(2、4、8、16)。
如何以可预见的方式应用这些间距值？3C法则来拯救你。
我深受Nathan Curtis上面文章中介绍的Insets，Stacks＆Inline等间距词汇的影响。我决定在其基础上构建一个额外的词汇组，以便我的团队更容易理解每个词汇的使用环境。我将所有的间距规则分解成3个C：容器、内容和组件。
· 容器规则使用了平方差的概念（使用16px）
· 内容规则使用了堆栈的概念（头部堆栈使用2px，叶节点堆栈使用0、4、8、16px具体取决于内容类型）
· 组件规则使用内联的概念（大多数情况下使用8px，4px表示关联关系）
第1C：容器规则
容器是UI中的框架，其中包含内容，通常这些内容是页面、卡片、模态、弹窗等。由于容器在层次结构中处于最高层次，所以我确保所有容器的间距值（在我的例子中是16px）。提示：切勿在任何间距计算中包含边框。
第2C：内容规则
内容存在于容器内部，内容包含：
标题（h1、h2、h3、h4、h5） 以段落，列表，表格，表格的形式穿插数据。
所有这些内容都是使用页边距垂直叠加的，但字体行高也为指定的页边距增加了额外的间距。我无法以一致的方式解决这个问题，因此我同时考虑了行高和边距，创建了自己的处理堆栈的方法，以下是我的过程：
A）首先解决头部堆栈
- 如下图，我通过使用2个选项来获取标题的行高。
为了简化这2个选项之间的行高决策，我计算了每个行高比，并决定使用等于1.5或更高的行高。对于选择哪个行高，我仍然犹豫不决，但是在进行了视觉探索并回顾了设计团队的结果之后，我们确定了应该采用那个行高选项。
视觉探索的过程
我从顶部的H1开始，尝试使用2px、4px、8px等的不同间距选项。行高为36px的间距选项都很紧凑，但4px间距与行高40px感觉恰到好处！
- 接下来我解决了H2问题，在我们的产品中，H2恰好是白色页面的第一个标题。所以根据容器规则，最上面的H2在顶部有16px。我决定在所有H2标题上面给出16px间距高度（最大允许间距值），因为这个值使得层次结构非常清晰。
然后我在所有标题（H2、H3、H4、H5）和列表、段落、表格之间进行了间距值0px、2px、4px和8px的实验。2px和4px的间距相差无多，但是我们在设计团队内部审查结果时，2px的视觉感知更好，尽可能的坚持只有一个边际数值，因为它简化了设计和开发过程。
标题和叶节点间距实验
标头堆栈 - 间距为2px和4px
B）接下来解决叶节点堆栈
EHR有4种主要类型的叶节点：
- 表单（几乎50％的产品）
- 列表（几乎30％的产品）
- 表格（可能是产品的15％）
- 段落（可能是产品的5％）
我开始为最简单的内容类型——段落来处理间距。
每个段落内的间距
这非常简单，只需要清空段落中的所有文本行空间，这样两行之间就有0px边距。
Sketch中的排版段落（行高20px是通过视觉探索得出的，并使用WCAG SC 1.4.8进行验证，其中规定“ 行间距至少是段落内的空间的1.5倍 ”（20/13 = 1.538）
两个连续段落之间的间距
我第一个想法是使用行高为20px的间距，但后来看到了WCAG SC 1.4.8，其中指出 “段落间距至少要比行间距大1.5倍，因此一段最后一行的行高为250％，这样可以保持距离下一段第一行间距更合适。 假设％值是根据基本字体为13px的大小计算的，我计算出两段之间的实际间距应约为（ps - ls）= 13px，将使用margin-bottom：13px在CSS中定义。但是13px不是我们在步骤2中确定的间距值之一，因此我选择了16px作为段落底部的边距。
解释WCAG SC 1.4.8中的段落间隔规则
在Sketch中多段落排版
如果对计算结果有疑问，我总是用视觉探索进行交叉检查。与其他可能的值相比，段落之间的16px间距最佳。其实我认为12px间距会更好。但是我不想仅为这个用例为整个间距系统添加额外的值，另外我们的EHR产品没有很多段落，几乎没有任何连续的段落。
列表中列表项内的间距
列表是由多个同质数据项组成的数据结构，由于列表将所有这些同质数据项组合在一起，因此列表项不像段落（它们之间有16px）那样间距很重要。同时列表项仍然需要稍微分开，所以我尝试了0px和16px之间的间距，我只有3个值可以试验2、4、8，总体看起来列表项之间的间距为8px看起来最适合层次结构。
带有标签的2个连续输入字段之间的间距
表单有连续的输入字段，一个接一个地叠加在另一个之下。
无标签2个连续输入字段之间的间距
无标签对于可访问性来说并不是一个好的处理方式。然而在某些情况下，标签最好不要显示，这些情况是：
- 当多个输入字段一起表示1个对象时（例如在下面的地址部分，“地址”字段包括街道地址1，街道地址2，城市，州，邮编）
- 当标签过于明显/重复且无法拼写时，例如搜索。
第3C：组件规则
组件有按钮、输入字段、图标等，这些组件通常放置在一起（内联）。此外所有的组件的尺寸均为4的倍数（也是8的倍数），因此按钮和输入域内部有一个24px高度的空间（加上1px 顶部和1px的底部边框，整体高度为26px）。当组件能完美利用好基准网格，并且按规则设置间距时，整体布局才会完美和谐。
2个组件的间距
我用了一个简单的规则，即在大多数时候任意2个相邻组件之间使用8px间距。在少数情况下使用4px来显示两个组件之间更紧密的关系（格式塔的接近性原则）。
组件内部间距
我对组件内部的任何左/右填充都使用了8px。
图标在组件内部间距
根据格式塔的接近性原则，将图标放在组件内，将他们的间距设置为4px，而不是通常的8px。
外部图标与组件间距
如果图标与组件关联组合，则其与组件间距为4px以显示其关联关系（格式塔的邻近原则）。但是如果图标与一组组件关联，那么它与最后一个组件间距8px，以表明它不仅仅是与最后一个组件关联，而是与整个组件关联。
结论
- 你将提出一个具有有限数值和有明确使用规范的间距系统，这非常易于使用并且合乎逻辑记忆。
- 在UI中使用间距，使其信息层次结构更加合理清晰，并遵守可访问性指南WCAG1.4.8，这有助于不同能力的人更好的掌握和理解信息。
- 开发工程师了解间距系统，并且熟悉其应用的场景和规则，这样可以让设计和开发之间的沟通更顺畅，工作效率更高等。
- 设计师不再需要对所有内容进行排查，开发工程师不再需要花时间检查Zeplin等其他工具中样式问题。
全部评论：42条
-
-
-
-
-
-
-
-
-
colala
2019-04-11 15:51发现一个问题。开发说这样不行。line-height不能被设计直接占用。也就等于说一个应用内的所有文字不能全部做行高设置。为啥antd，钉钉之类的官方设计sketch源文件都会给一个文字的偶数height，但是在开发好的页面上却完全不能体现
-
萝莉音
2019-04-10 17:07说实话，看不懂，才疏学浅超级赞，加qu）n：【583】【915】【450】，每天晚上八点免费公开讲解课哦，很适合零基础，群文件有PS、AI软件下载，教程视频。
-
-
-
Zhou_Zhou
2019-04-05 11:09感谢大佬的分享，读完受益匪浅。有一处不是很明白，希望大佬指点迷津。【第2C：内容规则中[标头堆栈 - 间距为2px和4px]实验里没看明白第一排中间图里为什么用4px（橙色的）而不是2px？第一排不应该是2px的试验，第二排才是4px的试验么？还有就是文中有一处读了很多遍没读懂，后来查了一下WCAG SC 1.4.8才读懂，“行间距至少是段落内的空间的1.5倍 ” “段落间距至少要比行间距大1.5倍”这里的“行间距”应该为行高（行距）。WCAG SC 1.4.8里写的是Line spacing (leading)。行间距会理解为两行之间的间距。所以之前我想了很久0间距的1.5倍是多少这个问题
-
-
-
-
-
-
-
-
-
-
Jessie_J
2019-03-26 14:33请问：“段落间距至少要比行间距大1.5倍，因此一段最后一行的行高为250％” ，配的例图却是用字体大小13X2.5,为什么不是用行高X2.5也就是(13X1.5)X2.5 。不知道是不是哪里理解的不对，还请帮忙解释下
-
-
-
-
-
-
-
- 更多
更多作品
发表评论