【翻譯】數據人文主義：鏈接人與數字

豆皮粉兒們，又見面了，今天這一期，由字節跳動數據平臺的玄魂，給你們帶來一篇關於可視化做品誕生流程的翻譯文章。

原文連接：devikakhowala.com/data-humani…
注：部份內容未徹底遵守原文進行翻譯

---

爲何要翻譯此文？

這篇文章爲可視化設計提供了很好的入門範例，讓咱們清晰的瞭解到一件可視化做品的誕生流程，以及這中間要作的事情。

---

本文做者最終實現了一個基於網絡的數據可視化平臺，將公園和娛樂設施的定量數據轉化爲信息豐富、引人入勝的視覺效果，以幫助市民和城市官員作出更明智的選擇。

「Human nature is in the center of data universe.
Meaningful connections with data are important for understanding them.」

— Giorgia Lupi

---

DESIGN PROCESS（設計流程）

1.1 UNDERSTANDING THE CONTEXT（上下文）

Why do it?（原由）

在咱們生活的數字世界裏有大量的數據，但一樣豐富的數據也使得咱們很難將其處理成一種相關的、可用的形式。 爲了創建有意義的鏈接，講一個能夠激發好奇心和讓人產生興趣的故事很重要，這是人們想看到和了解的東西。經過這樣的故事，人們能夠了解它的你的目的，並感受到這些內容和生活的聯繫。

1.2 DATA ANALYSIS（數據分析）

1.2.1 Collecting & Cleaning the Data （整理和清洗數據）

經過查閱可用的數據，我決定將人口統計數據與阿勒格尼縣（Allegheny county）公園和娛樂設施的數據一塊兒繪製地圖，以探索二者之間的模式和關係。 爲了理解我收集的數據，我使用數據組織工具（Coordinate systems and LATCH principles，參考： www.informit.com/articles/ar… ） 如座標系和 LATCH ， 對其進行了清理和分類。這些數據排序方法能夠方便地分析、比較和對比數據包中的信息。 可視化的目的是調查城市基礎設施和社區人口構成之間的關係，若是有的話，並以人們能夠參與的方式呈現。

1.2.2 Exploring the datasets(探索數據）

我將每一個街區的人口密度、土地面積、平均年齡、收入中位數等數據與該街區的公園和娛樂設施數量進行映射。 在研究數據時，我發現不一樣的數據集之間沒有明確的模式或關係。若是有的話，我那未經訓練的眼睛確定錯過了。雖然我沒有獲得直接的結果，但我繼續將要探索的數據集進行可視化，但願在這個過程當中學到一些新的東西，並但願找到一種方法，使這些數據集對人們有用。 因爲項目時間限制，我只研究了匹茲堡91個社區的一半數據。

1.3 VISUAL DESIGN（可視化設計）

1.3.1 Exploring the form（探索形式）

Nathan Yau,‘Visualize This’ 和 ‘Data points’的做者，他說「可視化對針對非數據專家展示數據價值方面十分有用」。 爲了構建更具凝聚力的視覺設計語言，我使用了利用視覺變量來開發鏈接形式和功能的方法；基於語義來表示數據。

1.3.2 Initial concept : User testing, Feedback & Redesign（初始概念：用戶測試、反饋和從新設計）

使用「快速約會（speed dating）」 做爲調研方法，我採訪了10個同窗，要求對我最初的想法給出反饋。來自用戶測試的反饋：

• 敘事效果很好，激發用戶參與的好奇心
• 形式大於內容
• 更有效地使用可視變量來匹配內容
• 網格和地圖系統都有價值，應該考慮二者都保留

1.3.3 Form Exploration & Refining（形式探索與提煉）

基於反饋，我從新審視了視覺形式，明確了在形式和內容之間創建強有力的聯繫的目標。 我專一於研究更多文字形式的使用，這些形式可讓觀衆輕鬆得到清晰的含義。這個想法是創建一個總體的形式，這樣若是有人從遠處看這件做品，他們也能夠抓住這件做品的重點。

1.3.4 Visual Design System （視覺設計系統）

我以樹木爲中心人物，圍繞着它展開敘事。這使我可以成功地鏈接那些彷佛與天然無關的元素。將這些元素編織在一塊兒，用戶很容易將視覺呈現和大腦中的記憶關聯在一塊兒。最終要呈現的數據以下圖所示。 使用樹木做爲公園和娛樂設施的表明當即爲觀衆提供上下文信息。 線條+動做表明年齡組。 靈感來自樹木年輪，它將樹木年齡和社區的年齡創建了很好的鏈接。 用比例尺表示面積。簡單的視覺關係減小了觀衆的認知負荷。 用顏色表示人口密度。 顏色+數量表示收入中位數。雖然沒有直接的聯繫，水果般的圖形很容易記住在整個敘事內容。 類型系統。
顏色系統。
按鈕狀態。

1.3.5 Color Accessibility Check（顏色可訪問性檢查）

因爲設計中使用了不少綠色色調，我絕對針對綠色色弱人羣進行測試和設計。 普通人視圖： 綠色色盲（色弱）視圖：

1.4 THE INTERACTIONS（交互）

How will the story unfold? What will be the key Interactions?（故事將如何展開呢？核心交互是什麼呢？） 用戶能夠自定義他與這件做品的交互方式是他從中獲取價值的關鍵。拿什麼來吸引用戶呢？這些數字如何和用戶的平常生活產生關聯呢？這些數據對他們意味着什麼呢？他們想知道什麼呢？ 理解用戶的指望和動機是設計一個可視化平臺的關鍵。 利益相關的羣體：

1. 政府官員
2. 社區居民
3. 新移民

下面是最初的草稿：

1.4.1 主界面元素

Hover（懸浮）
每一個小區都用一個符號來表示，這個符號表示該小區的公園和設施的數量。鼠標懸浮的時候經過ToolTip顯示相關數量數據。 Floating Key Panels （浮動面板）
每一個數據集的浮動面板在側導航欄中摺疊隱藏。 Collapsible Side Nav in Fullscreen Mode（全屏模式可收起側導航） Map View（地圖視圖）
有助於探索社區之間的關係 Grid View（表格視圖）
適用於總體查看，比較數據，分析關係

1.4.2 Key Interactions（核心交互）

Map view 地圖視圖是默認視圖。人們每每先從熟悉的東西開始。選擇社區後，用戶能夠在其餘數據集之間切換以進行分析和探索。 Map View Compare（地圖視圖的對比功能）
比較功能有助於比較兩個或三個社區之間的數據。在一個單一的社區範圍內，它還提供了一個更好的視角。空間比較也能夠爲新移民提供參考信息。 List View（列表視圖） 列表視圖容許得到完整的各類數據集之間的關係。單擊單個社區能夠打開該社區的詳細信息頁面。 List View Compare（列表視圖對比功能）
列表視圖容許在給定時間範圍內比較多個社區。若是有人想把某一類型的社區放在一塊兒比較，這會頗有用。 1.4.3 How can I take this further?（ 還能夠作得更好）
（略）

小結

「Look for the question, not the solution.」

— Red Burns

數據可視化能夠作的不只僅是基於模式和關係提供答案。當事情不符合咱們的預期時，人們能夠利用數據來發現問題，評估和尋找機會。這個可視化做品也有了更大的價值：

• 以幫助市政當局發現模式，併爲將來規劃提供信息。
• 它也能夠做爲當地市民的一種資源，倡導在他們的社區發展公園和娛樂設施
• 該市能夠在低收入社區計劃季節性避難所
• 建設60歲以上人羣的娛樂中心
• 規劃在低收入社區建設健康營