可视化大屏设计

参考工具

• 阿里云DataV https://data.aliyun.com/visual/datav
• 百度Sugar https://cloud.baidu.com/product/sugar.html
• 腾讯云图 https://cloud.tencent.com/product/yuntu
• FineReport http://www.finereport.com/
• 大屏数据可视化 https://yyhsong.github.io/iDataV/
• https://github.com/yyhsong/iDataV

可视化工具

• https://rawgraphs.io/
• https://www.chartjs.org/
• https://d3js.org/
• https://www.fusioncharts.com/
• http://philogb.github.io/jit/
• https://www.zingchart.com/
• http://www.flotcharts.org/
• https://gephi.org/
• https://infogram.com/
• https://www.icharts.net/

图表插件

• https://echarts.baidu.com/
• http://antv.alipay.com
• https://www.highcharts.com.cn/

数据可视化

• 数据可视化是把相对复杂、抽象的数据通过可视的方式以人们更加易于理解的形式展现出来的一系列手段。
• 数据可视化是为了更形象地表达数据内在的信息和规律，促进数据信息的传播和应用。
• 数据可视化除了可视，还可以有交流、互动的特点。
• 数据可视化的本质是数据空间到图形空间的映射，是抽象数据的具象表达。

数据可视化的本质

大屏数据可视化

大屏数据可视化是以大屏为主要展示载体的数据可视化设计，大屏易于在观感上给人留下震撼印象，便于营造某些独特氛围，打造仪式感。原本看不见的数据可视化后，便能调动人的情绪，引发人的共鸣，传递企业文件和价值。

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

大屏终端

常见大屏类型包括16:9屏、超宽屏、折叠屏、三面屏、T字屏...

拼接大屏

大屏几乎都是拼接屏，UI设计时不用考虑屏幕缝隙影响内容的呈现，内容不会丢失，但有可能影响视觉的表现。所以设计时可建立缝隙位置的参考线避免类似情况发生。现在企业常用的无缝隙、1.7mm缝隙、3.5mm缝隙三种拼接大屏，缝隙越小价格越贵。

显示特点

• 面积巨大：字体不能设计很小
• 深色背景：紧张感强，让视觉更好聚焦。

屏幕尺寸

• 屏幕尺寸与视觉稿设计比例要匹配，屏幕分辨率与可视化界面清晰度相关，PPI值越高画面细节越丰富。
• 拼接的每块小屏一般是16:9的高清屏，设计尺寸可以把上下高度设定为1080px，长度按照拼接屏的数量比例得出长度的设计尺寸。

例如：尺寸 (10500mm + 24000mm + 10500mm) x 6000mm，像素点6144x1024，PPI为45。

屏幕尺寸

例如：3x5大屏

3x5大屏

屏幕分辨率

为了最优化展示效果，首先需要了解物理大屏长宽比，确定设计稿尺寸，其次需要清楚大屏系统的内在原理：信号源 - 大屏接收器 - 播放控制设备。

大屏系统内在原理

一般情况下设计稿的分辨率多为1920 x 1080，同时需要要理解四个概念：

• 大屏逻辑分辨率 = 设计稿尺寸
• 显卡输出分辨率
• 视频矩阵切换器（DVI）支持分辨率
• 大屏实际物理分辨率

最佳展示效果

• 大屏逻辑分辨率（设计稿尺寸）长宽比 = 大屏实际物理分辨率长宽比
• 大屏逻辑分辨率（设计稿尺寸）长宽比 = 显卡输出分辨率长宽比
• 显卡输出分辨率 = 视频矩阵切换器（DVI）支持分辨率 = 大屏实际物理分辨率

设计原则

数据墨水比例原则
定义表现数据的墨水在打印图表的总墨水的占比，在合理的基础上，使数据墨水比例最大化并去除非数据墨水和多余的数据墨水。 --- 设计师爱德华 R 塔夫特 《量化信息的视觉表现》

数据墨水比例原则表达的核心思想使简洁，图表要简洁，数据要简洁。大屏可视化是针对客户场景，理解数据复杂性的基础上，通过可视化手段，形成高度提炼的故事。

数据可视化通俗说就是用图表讲故事，人们关心的从来不是数据，数据不是重点，它只是达到目的的手段，人们关心的数据背后的意义。

在一部完成作品所体现的全部创作努力中，作家75%以上的劳动都用在了故事设计上。 ---《故事》

调研

• 展示主题
• 数据权威和准确性

设计关键词：科技、动态、可交互

设计流程

设计流程

指标设计

关键指标是一些概括性词语，是对一组或一系列数据的统称。一般而言一个指标在大屏上独占一块区域，通过关键指标定义，就直到大屏上大概会显示哪些以及大屏会被分为几块。确定关键指标后，根据业务需求拟定出各个指标展示的优先级（主、次、辅）。

指标布局

大屏一定是以展示数据为核心，任何炫酷表现都要建立在不影响数据的有效展示上。一个大屏一定会有明确的主题，推荐实用多维度拆解北极星指标法。

1. 首先确定一个北极星指标，即主题。
2. 多维度拆解北极星指标，从时间 、地理、计划、占比等维度拆解主题。

视觉

• 紧张：数据的实时、动效的变化
• 科技：新颖的图表、新颖的动效
• 丰富：数据丰富，层次感强，图标类型丰富，强烈的空间感。
• 权威：安全元素

表现

• 地图
• 排行
• 饼图
• 列表
• 数字
• 趋势

数据

• 拆分维度，将需求拆分到最小维度。
• 确定优先，选择最佳数据来说明观念。
• 合并维度，对维度元素进行归类
• 最佳表现，确定那种表现形式来提现数据

设计

• 模块设计，考虑模块纵横栅格布局设计。
• 维度表现，具体维度用什么表现确定。
• 动效设计，时间把握和情感控制。
• 数量控制，对是实施数据得可控性进行展现上得控制。

功能性结构层次

布局排版

确定设计稿尺寸后需要对页面布局和划分，对于数据的排布划分原则：主次分明、条理清晰、注意留白。根据业务需求抽取关键性的指标，按照重要程度可分为主、次、辅。

• 主：主要指标多位于屏幕正中央，可添加适当动效增强视觉效果。
• 次：次要指标多位于屏幕两边，较多变现为各类图表。
• 辅：辅助信息多为主要指标的补充信息，常伴随交互效果或动态下呈现，可展示亦可不展示。

主次辅

布局的目的是为了让业务指标和数据合理地展现，展现全局业务一般分为主要指标和次要指标两个层次，主要指标反映核心业务，次要指标用于进一步阐述分析。推荐主次分布版式，让信息一目了然，也可以实用平均分布，或二者结合。

例如：监控大屏由于监控数量庞大，常常被划分为总屏和分屏，总屏多用于展示事件状态趋势、风险预警、风险处理进度。分屏则多用于展示详细的数据分析和风险事件的处理。如何排布数据需要紧密结合业务需求和用户体验。

布局排版

大屏排版布局上需要遵循四大原则（CRAP）

• 对比（Contrast）：完全不同的数据类型，选择间然不同的信息图示。
• 重复（Repetition）：相同类型或相似数据，选用尽可能相同的信息图示。
• 对齐（Alignment）：利用对齐方式保证信息图示之间的视觉联系
• 亲密性（Proximity）：相关的数据项组织在一起，视觉上呈现出一体化。

四大原则

配色方案

可视化大屏的配色是视觉呈现的重要组成要素，配色常与行业类型、业务形态、应用场景、设计理念、营造氛围等密切相关。

色彩搭配的原则

• 色彩明度与饱和度差异显著对比鲜明，避免使用邻近色配色。
• 仿造自然配色，避免色域强对比配色方案。
• 暗色背景聚焦视觉，减少拼缝的不适感。避免大面积的浅色背景。
  使用深色调作为背景可减少拼缝带来的不适感，由于背景面积大，使用暗色背景能减少色差对整体表现得影响，同时暗色背景更能聚焦视觉，也方便突出内容。
  深色调&一致性，深色调紧张感强，让视觉更好地聚焦，大屏暗色调看上去更柔和舒服不刺眼，也比较会省电。
• 大屏存在色域差建于一多使用纯色，避免大量使用渐变色。
  适当使用渐变色，由于大屏普遍存在色域偏差，更建议多使用纯色。

例如：整体背景深色系，以深蓝色为主，推荐为单个元素搭配透明色，透明度设置在10%上下。

配色

例如：

• 标题：#00FF26
• 背景：#0FEBFF
• 点缀：#53EFC0
• 点缀：#FD6760

点缀：适当给元素标题、数字添加诸如边框、图画等在内得点缀效果，能帮助提升整体的美观度。

字体设计

可视化数据的字体有哪些考虑呢？

• 优先使用默认字体
• 字体的可识别性强
• 设计风格的融合度
• 是否可以免费商用

规范设计：字体规范、色彩使用、界面元素、图形图标、界面全览

字体不小于12号，可用于图表标注，数据信息建议14号以上。字体不一定只用一种，可实用科技感强的字体。

• 数字字体：字号大于40pt时可使用Acens字体。
• 数字字体：字号小于40pt可使用Din字体
• 英文字体：使用Helvetica Neue，适用于界面中所有英文字符。
• 中文字体：使用微软雅黑，适用于界面所有中中文字符。

信息图示

数据可视化处理的流程是：数据采集 - 数据清理 - 数据分析 - 可视化数据

• 数据采集
  需要基于业务展示需求，也就是“展示什么”。比如实时数据指标、对比类型数据指标、统计类型数据指标等，从相关业务层面提取的重要数据，用于大屏数据展示。
• 数据清理
  对数据进行归类处理，明确数据之间的关系，存在比较型、构成型、联系型、分布型。
• 数据分析
  根据归类处理后的数据，并结合从维度的划分：一维数据、二维数据、三维数据、多维数据、时态数据、层次数据等，将强关联性的数据进行组合重构，得到全新的数据信息关系。
• 可视化数据
  根据重构后的数据信息关系，选择对应的可适用数表信息图，比如条形图、柱状图、雷达图、折线图、正态分布图、散点图、实时3D渲染地图等。

信息展示

信息图

https://www.jianshu.com/p/d8fccd0c55d6

• 折线图

折线图用于表示数据的变化和趋势，坐标轴的不同对折线的变化幅度有很大影响。折线上下大概占2/3的位置数据表现清晰合理。

折线图线条粗细合理，过细的折线会降低数据表现，过粗的折线会损失折线中的数据波动细节，视觉上较难精确找到折现点的相应数值。推荐使用两个像素的线，看起来会比较合适。