关于箭头的设计

背景

在可视化设计中,经常会遇到关系型数据的设计,比如关系图、流程图、类图等用来表示关联的连线以及指向性的箭头。如果设计不走心,那么效果将如下所示:
这种箭头返工率极高,为减少二次开发,整个可视化的底层需一个通用性强的、高可用的、Good by Default 的箭头,让业务能开箱即用。

设计考量

指向需清晰明确

关系图的箭头指向必须清晰、明确,否则在大数据展示时容易辨识不清。在图形上,我们对三角形进行一定的裁剪,让其像指南针一样有明确的指向性,比较下面两图,左侧的箭头能清晰辨别指向性,而右侧的箭头在识别时会有些困惑。

多箭头避免重叠

我们将箭头的最小内夹角设为 44 度,这样圆形节点一周最多可排布 8 个箭头而不会重叠(44+1)*8=360,通过下图能明显观测到,一个有较小的内角的剪头在关系图上能大量减少图形堆叠的可能性。

连线与箭头的比率

可视化图表中经常会赋予连线权重,比如线条代表资金的多少,流动资金越多则线条越粗,线条代表关系的强弱,关系越强则线条越粗。这就要求我们在设计连线与箭头时必需要考虑两者的比率以及相应的阈值。

默认样式的通用性

众多中后台系统无设计可言,我们希望即使开发同学不进行样式定制,它也是 Good by Default。比如多线条重合时,默认连线、箭头的透明度能在复杂中快速建立关联,在与节点搭配时不会宣宾压主。

多样式的考虑

我们将基本节点做了一些样式扩充,得到 UML 类图中的节点+连线,如下图。
诚然,在可视化的世界里,这仅仅是一小部分的关于箭头的探索,我们还在路上。如有你的业务中有箭头需求,欢迎联系 @完白(guanlipi) ,如有不足,欢迎指正。