恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
如何设计真正有价值的数据可视化
0.0°
2021-08-05 自译外文 经验/观点 原作者: Vikalp Kaushik 举报 752 6 2 0

了解人们如何解释数据和选择元素以创建清晰可视化的指南

出色的可视化可帮助人们快速准确地理解数据,从而做出适当的决策。这些类型的可视化针对人类视觉系统 进行了优化,使信息易于掌握和有意义。当我们查看可以快速准确解释的图表时,它是通过潜意识处理而不是通过思考预先理解的。我们对正在发生的事情考虑得越少越好。

那么,我们如何利用人类视觉系统来创建有影响力的可视化?我们从理解开始,然后选择正确的元素。


数据 > 图表 > 理解

那么,什么 是可视化?数据可视化是将数据转换为视觉表示以传达某些意义。原始数据按位置、形状、大小、符号和颜色进行编码。然后通过人类视觉系统对该编码图进行解码以获得理解。没有这种理解,观众就没有任何好处。

“只有在解码有效的情况下,图形方法才是成功的。无论编码多么聪明,在技术上多么令人印象深刻,如果解码过程失败,它就会失败。” — 克利夫兰和麦吉尔,1985 年


人类视觉系统

我们必须始终考虑人类视觉系统的局限性,以创建有价值的可视化。Cleveland & McGill (1984) 的一项研究引入了一种理论,该理论根据图形元素被准确解释的可能性对其进行排序。这些元素是位置、长度、方向、角度、面积、体积、曲率、阴影和颜色。受试者使用这些不同的元素分析编码到图表中的数据。排名结果如下。

最容易准确解读

  • 在一个共同尺度上的位置
  • 在不对齐的尺度上的位置


有点容易准确解释

  • 长度、方向、角度


最难准确解释

  • 面积、体积、曲率
  • 颜色和阴影



人们对难以阅读或过于复杂的图表失去兴趣。通过每个图形包含一条消息并使用易于解释的元素来简化可视化。为避免在单个图表上传达太多信息,请考虑将信息拆分为各种图表。当您有一个重点概念时,选择高级元素要容易得多。


避免使用馅饼或甜甜圈

饼图不是数据的最佳视觉表示,因为它们难以处理。他们依靠三个最难准确解释的元素:角度、曲率和面积。当两个相似的切片大小接近时,这些元素很难发现它们之间的差异。使用点图代替圆环图,因为它更容易解释比例尺上的位置。或者尝试使用条形图,因为它去除了角度和曲率,从而更容易识别数据点之间的差异。


去除噪音

通过避免会分散数据注意力的额外图形,使事情尽可能简单。封闭原则指出,人们喜欢简单的事物,并适合我们头脑中已有的结构。通过利用这一原则,我们可以去除多余的杂物,如粗边框、抽动标记、深色阴影,让数据闪耀。我们去除不必要的越多,我们的数据就越突出。确保您只保留理解所需的内容。当我们减少噪音时,我们减少了观众的认知负担。

考虑数据墨水比

确保优先考虑重要的事情。不要删除必要的数据来简化或美化图表。Edward R. Tuft 将数据-墨水比描述为显示数据的墨水量与代表图表的墨水总量之比。气泡图等图表过于图形化,往往隐藏必要的信息,使用户难以提取价值。不要为了美观而在无关紧要的事情上浪费墨水。

                     “最重要的是,展示数据。” 爱德华·R·塔夫特


使用见解作为图表标题

观众希望可视化能够立即告诉他们正在发生的事情。通过用有意义的见解替换描述性标题,用户一眼就能获得直接价值。图表标题是帮助提高信息回忆的基本元素。根据 Michelle Borkin 的研究,“富有洞察力的标题与清晰的图形相结合,可以产生更令人难忘的数据驱动体验。” 利用标题空间传达洞察力并增加对数据的即时理解。


标题作为见解的示例:

  • 自上个月以来销售额增长了 40%
  • 支出按预算进行
  • 特斯拉本月在 SOV 领域处于领先地位


不具洞察力的标题示例:

  • 一段时间内的销售预测
  • 本月的预算和实际
  • SOV 故障


使用标签来澄清,而不是混乱

标签和标题应该有助于用户理解数据,但太多会导致难以理解趋势和解读含义。如果数据的形状比单个值更重要,请考虑在刻度上而不是直接在图表线上显示值。如果这些值比整体数据的形状更重要,请在图表上放置标签以引起注意并将它们从轴上移除以清除混乱。

条形图提示

条形图非常适合显示当前数据

  • 非常适合比较
  • 根据值对图表进行排序可以更轻松地解释和比较性能。
  • 移除 x 轴并将标签放置在条形之外。通过使信息随时可用,用户不必做任何工作来获取它。
  • 使条形变粗 - 这是存储所有数据的地方。
  • 考虑使用压缩字体来帮助有限的空间。

折线图提示

分析趋势时,折线图很棒

  • 非常适合趋势或显示随时间的变化。
  • 使用少于五行以获得最佳可读性。
  • 将标签放置在线条颜色的线条末尾。它帮助用户将其连接到数据。
  • 使用直线而不是曲线来保持数据完整性。
  • 删除刻度线并减轻网格线。
  • 删除 x 和 y 轴描述。图表标题应描述这些值。


最后,添加比较

可视化的目的是什么?大多数时候,它是在两个或多个数据点之间进行比较。Vesa Vuusela 说:“图表从比较中获得意义。” 通过绘制元素之间的关系,数据变得有意义。要利用的不同类型的比较是排名、数字、位置、时间、类别等。设计人员应该决定哪些比较对用户最重要。

“定量推理的核心是一个问题:与什么相比?“——塔夫特,展望信息




Powered by Froala Editor

更新:2021-08-05

收藏

6人已收藏

Talon

原迅雷高级UI设计师

  • 31

    作品

  • 103

    粉丝

  • 9

    关注

  • 如何设计更好的空状态?
  • 设计中的留白:每个设计师都应该知道的留白准则
  • LEXUS 官网重新设计
  • 深色模式 UI 最佳实践
相关标签

    猜你喜欢

      2021-08-05 自译外文 经验/观点 原作者: Vikalp Kaushik 举报 752 6 2 0

      如何设计真正有价值的数据可视化

      0.0°

      你确定要举报如何设计真正有价值的数据可视化

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年08月04日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      6
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录