关于javascript:浅谈可视化设计数据时代的美味烹饪师下篇

​目录：

1. 什么是大屏数据可视化
2. 设计流程介绍

3. 联合情感打造二维设计美感

4. 构建空间感 & 二维与三维的交融

5. 小结

联合情感打造二维设计美感

上篇咱们讲到了《可视化设计 - 数据时代的美味制造者（上篇）》，剖析完了逻辑性的可视化概念与设计流程。

接下来让咱们开始具体的解说可视化设计进行中的设计办法。

首先，想要设计出一个难看的可视化大屏，艺术性是必不可少的。所以第一步咱们来走进数据艺术的世界中，从感性走入理性，领会相斥相吸所碰撞出的艺术火花给人带来的视觉盛宴。

1. 走进数据艺术

在数据艺术的世界中，要关上想象力，关注数据和情感中的分割，精确的说，数据艺术更多是为了让人们去体验那些让人感觉寒冷而生疏的数据，使它们从有形变为可见的，可动的，可互动的甚至可触摸的无形物像。就像是把寒冷的 10110010 的代码赋予生命，穿上衣服造成样貌，让人一看就能记住这个生命体的样子，通晓它的信息，更加人性化的与它互动。

上图是由艺术家格约拉（Quayola）和穆罕穆德·阿克坦（Memo Akten) 在“状态“图中将竞技静止轨迹模仿成粒子数据动画。视频中以点线的元素舒展动画，随着静止门路相应挪动，让计算机生成的图形赋予生命力。

上图是费尔兰达·维埃加斯加和马丁·瓦滕伯格的作品“风图”（Wind Map），绘制了全美各地风的流动模式。这个可视化的制作十分实用，能够通过缩放和平移数据库进行钻研，还能够把鼠标停在某处理解该地的风速和风向。地图下风流动越集中，越快，预报的风速就越大。但这个图不止实用，还更是一件艺术品，它赋予了环境生命感，同样使得凉飕飕的气象数据通过可视化的模式变得有生命力。这便是数据艺术的魅力，也是做可视化设计所谋求的方向。

2. 建设视觉档次

理性的感触到数据可视化带来的艺术感和生命力后，咱们来通过感性的办法为咱们的可视化减少美感。

当咱们在拿到一张可视化大屏的时候，会疾速扫一眼寻找有没有乏味的货色。而且人眼在看货色时总是趋向于辨认引人注目的货色，比方亮堂的色彩，较大的物体等突出的有特点的事物。利用这点，咱们能够用醒目的色彩突出显示数据，而淡化四周的辅助元素，拉开背景和数据的档次。也能够用线条或者线性元素构建一个视觉门路，把人的眼帘逐步引向一个趣味点。这样就能够建设一个视觉档次，帮忙读者疾速关注到主数据。反之，读者就会自觉搜寻而找不到重点了。

如上图咱们做的一个简略的案例，左侧的图弱化了背景元素，显著比右侧的数据可读性更强，视觉感触更加舒服。

上图来源于 HistoryShots InfoArt，以上两张图是政党史的演变图，形容了乔治·华盛顿总统到唐纳德·特朗普的迷人视觉历史。HistoryShots InfoArt 会集了很多人文，历史的过程，把简单凌乱的内容通过艺术性的可视化设计，变得乏味且有逻辑性。他们很善于使用以上所说的建设视觉门路的档次建设办法，一步步疏导读者跟随着疏导理解到历史进程，非常抓人眼球。再分享两例 HistoryShots InfoArt 其余的可视化设计，以便更深层次的感触下建设视觉档次的不同办法与数据可视化的艺术魅力。

第一张是风行 / 摇滚音乐谱系图，该图表记录了风行 / 摇滚音乐及其最滞销的艺术家的成长和倒退。记录了从 1955 年到 1978 年，由左到右的潮流映射了 700 多位艺术家和 30 种音乐风格。提供了每个音乐家成为次要风行制作者的工夫长度。重叠的视觉流动线条使读者能够比拟多个艺术家在同一时间段的寿命和影响力。并且列出了每个文体类别的起源和家谱，以及其在总唱片销售中所占份额的估计值。

第二张是美国陆军战斗地图，此图显示了某军团的路线以及其调配的和从属的单位。第二十军于 1944 年 7 月作为乔治·帕顿中将的第三军的一部分登陆法国，并在法国和德国进行了战斗。

如上图这些案例，视觉档次能够用来钻研数据的过程。假如在以上确立指标剖析维度时生成了大量的图表，能够用几张图来诠释全景，在其中标注出具体的细节另做二级图表独自显示，这样会使数据更清晰。此点也阐明切勿为了谋求艺术成果而使视觉效果变得凌乱，设计的目标是使数据变得更加清晰易懂，分清档次，能把读者引向关注焦点。相同，档次不明显的图则短少流动感，读者很难了解，更难进行粗疏钻研。

3. 合适的色调情感

在数据可视化设计中，色调是最重要的元素之一。正当利用色调的情感能够加强可视化设计的感知成果，调动观赏者的情绪。

不同的色调给人不同心理感触，如：红色代表着喜庆、激情、欢畅、恋情、生机等。然而，很多时候红色也与劫难、和平、愤恨等消极情绪分割在一起；蓝色会给人带来敌对、谐和、信赖、平静、心愿等踊跃的情感体验，也会给人以冷酷、有情的心理感触。不同的色调搭配能够体现不同的情感，用来表白与之匹配的可视化设计主题格调，调动观赏者的情感。

• 科技 / 科幻感、将来感、前卫感：紫外光色、蓝色等
• 青春、生机：红、黄、绿等
• 高端感、质感：彩色、灰色 + 突变 / 光照等；在色调搭配上能够抉择同色系配色，画面显得更丰盛；也能够抉择非同色系配色，画面会更加多彩。

色调搭配不仅是整体格调色调把控，还有与场景交融的面板色彩搭配，如何让整个画面谐和，比拟考验设计师的艺术根底功底，色调设计在可视化利用中最重要的是要做到整体思考，不能只顾部分的色彩搭配。在搭配的时候也要留神不要应用纯色互补色进行搭配，在遇到补色，对比色时能够尝试升高其中一种色彩的纯度。画面要留神不灰，不粉，不色频，与行业相符不会让人感觉奇怪。色调面积的利用也非常重要，在搭配色彩时要留神主色和辅色的色调面积比例，是决定色调的重要因素。

上图是尼古拉斯·加西亚·贝尔蒙特的“美国风场图”，同样是形容风场，能够感触下同色系色调面积不同，与不同色系带来的视觉体验与心理体验的不同。尽管色彩能够从钻研物理层面上对视觉的冲击给人带来的不同感触，但更多对于设计师而言，能做到共情很重要，须要设计师本身能体验到这种色系的差异，有敏感的判断性，这种须要设计师多看案例，多察看生存而一直训练。

上图是咱们做的图表配色案例，筛选了 6 中根底色规定了色调，作出明暗两套计划。

4. 背景信息视觉暗示

这是可视化大屏设计中一个小的比拟讨巧的形式，背景信息尽管在下面讲到的视觉档次上来说属于弱化的低层级，然而背景信息可能帮忙读者更好地了解可视化数据。它能提供一种直观的印象，并且加强形象的几何图形及色彩与事实世界的分割。设计时能够通过图表四周的文字引入背景信息，例如最近咱们做的新型冠状病毒的疫情地图与病毒实验室 demo，就适当的在背景图片和 UI 元素中引入了和病毒相干的元素与色彩搭配，能够更容易渲染氛围，使读者疾速了解到可视化的内容主题。如下图：

5. 巧用留白

留白这个说法在设计中很常见，然而这个说法并不业余。留白的设计形式属于构图中的一种，也是很考验设计师形成能力的一个点。如果做设计工夫长的人会发现，在构图排版的时候，内容越多元素越多越好排，内容越少越不好做设计。当初很多的看起来“高大上”的网页设计或者 APP 界面设计大多都采纳了大面积留白，好像这是一个设计趋势，许多人将这解释成：当初的信息太多太杂，人们须要整顿简化，设计也越来越简化，所以留白流行。事实上的确有这种社会趋势，然而更重要的是对于设计自身而言，简洁的设计是最难的，形成设计是最考验设计能力的。优良的留白设计之所以高大上，并不是因为使用了留白的伎俩，而是设计师的形成能力非常优良才能够做出如此优良的作品。

咱们能够尝试一下这种训练：给你一张白纸，如何切三刀形成出富裕设计感的画面？接下来尝试如何切两刀形成出富裕设计感的画面？最初尝试如果只是切一刀，如何使画面富裕设计感？这样的训练能够造就形成的能力，等到能够一刀切出艺术品的时候，就能够称得上十分优良的设计师了。

另外，在交互设计中如何留白，也是栅格化布局的一个利用点。家喻户晓，凌乱是可读性的大敌。大量的文字和图形挤在一起，会让一幅图看起来凌乱不清。而他们中留一些留白能够使图表变得很容易浏览。在一张大屏中能够用留白来分隔图形，从而划分出多个图表，造成模块化。留白会让可视化图表更易于浏览和分阶段解决。然而留白不可乱用，若不须要划分视觉元素，就不要用留白，会使内容产生歧义。

上图是设计师 Valentin Lacoste 的作品“blank page syndrome”使用了留白的形成形式设计出艺术性的美学动效。

6. 动画的交互使用

动画与过渡成果能够减少可视化后果视图的丰富性与可了解性，减少用户交互的反馈成果，操作天然、连贯；还能够加强重点信息或者整体画面的表现力，吸引用户的关注力，减少印象。

然而，动画与过渡使用不当会带来事与愿违的成果。如何巧用动画与过渡，须要做到以下几点：

• 适量准则：动画不宜应用过多，防止陷入过渡设计的危机中
• 对立准则：雷同动画语义对立、雷同行为与动画保持一致，保持一致的用户体验
• 易了解准则：简略的形变、适量的时长、易判断、易捕获，防止减少观赏者的认知累赘。

第一类交互动画的作用次要作用于点击按钮的过渡动画，这类动画利用物理学动力学比拟多，通过动效给人更加实在的交互体验。对于这类 motion design 的教学案例，比拟权威的是谷歌的 Material Design , 如下案例：

因为动画这部分属于可视化中的辅助成果成分，具体的设计办法就不在文章中过多赘述，如果有趣味能够去谷歌 material 设计中的 Motion 板块学习。

第二类交互动画能够用于模仿实物的静止，以及业务需要所须要的动效，使可视化大屏更加活泼，展现形式多样。下图是咱们做过的一些 demo 的动画成果案例为参考：

综上所述，在可视化中正当的使用微动画，很容易引起观赏者的注意力。有重要信息须要观赏者疾速捕获时，能够抉择微交互动效吸引用户的注意力。此外，微交互也常常用于减少设计的趣味性，进步观赏者的趣味，使观赏者产生情感上的共鸣。

构建空间感 & 二维与三维的交融

传统的数据可视化以各种通用图表组件为主，不能达到炫酷、震撼人心的视觉效果。优良的数据可视化设计须要有炫酷的视觉效果，让可视化设计随时随地怀才不遇。这时用三维元素的增加制作出空间感能够大大的加大画面层次感，且能够多维度察看，每个角度可能会产生震撼的视觉体验。下图是咱们做过的一些三维设计案例：

然而，三维的 web 端场景设计有肯定的局限性，因为 web 端受性能影响，模型只有轻量的模型才能够显示晦涩不卡顿。所以设计师在设计时须要严格控制面数与贴图量，以保障晦涩。另外，web 端的性能也无奈带动宏大的渲染器，所以咱们采纳了应用 color 贴图来体现模型的光影和质感。通过三维的我的项目教训咱们也总结了一套三维设计流程：

• 筹备阶段：了解需要，收集相干材料，建模统计列表
• 开始建模：初步轮廓，模型细化，拓扑低模
• 展 UV
• 贴图绘制：烘培 AO 光影信息，材质信息。PS 贴图绘制
• 搭建场景：导入 Hightopo 引擎，搭建出场景，摆放二维图标
• 气氛调整：增加暗影，环境光等成果。模型层级关系，命名与标签绘制。

有许多的大屏设计案例都会波及二维和三维相交融，须要整体的思考格调统一。格调统一能够从色调与元素应用款式来做到对立，没有违和感。咱们间接展现案例来阐明：

这是咱们做的一个招聘 demo，整体用的是插画格调，二维与三维的交融都应用了插画风的元素，达到对立的成果。

这是咱们做的一个风机的案例，以线框的格调为主，UI 也配合了线框状态的风机模型款式，加上整体色彩的对立，就能够达到一个不违和的成果。

如果认真看上方招聘 demo 的案例会发现在开展的地图界面里有一些 2.5d 的元素，2.5d 的设计属于哪种界定呢？其实 2.5d 的学术名是轴测插画或轴测插图。轴测插图的意思顾名思义，是一种单面投影图，在一个投影面上能同时反映出物体三个坐标面的形态，并靠近于人们的视觉习惯，形象、真切，富裕立体感。也就是说用二维的制作形式画出物体的三个面。富裕立体感。但轴测插画须要找透视面，对设计师的空间设想能力要求很高，在制作的时候的难度和工夫老本因图形的复杂程度而定有些会高于三维的工作量。下图是咱们做过的一个 2.5d 的案例：

还有一种类型的图，如下图，许多读者和客户看过后会感觉，这种成果看起来也很平面呀，是不是也是属于 2.5d 呢？

其实这种并不属于 2.5d，如果咱们仔细观察每个图标，会发现咱们只能看见侧面一个面，而无奈看到三个面，所以这种咱们称为：写实风 2d 图标。写实风 2d 图标是通过调图形的突变色彩来达到一种平面的成果，然而在绘制时不必找透视，只用绘制侧面一个面就能够，所以制作起来相较于 2.5d 而言就比较简单，属于 2d 制作领域的工作量。所以 2.5d 的界定范畴并不是以写实的成果而定的，而是以物体透视所展出的观测面数而决定的。2.5d 之所以看起来平面是因为展现的面数多，而写实风 2d 之所以看起来平面是通过色彩突变造成的一种视觉效果，两者尽管看起来不容易别离然而在设计师绘制的办法和工作量上却大大不同。

综上所述咱们联合了正确的设计流程，适当的设计思维，便捷的设计技巧，二维三维的联合与丰盛的动效和人性化的交互体验，一个合格的可视化设计就实现了。想要查看更多的案例能够拜访咱们的官网：https://www.hightopo.com/demos/index.html

小结

前言说过，设计就像烹饪，尽管每一道菜都有它的菜谱，油盐酱醋的比例都写的十分具体，然而每个人做同一道菜的滋味还是各有不同。可视化设计也是如此，咱们能够总结规定出许多准则，步骤，设计办法，一开始能够严格遵守这些规定做出难看的可视化大屏，但随着每个设计师的教训不同，会慢慢依据本人所有用的和看到的做出调整，就会设计出与时俱进的作品，有共性的作品。

随着科技的倒退，兴许你据说过有人提出过全自动化便利贩卖机的概念：所有的烹饪都由机器来进行，而后主动打包放在像主动贩卖机的柜子里扫码售卖。然而与此相比，咱们可能反而更爱早上公司外大爷蒸的肠粉和上班后路边大妈做的煎饼果子。想必起因每个人心理也都有答案。设计也是如此，现在科技曾经使人提出了各种各样的人工智能做设计的案例。然而和烹饪的情理一样，设计是不能被机器所取代的——因为灵魂不能被取代，每个人都有每个人独特的思维，我想这兴许是设计宝贵的起因。

心愿咱们设计的每一张可视化大屏都能够回归到行业里，体现出设计师所了解的数据做出的设计后为社会生存带来的实在的价值。就算它可能不够炫酷，不够时尚，然而它的每一项数据的体现，每一个元素的绘制，都是通过细节的设计雕刻，细节决定成败。

最初，我认为一个好的设计标准不是它好不好看，因为难看的规范很多，每个人的审美都会不一样。咱们在评估设计的时候要评估它合不适合，最合适的设计，最合适的计划，就是最好的设计。

参考文献：

1. 数据可视化设计（1）情感化设计领导可视化设计理念 —— Nemo

2. 数据可视化设计（2）：可视化设计准则 —— Nemo

3. 如何做大屏数据可视化设计？超全面设计指南 —— 鱼大大设计铺

4.Data V 数据可视化：一屏在手万物可视，企业如何在数据浪潮中怀才不遇？—— 数据智能小二

5. 数据之美：一本书学会可视化设计 —— Nathan Yau