UI设计干货|这样做数据可视化页面才靠谱

Wesley13
• 阅读 608

UI设计干货|这样做数据可视化页面才靠谱

可视化不是单纯的数据展示,其真正价值是设计出可以被读者轻松理解的数据展示。设计过程中的每一个选择,最终都应落脚于读者的体验,而非设计者个人。

本文提到了一些常见错误,也是经验总结出的一些技巧。这25条小技巧能够快速提升和巩固你的数据可视化设计。一起来看看!

UI设计干货|这样做数据可视化页面才靠谱

一「原则」

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

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

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

这并不意味着要减半数据量,而是要多留意图表垃圾、多余的信息、不必要的说明、阴影、装饰等。可视化的绝妙之处在于它可以四两拨千斤般强化并传达你想表达的故事。(但可别用3D图表——它会让视觉化感知效果出现偏差)。

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

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

UI设计干货|这样做数据可视化页面才靠谱

UI设计干货|这样做数据可视化页面才靠谱

二「对比」

可视化让数据对比更直观,但是仅仅把两组图表紧挨着放在一起并不能达成这个目标,甚至更令人费解。(试想将32个不同的饼状图放在一起对比?No way!)

4. 加入零点基准线

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

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

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

6. 注意摆放的位置

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

7. 讲完整的故事

或许你第四季度的销售额增长了30%,这是不是很令人兴奋?但还有更令人兴奋的!对比展示第一季度的数据,销售额就有了100%的增长。

UI设计干货|这样做数据可视化页面才靠谱

UI设计干货|这样做数据可视化页面才靠谱

三「上下文」

诚然,数据与数字相关,但它通常结合上下文,一般是为后文要点提供背景知识。但在诸多数据可视化、信息图表和电子书中,我们看到的都是将数据可视化和上下文对立起来,而非结合使用。

8. 不要过度解释

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

9. 让图表标题简单扼要

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

10. 善用标注

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

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

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

UI设计干货|这样做数据可视化页面才靠谱

UI设计干货|这样做数据可视化页面才靠谱

四「颜色」

使用得当,颜色是出色的工具。但使用不当,不仅会让读者分心,甚至会产生误导。因此,请合理地使用颜色。

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

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

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

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

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

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

15. 避免使用图案

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

16. 使用恰当的颜色

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

17. 不要在一张图上使用6种以上的颜色

看图足矣。

UI设计干货|这样做数据可视化页面才靠谱

UI设计干货|这样做数据可视化页面才靠谱

五「标签」

标签可能会变成雷区。虽然读者依靠标签来解释数据,但是太多或太少都会产生干扰。

18. 保证一切都贴上了标签

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

19. 确保标签可见

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

20. 可以直接标记线条

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

21. 不要过度标记

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

22. 不要倾斜地放置标签

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

UI设计干货|这样做数据可视化页面才靠谱

UI设计干货|这样做数据可视化页面才靠谱

六「排序」

数据可视化旨在帮助理解,难以理解的随机模式让人感到沮丧,并会破坏想传达的内容。

23. 直观地排列数据

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

24. 排序连贯

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

25. 排序均匀

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

UI设计干货|这样做数据可视化页面才靠谱

原文链接:https://www.columnfivemedia.com/25-tips-to-upgrade-your-data-visualization-design

编译:水扬波、李沛其

UI设计干货|这样做数据可视化页面才靠谱

往期精彩回顾

大事件!2021 年度趋势色彩正式出炉

苹果iOS 13 新设计规范全面解析-Repost

终极指南!超全面的UI动效基本规则总结

APP引导页界面作用大,几种设计类型抓住用户

图片模糊别捉急!这个修复工具一键变清晰

干货 | 手机阅读类APP UI界面设计指南

UI设计干货|这样做数据可视化页面才靠谱

10月8日火爆开课 决战金秋求职季

**越早报名,越多优惠
**

突破职业瓶颈/一线名师主讲/提升竞争力/涨薪必备

↓↓长按二维码咨询报名↓↓

UI设计干货|这样做数据可视化页面才靠谱

点击阅读原文 了解课程详情

本文分享自微信公众号 - 静Design(JingDesign91)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
3年前
Docker 部署SpringBoot项目不香吗?
  公众号改版后文章乱序推荐,希望你可以点击上方“Java进阶架构师”,点击右上角,将我们设为★“星标”!这样才不会错过每日进阶架构文章呀。  !(http://dingyue.ws.126.net/2020/0920/b00fbfc7j00qgy5xy002kd200qo00hsg00it00cj.jpg)  2
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这