設計 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 的品牌有很多了解，並且能夠利用這些知識來指導我的設計。
• 選擇正確的數據可視化類型：選擇正確的可視化來表示數據點至關重要。 不正確的表示可能會導致混淆或傳達錯誤的信息。
• 明智地使用顏色：正確的顏色組合將引導讀者的眼睛並引起對特定數據點的注意。
• 保持好奇：當你試圖講述一個引人入勝的數據故事時，你必然會遇到復雜的設計問題，因此對不常見的解決方案和持續學習持開放態度很重要。