设计 GitHub 的 Octoverse：数据可视化案例研究

去年，我与 GitHub 合作设计了 2021 年 Octoverse 状态报告。 GitHub 的 Octoverse 分析来自数百万开发人员和存储库的真实数据，以展示今年的软件开发行业洞察力。 2021 年报告涵盖三个主要趋势：通过开发代码、创建文档以及以更智能、更可持续的方式支持社区来提高性能和福祉。

作为项目的创意联络人，我的工作是协助 GitHub 团队使数据量大的报告易于理解。 使用数据可视化，我设计了 20 多个图表、地图和图形，以帮助读者了解 GitHub 数据科学家收集的信息。

在这个数据可视化案例研究中，我解释了我的设计过程，展示了我帮助为 GitHub 的 Octoverse 创建的网站，并分享了从该项目中学到的关键知识。

通过数据可视化设计引人入胜的数字体验

《2021 年 10 月状态》是一份庞大的报告，其中收集了来自超过 7300 万 GitHub 开发人员和超过 6100 万个新存储库的数据。 这也是首次对受访者人口统计进行调查。 理解数据需要大量的设计工作。

我们谦虚的团队，包括开发人员 Jose Luis Garrido 和项目经理 Miquel Lopez，负责为读者综合这些海量信息。 尽管延迟启动和其他同时进行的项目，我们还是交付了。

启动设计过程

我的数据可视化设计过程的第一阶段是发现。 GitHub 的数据科学家通过 Excel 文件、PowerPoint 演示文稿和其他数据集从开发人员和存储库中收集和分析信息。

有了这些信息，再加上 GitHub 最初的数据可视化草图和 60 页的上下文文档，我开始思考如何最好地说明每个数据集。 然后，我着手设计每个图表、地图和图表，以实现最大的用户参与度和直观的用户体验。

选择图表

选择有效的数据可视化有三个关键点：

1. 确定图表的目的

数据可以用多种方式表示——条形图、折线图、热图、瀑布图等等。 每个图表都有一个目的，使用正确的图表以确保传达清晰准确的信息非常重要。

例如，如果您想显示两个数量之间的差异，请使用条形图。 如果要显示一段时间内的趋势，请使用折线图。

2.考虑最终用户

您还需要了解用户读取和分析数据的能力。 我们大多数人都熟悉饼图、条形图和折线图。 我们到处都能看到它们，而且我们知道如何阅读它们。

另一方面，很少有人知道如何阅读箱线图，箱线图在许多研究出版物中用于将多个数据变量汇总到一个图表中。

如果您向用户展示不熟悉的可视化，他们将很难解释数据。

3.清晰的设计

数据可视化是清晰简洁，还是噪音太大？ 条形图可能是显示数据的好方法，但如果有 100 个带有单独标签的条形图则不行。 同样，流图既美观又实用，但前提是数据模式清晰。 有时少即是多。

设计完美的数据可视化

在整个 2021 年 Octoverse 状态报告中，您会发现根据相应的数据洞察力精心组合的各种数据可视化。

蝴蝶图

在概览页面上，我需要为两组数据设计一个信息图——显示受访者在大流行之前和之后的工作地点。 GitHub 为我提供了两个饼图，每个饼图绘制了四个数据点：并置、混合、完全远程和不适用。 但是，饼图在比较两组数据时并不是特别有效。

相反，我选择了蝴蝶图。 蝴蝶图将数据绘制为并排的两个水平条，类似于蝴蝶的翅膀。 这些图表清楚地显示了共享相同参数的两组之间的差异，并使比较两组数据变得更加容易。

凹凸图

另一个有效的数据可视化是凹凸图。 我们使用此图表展示了过去八年来开发人员使用的最流行的计算机编程语言的信息。 凹凸图非常适合显示一段时间内的排名变化，它们已成为 Octoverse 报告中的主要内容。

树状图

我需要说明受访者贡献代码的不同部门。 最终决定归结为饼图与树状图。

当您有三个或四个扇区并且数量明显不同时，饼图很有用。 然而，我们的大脑并不能很好地处理角度，所以当饼图有很多类似大小的楔形时，人们很难辨别哪个更大。

相比之下，树状图允许用户轻松地相互比较段，以及与整体进行比较。 最大的矩形放置在左上角，然后是逐渐变小的矩形。 比较直线比比较楔形或角度更容易。

制图

最后，我需要按地区或国家说明 2021 年使用 GitHub 的组织的地理分布。 为此，我使用了人口统计图。 制图是几何图形被扭曲以适应特定的经济、社会、政治或环境特征的地图。

在此数据可视化中，正方形的大小表示人口规模。 此外，正方形颜色的饱和度表明该区域有多少组织正在使用 GitHub。

GitHub 2021 年 Octoverse 的响应式网站设计

除了设计数据可视化之外，我还帮助 GitHub 团队为 Octoverse 2021 制作了一个网站。该网站是用户阅读、探索报告数据见解并与之交互的枢纽。

为了鼓励用户参与，我们选择了一个完全响应的网站，该网站可以使网站的呈现适应不同大小的视口。 在发现大型设备推动了 Octoverse 的大部分访问之后，GitHub 要求我们特别关注桌面版本。

在设计响应式网站时，我遵循了以下最佳实践：

• 使用桌面友好型和移动友好型字体撰写文本。 这包括选择最佳字体大小、字体、行长和行高，以及优化文本在不同断点处的外观。
• 在每个页面上布置视觉元素以鼓励滚动。
• 设计一个用户友好的顶部导航栏，使其布局适应视口大小。

因为我从一开始就在设计网站时考虑了不同的设备，所以大多数图表在所有屏幕尺寸上都能很好地呈现。 我只需要对最佳可视性进行细微调整，例如对“可持续社区”部分末尾的圆形树状图进行调整。

组织信息架构

我探索了网站信息架构的不同选项。 我不想用太多信息让用户不知所措，但我也不希望网站分散或难以导航。

考虑到这一点，我首先设计了一个长滚动网站，所有内容都在同一页面上。 当这在视觉上变得不堪重负时，我尝试将每个图表放在单独的页面上。 为了帮助导航，我为每个页面添加了一个带有目录的侧导航菜单，类似于您在书中可能找到的内容。 Octoverse 网站的最终设计包括三个主要趋势的单独网页，以及作为最重要数据摘要的主页。

在决定了信息架构之后，我开始设计网站的内容结构、导航流程、图像和图形。 我创建了线框来绘制内容并显示不同页面之间的路径。

使网站互动

滚动进度指示器

为了满足 GitHub 对引人入胜的动态网站的要求，我们添加了交互元素。 例如，在顶部导航栏下，我设计了一个滚动进度指示器，以便访问者可以跟踪他们在网站上的位置。 当读者向下滚动页面时，指示条会逐渐缩放，并且每个页面都有不同的填充颜色：灰色、紫色、蓝色或绿色。

动画标题、图像和数据可视化

为了使网站看起来不平坦，我们决定为部分标题设置动画。 我创建了插图，我们团队的开发人员为它们制作了动画。 我们还为主页和每个小节的英雄形象以及每个网页底部的相应章节卡片制作了动画。

我们还使一些静态数据可视化图表具有交互性。 例如，当您在凹凸图中滚动一条线时，该线会变粗以强调相应的数据点。 这是一个简单但有效的动画，可让网站访问者与数据交互并快速比较语言。

为 GitHub 创建成功的数据可视化和数字设计：关键学习

数据只有在你能够理解的情况下才有用，而设计用户可以轻松破译的大量数据内容的过程具有挑战性。 尽管如此，这次与 GitHub 的合作拓宽了我在数据可视化设计方面的知识。 以下是此数据可视化案例研究中最重要的收获：

• 了解品牌：熟悉品牌的核心风格指南——例如其对字体、颜色和图像的使用——可以加快设计过程，因为它可以让设计师腾出时间进行创意过程。 我很幸运，在合作之前我对 GitHub 的品牌有很多了解，并且能够利用这些知识来指导我的设计。
• 选择正确的数据可视化类型：选择正确的可视化来表示数据点至关重要。 不正确的表示可能会导致混淆或传达错误的信息。
• 明智地使用颜色：正确的颜色组合将引导读者的眼睛并引起对特定数据点的注意。
• 保持好奇：当你试图讲述一个引人入胜的数据故事时，你必然会遇到复杂的设计问题，因此对不常见的解决方案和持续学习持开放态度很重要。