Advertisement

python制作数据化大屏_可视化大屏经验分享

阅读量:

在实际项目中积累了宝贵的经验,并从中学习了许多优秀的实践。通过持续的学习与实践,在大屏设计的特征和数据可视化表达方面不断精进。这些经验和心得源自多个优质的学习资源,请各位对这一领域感兴趣的同学提供宝贵的建议与指导。

大屏显示的一些特点:

1.面积巨大——用户站远才能看全内容(所以字也不能设计很小)

2.深色背景——紧张感强,让视觉更好的聚焦,省电

3.不可操作——大屏主要用来给来用户看的。用户一般不会直接操作大屏

4.空间局限——大屏不像网页有滚动条,它的长宽都是固定的

5.单独主题——每块大屏都有具体想给用户表达某个主题

第一步、调查研究

需要调研的点:

1.大屏的主题——这个屏用户要看什么信息(要规避哪些信息)

  1. 数据的可靠性和准确性——对所展示的具体信息的数据进行核实常规数值是多少?历史上的极端数值又是多少?

人们通常会使用"TOP10"来表示优先级或重要性;然而,在某些情况下,用户可能只是了解"TOP"能够表达这一概念,并不知道还有其他多种形式可以表示相同的信息。

第二步、视觉效果定位(脑暴穷举、分类去重、投票确定)

紧张:数据的实时,动效的变化

科技:新颖的图表,新颖的动效

丰富:数据丰富,丰富层次感,图表类型多,强烈的空间感

权威:安全元素

第四步、数据表现元素

常规数据表现元素:地图,top10,饼图,列表,数字,趋势等。

当在多个屏幕上仅放置这些元素时,在视觉呈现上显得不够丰富且缺少心意与业务间的差异性表现。因此有必要对每个需求进行深入分析

第五步、需求分析,数据挖掘

1.拆分维度——将需求拆分到最小维度

2.确定优先——选择最佳数据来说明观点

3.合并维度——对维度元素进行归类,化繁为简

4.最佳表现——确定用哪种表现形式来体现数据

举个栗子:

在处理某一特定区域的大屏内容时

我们首先会对这个内容进行分解,并将其划分为更小的维度。请问您能否指出最少需要划分多少维度?

接着,确定这些维度的主次优先级。

按相似度将这些信息进行分类处理,以降低其复杂性为目标。对于具有最高关联性的维度,请将其标识为同一颜色,并描绘所有的关系网络。

从图表中可以看出各维数据间相互关联的情况。通过分析可以看出时间维度与所有内容在分析中表现出密切关联。

但是时间又是一个隐性的概念,在大屏展示数据时为了传达紧迫感而采用动态展示的方式。在设计该维度时无需特定视觉符号直接呈现而是通过时间节点上的互动效果来暗示其存在。因此我们可以放弃时间轴的设计并重新排列交互关系的位置

理清逻辑关系时, 我们通常采用的是基于思维导图的方法

关系理清楚后,我们接下来可以就行规划设计了。

第六步、规划设计

在这块主要是细节和感受的设计。

1.模块设计——考虑的模块纵横栅格布局设计

2.维度表现——具体维度用什么表现的确定

3.动效设计——时间的把握和情感的控制

4.数据量管理——通过呈现方式上的管控展现数据量的不确定分布特征。在分析极端情况时需要注意避免出现过于密集或过于稀疏的数据分布模式带来的问题

大屏和其他显示屏一样,本身都是有固定分辨率的。

拼接大屏:普遍采用拼接式显示器的情况下,在UI设计过程中无需特别考虑屏幕边缘之间的间隙对内容展示的影响。这种设计能够确保内容完整性不受破坏(即不会因缝隙而影响内容的完整性)。然而,在某些情况下可能会对视觉效果造成一定的负面影响(例如一个巨大的角色形象若正中屏幕边缘则会被分割成两个部分或者被分割于眼睑之间显得十分不舒服)。因此,在设计时建议预先绘制参考线来规避类似问题的发生。(目前企业常用的有无间隙拼接、1.7毫米缝隙(约2毫米间距)、以及3.5毫米缝隙(约5毫米间距)这三种主流的拼接方案;一般来说, 缝隙宽度越小, 费用越高)

在设计中,默认使用的是由多块16:9分辨率构成的拼接屏幕,在计算整体布局时,默认将垂直方向的高度设置为默认值——如您选择三行显示,则垂直方向的高度应设置为此值;具体来说,在计算整体布局时,默认将垂直方向的高度设置为默认值——如您选择三行显示,则垂直方向的高度应设置为此值;具体来说,在计算整体布局时,默认将垂直方向的高度设置为默认值——如您选择三行显示,则垂直方向的高度应设置为此值;具体来说,在计算整体布局时,默认将垂直方向的高度设置为默认值——如您选择三行显示,则垂直方向的高度应设置为此值;具体来说,在计算整体布局时,默认将垂直方向的高度设置为默认值——如您选择三行显示,则垂直方向的高度应设置为此值;举个例子来说,在一个常见的应用中

第七步、检查测试

1.重视需求——过一遍需求是不是能够满足。

实地测试——将效果展示在大屏幕上,并观察其是否便于阅读;同时检查其动效是否符合预期目标;最后评估其明度差异能否被接受。

3.可信性测试——当作为讲解人员,在向用户展示大屏时,请确保用一句话简明扼要地描述内容,并且确保描述清晰易懂

设计大屏必须经过长期持续的努力和规划。在实际运行中出现的数据无法预览会导致许多问题在大屏展示后才被发现

整个项目的流程

那让大屏怎么看起来更炫酷,简单的总结几个方法:

1)布局排版

大屏的核心功能是为业务服务,并且能够合理地呈现各项业务数据。通常情况下展示的是企业整体运营的核心数据,并将其划分为若干关键维度进行分析:其中一部分是能够直接反映核心运营状况的主要绩效指数(main performance indicators),另一部分则是辅助性的次级指标准备(secondary auxiliary indicators)。在设计制作过程中根据需求分别赋予不同侧重点以确保信息传递的精准性和直观性。

2)色彩

景色可分为整体背景和单个元素的背景,不论是哪一个都需要遵循两大核心原则:深色调及一致感。

整体背景采用深色系设计,在选择颜色时具有较大的自由度;然而,在搭配过程中能够满足多数人视觉感受的最佳方案是以深蓝色系为主色调,并提供以下几个具体的搭配案例。基于丰富的项目经验而言,在为单个组件元素设计时强烈推荐采用某种透明白色进行点缀,在具体应用中建议其透明度设置在10%左右为宜,并通过实际效果测试进行微调确定最合适的数值范围。

3)点缀效果

感官体验受到细节的影响,在大屏展示时也是如此;细节对整体效果的影响更为显著;为了提升视觉上的吸引力与专业性,在元素布局及图形设计中融入适当的装饰性设计至关重要

4)动效

动效的增加能让大屏看上去是活的,增加观感体验。

以下举几个案例:

阿里在数据可视化方面处于行业的领先地位,在2015年双11期间就已经采用了DataV数据可视化引擎搭建了一个基于DataV的数据大屏。

该大屏采用了DataV数据可视化引擎,并基于d.chart组件库和地理相关组件库d.map构建了专业数据可视化模板来构成视觉框架结构。在Cube前端框架的支持下完成了一个集成化的web服务系统。通过该引擎能够高效地还原设计师提供的原型图并实现多种数据源的无缝连接同时结合最终的数据可视化配置对系统的显示效果进行全面优化从而实现了所见即所得的数据呈现效果。

工作流程:经历了多个阶段:先从'设计->开发'到'重新审视与优化'的改进版本,并通过循环迭代实现了更高的效率和质量

市场上多种多样化的可视化工具非常丰富,在众多的数据处理分析软件中,帆软与Tableau各自都有独特的特色。

可以根据业务需求,选择工具,来展示自己的大屏。

以下启动finereport设计器中,依据布局样式从组件栏导入相应的图表元素到指定区域后进行数据绑定

点击预览按钮,浏览器端的效果如下图所示。

接下来就是配色、点缀和动效了,可根据需求调整界面效果。

还有很多值得推荐的可视化工具,以下列出几个,供大家学习:

地图数据可视化工具

纯可视化图表生成/图表插件——适合开发,工程师

可视化报表类——适合报表开发、BI工程师

商业智能分析——适合BI工程师、数据分析师

可视化大屏类

这是最近几天对数据大屏的一些学习,在这里进行分享。

如果感觉有帮助,请点赞啦,谢谢~~

全部评论 (0)

还没有任何评论哟~