数据可视化的本质是数据空间到图形空间的映射，是抽象数据的具象表达。而大屏利用面积大、可展示信息多的特点，通过共享观看的方式可方便团队演示和决策。结合以往的设计经验，我们从布局、场景、表达、传递、展现五个方面总结梳理了设计过程中的一些思索，与大家一起交流探讨。
一、有序传递：合理布局，主次有序
大屏设计要避免为了展示而展示，排版布局应服务于业务，大屏展示信息量大，为了用户高效有序的接收，信息呈现要有焦点、有主次。设计之前应该对之前既定的业务内容按照主、次、辅的层级进行划分。
图1 合理布局，主次有序示意图
在设计时把核心数据和重点内容采用大面积、动效、高亮度等视觉强化手段优先展示给用户，让用户理解大屏主要内容与展示逻辑后，其余的指标按优先级引导用户逐级阅读。一般把有关联的指标和业务内容让其相邻或靠近，辅助内容弱化或折叠的形式展示给用户，这样能减少观者认知上的负担并提高信息传递的效率。
图2 大屏典型布局形式示意图
上图为最典型的大屏布局形式，但在实际项目中由于业务内容、展现形式、视觉样式等因素的加入，会采用更为多元、丰富的布局形式，布局的总体思路按照先大后小、从左到右、从上到下的阅读习惯去排列内容即可。
图3 大屏布局总体思路示意图
二、场景叙事：打造场景，展开叙事
可视化大屏往往承载着庞大的数据量和专业的业务信息，如何将这些内容简单而有效的传递给用户是UI设计师的设计目标，从以往单纯图表罗列展示逐渐发展为基于某类场景或单位为基础进行设计，结合或者搭建场景来展示业务内容，比早期单纯的图形图表类更为形象生动，且数据与对象结合、交互更为紧密。
图4 可视化大屏早期单纯图表罗列表达示意图
早期的图表罗列式表达，将业务内容以简单的可视化图形展示出来，这种形式有一定的缺陷：
- 信息传达没有明显的主次之分，也就是信息层级不够突出
- 板块之间的关联性不够紧密
- 数据信息在传递过程中不够生动，不太能打动用户、帮助用户理解业务逻辑和数据价值
为了更好的展示业务主题和数据信息，可以打破这种图表平铺的形式，提取业务重点构建以对象、情景、事件为内容的场景主题，采取场景叙事的形式展示业务内容，化概念为具象，以此帮助用户理解内容，并且提高用户的视觉体验。
图5 可视化大屏场景叙事形式表达示意图
例如在全流程管控类大屏中，可以先提取主要的业务内容，分为：
- 对象-流程节点
- 情景-业扩全流程
- 事件-项目数据监控
以此搭建基于流程类的场景，围绕场景先展示每个部门的总体数据让用户可以了解每个部门的重要概况，后基于每个流程节点展开呈现项目总数、预警数、告警数，让用户对每个节点数据一一了解，做到全局管控。
图6 业扩全流程管控类大屏展示示意图
场景叙事还可以应用于更多的业务主题，如基于对流程节点展示、地域分布调度、工单任务、设备运行状态、场馆实时监控、城市交通安防等业务，通过针对性的基于某个场景进行展开设计，以此提升整体用户体验。
图7 场景叙事式大屏展示案例示意图
当然，不是每个业务需求一定要有场景叙事式表达，只是我们在正常情况下可以优先考虑这种设计思路。
三、表达合理：细分图表，合理展示
精挑细选可视化表达形式和展示方式，如联系类、分布类、比较类、构成类等展示方式，准确合理的展示业务内容。其中：
- 联系：数据之间的相关性。（旭日图、和弦图、桑基图…）
- 分布：指标里的数据主要集中在什么范围、表现出怎样的规律。（漏斗图、直方图、气泡图、漏斗图、正态分布图…）
- 比较：数据之间存在何种差异、差异主要体现在哪些方面。（条形图、柱状图、旋风图、曲线图、雷达图….）
- 构成：指标里的数据都由哪几部分组成、每部分占比如何。（饼图、堆积图、环形图、嵌套饼图、K线图、面积图….）
1、选型合理：展示地区对比排名要选用柱状图图而非曲线图
图8 可视化展示方式选型合理案例示意图
2、使用规范：选用饼图展示顺序和逻辑关系，比如从大到小（顺时针）有序排列而非随机排列
图9 可视化展示方式使用规范案例示意图
3、突出重点：选用百分比的环形图时要注意配色层级，在环形图中降低环形的背景色，突出展示占比部分
图10 可视化展示方式突出重点案例示意图
4、合理排列：注意柱状图横坐标文字的排列，规整、醒目、辨识度高、易读
图11 可视化展示方式合理排列案例示意图
5、注意细节：如柱状图纵坐标量级的选用，用合适的纵坐标能更清晰的体现数据之间存在的差异
图12 可视化展示方式注意细节案例示意图
6、美观实用：考虑到用户认知上的负担并提高信息传递的效率，比较理想状态应该是一看就懂，不需要思考和过度理解，而往往具有新鲜感和创意的可视化图表形式也会有一定的认知负担，因而选定图表时要合理，尽量兼顾信息传达和视觉感受使两者平衡。
四、张弛有度：渐进传达，事分巨细
将重点或概览性的内容精简展示出来，详细内容可以逐步完整体现，部分细节数据可暂时隐藏，甚至需要时可通过鼠标点击等交互方式唤起。
如算法模型的可视化大屏，该大屏主要基于对数据相似度计算来识别营销、生产及GIS三系统中的同一对象，从而构建平行模型，进行数据异常处理。设计前提取流程4个关键节点划分为四个场景，宏观上清晰的展示整体流程，通过点击展开单个场景的详细数据，从微观上做到数据俱全。如第一步“对象相似度”，中间两个半透明晶格立方体表示GIS和营销两个对象，立方体四面分别对应对象的四个属性，中间连线和三角形表示两属性之间的比较关系，右下角的数据是两个对象比较后的最终得分。除了看到跟小图中一样的信息展开后的界面还能看到左右两边四个属性的具体数据，点击节点查看相似度的对比详情。
图13 可视化大屏渐进传达，事分巨细案例示意图（1）
图14 可视化大屏渐进传达，事分巨细案例示意图（2）
五、动静相宜：结合动效，提升体验
越来越多的大屏设计中增加了动效设计，进一步增强了大屏的视觉体验，如加载时的入场动效、装饰性的氛围动效、提示聚焦性的强调动效、点击操作类的交互动效甚至是页面切换之间的转场动效等等，都为大屏带来了更为生动酷炫的用户体验。
1、加载动效
图15 可视化大屏加载动效展示示意图
2、氛围动效
图16 可视化大屏氛围动效展示示意图
3、强调动效
图17 可视化大屏强调动效展示示意图
4、交互动效
图18 可视化大屏交互动效展示示意图
5、转场动效
图19 可视化大屏转场动效展示示意图
当然，动效并不是越多越好，满屏的动效只会让用户的视线无处安放，只有恰当的地方、合适的时间增加动效才能让大屏的整体体验更上一层楼，动静相宜才能相得益彰。
结语
可视化大屏正迎来蓬勃发展阶段，在数据传达上挖掘更多闪光点，让数据信息更具价值是我们不断追逐的目标。文章结合对电力行业可视化大屏的实践案例，从布局、场景、表达、传递、展现五个方面进行了探讨，期望这些思考和经验能为未来可视化大屏设计提供借鉴，让可视化大屏信息传达更为精准、高效、美观，同时展现出更具价值的数据信息。
