数据可视化大屏设计— 实战经验

最近做了个可视化大屏的项目，总结了一些实战经验分享给大家，希望能够帮助大家快速入门，少走弯路。

设计流程
1，了解项目背景产品定位在做任何项目之前我们n & X ? l & & I t肯定要先了解项目背景，为什么要做这件事，价值是什么？想达到什么目的以及产品的定位是什么，针对人群有u [ b 4 N u {哪些，业务诉求是什么等等。
2，前期调研竞品分析
3，设计规划
（1）了解物理大屏，确定尺寸。O l o v n s
（2）确定设计目S H U R A h 3 Z w标，通过情绪版定, a \义风格。
（3）根据业务场景确定展示内容及布局划分，制定故事线，结构要清晰易懂。
（4）理解数据，数据清洗，整合数据（需要清楚数据本质代表的意义和数W | – 7据的目的。因为会有一些脏数据之类的，所以~ } n ;在设计的时候要考虑到拓展性）。
（5）选择可视化图t A s表类型（易理解，可实现）。
（6）地理信息可视化创新与可行性评估。
4，设计实施数据信息有效表达，从形– J j 8 y M，色，质，构，字，动几个方面设计，然后评审，定稿，制定规范，开发。
5，项目跟进（现场体验，质量把控，细节调优）
6，复盘
了解数据可视化
数据可视化是利用图表，图形化的设计手段把相对复杂、不直观的数据，清晰U a E O有效地展现出来，降? q E ^ 1 x ^低门槛，使观者更易理解。可视化能够帮助观者更快速的发现问题，辅助决策分析，提N U # v /升资源利用率，挖掘数据背后的商业价值。
数据可视化大_ B l u G A i屏展示可分3大类:信息展示、数据r K k { X \ # 1分析、监控预警。
信息展示：可以帮助提升企业形象，便于媒体推广、企业参观接待等；（其实就是秀肌肉用的），能够提高观者对产品和企业的认同感。引发共鸣，传l ! t F } 1 ( 5递企业文化和价值。场景一般用于发布会、直播现场、企业展厅/会议中心、智慧城市/园区接待处等。
数据分析：关键信息共享展示方便团队讨论和决策，更注重交互，多维度信息Y 2 2 /，更好的决策，发现新机会，同时帮助大家建立数据S s p O d z : $ S意识。
监控预警：帮助高效、准确的传递重要信息，快速发现问题隐患，推动业务优化升级。一般用于运营/运维中心、智慧城市（交通c g w # n B n ]/园区/政务）、交0 7 O . V [ & Q n易大厅等。需要注意的是，实时数据需要做设计预案。比如：1，异常数据的处理。2，飞速增长的时候是否t l { t有提示。3，! S T – J { { i A突破性的数据是否有彩蛋等。
做数据可视化大屏[ u m v g z = _ M，设计师的价值在于通过设计的手段帮助相关人员更快速的理解和发现问题，解决问题。同时在观感上给人留下震撼的印象，便于营造某些独特氛围、打造仪式感。
可视化大屏的设计与移动端和PC端的设计略有不同，主要表现在1，设备，2，图表的选择，3，交互。
基于大屏设备的设计
设备与尺寸
数据可视化大屏包括，拼接屏、 LED大屏、DLP大屏。其中无缝隙拼接屏，市场占有率较高。LCD、 PDP，有3mm拼接缝隙，在做设计前，我们需要先了解大屏物理尺寸及视频输出分辨率，来# \ _ T v确定设计稿尺C S | N x {寸。
拼接屏：通常由单个 46-55 寸的液晶显示屏组成屏幕墙，存a n # j ~ [在拼缝，借助矩阵、屏控系统来进行信号的输入与输出控制，可以实现屏幕墙上多个屏幕的组合、拆分显示。
小间距 LED 墙：和拼接屏类似，由小单元 LED 显示设备组成，基本上看不出有拼接缝。
一体机v 9 4 o：类似 CVTOUCH 的一体机以及一些智能电视，可认为是放大版显示器。
可视化大屏一般都是多j Q A k {屏拼8 ( z接， LED\LCD 等材质屏幕。我们公司采用的是55寸n y 1 u _拼接屏，所以我用拼接屏给大家举个例子x 4 S ? a % Z p。
电脑与大屏的传输方式
大家应该都用过外接显示p Q i `器吧～其实大屏就跟加了好几个外接显示器一样。通过DVI矩阵切换器，把几个屏幕合成为一个屏幕，DVI矩F & (阵切换器的作用是将进来的多路输入信号中的任意一个显示到任意一个你指定的显示器上。然后把你要投在大屏上的内容，移动到外接的大屏上就可以了。
设计尺寸定义
举个例子，比如拼接的每块小屏比例是16:9，整个大屏幕是由3*12个屏幕? 8 : q 3 o q t组成，r | D我们共分为4大块，每块是3*3个屏幕，为避免文件太大，我们可以把设计尺寸定为1080*19~ e ~ p20，设计稿为矢量图，开/ ^ Q 5 0 d $ d 7发人员用3倍图。
注意，不同的屏幕显示像素、物理像素是有差异的。硬件设备的不同也会对像素造成影响。所以设计之初要先与开发沟通好，根据屏幕特性决定是按照拼接后的横纵像素总和设计，还是按照硬件输出像素设计。
颜色
颜色的选择，同样根据关键词，情绪版来提炼。不同K h 2 ; N %的是: { , A 4 Z S e，为了最大程度的减少隐藏问题，当确定了风格页后，应先让开发帮我们把设计稿投到屏幕上看下效果，先不要急着做下一个页面。因为大屏的色域普遍比Mac窄y ! P，很多颜色显示不全，所以会导致偏色严重。有偏A p &色要及时调整4 [ h l F 5 1，可以在现场，对照着大屏的色域改颜色W A = P U \ 2 {，当然这个过程是非常痛苦的。如果偏色过于严重，可] ; r以] 6 ^要求厂家过来调整下硬件设备，校对下大屏的颜色。
我们在设计的时候，大屏的背景色最好选择深色系1，避免拼接屏缝u s , c N :隙太显眼。2，与内容对比强烈，有冲击力，可以更好的让视觉聚焦到内容上。3，黑色不刺眼且省电。如果有想要突出的重点信息，建议最好采用! B x Y 5 * %互补色，或冷暖w 6 $ 2 # ~ _ i /对比色。
排版
大屏的展示内容划分一般都是先整体，后细节，结构化思维，更容易f h & y T _被理解。视觉上要注意的是缝隙问题，拼接屏都会有缝隙，设计时需要建立缝隙位置的参考线，避免影响视觉，比如文字，人物图像，要尽量避开。其它就跟平时的UI设计一样，注意层次结构，主次分明，节奏感，亲密性，` L { U ] g对比，对齐，重复等等的排版原则。
文字
字体一般都选择默认字体，微软雅黑。如果w 1 #选择嵌入[ P c f G m字体，要考虑到字体的版权问题和可读性。字号不F S ~ X o 9小于14号字，常用18号字，当然，这个也是, q @需要去现场看，文字大小在观看距# z c c [ H Y o i离下，是否清晰可见，现场灯光光照是否对设计有影响。一系列确认无误后再开展后面的页面设计工作。
图表的选择与设计
图表的选择
图表是数据可视化中最重要的一e d Z ] Y M z Z部分，好的图表设计可以一图胜千言，图表的选择是一个比较复杂的课题，在这里我只简单的给大家介~ s K i ` 6绍下图表分类，根据图表的特性，我把它们归为了5大类，对比，时间，占比，分布，关系。
对比：不同对象| G t ; $ \ f M i的排名对比。
时间：数据指标随着时间的推移而变化。
占比：个体] a A W / c / s在整体中占有的比例。
分布：同一指标的不同纬度分析。
关系：某两个指标之间A 4 X |的关系。
大家可以根据; { J W Y这个分类来快速的决定选择哪一类图表。如t ? ` \ % $ % 4果想更深入A 6 [ X P的了解图表，可以看我的上一篇分享「数据可视化— 图表的选择」
图表的选择! e A 6 T J是其中的一部分，还有一部分是图表的设计。我们先简单的认识下图表的基本元素。图表由6个基础部分组成，标题，标签，轴，图例，提示信息，图形。
图表的设计
在设a a – , w计图表时，有几个需要注意的点：
信息降噪：图表想更好的展示，提升体验我们需要做一些信息降噪，淡化或去除不必要的非数据元素。一般柱状图/折线图会隐藏 y 轴线，条形图则是隐藏 x 轴线，以达到信息降噪，突出视觉重点的目的。
当然在部分设计情境里，相较于复杂多变的图表呈现，直接数字展示，更能有效的减少界面干扰。
灵活设计：在不同场景下，会有不同的需求和问题，比如空间不够] O 3 T R大，比如趋势起伏不明显，比如要表现的内容太多图表看起来很乱，这时我们就需要运用下面两种解决方案。
抽样显示：在连续轴和时间轴中，我们可以利用抽样显示的: a % ^ | T K s手段来优化轴标签重叠的问j C 7 q Q j题。如下图XO a T m % b轴的时间，抽样为4年一个点，并不是连续的。
轴标签的取值范围：数据本身没有那么大的起伏变化，处理上下限的颗粒度，把刻度拉长，一样能显得“长势喜人”。不过这种方法更像是在忽悠人，大家看情况选择使用就好。
图例：根据数据类型不同，分为连续型图例和分类型图例；根据状态不同，图例可以被设置为静态或可交互态。如果有空间过小，图例又有很多的情况下，可以尝试跟随图例或动态轮播图例。
如果空间Q r $ | 0 ]足够大，图例最好是能跟随在后面。
如果有手势交互的话，提示z V e V信息一般是在hover的时候悬浮展现。当然也有固定在某个位置，固定在轴上，固定在图上等方式a \ 4 F 3。
强调部分数据：可以用区域高亮，区域加粗，区域面积图等方式。
- 可视化大屏交互
- 手势交互：
- 手势交互分为两种，触控手势和隔\ C ? u ! 4 D j V空手势。我们日常使用手机进行点按，滑动与手机接触控制的手势动作为触控手势操作。隔空手势是指通过计算机视觉识别出的手势动作，无需和实体进行接触。
- 可视化大屏一般都用. d I \ z 7 ] t隔空手势交互，隔空手势交互需要在用户的手能够自由移动的场景下。隔空手势交互相比触控手势交互在时间上和精准度上是不占优势的。
- 在设计的时候需要注意的是，大屏上的交互尽量不要用跳转页面，能用“关闭”按钮就不用“返回”按钮。
- 大屏能够承载的数据较多，为了避免观者迷失，大屏信息呈现要有焦点、有主次。所以部分细节数据可暂时隐藏，用户需要时可通过隔空手势交互@ , e ! A S 7 ~方式唤起。
- 语音交互：语音交互需要用户进行听和说。用户需要把指令说出^ / K 3 %来，当只有自己一人时还好，如果人多的情况下，用户可能会觉得不好意思，还有就是收音效果会有一定的影响。
- 总结
- 1，其实数3 \ U E ; P /据可视化大屏的设计流程与我们平时做移动端，PC端的设计流程差不多，o \ ) p $ T = ,只是可视化更注重图表的选择与运用。「数据可视化—{ T 4 r k Y S W _ 图表的选择」
- 2，在硬件条件上差异比较大，在设计之前一定要先了解好公司选用的大屏特性，多与开发沟通，多去现场看效果，避免不必要的麻烦。
- 3，交互上如果是采用比较大的屏幕，空间也比较大，通常采用隔空手势，隔空手势与触控手势还是有差异的，这块也是一个比较大的课题，有机会在详细分6 S v / 2享。
- 今天的分享就到这里啦～
- 关注微( [ l +信公众号「小新的芝士绘本」看更多内容