2021-7-29 资深UI设计者
我们毫无疑问已经处在一个大数据的时代。各行各业都在快速产生和积累数据。 本文结合 UED 团队过去所参与 B 端数据可视化项目分享一些经验及思考。
“得益于计算机技术和海量数据库的发展，个人在真实世界的活动得到了前所未有的记录……社会科学将脱下‘准科学’的外衣， 在21世纪全面迈进科学的殿堂。”- 雅虎首席科学家Duncan J. Watts
“大数据的影响，就像四个世纪前人类发明的显微镜一样……而大数据，将成为我们下一个观察人类自身社会行为的‘显微镜’。” – 麻省理工教授Erik Brynjolfsson
从数据，到海量数据，再到大数据，对人类的做事和思维方式都有很大的影响。在《大数据时代：生活、工作与思维的大变革》一书中，作者归纳了大数据的三个特点:
当前对大数据的研究涉及计算机科学、数学、生物学等多个领域。大数据尤其是对数据存储、数据挖掘等提出了重大挑战。而数据可视化也将在大数据时代扮演一个重要的角色。数据可视化可以将纷繁复杂的大数据集、晦涩难懂的数据报告变得直观易读、易于理解，通过图表将杂乱的数据进行科学有序的呈现，使用户找到数据的变化规律以及潜在价值，帮助用户作出决策。就数据可视化的应用来看，应用范围极其广泛，如政府应用、商业决策、公共服务等等。
顾名思义，数据可视化就是将数据转换成图或表等形式，以一种更直观的方式呈现数据。通过可视化的方式，我们可以将大量复杂的数据通过图形化的手段进行有效地表达，帮助用户发现规律和特征，发掘数据背后的价值。
图 1 @Marco Zemolin Siresia Bagnoli
使用可视化的方式来表达复杂的数据，可以确保对关系的理解要比那些混乱的报告或电子表格更快。通过图形化的表现方式，我们可以以清晰和连贯的方式解释大量的数据，从而让我们理解数据，得出结论。
案例：流媒体平台节目数量的变化
以下图为例，当用户希望了解 2011 至 2020 下图四大流媒体平台节目的数量变化情况时，以表格方式呈现效果如下图：
未经可视化设计的表格数据图
如果通过可视化设计处理后效果如下图：
经可视化设计后的数据图
在这个案例中，我们可以看到，通过文字信息表达的方式，所有的数据在文字信息的表达中都只是零散的个体，我们很难在短时间内对列举数据有一个大致的了解，更不用说发现特征得到结论了；而在可视化表达中则不同，所有的元数据通过图表形成一个整体，数字信息被转化为视觉信息，通过可视化图表，通过观察点的位置和颜色即可感知到数据的差异，原本需要通过计算数字大小完成的对比，变成了肉眼可见的点的颜色与间距对比，我们可以迅速了解到近十年四大流媒体平台每年节目数量、每年不同平台节目数量的对比以及各个流媒体平台节目数量的增长趋势等。
据研究发现：人脑处理图片信息的速度显著快于处理文字信息，例如一篇 300 字的小故事，看一遍需要数十秒，而转化成图片后则只需要一眼即可记在脑海里。
这表明，在信息的类型中，人脑对图片信息的接收和处理效率远高于文字信息。而数据可视化则可以将数据通过可视化的方式转化一个以图片形式展示的故事，帮助用户快速接收、处理信息，激发用户联想并产生情感共鸣。
案例一：新冠病毒如何通过空气传播
随着新冠疫情在全球各个地区的蔓延，如何做好疫情防控已经成为了每个民众的头等大事 。Mariano 和 Javier 用可视化的方式生动形象地传达了新冠病毒是如何通过空气传播的以及可以通过哪些措施来降低传染风险。
图 2 @Mariano & Javier
案例二：在叙利亚，谁和谁战斗？
许多不同的团体之间的关系可能很难理解 – 尤其是当有11个这样的团体存在的时候，这些团体之间有的结盟，有的敌对，这让人难以理解。但是，Joshua Keating 和Chris Kirk通过表格的形式和熟悉的视觉效果和色彩，将这些数据简化为一种简单的、易于理解和可互动的形式，让人们可以轻松了解这些团体之间的关系和故事
图 3 @Joshua Keating and Chris Kirk
现实生活中大部分的人是视觉学习者，他们倾向于在与视觉元素相关联的情况下进行学习并与信息互动。[2] 人类大脑识别并理解一张图像最快仅需 13 毫秒。[3] 因此，相比起阅读和理解文本，大部分人更容易通过图表或其他可视化形式来理解数据，合理的数据可视化设计可以提高他们作出决策的速度。
图 4 @Bea Vaquero
1. 明确客户需求
设计师在设计数据可视化项目的开始阶段应该尽量与客户进行深入沟通，确定他们的业务诉求，也可以理解为确定客户的初衷与目的，从企业客户对数据可视化的需求看来，通常会有两种类型：
明确客户诉求，通过设计手段帮助客户达成目标，这才是 B 端数据可视化设计的关键所在。只有当我们了解客户的需要，我们才能快速推导产品结构、关键数据、视效风格等信息。
图 5 @Daria
2. 确定关键指标与优先级
关键指标是对一组或者一系列数据的统称。一般情况下，一个指标在屏幕上独占一块区域，所以通过关键指标定义，我们就知道数据大屏上大概会显示哪些内容以及数据大屏会被分为几块。
那么关键指标的选取依据是什么呢？我个人认为主要还是依据客户诉求，数据可视化的最终目的就是帮助客户达成业务目标。需要思考的是，哪些数据通过何种呈现方式能够帮助客户解决问题、达到目的、满足他们的期望，选择出一系列关键指标。
对于这些选取出来的关键指标，我们需要对其进行优先级的排列，一般来说，主要指标能够呈现业务的主要逻辑，一般放在显眼位置，用重点元素标识；次要指标围绕主要信息进一步阐述；辅助指标是对主要信息的补充，一般放在非核心区域，或者二级结构中。
通过合理优化关键指标并进行优先级排列，能够保证数据可视化的核心设计的重点，避免数据空洞散乱。
3. 合理使用数据图表
在选择图表展示相关数据指标时我们要思考各个指标的主要呈现，更进一步的讲，是我们想通过可视化表达怎样的信息。下面这张图就清晰告知了我们如何从数据的展示目的出发，选择合适的可视化方式来呈现数据。
图 6 翻译自@Stephen Few
4. 合理进行页面布局
数据可视化页面布局的设计是相对灵活的，为了保证数据呈现最佳效果需要结合实际需求来合理规划。关注核心数据的比例和位置，横向布局最为常见（人眼的水平运动比垂直运动快，会先注意水平方向的事物），核心数据场景划分在中心位置，占较大面积；其余的指标按优先级遵循人们的浏览习惯在核心指标周围依次展开。将类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率。
@布局设计案例
5. 制定设计方向
在定义设计风格的阶段，从项目背景出发，综合行业类型、产品定位、品牌传播等因素，提取关键信息，构建设计框架。
数据可视化的设计风格主要根据客户要求、行业特性、数据指标等因素决定。通常我们很容易看到的可视化设计以深色为主，是因为相比于浅色基调，深色背景设计能够有效缓解视觉疲劳，其次深色设计能够更好地营造对比差异以及数据层级，再者深色设计更容易呈现丰富的动态效果，营造出强烈的空间感等。配色的设计使用应该充分考虑项目背景以及项目属性，例如党政机关类项目会慎重考虑用色，应当确保设计严肃，庄重。
数据可视化的设计除了对数据进行合理设计，还需要注重场景感的塑造，例如，我们通过场景化设计可以让某大数据平台成为大型“图书馆”，查看数据的过程就跟图书馆看书一致，场景化设计的优势是能够让用户能够以一种具象的互动方式来理解十分抽象的业务数据，当然合理的构建动态数据效果能够让数据具备“生命力”。
图 7 @Gan Gryc
6. 设计对比
除了尺寸和位置，我们还可以通过配色来突出数据。
无论是通过颜色或形状对比设计，容易产生强烈的视觉冲击力。
图 8 @Bureau Oberhaeuser
利用明度的对比，我们可以用深色烘托鲜明的色彩，或者用鲜明的色彩衬托某一块暗沉的色彩，亮色靠附近的暗色衬托显得更加鲜明，其色彩特征表现得更加充分；
图 9 @Zoey Shen
正确的对数据进行配色，让数据传递出的信息更清楚、更明白，例如国内 A 股，红色代表涨，绿色代表跌（美股绿涨红跌）如果给国内的股票、金融等相关客户做数据可视化设计时，需要避免不同地区文化所产生的差异。
图 10 @Dima Groshev
7. 选择 2D or 3D?
随着数字孪生概念的火热，越来越多的企业热衷于打造自己的 3D 数据可视化产品，那么 3D 可视化就一定比 2D 强吗？
数据可视化设计本身就是为了高效传达数据信息而服务的，相比平面呈现，3D 最大的优势在于多了空间维度，适合那些需要跟空间结合的数据呈现，例如地理信息、建筑楼宇、工业生产等场景。那么 3D 数据可视化相比 2D 就一定能够展示更多的信息吗，显然不是绝对的；需要根据实际业务需求出发。
通常我们所说的数据 3D 可视化，就是把大量复杂抽象的数据信息，通过 3D 模型以视觉方式呈现出来，帮助人们理解和分析数据。相比于数据 2d 可视化，数据 3d 可视化具有以下的优势：
在一个实际的数据可视化产品项目中，有必要应用 3D 数据可视化的情形；
相比 2D，3D 的设计与开发成本相对较高；其次 3D 场景会容易产生视角遮挡以及操作成本等问题，那么从实际项目出发合理选择才是最重要的。
亚信数字楼宇@PRD MO UED
8. 设计还原
设计稿完成了并不代表设计师在这个项目中的工作就结束了，在后续的开发工作中，设计师还要与开发人员合作，减少上线产品与设计稿的差异。
这个阶段的工作也并非听上去那么容易，尤其是 3D 可视化设计，我们会使用相关 3D 工具制作设计效果，但 3D 设计工具与最终开发引擎存在着色、渲染等差异；在这个时候我们需要灵活运用开发引擎特性，提供对应的美术资源。作为设计师同样需要了解相关引擎着色器知识，帮助设计效果实现同时也提升对接效率。
亚信数字楼宇@PRD MO UED
9. 调优与测试
测试客户终端上线是否正常，有无适配所造成的兼容性问题；排查有无视效及体验问题，同时也要考虑极端场景下所产生的问题及应对方案。
对于大型 3D 可视化场景会存在性能卡顿，加载缓慢等问题，在保证视效基础上尽可能压缩相关美术资源，减少不必要的效果计算和内存占用量，根据实时效果需要不断优化性能提升产品体验度。
趋势一：数据可视化 ╳ AI人工智能
随着企业发展数据量日益庞大，通过人脑分析复杂数据变得越来越困难，我们需要借助 AI 人工智能的帮助。AI 人工智能可以通过强大的算法快速识别分析数据，为企业节省了宝贵的时间和资源，目前人工智能已经被广泛应用于医疗保健服务、销售、供应链、客户分析和欺诈预防的数据可视化项目中。
IBM 数据可视化专家 Mauro Martino 创建的仪表板，允许用户可视化新闻中出现的主题
趋势二：数据可视化 ╳ XR
AR 和 VR 技术的应用可以增强数据在空间上的感知，从而帮助人们更好地使用数据。通过结合 VR、AR 技术，用户能够更好，更快地理解、分析数据。最近进行的许多研究表明，VR 和 AR 具有较强的感官体验，可以促进更快的学习和理解。帮助用户对业务问题进行多维度的分析，并更快速地找到解决方案。
图 11 LM9000@5puj47980xk
趋势三：数据可视化 ╳ 实时数据
在数字时代，事物变化很快，企业需要对数据告诉他们的信息做出快速反应——正因为如此，实时可视化数据比以往任何时候都更重要。
在 COVID-19 大流行期间，企业能够迅速作出反应更加重要。各国政府和卫生当局已经使用实时数据可视化来跟踪感染情况并据此进行调整。越来越多的公司正在将实时数据集成到他们的产品中。
实时数据可视化可以采取一些简单的形式，如实时更新的折线图或使用新信息(如销售)快速更新的交互式地图。
图 13 @Esri & The Science of Where Podcast
趋势四：数据可视化 ╳ 全面体验设计
以用户体验为核心的数据可视化设计是一种重要趋势，将用户放在第一位，然后是数据。无论处在哪个行业，设计师都应该遵循类似的思考过程，从思考用户需求及其痛点开始, 用户正在尝试解决哪些问题，以及他们面临哪些可能的困难？他们需要什么信息和功能来解决这些问题？我们如何以最佳方式为他们打造数据可视化？
最新的趋势之一是将用户的工作流与可行的见解、建议、预测以及针对当前任务或决策的最佳后续操作合并，帮助用户进一步钻研数据并发现模式、趋势和相关性。
数据可视化是一门同时结合了科学和艺术的复杂学科，其核心意义在于清晰的叙述和艺术化的呈现，这些需要依靠数据工程师和设计师的精心策划而不是仅仅考虑如何实现炫酷的效果 ，只有最终达到帮助用户理解数据和做出决策的目标，才能发挥它巨大的价值和无限的潜力。
文章来源：优设 作者：AsiaInfo Design
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务