您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您?#37096;?#20197;加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

如何合理创建间距系统,来更快的实现设计方案。

自译外文 分类: 经验/观点 版权: 原作者: Priyanka Godbole
13496 241 91 40
2019-03-20
90.5
首页推荐

让设计师和开发团队有意识的利用好间距系统,可以提高产品的可读性和一致性。

Cheatsheet总结了我的方法


我最近致力于为电子健康记录(EHR)产?#33539;?#20041;间距系统,以改善产品页面的可读性和一致性。我提出了3个间距规则(3C规则)和以4为基准的间距网格,并且这些规则与新的印刷系统配合得非常好。


存在的问题


当定位垂直元素时,设计师不应做出随意或者任其自然的判断。通常设计师通过按住Shift和上下箭头键在Photoshop中实现垂直增量:?#26696;?#25454;实?#26159;?#20917;来决定使用5px或10px。”这种方法虽然是10的倍数并且可用,但是它不符合任何印刷要求的规范。

——Robert Bringhurst,著有?#38431;?#21047;风格元素》一书。


  • 我们在EHR产品中使用了5px、10px、15px、20px的边距/填充,但是在何时何?#26234;?#20917;下使用这些间距,我们并没有一个严格的规范。

  • 边距/填充只是间距系统的一部分,字体行高也会增加额外的高度空间,但目前我们没有为现有(旧的)文字样式创建行高规范。

  • 相似的组件和内容在产品中看起来不一致,这造成了EHR产品的整体样式不统一,并且因为数据疏密程度不同,造成了阅读体验的不流畅。

Image title



解决问题


步骤1:?#33539;?#25991;本行高(?#33539;?#22522;准网格)

首先我们假设使用非常流行的8点基准网格(即以8的倍数为一个间距规单位)会达到好的效果,因此在实验中,我把基准主体字体大小设置为13px,行高设置为8的倍数即16px或则24px然后看看这两个行高规则是否有用。如果没用,则意味着8点基准网格是不适用的。

Image title

然后我将基准字体大小设置为13px,并在16px和24px之间的偶数寻找行高值。开始我将它与18px(6的倍数)匹配,如果成功那就意味着我采用了6点基准网格,也就是6的倍数(间距会是3、6、12、18、24)。后来?#39029;?#35797;了20px的行高,使用起来效果很好,所以我采用了4点基准栅格(也就是间距为2、4、8、12、16、20等)。

Image title


步骤2:用希克定律和几何级数来?#33539;?#38388;距值


“随着可选择数量的增加,做出决定的难度将会增加。”

——希克定律


我们要想出一个可感知的间距系统来简化设计决策,另外将所需值的数量保持在一个最小范围内。

  • 间距值是基准网格的倍数数值(如步骤1中?#33539;?#30340;4点基准网格),因此我的间距值为4点基网格(2、4、8、12、16、20、24、28…)

  • ?#35805;?#26469;说,4–-5个间距值已经为产品设计提供了足够的差异性,即使对于复杂的企业产品也足够了,但是在实?#20351;?#31243;中可能需要灵活的在规范中增加间距值。

  • ???我决定使用4点基准网格,因为它提供了更好的视觉可感知区间,对于层次结构的展示来说非常好,因此间距值应该是(2、4、8、16)。

Image title


如何以可预见的方式应用这些间距值?3C法则来拯救你。

我深受Nathan Curtis上面文章中介绍的Insets,Stacks&Inline等间距词汇的影响。我决定在其基础上构建一个额外的词汇组,以便我的团队更容易理解每个词汇的使用环境。我将所有的间距规则分解成3个C:容器、内容和组件。

· 容器规则使用了平方差的概念(使用16px)

· 内容规则使用了堆栈的概念(头部堆栈使用2px,叶节点堆栈使用0、4、8、16px具体取决于内容类型)

· 组件规则使用内联的概念(大多数情况下使用8px,4px表示关联关系)



第1C:容器规则

容器是UI中的框架,其中包含内容,通常这些内容是页面、卡片、模态、弹窗等。由于容器在层次结构中处于最高层次,所以我确保所有容器的间距值(在我的例子中是16px)。提示:切勿在任何间距计算中包含边框。

Image title


Image title


第2C:内容规则

  • 内容存在于容器内部,内容包含:

  • 标题(h1、h2、h3、h4、h5) 以段落,列表,表格,表格的形式穿插数据。

所有这些内容都是使用页边距垂直叠加的,但字体行高?#21442;?#25351;定的页边距增加了额外的间距。我无法以一致的方式解决这个问题,因此我同时考虑了行高和边距,创建了自己的处理堆栈的方法,以下是我的过程:


A)首先解决头部堆栈

  • 如下图,我通过使用2个选项来获取标题的行高。

Image title


  • 为了简化这2个选项之间的行高决策,我计算了每个行高比,并决定使用等于1.5或更高的行高。对于选择哪个行高,我仍然犹豫不决,但是在进行了视觉探索并回顾了设计团队的结果之后,我们?#33539;?#20102;应该采用那个行高选项。

Image title

视觉探索的过程

  • 我从顶部的H1开始,尝试使用2px、4px、8px等的不同间距选项。行高为36px的间距选项都很紧凑,但4px间距与行高40px感觉恰到好处!

Image title

?

  • 接下来我解决了H2问题,在我们的产品中,H2恰好是白色页面的第一个标题。所以根据容器规则,最上面的H2在顶部有16px。我决定在所有H2标题上面给出16px间距高度(最大允许间距值),因为这个值使得层次结构非常清晰。

Image title

?

  • 然后我在所有标题(H2、H3、H4、H5)和列表、段落、表格之间进行了间距值0px、2px、4px和8px的实验。2px和4px的间距相差无多,但是我们在设计团队内部审查结果时,2px的视觉感知更好,尽可能的坚?#31181;?#26377;一个边际数值,因为它简化了设计和开发过程。

标题和叶节点间距实验

标题和叶节点间距实验

标?#33539;?#26632; - 间距为2px和4px


B)接下来解决叶节点堆栈

EHR有4种主要类型的叶节点:

  • 表单(几乎50%的产品)
  • 列表(几乎30%的产品)
  • 表格(可能是产品的15%)
  • 段落(可能是产品的5%)

我开始为最简单的内容类型——段落?#21019;?#29702;间距。


每个段落内的间距

这非常简单,只需要清空段落中的所有文本行空间,这样两行之间就有0px边距。

Image title

Sketch中的排版段落(行高20px是通过视觉探索得出的,并使用WCAG SC 1.4.8进行验证,其中规定“?行间距至少是段落内的空间的1.5倍??#20445;?0/13 = 1.538)


两个连续段落之间的间距

?#19994;?#19968;个想法是使用行高为20px的间距,但后来看到了WCAG SC 1.4.8,其中指出 ??“段落间距至少要比行间距大1.5倍,因此一段最后一行的行高为250%,这样可以保持距离下一段第一行间距更合适。?假设%值是根据基本字体为13px的大小计算的,我计算出两段之间的实际间距应约为(ps - ls)= 13px,将使用margin-bottom:13px在CSS中定义。但是13px不是我们在步骤2中?#33539;?#30340;间距值之一,因此我选择了16px作为段落底部的边距。

Image title

解释WCAG SC 1.4.8中的段落间隔规则

在Sketch中多段落排版

在Sketch中多段落排版


如果对计算结果有疑问,我总是用视觉探索进行交叉检查。与其他可能的值相比,段落之间的16px间距最?#36873;?#20854;实我认为12px间距会更好。但是我不想仅为这个用例为整个间距系统添加额外的值,另外我们的EHR产品没有很多段落,几乎没有任何连续的段落。

Image title

列表中列表项内的间距

列表是由多个同质数据项组成的数据结构,由于列表将所有这些同质数据项组合在一起,因此列表项不像段落(它们之间有16px)那样间距很重要。同时列表项仍然需要稍微分开,所以?#39029;?#35797;了0px和16px之间的间距,我只有3个值可以试验2、4、8,总体看起来列表项之间的间距为8px看起来最适合层次结构。

Image title

带有标签的2个连续输入字段之间的间距

表单有连续的输入字段,一个接一个地叠加在另一个之下。

Image title

无标签2个连续输入字段之间的间距

无标签对于可访问性来说并不是一个好的处理方式。然而在某些情况下,标签最好不要显示,这些情况是:

  • 当多个输入字?#25105;?#36215;表示1个对象时(例如在下面的地址部分,“地址”字段包括?#20540;?#22320;址1,?#20540;?#22320;址2,城市,州,?#26102;啵?
  • ??当标签过于明显/重复且无法拼写时,例如搜索。

Image title

?

第3C:组件规则

组件有按钮、输入字段、图标等,这些组件通常放置在一起(内联)。此外所有的组件的尺寸均为4的倍数(也是8的倍数),因此按钮和输入域内部有一个24px高度的空间(加上1px 顶部和1px的底部边框,整体高度为26px)。当组件能完?#35272;?#29992;好基准网格,并且按规则设置间距时,整体布局才会完美和谐。


2个组件的间距

我用了一个简单的规则,即在大多数时候任意2个相邻组件之间使用8px间距。在少数情况下使用4px来显示两个组件之间更紧密的关系(格式塔的接近性原则)。

内联间距为8px(玫红色)和4px(橙色


组件内部间距

我对组件内部的任何左/右填充都使用了8px。

Image title

图标在组件内部间距

根据格式塔的接近性原则,将图标放在组件内,将他们的间距设置为4px,而不是通常的8px。

Image title

外部图标与组件间距

如果图标与组件关联组合,则其与组件间距为4px以显示其关联关系(格式塔的邻近原则)。但是如果图标与一组组件关联,那么它与最后一个组件间距8px,以表明它不仅仅是与最后一个组件关联,而是与整个组件关联。

Image title


结论

  • 你将提出一个具有有限数值和有明确使用规范的间距系统,这非常易于使用并且合乎逻辑记忆。
  • 在UI中使用间距,使其信息层次结构更加合理清晰,并遵守可访问性?#25913;蟇CAG1.4.8,这有助于不同能力的人更好的掌握和理解信息。
  • 开发工程师了解间距系统,并且熟悉其应用的场景和规则,这样可以让设计和开发之间的沟通更顺畅,工作效率更高等。
  • 设计师不再需要对所有内容进行排查,开发工程师不再需要花时间检查Zeplin等其他工具中样式问题。










Kane_D

https://dribbble.com/kane

708粉丝/53关注

首页达人小有见解叫兽一鸣惊人
如何在产品设计中利用心智模型成为UI / UX设计师所需的7个步骤
1
鹿鹿lu

看不懂啊

精彩!

扫描二维码
去?#21482;?#31471;查看海报

Kane_D

TA已经获得6?#22534;?#31456;啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

广西福彩官网