• 数据可视化的ui设计步骤,云一科技可视化大屏设计案例分享

    /2020-01-06 13:59:57/

  •  

    数据大屏大部分都是展示用,但也有需要展示加功能使用。这就包括如实时的监控数据、采集数据、数据对比功能、云计算数据、分析与预警等等。

    一、设计数据可视化的步骤

       实现数据可视化最重要的是对于数据的采集和分析。通过数据采集、数据处理&分析实现数据可视化,从抽象的原始数据到可视化图像。

    640.webp.jpg

       对于一个可视化展示的终端设备而言,其屏幕大小有限,且用户的时间有限、注意力也极其容易分散。能让用户在短时间内,更有效率的获取到重要的信息,这是评估一个可视化产品好坏的重要因素。

    在可视化设计之前,先要用户确定的问题:

       (1)如果整个版面只能展示一个最重要的信息,你希望是什么?

       (2)希望展现这些信息的理由是什么?通过用户对这些问题的回答,你能了解到,在已确定的指标和维度中,用户最关注的是哪个或哪些。

       通过确定用户关注的重点指标,才能为数据的可视化设计提供依据,从而通过合理的布局和设计,将用户的注意力集中到可视化结果中最重要的区域,提高用户获取重要信息的效率。

    1、数据采集

       明确数据需求:由于客户所处行业不同,诉求也就各不一样。首先必须明确客户对于数据的最终用途,确定客户需求。根据客户所需搜集的数据信息与客户沟通之后,总结需要收集的字段。

    采集字段分析.jpg

       调研数据来源:根据客户需求确定数据采集范围。然后锁定采集范围和对采集的数据量进行预估。细化客户需求,研究采集方向。

       确定存储的方式:根据采集量的大小对数据储存的方式进行划分。比较小的数据,一般使用excel表格存储;几千万的大型数据,选择数据库存储;对于GB级别的数据,就得用Hadoop、Spark、Redis等分布式存储和处理技术的方法才能做到较好的管理和计算。选择正确数据存储的方式使客户对数据的使用与管理更加便捷。

    2、数据处理

       通过数据清洗,数据合并,任务调度,搜索引擎系统和ETL构建对数据池中的数据进行处理数据清洗:实现Web前端展示,展示出爬虫程序抓取到的数据,方便进行清洗。

       数据合并:数据被清洗之后,数据合并系统会自动匹配大数据集群中的数据,通过相识度评分,关联可能相识的数据。

       任务调度:通过任务调度系统,可以动态开启、关闭,定时启动爬虫程序。

       搜索引擎系统:通过ElasticSearch集群,实现搜索引擎服务。搜索引擎是PC端检索系统能够从大数据集群中、快速地检索数据。

       ETL:将数据从来源端经过萃取、转置、加载至目的端将分散、零乱、标准不统一的数据整合到一起,为企业的决策提供分析依据。

    3、数据分析

       将采集的数据通过一系列分析选项发现复杂的连接并探索其数据中的各种关系,包括图形可视化,全文多面搜索,动态直方图,构建算法模型-实现大数据的智能化分析,准确挖掘出所需数据。

    4、选择图表

       明确需要表达的信息和主题后,需要根据这个信息的数据关系,决定选择何种图表类型,以及要对图表作何种特别处理。

       图表种类各式各样,有些图表很难界定是属于哪种关系,Ant v的墨者学院的分类如下。

       我们把数据关系分成了7个大类,当确定了某个数据关系类型后,就可以根据该数据的使用场景查找出相对应的图表,并在其中进行选择:

    数据关系图表.jpg

    5、制作图表

       当确定了要使用哪些图表做图后,开始进入制作流程,影响最终图表展现效果的元素一般分为非数据层和数据层两个层面:

    非数据层:

       不受数据影响的元素,比如说背景、网格线、外边框等等。这些是辅助用户理解的元素,如果不加处理,视觉上会显得杂乱和不够简洁,干扰到你真正想展示的信息。对于这类元素,如果干扰到数据的展示,应该尽量隐藏和弱化。

    640.webp (1).jpg

    数据层:

       受数据影响样式的元素,比如说柱状图的柱条长度,柱条颜色,柱条展示个数,气泡图气泡大小等等,这类元素的展示效果和图表本身的数据息息相关,一旦图表本身的数据比较极端,有可能会使得最终视觉展现不尽如人意,我们无法改变具体的数据,是否就完全无法操控这些元素了呢?

       这里挑选了几个大屏中应用较多的图表,总结了其数据层样式的调整方式。

    (1)调整范围

    1. 截断超大值

       当某一个值特别大时,绘制出的条形远远长于其他类别,导致其他条形被压缩,不便于比较。某条特别长,也可能会影响到整个大屏的排版平衡,可以采用截断选项的方式。

    截断超大值.jpg

    2. 数据可以不从0开始

       很多数据可视化工具里都有“数轴是否包括零”这一个选项,用户可通过这个功能来控制坐标轴的显示范围,例如下图,折线的波动范围比较小,走势起伏不明显,这时可以选择数据不从零开始,清晰地看出了折线的走势情况。当然,如果在平时的数据报告中,这样显示有夸大差异的嫌疑,不建议频繁使用。

    数据可以不从0开始.jpg

    3. 排除异常值

       允许用户剔除高度异常点,因为异常值会影响用户对整个图表的分析。

    排除异常值.gif

    (2)避免重叠

    1. 避免负值被遮盖

       当一些数值有负数时,标签和柱条离得较远,不便于阅读,如果标签紧贴柱条,又会发生重叠,比较好的方式是标签根据柱条的方向分别显示在坐标轴的两侧。

    避免负值被遮盖.jpg

    2. 轴标签太长可横向放置

       当轴标签太长时,虽然斜放可以避免重叠,但歪着头查看内容在浏览大屏的场景下对用户不是很友好,可以考虑把柱条横向放置,把标签置于柱条空隙之间。

    轴标签太长可横向放置.jpg

    (3)精简数据项

    1. 饼图分类5~7项

       在做数据报告时,不管有多少数据项,为了完整和精确性,所有的内容都会显示出来,但在大屏中,如此满的数据展示,不但忽略了视觉体验,还会让用户抓不住重点,对于饼图来说,建议扇区个数不要超过5个,例如保留占比前5的扇区,剩下的非重点数据全部归到“其他”。

    饼图分类.jpg

    2. 保留前五和后五

       如果柱状图的数据项过多,展示时会过于密集,建议先把数据项按照数值大小排序,然后将中间用户可能不是最关心的柱条折叠起来,只保留前五和后五的数据项。

    柱状图的数据.jpg

    (4)强调重点

    1. 视觉高亮重要信息

       先来看一张对比图,虽然左图颜色更加丰富,但是没有重点,视觉传达给用户的信息是没有主次的,而右图很明显想传达:这个数值有异常!请关注我!在大屏中,为了在短时间内让用户get到关键信息,应该尽量排除其他不重要的数据项干扰。

    视觉高亮重要信息.jpg

    2. 折线图中,只高亮重要数据点比每个节点都标注更能传递有效信息。

    折线图.jpg

    3. 在饼图中,因为颜色块大小代表占比多少,所以高亮的方式并不一定适用,我们可以通过分离某一块扇区达到强调重点的效果。

    饼图.jpg

    4. 尽量减少图例

       大屏的图表中应该尽量避免图例,图例会让用户不断在数据项和颜色块之间往返比对,耗费时间,还容易忘记重点,由于柱条个数经特殊处理后并不会很多,所以数据项名称可以直接标注。

    图例.jpg

    二、可视化大屏设计案例

    浪潮云运营数据大屏的重点数据:1.平台交易总额,2.平台交易数据,3.用户数据。

    浪潮云运营数据

       以上就是贵州云一科技为大家分享的关于数据可视化的设计步骤案例相关内容,如您需要数据可视化开发和设计服务,欢迎咨询云一科技客服:186-0850-4110(同微信)。

上一篇: 下一篇: 贵州云一科技解析拼多多爆红路,让你少走许多电商APP开发弯路!
185-8686-7700
在线留言

联系我们

一个新的需求,从这里开始。欢迎填写表格或发送合作邮件至: admin@helloyun.cn admin@helloyun.cn 加微信: 156-8518-1028