让B端系统数据表格更美好的设计支柱

用户体验   2021-07-15

对于B端的数据可视化设计而言,能更直观地展示数据,洞察数据背后的真相。然而,很多设计师在工作中并不懂图表的设计,大多数情况下是随心所欲,只有经验的设计师才能驾驭。我们根据工作经验,整理出一些图表设计的支柱。

让B端系统数据表格更美好的设计支柱

B端后台产品的图解设计思路与方法,将覆盖了曲线图、柱状图、饼图、雷达图、漏斗图...等各类常用图表类型,为实现清晰传达和视觉美好的目标,我们从图形层次方面将图表划分为:底层元素、中间元素和上层元素,根据视觉强度的不同,分别设计三类元素。下层元素最弱,顶层元素最强,梳理图元前后关系,可以清晰地把握元素的视觉层次,保证信息传递的效率。


基础元素设计

在各种类型的图中,我们将中轴、比例等定义为辅助说明数据的基础元素,为减小视觉干扰和突出主图,底层元素全部采用浅灰色设计。结果表明,当元素与背景颜色的对比明度为1.2:1时,人眼是很难看见的,而当对比度为2.0:1时,视觉的强度过强,很容易引起用户的注意。

经过元素视觉强度的调查和视觉实验,最终确定元素与背景对比度为1.6:1左右,人眼可以看到的视觉强度偏弱的程度。为了确保元素的视觉效果不突出,只有在需要的时候才能发现。


中间环节设计

中间元素包括数据图形、数据线段等承载数据主体信息的元素,是图表中表示数据的关键元素。中层元素采用较低的明度和较高饱和度的数据颜色,比底层元素表现得更好,使元素从页面中突出出来,确保可读性。风格上适当地加入渐变、描边等样式,以丰富视觉层次,给人以美的视觉感受。


顶级元素的设计

本文将顶层元素定义为一个突出的图表信息,内容包括悬停样式、悬停之后的详细数据描述等。在设计上为了保证视觉风格的突出,使用深灰色、强调色彩等强对比风格,并辅以动画、投影等手法来保证明显的视觉强调效果,确保最有效的传达用户。


最后的效果

经过层次梳理,将元素重要程度和视觉强度结合起来,将设计图中的主信息按重要程度显示出来,使用户能在第一时间接受最重要的信息,提高信息读取效率。


让B端系统数据表格更美好的设计支柱


图表版面设计

图形的排版是指图中每个元素的大小和布局等,对于B端后台类产品,不同的排版方式会给用户的使用体验带来很大的影响。怎样建立一套合理的规范保证用户的使用体验?


图示大小:

图形尺寸指图表的整体长宽高。工程中,我们发现不同尺寸的图表对数据展示效果影响很大,比如大型数据的图表挤在名片大小的区域显示,这大大降低了信息读取的效率。基于此,搜集并提取出三种典型场景:“全貌概览”、“多角度环视”、“细节分析”三类尺寸,分别对不同尺寸的信息进行了优化,以实现高效率地读取信息。

该“最小图”是最小的,摒弃了Y轴等不必要信息,利用小区域显示最重要的图形信息,并控制数据密度,保证信息的有效读取。

限制了坐标轴刻度数和数据密度的“中号图表”尺寸受限,例如,曲线图数据点不高于1据点/4像素,Y轴坐标刻度不超过5个,以确保信息密度不过载;这种图表尺寸通常用于对一个大型类别的内容进行多方面检视时。

这个“大图”的尺寸是最大的,没有限制数据信息密度,并给出最完整的最详细的显示,这种尺寸通常被用于数据细节分析场景,比如数据的细节页面。

最终以多种图表混合排列方式,饼图、图示等大面积填色图表、相比较折线图等描边型图表,使视觉感觉更丰富。为了确保在多个图表混合排列时,我们缩小了填色类别的实际高度。


坐标轴设计:

图中出现的坐标轴频率较高,那么坐标轴的共同设计问题是什么?首先,横纵坐标轴在刻度上出现过密现象。

若坐标轴承载的是连续的数据(连续数据指可量化的、连续的、在时间间隔内任意取值的数据,例如时间、金额、人数等),设计师可自行增减刻度数量,以保证视觉舒适度。若承载的数据是离散的(离散数据指不可量化、无关联、不可在区间内任意取值的数据,如分类、软件版本、省等),则可采用增加坐标轴缩功能来解决。

其次是刻度的描述文本太长。

若为X轴(横轴)字太长,除可控制范围内减少刻度,也可采用文字倾斜45°~90°的方法(如文字全部为中文,可用竖排代替倾斜90°),缓解信息过密不清的情况。

若为Y轴(纵轴)字过长,则需要联合研发调整数据的单位,如将“元”调整为“百万元”。

若无法调整,则应根据所用的图解进行调整。比如常用的Echarts图表、D3图表等开放源码图表库,需要对刻度文本长度进行预先估计和预留,否则刻度文本可能被裁减,无法完全显示。如果您使用像AntV这样的自适应图表库,则不需要预先处理,图表库将自动根据刻度长度进行整体调整。


图片说明:

图例作为图表中不可缺少的一部分,在各类图例中的位置各不相同,由于不同的图表样式有很大差异,图例的位置需要全面考虑,并适当布置,但在同一个产品或网页上,如果过于随意的放置图例,会导致页面不统一,同时增加用户的浏览成本。

本文旨在提高屏幕信息密度,对不同场景的页面排布进行分析,制定出上下两个较为宽松的指导原则,供设计者在没有确定最佳方案时选择。如果图表是左右两端对齐的类型,如折线图、柱状图,建议将图例放在图表顶部。从而可以结合其它元素如标题等进行统一排列,减少占用空间。如果图表本身在左右都有剩余空间,比如饼图,建议将图例放在图表的右边。还可以节省页面空间。


最后:

利用图表展示效率,让数据最直观地表达背后的商业逻辑和洞察,通过图表,让天下没有难看的B端图表是我们在B端用户体验设计中必须修炼的核心竞争力。

维好维可-用户体验体验创新设计

联系我们:

关注我们微信

关注我们,持续输出与分享

+86-21-51115850
©2010-2022 维好维可 | 用户体验创新设计咨询公司-版权所有
沪ICP备19006116号-1

请留下您的联络方式
我们将在两个工作日内安排专人与您联系

合作咨询
+86-21-51115850
© 2010-2022  维好维可 | 用户体验创新设计咨询公司
沪ICP备19006116号-1
维好维可-微信二维码