不可不知的大屏可视化设计方法

      生活就是一个问题解决了，又出现新的问题。工作也是。感觉今年的工作遇到的都是救场。着急忙慌的就要结果。又要好又要快，资料数据有限众口难调，烧的都是脑。最近一直在做原型，包括看板、教育地图、大屏。方法论了解必不可少。本文用一个销售监控案例说明大屏可视化设计步骤和方法。阅读用时约3分钟。

      数据可视化是数据分析中的一部分，是把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段，是为了使用户快速读懂数据背后的含义。大屏数据可视化，只是以大屏为数据展示载体，实现炫酷的动效，并且在企业中有很多丰富的应用场景，如销售监控大屏、运营监控大屏、市场投放大屏、智慧交通大屏等。

      设计数据可视化大屏的基本步骤如下：

1

选取主题故事  

      选取主题故事需要先了解公司的核心业务，如果是初次接触公司，先从公司组织架构开始，通常人数较多的部门属于公司的核心业务部门，再了解公司的核心业务逻辑，即赚钱的方式。如果可以最好进行需求调研（包括业务调研和信息调研、大屏分辨率、开发工具），确认对方的业务关注点，选取合适的主题故事。

2

确定内容物料  

1）确定大屏里要展示的内容，对排版布局至关重要。根据业务场景选择关键指标，一个指标在大屏上独占区域，所以通过关键指标定义，会确定大屏上大概会显示哪些内容以及大屏会被分为几块。

如下列出指标-维度矩阵，选取合适的指标维度：

2）内容物料展示方式

       

      确定指标分析维度后，可以从联系、分布、比较、构成四个角度去考虑我们想通过可视化表达什么样的信息，从而确定数据之间的关系。

联系：数据之间的相关性

分布：指标里的数据主要集中在什么范围、表现出怎样的规律

比较：数据之间存在何种差异、差异主要体现在哪些方面

构成：指标里的数据都由哪几部分组成、每部分占比如何

       图表的选择可参考图表建议-思维指南，但不限于给出的形式。数据展示的物料元素可以做成RP模板保存，需要的时候直接从模板里复制出来直接放到已经做好布局设计的大屏页面上，修改其中的标题和横纵坐标所代表的含义即可。保存数据物料元素的好处是可以非常快速的将所需要展示的内容模块设计完成。

3

确定大屏通用设计元素  

      大屏的展示空间有限，我们只能将领导关注的关键数据展示在上面，便于领导层决策参考，所以我们需要根据之前定好的业务指标进行排版，把重要信息突出：

• 主：核心业务指标安排在中间位置、占较大面积，多为动态效果丰富的地图

• 次：次要指标位于屏幕两侧，多为各类图表

• 辅：辅助分析的内容，可以通过钻取联动、轮播显示

      一般把有关联的指标让其相邻或靠近，把图表类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率。

       通常大屏通用设计元素包括：布局、边框、背景、动效、主题、配色(年度代表色)，其中布局按黄金比例和焦点规则设计；增加边框提升专业度；背景以深色为主，不要有过多点缀；制作动效为大屏增添实时感；实时加入节日主题，防止审美疲劳。配色设计参考配色网址：

https://colorsupplyyy.com/app/

4

按照视觉规则填充内容  

      内容填充我们可以利用多种工具，看自身习惯。如果你是技术大牛可以使用JS+Echarts，这个比较考验技术水平。所以我推荐使用可视化工具FineReport、DataV、Tableau、PPT、Excel，简单方便，重点是不用写代码，如FineReport自带图表插件可视化效果比较好，其中3D效果更增加其动态效果。内容就请同学们自行填充，此处就不再展示了。

·················END·················

推荐阅读

1. 超细节！数据分析社招面试指南
   

2. 写给所有数据人。

3. 从留存率业务案例谈0-1的数据指标体系

4. 数据分析师的一周
   

5. 超级菜鸟如何入门数据分析？
   

欢迎长按扫码关注「数据管道」