数据可视化大屏设计要素
首先，想要设计出一个好看的可视化大屏，艺术性是必不可少的。所以第一步我们来走进数据艺术的世界中，从理性走入感性，体会相斥相吸所碰撞出的艺术火花给人带来的视觉盛宴。
工具/原料
HT for Web 编辑器
Windows 7/10 64 位操作系统环境
目录
1、1. 什么是大屏数据可视化？2. 设计流程介绍3. 结合情感打造二维设计美4. 构建空间感&二维与三维的融合5. 小结
1.走进数据艺术
1、在数据艺术的世界中，要打开想象力，关注数据和情感中的联系，准确的说，数据艺术更多是为了让人们去体验那些让人感觉冰冷而陌生的数据，使它们从无形变为可见的，可动的，可互动的甚至可触摸的有形物像。就像是把冰冷的10110010的代码赋予生命，穿上衣服形成样貌，让人一看就能记住这个生命体的样子，知晓它的信息，更加人性化的与它互动。
3、上图是费尔兰达·维埃加斯加和马丁·瓦滕伯格的作品“风图”（Wind Map），绘制了全美各地风的流动模式。这个可视化的制作非常实用，可以通过缩放和平移数据库进行研究，还可以把鼠标停在某处了解该地的风速和风向。地图上风流动越集中，越快，预报的风速就越大。但这个图不止实用，还更是一件艺术品，它赋予了环境生命感，同样使得冷冰冰的气象数据通过可视化的形式变得有生命力。这便是数据艺术的魅力，也是做可视化设计所追求的方向。
2.建立视觉层次
1、感性的感受到数据可视化带来的艺术感和生命力后，我们来通过理性的方法为我们的可视化增加美感。当我们在拿到一张可视化大屏的时候，会快速扫一眼寻找有没有有趣的东西。而且人眼在看东西时总是趋向于识别引人注目的东西，比如明亮的颜色，较大的物体等突出的有特点的事物。利用这点，我们可以用醒目的颜色突出显示数据，而淡化周围的辅助元素，拉开背景和数据的层次。也可以用线条或者线性元素构建一个视觉路径，把人的视线逐渐引向一个兴趣点。这样就可以建立一个视觉层次，帮助读者快速关注到主数据。反之，读者就会盲目搜索而找不到重点了。
3、上图来源于 HistoryShots InfoArt ，以上两张图是政党史的演变图，描述了乔治·华盛顿总统到唐纳德·特朗普的迷人视觉历旮甭萦鲥史。HistoryShots InfoArt 汇集了很多人文，历史的进程，把复杂凌乱的内容通过艺术性的可视化设计，变得有趣且有逻辑性。他们很擅长运用以上所说的建立视觉路径的层次建立方法，一步步引导读者跟随着引导了解到历史进程，十分抓人眼球。再分享两例 HistoryShots InfoArt 其他的可视化设计，以便更深层次的感受下建立视觉层次的不同方法与数据可视化的艺术魅力。
5、上图是我们做的图表配色案例，挑选了6中基础色规定了色调，作出明暗两套方案。
4.背景信息视觉暗示
1、这是可视化大屏设计中一个小的比较讨巧的方式，背景信息虽然在上面讲到的视觉层次上来说属于弱化的低层级，但是背景信息能够帮助读者更好地理解可视化数据。它能提供一种直观的印象，并且增强抽象的几何图形及颜色与现实世界的联系。设计时可以通过图表周围的文字引入背景信息，例如最近我们做的新型冠状病毒的疫情地图与病毒实验室demo，就适当的在背景图片和UI元素中引入了和病毒相关的元素与颜色搭配，可以更容易渲染气氛，使读者快速理解到可视化的内容主题。如下图：
5.巧用留白
1、留白这个说法在设计中很常见，但是这个说法并不专业。留白的设计方式属于构图中的一种，也是很考验设计师构成能力的一个点。如果做设计时间长的人会发现，在构图排版的时候，内容越多元素越多越好排，内容越少越不好做设计。现在很多的看起来“高大上”的网页设计或者 APP 界面设计大多都采用了大面积留白，仿佛这是一个设计趋势，许多人将这解释成：现在的信息太多太杂，人们需要整理简化，设计也越来越简化，所以留白盛行。事实上确实有这种社会趋势，但是更重要的是对于设计本身而言，简洁的设计是最难的，构成设计是最考验设计能力的。优秀的留白设计之所以高大上，并不是因为运用了留白的手段，而是设计师的构成能力十分优秀才可以做出如此优秀的作品。
2、我们可以尝试一下这种训练：给你一张白纸，如何切三刀构成出富有设计感的画面？接下来尝试如何切两刀构成出富有设计感的画面？最后尝试如果只是切一刀，如何使画面富有设计感？这样的训练可以培养构成的能力，等到可以一刀切出艺术品的时候，就可以称得上非常优秀的设计师了。
3、另外，在交互设计中如何留白，也是栅格化布局的一个应用点。众所周知，混乱是可读性的大敌。大量的文字和图形挤在一起，会让一幅图看起来混乱不清。而他们中留一些留白可以使图表变得很容易阅读。在一张大屏中可以用留白来分隔图形，从而划分出多个图表，形成模块化。留白会让可视化图表更易于浏览和分阶段处理。但是留白不可乱用，若不需要划分视觉元素，就不要用留白，会使内容产生歧义。
4、由于动画这部分属于可视化中的辅助效果成分，具体的设计方法就不在文章中过多赘述，如果有兴趣可以去谷歌 material 设计中的 Motion 板块学习。第二类交互动画可以用于模拟实物的运动，以及业务需求所需要的动效，使可视化大屏更加生动，展示方式多样。下图是我们做过的一些 demo 的动画效果案例为参考：
5、综上所述，在可视化中合理的运用微动画，很容易引起观赏者的注意力。有重要信息需要观赏者快速捕捉时，可以选择微交互动效吸引用户的注意力。此外，微交互也经常用于增加设计的趣味性，提高观赏者的兴趣，使观赏者产生情感上的共鸣。
构建空间感&二维与三维的融合
1、传统的数据可视化以各种通用图表组件为主，不能达到炫酷、震撼人心的视觉效果。优秀的数据可视化设计需要有炫酷的视觉效果，让可视化设计随时随地脱颖而出。这时用三维元素的添加制造出空间感可以大大的加大画面层次感，且可以多维度观察，每个角度可能会产生震撼的视觉体验。下图是我们做过的一些三维设计案例：
5、这是我们做的一个风机的案例，以线框的风格为主，UI 也配合了线框状态的风机模型样式，加上整体颜色的统一，就可以达到一个不违和的效果。如果仔细看上方招聘 demo 的案例会发现在展开的地图界面里有一些 2.5d 的元素，2.5d 的设计属于哪种界定呢？其实 2.5d 的学术名是轴测插画或轴测插图。轴测插图的意思顾名思义，是一种单面投影图，在一个投影面上能同时反映出物体三个坐标面的形状，并接近于人们的视觉习惯，形象、逼真，富有立体感。也就是说用二维的制作方式画出物体的三个面。富有立体感。但轴测插画需要找透视面，对设计师的空间想象能力要求很高，在制作的时候的难度和时间成本因图形的复杂程度而定有些会高于三维的工作量。
