跳转至

了解飞致云旗下开源产品

间距细节

间距是视觉设计中建立信息层级、提升阅读体验、表达元素之间的关系、表现重要信息的重要方式。合理的间距能够给用户带来具有美感且舒适的视觉体验。间距会影响设计的感觉,以及排版的节奏和可读性。太紧,文字会感到拥挤,变得难以阅读;太松,会显得内容不相关,页面太空。因此,间距的设置是需要遵循一些法则的,恰当的间距调整可以使页面内容更加合理和统一。

1 间距的种类

1.1 内边距

在仪表板的设计中,为了方便非专业设计师的业务人员理解,这里我们把组件之间的距离,称为内间距,如下图中黄色标记部分所示。

内间距1

内间距可以细分为横向间距和纵向间距,如下图所示。

内间距2

1.2 外边距

组件与仪表板边框之间的距离称为外边距,如下图中橙色标识部分所示。我们根据外边距所在位置的不同,把外边距分为上边距、下边距、左边距、右边距。

外间距1

这个外边距和我们常用的 Word 文档的页边距同理。Word 文档中的页边距是指页面的边线到文字的距离,在给 Word 文档排版时,页边距的设置也经常被大家忽视。其实,只需要在文档两侧留出适当的边距,有适当的留白,页面的呈现效果就会有显著提升,这一原理在仪表板设计时也同样受用

在实际的操作过程中,仪表板设计时外边距更加容易被忽略,这是因为 Word 文档是默认自带页边距的,而在仪表板设计时需要设计者手动留出外边距。

需要指出的是,这里说的外边距是相对而言的。上图标注的外边距是以整个仪表板作为整体,而考虑到单个视图组件的话,外边距则如下图所示了。

外间距2

2 间距的原则

2.1 较大的外边距

内间距要小于外边距,小到可以直观分辨,这里说的外边距是以最小外边距为基准的。此外,一般情况下左右边距小于上下边距,内间距要小于左右边距。

这里我们推荐内间距大概是外边距的一半,会给人带来不错的视觉体验。

较大的外边距

2.2 常规边距

内间距要适当小于或等于外边距。如下图所示:

常规边距

2.3 上边距大于下边距

上边距在印刷行业中常被称作“天”,下边距被称作“地”。摄影中有一个原则就是拍照的时候要“天”大于“地”,否则会有一种压迫感,这一原理在仪表板设计时也同样适用。

仪表板设计时我们把仪表板的标题归为上边距的一部分。整体来看是上边距大于下边距,如下图所示:

上边距大于下边距

2.4 统一性原则

内间距和外边距的统一性原则主要体现在以下几点:

  • 内间距要统一,横向间距统一,纵向间距统一。而横向间距和纵向间距可以统一也可以不统一,如若横向间距和纵向间距不统一,那么两者差距不可过大。
  • 左边距和右边距要统一。

统一性原则

2.5 亲密关系原则

根据亲密关系原则,同类内容的间距应该更近,这样有利于建立信息层级关系,提升用户的可读性。

标题与图表属于同类项,它们之间的间距(下图中黄色部分)一定要小于组件模块之间(下图中绿色部分)的间距。

亲密关系原则

希望可以帮助用户逐步建立起自己的间距意识,有意识地培养自己在设计仪表板时的统一性原则、亲密关系原则等。

DataEase 开源数据可视化分析工具主打“人人可用”,通过配色、布局间距等方面技巧的配合,可以帮助没有设计知识基础的用户制作出美观整洁的仪表板,让仪表板设计不再是专业设计师的专属。