数据可视化的设计原则

可视化：对事物建立心理模型或者心理图像

数据可视化：是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。它是一个处于不断演变之中的概念，其边界在不断地扩大。主要指的是技术上较为高级的技术方法，而这些技术方法允许利用图形、图像处理、计算机视觉以及用户界面，通过表达、建模以及对立体、表面、属性以及动画的显示，对数据加以可视化解释。与立体建模之类的特殊技术方法相比，数据可视化所涵盖的技术方法要广泛得多。

最有影响力的五个数据可视化信息图
http://www.199it.com/archives/265911.html

主要使用的图表工具

D3
http://d3js.org/
Echarts
https://www.echartsjs.com/zh/index.html

1. 选择可以讲故事的图表

首先需要思考清楚你想达到什么目的、传达什么信息、以及你的用户是谁等。

2. 删减与故事无关的元素

这并不意味着要减半数据量，而是要多留意图表垃圾、多余的信息、不必要的说明、阴影、
装饰等。可视化的绝妙之处在于它可以四两拨千斤般强化并传达你想表达的故事。

3. 为了更好的理解去设计

创建好可视化原型后，退一步考虑如何才能让读者更容易地理解数据。还可以增加、微调或
者移除哪些简单的元素，或许要在线性图表里增加一条趋势线，你也可能会发现饼图切片太
多了（最多只能用6片）。这些微妙的调整将会带来极大的改变。

4. 加入零点基准线

尽管线性图表不一定从零点开始，但如果图表中含大量对比数据的话，零点就很有必要！
相对来说，数据的小幅波动是有意义的（比如股票市场的数据），那么你就需要截断一个
范围以展示它们的不同。

5. 选择最高效的可视化图形

保持视觉的一致性，让读者可以一眼辨别出，这意味着你可能要使用堆叠型柱状图、分组
条形图或者折线图了。但无论选择哪种图形，不要让读者费力去对比太多东西。

6. 注意摆放的位置

如果用两个好看的堆叠型柱状图让读者去对比，但如果它们相距甚远，那就别谈
什么对比了。

7. 讲完整的故事

完整的故事会让整个数据可视化过程更加有意义

8. 不要过度解释

如果上下文已经提到了某件事，副标题、标注、标题中不必重申一遍。

9. 让图表标题简单扼要

没必要用俏皮、啰嗦或双关的语句。图表上方的描述性标题应简明扼要，并与下
方图表直接相关。记住：关注那些让人快速理解的方式。

10. 善用标注

标注并非用来填充空白的，而该用来强调相关信息或提供额外的背景知识。

11. 不要使用让人分心的字体或元素

有时确实需要强调某一点，只要用粗体或斜体文字即可，无须同时使用二者。

12. 使用一种颜色去表达相同类型的数据

如果条形图展示了月销售数据，那只需一种颜色即可。如果要在一组图表上对比今年
和去年的销售数据，那么可用不同颜色代表不同年份的数据。另外，还可使用一个强
调色去突出重点数据。

13. 注意积极和消极数据的表达

不要用红色表示积极数据或用绿色表达消极数据。这些颜色关联历来很强，它们早已
在读者心中打上了标签。

14. 确保颜色间有足够的对比

如果颜色过于相似（例如浅灰与更浅的灰），人们难以发现两者间的区别。相反，
也要避免强烈的对比色，例如红配绿或蓝配黄。

15. 避免使用图案

条纹和波点图案听起来有趣，但却十分让人分心。如果你想在地图等地方加以区分，
可使用不同饱和度的同色，而且要纯色实线。

16. 使用恰当的颜色

当图表中的某些颜色比其他颜色更加突出时，会给数据增加不必要的重要性。因此，应
该使用阴影有区别的单色或相同光谱中的两个类似色来区分强度。记住要用直觉以及色
彩明暗去调整重要性。

17. 不要在一张图上使用6种以上的颜色
18. 保证一切都贴上了标签

确保所有需要的信息都有标签——并且没有重复或拼写错误。

19. 确保标签可见

所有标签应清晰可见，并且对应的数据点都可以轻松识别。

20. 可以直接标记线条

如果可能，请在数据点中包含数据标签。读者可以快速识别线条和对应标签，
不必寻找图例说明或类似的数值。

21. 不要过度标记

如果数据点的精确度对于故事讲述很重要，那么请包含数据标签以增强理解力。
若并不重要，请忽略数据标签。

22. 不要倾斜地放置标签

如果在数据轴上的标签过于拥挤，请考虑删除轴上的其他标签，以使文本排布更舒服。

23. 直观地排列数据

图表应该有一个逻辑结构，可以将数据按照字母、顺序或大小类别排列。

24. 排序连贯

图例的排序应和图表中的顺序保持一致。

25. 排序均匀

在轴上使用自然增量（0,5,10,15,20），而非不均匀的增量（0,3,5,16,50）。

数据可视化的设计原则相关推荐

[数据可视化] 图表设计原则
在我们平时的日常工作中,有时候需要将数据以图形化的形式展示出来,即我们所说的数据可视化.在创建图表的过程中,我们需要注意图表中每一个多余的元素都会增加用户的认知负荷我们可以采用下面的设计原则来让图表 ...
提升逻辑！APP数据可视化界面设计灵感
如何将繁复的数据转化为更加简洁明朗的可视化图表内容?不同领域的数据处理逻辑能力和网格框架的使用能力都必不可少,集设网www.ijishe.com设计师交流社区带来逻辑满分!12款数据可视化界面设计 ...
UI设计灵感|逻辑感十足的数据可视化界面设计
如何将繁复的数据转化为更加简洁明朗的可视化图表内容?不同领域的数据处理逻辑能力和网格框架的使用能力都必不可少,看看集设网 www.ijishe.com 设计师交流社区带来的逻辑感十足的数据可视化界面设 ...
基于大数据的消费者能力的数据可视化平台设计与实现
摘要大数据时代的来临,为了提高企业核心竞争力,首先需要解决电子商务大数据领域中,本设计主要为解决商家无法找到精准客户的问题,通过科学的方式对目标市场中形态各异的消费者进行精细的划分,根据每个用户不 ...
d3中文案例_D3js初探及数据可视化案例设计实战
摘要:本文以本人目前所做项目为基础,从设计的角度探讨数据可视化的设计的方法.过程和结果,起抛砖引玉之效.在技术方案上,我们采用通用web架构和d3js作为主要技术手段:考虑到项目需求,这里所做的可视化 ...
如何进行数据可视化图表设计？
如何进行数据可视化图表设计? 对数据人来说,数据可视化是分析理解数据,并最终呈现数据的必修课.本文从以下几个点来说明,如何进行数据可视化图表设计.1.数据背后的故事2.充分理解数据3.多种图表类型设计 ...
数据可视化表格-设计经验分享！
前言表格是数据可视化中最入门的数据图,也最为实用,在网页后台几乎是必不可少的元素,数据可视化大屏中也常常出现.表格的设计似乎所有人都会,但为什么总有一些表格看起来很舒服,用起来也方便,而有些则不然 ...
芝麻ip代理 | 数据可视化小贴士—原则和对比
可视化不是单纯的数据展示,其真正价值是设计出可以被读者轻松理解的数据展示.设计过程中的每一个选择,最终都应落地于读者的体验,而非设计者个人.今天我们就来详细讲讲如何快速提升数据可视化能力! 一.原则 ...
数据可视化UI设计素材资源文件sketch大屏可视化数据展示
数据是企业的上帝之眼,数据可视化就发挥了很大的作用.很多从事B端产品设计的小伙伴在日常工作中遇到数据可视化的场景比较多,也得益于PSD素材较多,所以用的设计工具大多是Photoshop,但Photos ...

数据可视化的设计原则

数据可视化的设计原则相关推荐

最新文章

热门文章