去年我和GitHub合作设计了 2021年《欧博体育app下载》. GitHub的Octoverse分析了来自数百万开发人员和存储库的真实数据，以呈现年度软件开发行业的见解. 2021年报告涵盖三个主要趋势:通过制定代码提高绩效和福祉, 创建文档, 支持社区在一个更聪明的, 更可持续的方式.

作为项目的创意联络人, 我的工作是协助GitHub团队使数据繁重的报告易于理解. 使用 数据可视化, 我设计了20多个图表, 地图, 和图表来帮助读者解开GitHub数据科学家收集的信息.

在这个数据可视化案例研究中, 我解释了我的设计过程, 展示我帮助为GitHub的Octoverse创建的网站, 并分享从项目中获得的重要经验.

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

《欧博体育app下载》是一份庞大的报告, 数据收集自超过7300万GitHub开发者和超过6100万新开发者 存储库. 这也是第一次对受访者的人口统计数据进行调查. 理解这些数据需要大量的设计工作.

我们的团队包括开发人员 何塞·路易斯·加里多 项目经理 纳斯 洛佩兹他的任务是为读者综合这些海量的信息. 尽管延迟启动和其他同时进行的项目，我们还是交付了.

开始设计过程

我的第一阶段 数据可视化设计过程 被发现. GitHub的数据科学家收集并分析了来自开发者和存储库的信息 Excel 文件, 幻灯片演示，以及其他数据集.

有了这些信息, 以及GitHub的初始数据可视化草图和60页的上下文文档, 我开始思考如何最好地说明每个数据集. 然后, 我开始设计每一张图表, map, 和图表最大的用户参与和直观的用户体验.

选择星盘

选择一个项目有三个关键点 有效的数据可视化:

1. 确定图表的目的

数据可以用多种方式表示——条形图, 线形图, 的热图, 瀑布图, 和更多的. 每个图表 有目的, 重要的是要使用正确的词汇，以确保传达出清晰准确的信息.

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

2. 考虑最终用户

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

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

如果您向用户呈现不熟悉的可视化，他们将很难解释数据.

3. 清晰的设计

数据可视化是否清晰简洁，还是有太多的噪音? 条形图可能是显示数据的好方法，但如果有100个带有单独标签的条形图就不是这样了. 同样的, stream图 美观和实用，但只有在有清晰的数据模式的情况下. 有时候少即是多.

设计完美的数据可视化

在2021年的《欧博体育app下载》报告中，你会发现各种各样的 数据可视化 这是根据相应的数据精心编写的见解.

蝴蝶图

在Overview页面上，我需要设计一个 信息图表 两组数据显示了受访者在大流行之前和之后的工作地点. GitHub为我提供了两个饼状图，每个饼状图绘制了四个数据点:并置, 混合动力, 完全远程, 不适用. 然而，饼状图在比较两组数据时并不是特别有效.

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

凹凸图

另一个有效的数据可视化是 撞图表. 我们使用这张图表来展示过去八年中开发人员使用的最流行的计算机编程语言的信息. 凹凸图非常适合显示一段时间内排名的变化, 它们已经成为《欧博体育app下载》报道的主要内容.

Treemap

我需要说明受访者贡献代码的不同部门. 最终的选择是饼状图还是树状图.

当你有三个或四个部门，且数量明显不同时，饼图是有用的. 然而, 我们的大脑不能很好地处理角度, 当一个饼状图上有很多大小相近的楔形时, 人们很难分辨出哪个更大.

相比之下，树状图允许用户轻松地对各个片段进行比较，也可以对整体进行比较. 最大的矩形位于左上方，其次是逐渐变小的矩形. 更容易 比较直线 而不是比较楔形或角度.

的统计图

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

在这个数据可视化中，正方形的大小表示总体大小. 另外, 正方形颜色的饱和度表示该区域有多少组织在使用GitHub.

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

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

鼓励用户参与, 我们选择了一个完全响应的网站，可以根据不同大小的视口调整网站的渲染. GitHub在发现更大的设备驱动了Octoverse的大部分访问后，要求我们特别关注桌面版本.

当 设计 响应站点，我遵循这些 最佳实践:

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

因为我从一开始就考虑了不同的设备来设计这个网站, 大多数图表在所有屏幕尺寸上都能很好地呈现. 我只需要为最佳的可见性做一些小的调整，比如 循环系统树图 在“可持续社区”一节的末尾.

组织信息架构

我为网站探索了不同的选项 信息架构. 我不想用太多的信息淹没用户, 但我也不希望网站分散或难以导航.

记住这一点, 我从设计一个长长的滚动网站开始, 所有的内容都在同一个页面上. 当这在视觉上变得难以承受时，我尝试将每个图表放在单独的页面上. 帮助导航, 我为每一页添加了一个带有目录的侧边导航菜单, 就像你在书中找到的一样. Octoverse网站的最终设计由三个主要趋势的单独网页组成, 加上一个主页，作为最重要的数据的摘要.

在确定了信息架构之后, 接着我开始设计网站的内容结构, 导航流, 图片, 和图形. 我创建了 线框图 绘制出内容并显示不同页面之间的路径.

使网站具有互动性

滚动进度指示器

为了满足GitHub对引人入胜的动态网站的要求，我们添加了交互元素. 例如，在顶部导航栏下，我设计了 滚动进度指示器 这样访问者就可以跟踪他们在网站上的位置. 当读者向下滚动页面时, 指示条以增量方式缩放, 每个页面的栏都有不同的填充颜色:灰色, 紫色的, 蓝色的, 或绿色.

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

为了让网站看起来不那么单调，我们决定对部分标题进行动画处理. 我制作了插图，我们团队的开发人员制作了动画. 我们还为主页和每个小节制作了英雄图像动画, 每个网页的底部都有相应的章节卡片.

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

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

数据只有在你能理解它的时候才有用, 设计用户可以轻松解读的数据量大的内容的过程是具有挑战性的. 然而，这次与GitHub的合作拓宽了我在 数据可视化设计. 以下是这个数据可视化案例研究中最重要的收获:

• 了解品牌: 熟悉一个品牌的核心风格准则——比如它的字体使用, color, 图像加速了设计过程，因为它使设计师可以自由地进入创意过程. 我很幸运，在合作之前我对GitHub的品牌了解很多, 我可以用这些知识来指导我的设计.
• 选择正确的数据可视化类型: 选择正确的可视化来表示数据点是至关重要的. 不正确的表示会引起混淆或传达错误的信息.
• 明智地使用颜色: 正确的颜色组合将引导读者的眼睛，并将注意力吸引到特定的数据点上.
• 保持好奇: 当你试图讲述一个令人信服的数据故事时, 你一定会遇到复杂的设计问题, 因此，对不寻常的解决方案持开放态度并持续学习是很重要的.