行业关键字
UI设计UI理论和资料 → 正文
让图表说话|数据可视化设计实践
作者: 钉钉用户体验 来源: 公众号:钉钉用户体验 时间: 2024年8月21日

数据可视化在B端领域的重要性不言而喻,它通过将复杂的数据转化为直观的图形和图表,让用户可以直接洞察到数据的分布、趋势,从而帮助用户快速作出决策解决问题。

罗伯特·科萨拉说:“数据可视化是挖掘和利用数据的关键。即便是最简单的可视化,也能够消除数据提供者对自己的数据被低估、误解或歪曲的忧虑。数据可视化能够改变人们对数据的理解方式,提高大众对数据的兴趣,并推动更多更好的数据开发。”

在钉钉组织大脑中有非常多的数据报表,希望来帮助用户进行更好的数据洞察,但在整体走查中发现存在数据展示不合理、数值表达有歧义等情况,为更好的提升数据图表的易读性、易用性,进行了此次数据图表的设计升级。

在设计中还发现,很多用户由于工作场景和工作职责特殊,对移动端的依赖远远超过我们的预期,当前产品只做了PC端的适配,无法满足移动端的场景,故图表的移动端体验也是本次设计升级的重点。

01 移动端适配

Material  Design在数据可视化原则中提到,应使用渐进式展示显示图表详细信息,允许用户根据实际需要查看特定的数据点。在桌面端,鼠标悬停即可显示更详细的数据;在移动端,触摸并按住手势会在图表上方显示提示。

结合其他移动端图表的设计案例,移动端图表适配主要遵循以下几点:

1.移动端视野狭窄,注意不要遮挡图表,可在固定位置展示数据,给用户稳定的心智
2.移动端相比PC端无hover态,尽量直接展示数据标签
3.移动端数据过多时可采用视图放大的形式查看数据详情

案例1:折线图

折线图通常数据点密集,若直接沿用PC端交互,点击出现tooltip会遮挡大部分可视区域,移动端可直接在图例后增加数据,保证图表区域不被遮挡,同时支持用户左右滑动查看数据,数据浏览更高效。

当只有单一数据时,数据展示位置可跟随用户点击手势,数据查看更方便。当有多条数据时,因为图例排版更加复杂,为保证数据展示的稳定性,图例需固定位置。

移动端的此种交互方式也可以延伸到柱状图。

案例2:雷达图

雷达图常用于多维度的数据对比,仅有一组多维数据时,用户更看重维度之间的数据比较,当有多组多维数据时,更看重组与组之间的比较。

故在一组多维的雷达图中,如果直接沿用PC端tooltip交互,点击一次只能展示一维数据,交互重且展示效率低,无法直接多维度对比。移动端适配时,可直接展示数据标签,在展示效率高的同时,用户可直接对比数据,更符合雷达图的使用场景。

在多组多维的雷达图中,如果直接沿用PC端tooltip交互,遇到的问题和折线图移动端适配问题一致,即会对图表产生较大的遮挡,但此时并不能直接沿用折线图的解决方案(在图例后加数据标签),因为数据标签和用户点击行为的关联性比较小,在测试时发现用户并不能注意到点击后有响应。所以在移动端点击轴线或任意点,用数据颜色悬浮展示数据标签,在减少区域遮挡的同时让用户的操作有响应。

案例3:矩阵树图

矩阵树图因数据复杂,在移动端中会出现部分矩形会很小的情况,用户较难看到具体数据,此时在移动端用户可以点击矩形,放大至图表区域中央进行查看,同时也需要注意让用户可以重新查看完整视图。

02 图表设计原则

什么样的图表算是好的图表?《乐见数据:商业数据可视化思维》一书中马世权提出了GLAD原则:Good Data and Insight(好的数据和洞察)、Less Noise(降噪)、Accurate Expression(精准表达)和Distinct Mark(画龙点睛)。

结合我们的设计实践,将图表设计原则总结为视觉降噪、表达准确、突出重点。

1. 视觉降噪

减少不必要元素的干扰,在表意清晰的情况下可去除重复的数据标签。

当数据标注过多时,去除根本看不清的数据标注,降低视觉负担。

2. 表达准确

在实际场景中发现数据标注常常和图表不对应,以环状图为例,看不懂到底哪个切片对应哪条数据。数据标注应和数据需一一对应,否则易造成用户误解,注意可利用颜色来保证数据可读性,如指引线颜色和数据颜色保持一致。

有多组数据映射关系时,务必增加图例,防止造成表意不清。值得一提的是,数据的名称需保持准确,让用户一眼可看出想表达什么。

另外,为提升数据展示的效率,可以尽可能直接展示数据标注,用户无需任何操作即可知道数据详情。

3. 突出重点

基准线避免使用有数据语义的分类颜色,应使用中性色,防止造成用户误解。

03 考虑特殊情况

1. 数据为0

通常数据为0的情况较少被考虑,但涉及到以颜色做表意的情况时需要特殊处理,以矩阵树图为例,为防止数据未及时更新导致图表全白,设定当数值为0时,展示颜色的透明度为10%,建立百分比和透明度的数据映射关系。

2. 数据过多

当数据过多时,PC端可以直接hover展示,但移动端由于交互精度不高且视野狭窄,可采用视图转换的方式来保证数据呈现,环状图可长按切片放大区域,折线图可长按出现放大镜。

04 与业务情况结合

除了通用的图表设计,还需要注重图表与业务含义的融合。

案例1:业务主轴

在折线图设计中,业务希望重点某一数据,但在普通折线图中三条线同粗细,无法体现数据重点。故增加了图表的主线逻辑,不论设计还是研发后续引用该图表组件时,可设定某一条线为主线进行加粗强调,在表达业务含义的同时让数据呈现有重点。

案例2:数据洞察

可以结合AI能力对图表进行更多的业务层面上的洞察和解释。

05 结语

一个好的数据可视化设计不仅仅是技术的展示,更是一种沟通的艺术。设计所追求的,不仅是图表的美观,更是信息的清晰传达和有效沟通。

在未来的设计中,需要继续探索和实践,不断优化可视化工具和方法,让每一张图表都能说话,让每一个数据点都充满意义。

(责任编辑: Admin

作品欣赏

欢迎关注视觉同盟微信公众号:
微信公众平台:搜索“vudn2004”或扫描下面二维码:
English | 关于我们 | 站点地图 | 联系热线 | 合作伙伴 | 艺术顾问 | 订阅 | 手机版
版权所有 © 2004-2024 视觉同盟 visionUnion.com)
Copyright © 2004-2024 VisionUnion.com Incorporated. All rights reserved
京ICP备09005192号
视觉同盟旗下子站:品牌专区 | 创意设计人才网 | 视觉同盟社区 | 视觉同盟论坛 | 英文版