以下内容转载自:《可能是最详细的大屏数据可视化设计指南,作者:程远

705303260d12d0e4006505bc827990f9.png

目录1. 基础概念  1.1. 什么是数据可视化  1.2. 什么是大屏数据可视化2. 大屏数据可视化设计原则3. 大屏可视化设计流程  3.1 根据业务场景抽取关键指标  3.2 确立指标分析维度  3.3 选定可视化图表类型4. 了解物理大屏,确定设计稿尺寸5. 页面布局、划分6. 页面定稿、开发7. 注意事项  7.1 字体使用  7.2 配色搭配  7.3 页面布局
73ea5446add7127837accab018a31327.png1. 基础概念

1.1. 什么是数据可视化

把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数据内在的信息和规律,促进数据信息的传播和应用。数据可视化的本质是数据空间到图形空间的映射,是抽象数据的具象表达。

069a7d431d8164ec3779ff2e57c1d8d0.png

1.2. 什么是大屏数据可视化

大屏数据可视化是以大屏为主要展示载体的数据可视化设计。「大面积、炫酷动效、丰富色彩」,大屏易在观感上给人留下震撼印象,便于营造某些独特氛围、打造仪式感。电商双11时大屏利用此特点打造了热烈、狂欢的节日氛围,原本看不见的数据可视化后,便能调动人的情绪、引发人的共鸣,传递企业文化和价值。

5a958a1b26cf637fed611fba9b8295af.gif

利用面积大、可展示信息多的特点,通过关键信息大屏共享的方式可方便团队讨论和决策,故大屏也常用来做数据分析监测使用。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。

2. 大屏数据可视化设计原则
  • 大屏设计要避免为了展示而展示,排版布局、图表选用等应服务于业务,所以大屏设计是在充分了解业务需求的基础上进行的。

  • 大屏因为大,承载数据多,为了避免观者迷失,大屏信息呈现要有焦点、有主次。可以通过对比,先把核心数据抛给用户,待用户理解大屏主要内容与展示逻辑后,再逐级浏览二三级内容。部分细节数据可暂时隐藏,用户需要时可通过鼠标点击等交互方式唤起。

3. 大屏可视化设计流程

d50df8b5228bd910f23da36c5b6db12a.png

3.1 根据业务场景抽取关键指标

关键指标是一些概括性词语,是对一组或者一系列数据的统称。一般情况下,一个指标在大屏上独占一块区域,所以通过关键指标定义,我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。确定关键指标后,根据业务需求拟定各个指标展示的优先级(主、次、辅)。

b4fd25b4a7d3c97ef1bedfa8e34c68eb.png

3.2 确立指标分析维度

「横看成岭侧成峰」。同一个指标的数据,从不同维度分析就有不同结果。很多小伙伴做完可视化设计,发现可视化图形并没有准确表达自己的意图,也没能向观者传达出应有的信息,可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。

59cff21122a0fc1974103011811b2d0b.png

3.3 选定可视化图表类型

当确定好分析维度后,事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。选定图表注意事项:易理解、可实现。

5eb23aac99c85741894ec51068a7cee8.png

c14974dcb40fa4b53543f8c2aab2cfaf.png

4. 了解物理大屏,确定设计稿尺寸

350c0a149d760f62eb0270719b63e3e1.png

5. 页面布局、划分

尺寸确立后,接下来要对设计稿进行布局和页面的划分。这里的划分,主要根据我们之前定好的业务指标进行,核心业务指标安排在中间位置、占较大面积;其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近,把图表类型相近的指标放一起,这样能减少观者认知上的负担并提高信息传递的效率。

e16c53d7cde270724277842a98f9e489.png

6. 页面定稿、开发

d9746776c09d9f01dd8c8456ae22a7bd.png

7. 注意事项

7.1 字体使用

字体优先使用系统默认字体,需要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。

cb6e0c12b5099d61cd5cf3b0d8b627e6.png

7.2 配色搭配

色彩明度与饱和度差异显著、对比鲜明, 尽量避免使用邻近色配色。

f6e52e4d3ae34bcc8131a40a6c09fa0a.png

7.3 页面布局

主次分明、条理清晰、注意留白,合理利用大屏上各个小的显示单元,并尽量避免关键数据被拼缝分割。

abdec9f2b386b4d1a08cb8f4b3dc879b.png

参考:

可能是最详细的大屏数据可视化设计指南:

https://www.uisdc.com/large-screen-data-visualization-design

02a13a3842bbdbb3b88e7a1646d8a354.png


91e9a831f1cada1d1440c803d36733c2.png

Logo

永洪科技,致力于打造全球领先的数据技术厂商,具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。

更多推荐