大屏可视化设计——流程心得

大屏数据可视化设计方法论很少，正好自己参与过部门多个大屏项目，所以总结了大屏可视化设计的方法。

希望通过这篇文章能帮助大家整理思考过程，提高工作效率，同时很好的达到目标，找到兴趣。

下图为参与过的项目大屏主要部分

图中数据由于安全保密性，具体文案都作了处理

先给大家讲下大屏自身的特点：

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

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

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

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

5.单独主题——每块大屏都有具体想给来宾表达某个主题(特指阿里大屏)

知道了这些，如果我们遇到一个具体的大屏项目，要怎么来设计呢?

下面我将自己经历过的项目和思考过程和大家分享下。

以下是我自己总结出来的设计步骤：

第一步、调查研究

需要调研的点：

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

2.数据的权威和准确性——对具体要展示的信息进行数据的核对正常数据是多少，历史上极限数据是多少?

3.用户的其他需求点——用户说要用TOP10，但有时候只是用户只知道TOP能表达，还有很多形式也能表示TOP的信息。

案例：

部门准备做一系列专门描述特定业务场景的大屏。他们即统一(整体大风格)，又有区别(每个业务要有自己的特点)

我们为了避免在后期大家有风格上的分歧而不断修改造成项目的延期。决定尽快让需求方确定风格。

我们使用的快速可行性测试(2013年IXDC上微软分享过，我们做了更加符合当前业务的修改)。目的是让大家快速确定风格。保证大家的目标统一。

最后我们确定了紧张，科技，权威，丰富。并且会每个关键词进行了专门的理解。

紧张：数据的实时，动效的变化

科技：新颖的图表，新颖的动效

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

权威：安全元素。

接下来是对每个数据的chick，知道每个数据代表什么，用什么展现最好。

从和业务沟通了解到，他们需要地图，top10，饼图，列表，数字，趋势，这些图表。这些能满足他们目前所有的需求。

但是如果在多有的屏上都只放这些元素，展现上会缺乏很多心意，业务差别性也不好体现。所以需要对每个需求再剖析。

第二步、拆合分析

在这一步，需要重点做到以下几点，帮助我们分析，理清思路。

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

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

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

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

举例：在做这一系列的具体某一个屏时A业务需要大屏展示的内容：我们的业务针对特定区域的保护，正在实时防御着世界各地多类型的攻击。能看到每个攻击类型的当天累加值和趋势。

对于这个内容，我们先进行拆分维度。你们能看到多少维度呢?(一定要拆到最小维度)

因为重点要表达的是我们防住了这些攻击——表达这种自豪的情感。所以我们在来确定这些维度的主次优先级。

看这些主要的维度有没有可能进行合并呢?对这些信息进行相似度归类，化繁为简。关联性最多的维度用同一种颜色表示，画出所有的关系。

上图表示，所有的维度互相关系。我们可以发现时间维度和所有的内容都有联系。但是时间又是个隐形的内容，大屏上的数据为了表示紧张性，时间如果是实时展现的。那么这个维度在设计的时候不必要用某个具体的视觉元素来表现，是通过在时间节点上的动效变化来表现的。所以我们把这时间线去掉看效果。

效果清爽了不少，但是线还是很交错的不方便阅读和理解。对交错关系的维度进行位置的调整。

攻击类型：他和次要维度都有关联。

攻击仿效：和保护点和地狱有交错。

我们可以看到主图的关系中。攻击点是所有维度中关联性最强的。供给量和攻击类型可以是他的属性。地狱是攻击点和保护点的属性。

这样重点就是攻击点到被攻击点的过程了。

各类型日累计量可以通过计数器来表达。各攻击趋势可以通过趋势图来表现。剩下的就是这么来设计这张地图了。