「交互设计师最佳助手」可视化设计综合使用指南！（第二期）

未来交互与AI

公众号：未来交互与AI

2023-09-02浏览 108284,102 字 · 约 13 分钟

…

UI DESIGN UX DESIGN UI DESIGN UX

ARTICLE :2021/11/11：）

ABOUT

VISUALIZATION

（全文共4543字，阅读10-12min）

在上期内容中，我们基本了解关于可视化的概念以及在现代社会使用可视化设计的重要性，并介绍了以数据可视化为主体的图表类型。在今天的内容中我们将继续介绍关于可视化设计的更多内容：数据可视化的操作工具、实践案例了解可视化中的色彩应用、近期可视化精彩设计案例。

可视化的制作工具？

这里的可视化制作工具指的是支持数据可视化的生成与展示的软件。

入门级工具:Excel（分析数据的理想工具，但在颜色、线条和样式的选择上有限）

在线数据生成工具：Goole Chart API（功能丰富，支持在线使用）、Raphael(支持创建图表和图形)

互动图形用户界面（GUI）控制：Crossfilter(支持数据分析与交互展示)

地图工具：OpenLayers(实现地图动态显示与交互)、CartoDB(把表格数据与地图关联)

进阶工具：Processing(数据可视化招牌工具)、Python(功能强大效果好)

图形工具：Ai(信息图形化常用矢量工具)

可视化的制作包括但不限于以上工具，受到时代以及网络环境影响，我们可以使用的在线生成工具较少，多数可视化的成熟呈现需要通过编程的学习进行完善。对这部分感兴趣可以查阅更多资料。

在这个数据驱动的世界中，从汽车传感器到远程卫星，信息无处不在，以适当的形式表示信息是一项至关重要的任务。而可视化很好的满足了这项需求。

可视化的色彩应用？

（在这部分内容，将结合可视化具体案例：品牌中信息可视化色彩设计应用进行详细分析。）

通常情况下，品牌调色板无法满足数据可视化的需求。数据可视化颜色是具有不同应用程序的不同调色板的集合。三个主要调色板被称为分类（定性）、顺序和发散，并添加了警报色和焦点调色板。

满足数据可视化调色板的要求同时确保它具有易于访问、打印友好、品牌化和美观的特性，这是一项艰巨的任务。

重点1

我们创建的调色板必须具有这些属性。

品牌

美观

无障碍

打印友好

重点2

这些是需要创建的调色板类型。

分类调色板

顺序调色板

发散的调色板

警报和焦点调色板

重点1

保持品牌形象

作为起点，请以您公司的品牌颜色指南、徽标图像和使命为基础，以制作灵感的神器。本文档应用作未来调色板探索的基础和指路明灯。请记住，您不需要使用品牌的确切颜色，您仍然可以从相似的十六进制代码中唤起品牌含义。

审美

为您的调色板收集颜色并开始看到色彩和谐的一种有用方法是查看自然图像。就我而言，我们的徽标中有一棵果树。我搜索了一棵被平原包围的孤树的图像，并开始在图像中推断颜色。这并不是开发调色板的全部工具，但它在您设计时提供了独特的视角。

无障碍

作迄今为止，在构建调色板时，可访问性是要考虑的最重要因素。我们希望我们的调色板考虑到我们所有的用户，而不仅仅是一些。全球 8% 的男性和 0.5% 的女性患有某种形式的色盲。为了通过色盲测试，调色板中的相邻颜色需要在色盲范围内在视觉上彼此不同。

打印

即使在 2021 年，印刷品仍然是许多组织的相关且重要的媒介。最重要的是，黑白打印仍然是最常见和最具成本效益的打印方式。如果您的调色板在亮度方面没有很强的渐变，那么您的许多颜色在不饱和时，在转换为灰度时可能看起来相同。

警惕分类调色板。通过多次反复试验，这是在灰度中获得正确的最具挑战性的调色板。考虑以一种方式组织这个调色板，将不同的深浅色调彼此相邻。这样，当转换为灰度时，颜色将彼此区分。

重点2

分类调色板

分类（或定性）调色板用于通过为每个数据点分配其独特的颜色（即比较美国与其他国家的 GDP）来比较明显不同的类别，例如国家、州或性别。这些颜色变化旨在表明数据点不相关且具有相同的价值。最佳做法是将您的数据集保持在 6-8 个类别，并将剩余的数据点（最小百分比）归入“其他”类别。但是，边缘用例可能需要更多类别，从而需要扩展调色板。

将您的品牌美学融入这种调色板类型的一种方法是预先加载您的品牌唤起颜色。

顺序调色板

这种单色调色板最适合用于显示具有相关性的数据。

使用从明暗渐变的单一颜色（色调），该调色板可用于显示趋势，例如比较各州的人口密度，甚至比较美国的 COVID-19 疫苗接种率。不同的色调按逻辑排列，其中较浅的颜色表示较低的值，而较深的颜色表示较高的值。同样，我预先加载了我们的品牌颜色，以便将它们包含在创建的大量示例中。

发散调色板

发散调色板将两个截然不同的单色调色板组合在一起，中心中点为 0。它们最适用于比较不同的值范围集，最常用于显示正负关系。以上面的顺序 COVID-19 为例。不是按州比较疫苗接种率，为了使这个调色板不同，我们将按州比较疫苗的公众意见[即非常积极、积极、有点积极、中立、有点消极、消极、非常消极]。

拥有积极/消极关系调色板（红色/绿色）以及中性调色板（蓝色/橙色）是有帮助的。这些中性调色板可用于比较既没有积极意义也没有消极意义的两个元素。在这种情况下，我们将使用代表我们正在比较的项目的颜色，例如在地形图中使用绿色代表森林密度和黄色代表农田密度。

警报调色板

警报颜色（语义颜色）用于显示好、坏或警告状态。每种颜色都与一个状态相关联，并且在使用时始终具有相同的含义。这些状态通常出现在表单字段、警报、吐司、横幅和对话框中，并且被普遍理解为 UX 最佳实践。

焦点调色板

焦点调色板用于突出显示范围内的特定数据，以帮助推动特定故事。焦点调色板应使用单一颜色作为其余数据点的突出显示和灰色。例如，它可用于展示我们的品牌与同一行业的其他品牌的比较情况。

品牌可视化色板制作步骤:

1.研究和定义需求（重点1和重点2）

2.打造品牌灵感神器作为您的指路明灯

3.收集能唤起您品牌的自然或其他事物的图像

4.使用免费的调色板生成工具并将您迄今为止发现的颜色输入到其中。

5.构建颜色阴影工具并测试分类和顺序调色板

6.运行色盲测试

7.用不同的信息图表测试调色板

8.与团队一起审查最终选择，调整，审查，重复。

一旦所有这些都完成了，你还剩下一大步。您需要创建一个指南文档。指南文档的目标是让任何人都可以轻松选择您的调色板并知道如何正确应用它。

随着这个调色板的创建和实施，我们现在为组织内需要创建一致数据可视化的任何人提供了单一的事实来源。通过创建定义明确且易于理解的使用指南的文档，每个人都可以访问和使用它，而不仅仅是设计师。这使我们的组织不仅可以推动我们多样化产品的一致性，还可以加快设计过程并在整个公司中使用一致的语言。现在我们的数据可视化具有可访问、打印友好且具有品牌性的更多实用意义。

可视化的应用案例？

01.可视化之ZERRABYTE

人类在 2020 年创造了大约 59zettabyte 的数据。而我们在 2010 年代中期只达到了1zettabyte，这是一个令人难以置信的数量。随着世界变得更加数字化，我们的数据生产速度只会增加。在所谓的“Zettabyte 时代”到来之前，全球 IT 公司思科已经为我们进行了可视化。

可视化确实可以更容易地准确理解 zettabyte 数据的巨大程度。这就是数据可视化的力量。

02.星球大战系列人物互动网络图

随着我们产生的数据量的增长，需要越来越复杂的可视化技术来理解它。一种越来越流行的数据形式是网络图，这使我们能够绘制许多不同点或节点之间的关系。

这个引人注目的网络图不仅仅是一张漂亮的图片。它跟踪星球大战宇宙中存在的 20,000 多个角色之间的联系。每个字符由一个节点表示。并且这些节点中的每一个都通过颜色编码的线（或“边缘”）连接到相关节点。

红色代表力量的阴暗面；蓝色代表光明的一面；黄色显示罪犯和赏金猎人。总共有超过 66,000 个连接，这准确地显示了网络图的强大与美观。

03.热图绘制新冠病毒传播

随着智能手机跟踪我们的运动，位置标记数据正迅速成为一种普遍现象。事实证明，这在 Covid-19 大流行期间尤为重要，各国争先恐后地追踪和追踪潜在的感染链。对于这样的位置数据，地图是一个至关重要的工具。

此可视化显示了 2020 年春假期间在佛罗里达州收集的匿名电话数据。每部电话由单个红色节点表示。红色的薄雾告诉我们，有很多人在享受春假。蓝色突出显示的区域是劳德代尔堡的一个海滩。

虽然这种可视化在同等程度上既可怕又美丽，但它是我们如何可视化地理区域的大数据的一个很好的例子。

04.CRAN 网络上流行的编程语言

这个可视化案例是气泡图和圆形网络图的组合——展示了在综合 R 档案网络 (CRAN) 上的 300 个包中使用流行的编程语言。

从 TIOBE 指数（衡量编程语言的流行程度）中获取数据，此可视化显示使用哪些语言创建了哪些 CRAN 包。R 居首位，其次是 C 和 C++。不太流行的语言由较小的圆圈表示。每个圆圈的大小与用于生成包的代码行数成正比。

05.全球地表温度折线图

该折线图跟踪了从 1880 年到 2010 年代后期的全球地表温度。至关重要的是，它包括来自四个不同来源的数据：NASA、NOAA、日本气象厅和气象局。通过叠加这四个数据源，我们可以立即看到它们的关联程度。它们显示了过去 200 年来全球地表温度几乎相同的上升。

虽然这张图的内容现在对任何人来说都不应该是新闻，但它仍然是一个很好的例子，说明即使是简单的数据可视化也能得出强有力的结论。以这种方式呈现，很难否认这些数据。

06.良政互动气泡图

可视化的交互性也可以改变我们看待数据的方式。政府| DNA是一个屡获殊荣的交互式在线网络工具，它探索了世界各国政府的好（和坏）政府的因素。

该工具将每个国家表示为一个气泡，让您只需单击一个按钮即可比较不同的国家。例如，您可以根据就业、预期寿命、新闻自由和腐败等变量来跟踪每个国家/地区的世界幸福指数。

07.美国移民流图

Streamgraphs 是一种面积图，通常用于比较时间序列数据。虽然并不总是适合深入分析，但它们非常适合提供广泛的概述，在视觉上也很吸引人。

这个美丽的流图由数据记者Talia Bronshtein创建，绘制了 200 多年来（1820 年至 2015 年）到美国的不同移民的国籍。它的研究结果一目了然。例如，我们可以立即看到，在战时（1939-1945）期间，移民美国几乎停止。

08.2010年智利地震雕塑热图

数据可视化不仅仅用于数据分析。正如我们所说，它可以是一种艺术形式。

2010 年，艺术家珍妮特埃切尔曼受委托创作一个代表西半球 35 个国家相互联系的雕塑。那一年，智利发生了大地震。该事件的地震强度如此之大，以至于引发了一场巨大的海啸，并将地球日缩短了 1.26 微秒。

该图像显示了由美国国家海洋和大气管理局 (NOAA) 建模的地震引发海啸的热图。Echelman 以此为灵感创作了她的雕塑，她用悬挂在轻质框架上的不同颜色的绳索建造了这座雕塑，既是艺术成就的胜利，也是令人惊叹的数据可视化。这也证明了数据即数据——以及数据分析——可以像任何艺术领域一样具有创造性。

09.十年十位艺术家可视化