要闻:美院资深设计师借用图扑范例，浅谈数据时代的可视化设计

本篇文章3664字，读完约9分钟

目录:1.什么是大屏幕数据可视化2 .介绍设计过程3 .结合感情创造二维设计美感4 .构建空间感&； 2维和3维的融合5 .总结感情结合制作2维设计美感的前篇论述了“可视化设计-数据时代的美味制造者(前篇)”，分解了逻辑上的可视化概念和设计过程 然后，具体说明可视化设计正在进行中的设计方法 首先，设计美丽的可视化大画面时艺术性是必不可少的 所以第一步是我们进入数据艺术的世界，从理性进入感性，体验互相排斥冲突的艺术火花给人带来的视觉宴会。 1 .数据艺术必须进入数据艺术的世界，打开想象力，关注数据和感情的联系。 确切地说，数据艺术是为了让越来越多的人体验冰冷的未知数据，从无形变成可见、可动、互动、可触摸的有形物体像。 就像把冰冷的10110010的代码给了生命，换了衣服，换了样子，一目了然地记住这个生命体的样子，知道那个消息，更人性化地和它交流。 上图是艺术家格约拉( quayola )和穆罕默德·阿克顿( memo akten )在“形态”图中将竞技运动轨迹作为粒子数据模拟的动画 在视频中用虚线的要素延伸动画，相应地移动运动路径，对计算机生成的图形赋予生命力 上图是费尔兰达·维加斯加和马丁·瓦滕伯格的作品《风图》( wind map )，描绘了全美各地的风流模式 这个可视化的制作非常实用，可以缩放和平移数据库进行研究，也可以把鼠标停在某个地方了解当地的风速和风向 地图上风的流动越集中，速度越快，预报的风速越大 但是，这张图不仅实用，而且也是赋予环境生命感，以将寒冷的气象数据可视化的形式具有生命力的艺术品 这是数据艺术的魅力，也是进行可视化设计所要求的方向 2 .确立视觉层面的感性，感受到数据可视化带来的艺术感和生命力后，以合理的做法为我们的可视化增加美感。 我们一得到可视化的大屏幕，就迅速寻找感兴趣的东西 另外，人眼倾向于识别明亮的颜色、大的物体等被关注的东西。 这样，就可以用醒目的颜色突出显示数据，减少周围的辅助要素，扩大背景和数据的层次。 也可以用线或线的要素构筑视觉路径，将人的视线慢慢引导到有趣的点 这样可以建立视觉级别，让网民快速关注主数据 相反，网民盲目搜索，找不到点 上图是一个简单的例子，左边的图减弱了背景要素，明显比右边的数据可读性高，视觉感觉更舒适。 上图来源于historyshots infoart，上两张图是政党史的变迁图，描绘了从乔治华盛顿总统到唐纳德·特朗普的迷人视觉历史 historyshots infoart汇集了许多人文、历史的过程，通过艺术性的可视化设计，使许多杂乱的副本变得有趣、合乎逻辑 他们擅长使用以上确立视觉路径的水平确立方法，吸引网民理解历史过程，引人注目 共享两个historyshots infoart的其他可视化设计，以更深入地感受视觉级别不同的方法和数据可视化的艺术魅力。 第一张是流行/摇滚音乐谱图，记录了流行/摇滚音乐及其最畅销艺术家的成长和迅速发展 从1955年到1978年，从左到右的流动记录了700多位艺术家和30多种音乐风格的映射 提供各音乐家成为第一流行制作者的长度 通过重叠视觉流线，网民可以比较同一时间段内多个艺术家的寿命和影响 给出了各文体类别的起源和家族，以及在总唱片销售中所占的份额的估计。 第二张是美国陆军的战斗地图，显示了某军团的路线及其分配和附属单位 第二十军于1944年7月作为乔治·帕顿中将第三军的一部分登陆法国，与法国在德国作战。 如上图所示，视觉水平可以用于研究数据的过程。 如果假设如上所述在建立指标分析维度时生成了大量的图表，则可以用几个图表解释全景，通过在其中显示具体的细节，分别显示二次图表，可以使数据更明确 这一点也表明，为了不分散视觉效果，设计成使数据更容易理解、明确层次、引导网民关注焦点。 相反，层次不明确的图缺乏流动性，网民难以理解，难以进行细致的研究 3 .适当的颜色感情在数据可视化设计中，颜色是最重要的因素之一 合理利用颜色感情可以提高可视化设计的感知效果，激发观赏者的感情 红色是庆祝、热情、喜悦、爱、活力等不同的颜色给人不同的心理感情 但是，红色往往与灾害、战争、愤怒等消极情绪联系在一起。 蓝色给人带来友好、和谐、信任、安静、希望等积极的感情体验，给予人冷酷无情的心理体验 不同的颜色组合可以表现不同的感情，表现相应的可视化设计主题风格，激发观赏者的感情 >； 科学技术/科幻感、未来感、前卫感:紫外光色、蓝色等〉青春、活力:红、黄、绿等〉高端感、质感:黑色、灰色+渐变/照明等； 配色可以选择同色系的配色，画面更丰富。 也可以选择不同颜色的配色，画面更丰富多彩 颜色组合不仅控制整体样式的色调，还有与场景融合的面板颜色组合。 如何协调整个画面，考验设计师的艺术基础，颜色设计在可视化应用中最重要的是实现整体思维，不仅仅是局部颜色的组合。 组合时也要注意不要用单色补色组合，遇到补色时可以尝试降低其中一种颜色的纯度 要注意画面没有灰，没有粉，没有色频，符合领域是不可思议的。 颜色面积的应用也是十分重要的，组合颜色时需要注意主色和副色的颜色面积比例，是决定色调的重要因素 上图是尼古拉斯·加西亚·贝尔蒙特的《美国风场图》，同样描绘了风场，以下同一色系的颜色面积不同，可以感受到不同色系带来的视觉体验和心理体验的不同 颜色从物理上研究视觉冲击可以感受到给人带来的差异，但对设计师来说能产生共鸣是非常重要的，设计师自己需要体验这个色系的差异，具有敏感的评价性，设计师看范式，注意生活 图软件( hightopo )上图是我们制作的图表配色例，选择6种基本颜色确定色调，制作了明暗2个方案 4 .背景新闻的视觉储备这是可视化大屏幕设计中较小的比较巧妙的方法，背景新闻在上述视觉层面是弱化的低级，但背景新闻有助于网民更好地理解可视化数据。 提供直观的图像，同时增强抽象几何图形、颜色和现实世界之间的联系 设计时可以通过图表周围的副本引入背景新闻。 例如，最近我们制作的新型冠状病毒免疫地图和病毒实验室demo可以在背景图像和ui元素中适当引入与病毒相关的元素和颜色，便于渲染气氛，让网民迅速理解可视化的拷贝主题。 下图:图扑软件( hightopo )图扑软件( hightopo)5.巧妙使用空白在设计中很常见，但这种说法不专业 空白的设计方法是构图之一，也是考验设计师的构成能力 设计较长的人在构图排版时，会发现复印要素越多越容易阅读，复印要素越少设计越难。 现在很多看起来“高级”的网页设计和app界面设计都使用了大面积的空白。 这就像设计的潮流。 很多人解释说这是因为现在的新闻太多了，整理需要简化，设计也需要简化，所以空白很盛行。 实际上有这样的社会倾向，但更重要的是对设计本身来说简洁的设计是最难的，构成设计是最考验设计能力的。 优秀的空白设计之所以名列前茅，不是因为使用了空白的手段，而是因为设计师的构成能力非常优秀，才能制作出这样优秀的作品。 试试这个训练吧。 给你白纸，怎么剪三刀构成有设计感的画面？ 接下来要怎么剪双刀做一个有设计感的画面呢？ 最后只需开刀，如何让画面有设计感？ 这样的训练可以培养构成的能力，可以说是非常优秀的设计师，直到能供给所有艺术品 另外，在交互设计中如何成为空白也是栅格化布局的应用点 众所周知，混乱是可读性很大的敌人 大量的复印和图形交织在一起，一张图看起来很混乱 他们中留下了空白，可以方便地阅览图表 在大屏幕上，通过用空白分隔图形，可以分割多个图形，实现模块化 如果保留空白，则容易阅览和逐步解决可视化图表 但是，空白不能滥用。 如果不需要区分视觉要素，请不要使用空格。 复印会产生歧义。 上图是设计师valentin lacoste的作品《blank page syndrome》使用空白的构成方法设计了艺术美学效果 6 .动画的互通动画和迁移效果可以增加可视化结果视图的丰富性和理解性，增加顾客交互的反馈效果，进行自然一致的操作。 另外，可以提高点新闻和画面整体的表现力，引起客户的关注，增加形象。 但是，如果动画和过渡采用不当，则会产生相反的效果 要想很好地使用动画和过渡，需要以下几点。 >； 适量:动画片不要采用太多。 我不会陷入迁移设计的危机。 >统一大体:相同的动画含义统一，相同的行为与动画一致，保持一致的顾客体验>容易理解:简单的变形，适量的时间，容易评价，容易捕捉，不增加观赏者的认识负担。 第一类交互动画的作用是点击按钮的过渡动画，这样的动画多应用物理学动力学，通过动态效果提供更真实的交互体验 在这种motion design的教育例子中，谷歌的材料设计具有权威。 在以下示例中，由于动画部分是可视化的辅助效果成分，因此复制中很少说明具体的设计方法。 如果有趣的话，请在Googlematerial设计的motion板块学习。 第二部互动动画可以用来模拟实物动作和商业诉求所需的效果，使可视化的大屏幕更生动，展示方法多样化。 下图参考了我们做的demo动画效果的例子。 如上所述，在可视化中合理利用微动画容易引起观赏者的观察力。 如果有重要消息，需要观赏者快速捕捉，可以选择微型交互效果来吸引客户的观察力。 此外，微型互动还经常用于提高设计的幽默性，提高观赏者的趣味性，给观赏者带来情感上的共鸣 空间感的构建&； 从二维和三维融合以前开始传递的数据可视化以各种通用图表组件为主，无法达到酷炫的视觉效果。 良好的数据可视化设计需要随时随地的良好视觉效果 在这种情况下，通过追加三维要素来创造空间感，能够大幅增大画面的灰度感，能够多维地注意，有可能在各自的立场上产生有魄力的视觉体验。 下图是三维设计的示例。 hightopo工程图襟翼软件( hightopo )工程图襟翼软件( hightopo )，但三维web端场景设计是有限的。 由于web端受到性能的影响，因此模型只有轻量的模型才能顺利地显示卡。 因此，设计师必须严格控制面的数量和贴图的数量，以确保平滑 另外，由于web侧的性能也无法移动巨大的渲染器，所以使用color地图表现了模型的光影和质感 通过三维项目经验，我们也总结了三维设计过程: >； 准备阶段:理解指控，收集相关资料，建模统计列表>开始建模:初始轮廓，模型细分，拓扑低模式>展uv>； 地图绘制: ao光影新闻，烧材质新闻 ps地图绘制>创建场景:导入hightopo引擎，创建场景，放置二维图标>调整气氛:添加阴影、环境光等效果 模型级关系，命名和标签绘制 多个大屏幕设计示例涉及二维和三维融合，需要整体考虑风格一致 风格一致可以从色调和要素用格式统一，没有不协调感 我们直接出示样品进行说明。 图平面软件( hightopo )是我们制作的招聘demo，整体使用插图风格，二维和三维融合采用插图风格的要素，达到了统一的效果。 图软件( hightopo )这是我们制作的风机的例子，以线框样式为主，ui也配合线框状态的风机模型格式，加上整体颜色的统一，可以得到没有不适感的效果。 仔细看看上面的招聘demo的例子，就会发现展开的地图界面中有一点2.5d的元素。 2.5d的设计是如何定义的其实2.5d的学术名称是轴测量插图或轴测量插图。 轴测插图的意思，顾名思义，是在一个投影面上反映物体的三个坐标面的形状，接近人类的视觉习性，富有形象、真实感、立体感的单面投影图。 也就是说，用二维的制作方法描绘物体的三个面 富有立体感 但是，轴测量插图需要寻找透视面，对设计师的空间想象力有很高的要求，制作时的难易度和价值成本根据图形的多少比三维的事业量要高一些 下图是我们做的2.5d的例子。 图扑软件( hightopo )还有另一种类型的图。 下图是多个网民和顾客看到的，我想这个效果是看起来立体的还是属于2.5d？ 图软件( hightopo )其实这不是2.5d。 注意每个图标，正面只能看到一个面，看不到三个面，所以被称为写实风2d图标。 写实风2d图标通过调整图形的渐变颜色得到立体效果，但渲染时不需要寻找透视，只需要描绘正面的一面即可，因此制作与2.5d相比比较简单，属于2d制作范畴的事业量 因此，2.5d的定义范围不是写实的效果，而是由物体透视中展示的观测面数决定的 . 5d之所以看起来是立体的，是因为展示的面的数量很多，而写实的风2d之所以看起来是立体的，是因为颜色的渐变带来的视觉效果，两者看起来很难区别，但设计师画的做法和工作量大不相同。 如上所述，我们结合了正确的设计过程、适当的设计思维、方便的设计妙手、二维三维的结合和丰富的动态效果和人际的相互体验，完成了一个合格的可视化设计 如果想看到越来越多的例子，可以访问图片软件( hightopo )。 正如前言所述，设计就像一道菜，每道菜都有它的食谱，油盐酱醋的比例写得非常详细，但每道菜做同样的菜的味道不同 可视化设计也是如此。 大体上，程序，设计的做法可以总结规定。 最初可以严格遵守这些规定制作漂亮的可视化大画面，根据各设计师的经验，根据自己全部使用的东西进行调整，可以设计符合时代的作品、个性的作品。 随着科学技术的迅速发展，你可能提出过全自动化盒饭贩卖机的概念。 所有的菜都是用机器做的，自动打包在自动售货机这样的柜子里扫码出售。 但是，比起那个，你可能更喜欢早上企业外的爷爷蒸的肠粉和下班后路边阿姨做的薄饼果子。 原因每个人的心理肯定也有答案 设计也是如此，现在科学技术提出了设计各种人工智能的例子 但是，和做饭的道理一样，设计是机器无法代替的——因为灵魂是不能代替的，每个人都有独特的思想，我认为这可能是设计的宝贵原因。 我希望我们设计的所有可视化大屏幕都能回到领域，体现设计师理解的数据在设计后给社会生活带来的真正价值 也许不酷，不时尚，但其所有数据的表现，所有要素的描绘，都是由细节的设计雕刻出来的，细节的决策成功了。 最后，我认为好的设计标准不漂亮。 漂亮的标准很多，因此审美因人而异。 我们在判断设计时，必须判断它是否合适，最佳设计，最佳方案，最好的设计。 参考文献:1.数据可视化设计(1)情感化设计指导可视化设计理念—— nemo2.数据可视化设计(2) :可视化设计的大致内容—— nemo3.如何进行大画面数据可视化设计？ 超全面设计指南——鱼大设计店4.data v数据可视化:一个画面将所有的东西可视化，公司是如何在数据浪潮中卓越的？ ——数据智能小二5 .数据之美:一本本学会的可视化设计—— nathan yau