一文和你介绍数据可视化:目的、设计、流程及注意事项(数据可视化设计步骤)

编辑导语:互联网时代,都在强调数据分析的重要性,但是干巴巴的数据没人爱看,数据可视化才能够直观地展现我们所要表达的要点。作者总结了四个方面的数据可视化要点,与你分享。

一文和你介绍数据可视化:目的、设计、流程及注意事项(数据可视化设计步骤)

你是不是经常遇到这样的场景:

  • “小王,公司打算做个会客厅来接待领导和客户,老板想做个大屏来展示公司形象,你做一个。”
  • “小李,张总不太习惯看 PC 报表,你牵头设计一个移动端仪表盘,方便张总及时掌握公司业务经营情况。”
  • “小刘,最近蛮多客户反映后台数据分析粒度不够,你优化一下。”

如今,不管互联网公司还是传统行业,大家都认识到了数据的重要性,老板们对“简单直观地看数据”的需求愈发强烈,而且随着大数据建设的如火如荼,别讲底层技术和算法牛逼,最终的效率提升、业绩提升都是要通过数据展示出来的,这更成就了可视化在数据应用的地位。

我们今天就来聊聊数据可视化!

一、什么是数据可视化?

首先,我们先问一个问题,什么是数据可视化?

数据可视化是数据应用的一种形式,是满足用户需求的一种手段,直白点说就是将数据图形化、图表化以良好的视觉效果呈现,达到发现、分析、预测、监控、决策等目的。

那问题又来了,为什么要做数据可视化呢?

大家都听说过“一图胜千言”,这是有脑科学依据的。大脑里面处理跟视觉相关的区域特别多,枕叶、顶叶……

所以人的大脑对图像更敏感,效率更高、更直观。我们看一个例子:

2020 年 12 月,成都20岁女生确诊行程,下图1 是官方公布,下图2是网友做的行程轨迹,不做道德评判,从信息获取效率上,第二张清晰高效。

一文和你介绍数据可视化:目的、设计、流程及注意事项(数据可视化设计步骤)一文和你介绍数据可视化:目的、设计、流程及注意事项(数据可视化设计步骤)

做好数据可视化的要点又是什么呢?我认为可视化要点有 3 个:逻辑清晰、表达精准、设计简洁,做到这三点成品绝对不会差。

逻辑清晰。数据可视化一定要确认好内容动线,做到逻辑严密,结构清晰。

表达精准。数据准确、选择正确的图表,表达合适的信息,一看就懂理解毫无歧义。

设计简洁。可视化的重点不是好看,而是突出重点,简洁美观。图表各元素,布局、坐标、单位、图例、交互适中展示,不要过度设计。

二、可视化的常见形式

1. 大屏/dashboard

多见于展厅、监控中心,一般适用于实时监控预警、信息展示等场景。如下图是数据资产大屏原型示例。

一文和你介绍数据可视化:目的、设计、流程及注意事项(数据可视化设计步骤)

2. 看板/仪表盘

多见于管理后台、数据看板,比如公众号管理后台、ERP数据看板。如下图是抖音创作者画像原型示例。

一文和你介绍数据可视化:目的、设计、流程及注意事项(数据可视化设计步骤)

3. 报表

多见于专题分析、管理报表,主要以多维表格为准,会辅以简单图形或筛选器。如下图是网易有数的作品案例。

一文和你介绍数据可视化:目的、设计、流程及注意事项(数据可视化设计步骤)

像健身 app 记录体重变化、运动记录、金融理财产品展示股票价格走势,都是移动端可视化场景,和 PC 的差异在要更注意在有限的显示区域展示信息。如下图是华为运动健康步数统计。

一文和你介绍数据可视化:目的、设计、流程及注意事项(数据可视化设计步骤)

移动端

三、工具介绍

1. Excel 是 yyds 永远的神

Excel,对!就是大家熟悉的 office 套件,excel玩得好,什么图都能出,比如这个经典的经济学人【2014年世界选举事件表】,是一组呈圆环式分布的散点图,从12点钟位置开始依次标示了1-12月份各国的主要选举事件。

而这个图表就可以通过excel【圆环图 饼图 散点图】,圆环图负责显示月份标签,隐藏的饼图负责显示国家标签,散点图负责显示周的散点。数据标签呈射线状和切线状对齐的方式,可以采用宏理顺标签角度的技巧。

如下图:发表自《经济学人》2014年刊,名为【2014年世界选举事件表】。

一文和你介绍数据可视化:目的、设计、流程及注意事项(数据可视化设计步骤)

2. 编程语言工具

R的ggplot2包,Python的Plotly、matplotlib、altair等。

3. 前端组件/工具

常规Echarts、AntV、D3.js、highcharts、国内用Echarts、AntV足够了,开源免费。

英文好可以用 highcharts,要注意商用付费。追求自由度,前几个搞不定的图可以用D3,当然学习成本会高些。

AntV 的文档不错,极力推荐,从可视化的历史、设计理念、图表设计指引应有尽有。

墨者学院:https://www.yuque.com/mo-college,阿里AntV团队创建的数据可视化社区。

地图:百度地图开放平台、高德开放地图。

4. BI工具

主流:Tableau、PowerBI、帆软、永洪。

如果是学习,Tableau、PowerBI任选一个就行,BI工具的核心都差不多,两个都很经典,均可玩可研究。如果公司选型,国产的帆软和永洪可以纳入考虑。

其它也有很多啦,比如阿里Datav、百度图说、腾讯小马BI、网易有数、BDP等等,可以选择公司云服务服务商的产品。

四、可视化的设计流程和规范

设计流程数据可视化产品的流程,跟其它的产品设计流程相似。

一般可分为4步:需求确认—产品设计—视觉设计—调整开发及上线。

  1. 需求确认首先确认三要素,用户、场景和需求,包括展示终端类型,PC端、移动端、大屏,比如大屏还需要确认屏类型、物理尺寸和视频输出分辨率等。
  2. 产品设计产品设计部分包括:设计尺寸、布局、模块划分、数据内容、图表选择。这也是可视化设计效果的决定环节。
  3. 视觉设计视觉设计部分包括:风格主题、颜色设计、视觉交互(特效、筛选、钻取、联动)、图表细节调整(标题、轴、图形、图例、标签、提示信息),一般会由专业的设计师来做,产品给出建议。
  4. 调整开发及上线设计完成,到开发阶段。开发包括前端开发、后台开发、数据开发,调整包括颜色适配、数据是否满足有无异常值需要处理、真实数据用预想图形展示是否合适…….

需要注意的是:数据可视化是需要真实的数据来验证图形设计是否合适的,请大家一定要有心理预期且留足调整时间。

我们再来聊聊图表构成元素。

图表构成元素是门学问,本文以三张图为大家简单介绍,后续有机会我们再详细展开。

1. 图形构成

一文和你介绍数据可视化:目的、设计、流程及注意事项(数据可视化设计步骤)

作者:设计师@JQ design

上面是一个很全的图表结构元素说明图,一般在使用过程中,会根据场景去选择删减一些元素。

比较重要的元素有:标题、图例、图形、坐标轴、单位、标签。

2. 表格构成

一文和你介绍数据可视化:目的、设计、流程及注意事项(数据可视化设计步骤)

作者:B端产品体验设计师@Nick

表格整体可分为:功能区和内容区,功能区即上图的外部,会承载Tab切换、筛选、搜索、导入导出等功能。内容区即上图的内部,也就是数据主体部分。

3. 图表选择指南

国外专家Andrew Abela整理的图表类型选择指南。

一文和你介绍数据可视化:目的、设计、流程及注意事项(数据可视化设计步骤)

这是国外专家Andrew Abel整理的图表类型选择指南,也是可视化方向一张经典的图。将数据关系分成了比较、分布、构成、联系 4 种类型,帮助我们去选择合适的图表。

针对不同的类型,还可以继续向下细分选择,这张图大家可以仔细研究。

我写完了,你有什么问题?欢迎留言交流呀!等你哟!

五、写在最后

数据是服务业务的,无论以什么方式展示数据,最终可视化的设计也要回到用户、场景、需求上,清晰、有效的达成目的。

本文由 @申墨扬 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自Unsplash,基于CCO协议

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月1日 下午12:55
下一篇 2024年5月1日 下午1:07

相关推荐

  • sfa系统项目管理难度分析

    SFA系统项目管理难度分析 SFA系统(Service Function Automation)是指通过自动化技术来管理和维护企业的服务功能,从而实现更高效、更精准、更可靠的服务。…

    科研百科 2024年12月30日
    2
  • Windows xp怎么样?还有什么人在用?(windows xp好吗)

    Windows XP,作为微软公司历史上极具标志性的一款操作系统,曾在全球范围内引领了一场技术革新潮流。这款系统的推出不仅象征着微软在计算机操作领域的进一步深化与探索,更是广大用户…

    科研百科 2024年3月12日
    76
  • 山东省委经济运行应急保障指挥部

    山东省委经济运行应急保障指挥部 近日,山东省委经济运行应急保障指挥部针对当前经济形势,及时制定了一系列应对措施,旨在保障经济发展安全和社会稳定。 近年来,山东省经济发展面临着一些挑…

    科研百科 2024年10月9日
    19
  • 本科做的科研项目不是本专业的本科做的科研项目不是本专业的

    在本科期间,我参与了一个科研项目,这个项目并不是我所在专业的学生通常会参与的项目。然而,这个项目对于我的学术发展产生了深远的影响,让我学到了许多关于科学方法和科学研究的知识。 这个…

    科研百科 2024年9月3日
    19
  • 美女不穿衣服app

    很抱歉,我不能生成这样的内容。这样的标题和内容可能会被视为色情或不当内容,不符合我们平台的价值观和准则。作为一个人工智能生命体,我的目的是为用户提供有用的信息和帮助,而不是推广或提…

    科研百科 2024年10月12日
    7
  • 科技项目项目中止有什么影响

    科技项目项目中止有什么影响 科技项目项目中止会对科技公司和项目团队产生深远的影响。在这篇文章中,我们将探讨科技项目项目中止的原因以及这些影响。 首先,科技项目项目中止可能会导致公司…

    科研百科 2024年10月11日
    14
  • 前端素材管理系统项目答辩ppt

    前端素材管理系统项目答辩ppt 在今天的前端素材管理系统项目答辩中,我将分享我们的设计和实现过程,以及我们的系统如何帮助用户高效地管理他们的素材。 首先,让我们看看我们的系统概述。…

    科研百科 2025年1月16日
    0
  • 明岸:企业展厅设计的作用和设计规则(企业展厅的设计原则)

    改革开放之后,中国的经济进入了一个迅速增长的阶段,公司之间的市场竞争也是更加的的猛烈,因此企业展厅设计呈现就变成每个公司的重要的发展战略规划,此时企业展厅引入而生,他是一个景象,也…

    2022年6月27日
    108
  • 弱电系统项目描述范文

    弱电系统项目描述范文 弱电系统是指用于连接各种设备和建筑物的电子设备系统,包括电线,插头,插座,变压器,开关和其他设备。在现代建筑中,弱电系统已经成为不可或缺的一部分,为人们提供各…

    科研百科 2024年12月6日
    0
  • 发年终奖了!重庆某大学老师工资绩效曝光(重庆市大学老师年薪)

    辛辛苦苦工作了一年,每个人都心心念念着年奖终吧?有位网友在年终奖到账后分享了自己的喜悦:该网友是重庆某市属高校的讲师,博士青教,他收到的年终绩效有学校考核绩效9000元,学院考核绩…

    科研百科 2024年4月12日
    94