跟月影学可视化
月影
前奇虎 360 奇舞团团长,可视化 UI 框架 SpriteJS 核心开发者,《JavaScript 王者归来》作者
30206 人已学习
新⼈⾸单¥68
登录后,你可以任选4讲全文学习
课程目录
已完结/共 54 讲
跟月影学可视化
15
15
1.0x
00:00/00:00
登录|注册

35| 设计(一):如何让可视化设计更加清晰?

股市中的K线图成功的可视化案例
使用背景网格线辅助观察数据差异
使用颜色、大小、形状等强调数据差异
南丁格尔玫瑰图聚合多维度信息
嵌套饼图表示多维度信息
使用饼图表示单组变量的分布
减少干扰信息的存在感
减少次要信息对比
突出显示重要信息
改变图形属性,强化数据差异
选择合适图表,直观表达信息
分清信息主次,建立视觉层次
如何让可视化设计更加清晰?

该思维导图由 AI 生成,仅供参考

你好,我是月影。
在实际的可视化项目中,我们经常会遇到一种情况:用户期望所有的可视化图表都是简单明了的。实际上,这是不现实的。
因为我们拿到原始数据之后,第一步是分析数据,也就是从各种不同的角度尝试去观察数据,确定我们希望用户了解的信息。这些信息如果是简单清晰的,那么可视化结果就是简单直观的。如果用户想要了解的数据规律本身就很复杂,那么可视化图表所能做的事情,也只能是尽可能清晰地展现用户关注的重要信息,屏蔽干扰信息,来降低用户理解数据的难度。
因此,我们要明白,在任何时候,制作可视化图表都是为了帮助人们理解抽象的数据,不管这些数据多复杂,都要尽可能让读者快速理解。如何才能做到这一点呢?简单来说,就是你要学会了解人们是怎样看数据的,然后将数据呈现得符合人们的思维和理解习惯。
接下来,我们就通过几个例子来学习一下,都有哪些方法可以轻松地把人们的注意力集中在数据信息上。

分清信息主次,建立视觉层次

我们可以先想这么一个问题:第一次看图表的时候,你都会注意哪些信息?如果是我的话,我总会试图在图表上找到什么有趣的东西。实际上,在看任何东西的时候,我们的眼睛总是倾向于识别那些引人注目的东西,比如,明亮的颜色,较大的物体,有特点的符号等等。因此,我们做可视化的时候,应当用醒目的颜色突出显示数据,把被淡化的其他视觉元素当作背景。其实,这就是我们今天要讲的第一个方法,建立视觉层次。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文介绍了在可视化设计中如何应对用户期望简单明了的挑战,以及如何通过建立视觉层次和改变图形属性来提高数据可视化的效果和用户体验。文章首先强调了制作可视化图表的目的是帮助人们理解抽象的数据,需要尽可能让读者快速理解。接着详细介绍了建立视觉层次的方法,包括分清信息主次、使用醒目的颜色突出显示数据等。随后,通过实际例子演示了如何处理数据、传递散点和曲线图给图表对象,以及如何分别用散点和曲线图来呈现数据,最终形成了层次分明的图表。此外,文章还提到了改变图形属性来强化数据差异的方法,如使用颜色、大小、形状等来突出数据之间的差异,以及介绍了股市中常用的蜡烛图作为一个成功的可视化案例。总的来说,本文通过丰富的实例和技术讲解,为读者提供了丰富的可视化设计方法和技巧,帮助他们更好地应对实际项目中的挑战,提高数据可视化的效果和用户体验。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《跟月影学可视化》
新⼈⾸单¥68
立即购买
登录 后留言

全部留言(3)

  • 最新
  • 精选
  • Geek_00734e
    貌似用什么图表来表现的决策都是产品跟设计那边参与的,前端很少介入,前端介入的时候差不多已经定稿了
    2022-01-26
    2
  • 锵锵
    您好,从github上clone的代码index7.html无法用chrome显示,请问是什么原因呢?
    2022-11-27归属地:英国
  • 西门吹雪
    方法论不错!
    2021-02-18
收起评论
显示
设置
留言
3
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部