最近在項目上常常聽到這樣的話：“我想要一個酷炫的數據大屏”，“設計一定要有科技感”，“這個可視化設計沒有重點”……每當聽到這些需求，作為設計師一般都是欲哭無淚的。到底什麼叫酷炫有科技感？客戶理解的數據大屏什麼樣？是數據還是可視化出了問題？？

這篇文章将會結合最近在數據可視化項目上的一些經曆，從設計的角度，聊一聊什麼是數據可視化，為什麼需要可視化設計，以及該從何處着手來設計一個數據可視化平台。

在聊如何設計數據可視化平台前，想先聊一下我所理解的數據可視化。“數據可視化就是把數據變成圖表”，這可能是很多人對于數據可視化最直觀的一個理解，我們工作中常見的Excel圖表、Power BI報表等等都是數據可視化工具，他們的功能就是将數據以圖表的方式呈現，這種理解并沒有錯，狹義上理解數據可視化就是将抽象的數據語言進行具象圖形表達的過程。

如果我們嘗試把數據和可視化分開來解讀呢？

數據研究專家Viktor Mayer-Schnberger曾有一句名言：“世界的本質是數據”。數據可否理解為現實世界的一個個快照？每個數據點所代表的是現實生活的一個記錄，比如便利店剛賣出去的一杯奶茶、社交平台上在線的一個賬号。

數據是對現實世界的簡化和抽象表達。而可視化從更廣義的角度上看，不僅僅是一種工具，更多的是一種媒介，是探索、展示和表達數據含義，講述數據故事的一種方法。數據可視化其實是數據視覺，以數據為視角，看待并理解現實世界。

我們可以說數據可視化能更好地分享和傳達數據信息，數據可視化可以通過設計之美有效地縮短信息的傳達等等，這些都是需要數據可視化的理由。

一個更好的方法是利用DIKW模型理解這個問題的本質。DIKW體系将數據(Data)、信息(Information)、知識(Knowledge)、智慧(Wisdom)納入到一種金字塔形的層次體系，每一層都比下一層賦予一些新的特質。對于DIKW模型，每個人都有不同的解讀，這裡我會結合一個簡單的例子解讀我所理解的DIKW模型：

• 數據，是記錄下來可以被鑒别的符号，它是最原始的素材，未被加工解釋，沒有回答特定的問題（例如一個數值36.4）；
• 信息，是已經被處理、具有邏輯關系的數據，是對數據的解釋，這種信息對其接收者具有意義（例如老王的體溫：36.4度）；
• 知識，是從相關信息中過濾、提煉及加工而得到的有用資料，知識将數據與信息、信息與信息在行動中的應用之間建立有意義的聯系（例如老王體溫正常）；
• 智慧，是在知識的基礎之上，通過經驗、閱曆、見識的累積，而形成的對事物的深刻認識、遠見，是對事物發展的前瞻性看法（例如結合老王的健康寶數據，他應該是不是新冠的高危人群）。

在DIKW金字塔中，每一層的向上升級，都需要數據分析以及數據可視化，數據可視化的最終目的是為用戶提供一個對事物的深刻認識、遠見，甚至幫助用戶作出正确選擇。

在思考了什麼是數據可視化，以及為什麼需要數據可視化之後，如何設計數據可視化可能是一個更加實用的問題，數據可視化如果想傳達給用戶，常見的方法就是就是通過可視化平台展現，例如網頁、軟件等等，這一節将從抽象的設計思路到具象的界面設計，分析應該如何設計數據可視化平台。

3.1 設計之前先考慮四個基本要素

和設計産品相同，在設計數據可視化前也需要考慮用戶是誰，在什麼應用場景下，可視化的目的是什麼，除此之外，尤其重要的還要思考數據是什麼。

在确定這些問題的答案的過程中，如果有充足的時間和資源，我們當然可以用Persona、Storyboard等等這樣的方法來總結；但如果在外界條件受限或者項目時間不足的時候，親測一個很實用的方法就是結合調研問自己以下這些問題，如果能回答下面的問題，會幫助設計師更好的理解數據、理解業務、理解用戶，從而進行數據可視化設計。

關于用戶可以問

• 用戶是誰？
• 用戶的需求是什麼？
• 用戶的專業技能是什麼？
• 用戶對于可視化平台的熟悉程度如何？
• 用戶如何利用數據去解決問題？
• 用戶如何向其他人傳達信息？
• ……

關于場景可以問

• 數據平台在什麼設備上使用？
• 用戶查看/觀測數據的頻率如何？每天一次還是多次？
• ……

關于數據可以問

• 數據的變量是什麼？
• 數據的類型是什麼？
• 數據的範圍是多少？
• 有沒有異常的數據需要清理或者凸顯？
• ……

當然關于數據的問題會有BA、DA等等來分析，但是作為可視化設計師，需要對所要展示數據有基礎的理解，這樣會便于我們選擇适合的圖表來傳達視覺暗示。

關于目的可以問

• 數據可視化平台可以幫助用戶解決什麼問題？
• 數據可視化平台可以幫助用戶做出什麼決定？
• ……

3.2 目的！目的！目的！—— 數據可視化的兩類Dashboard

“Always think about the purpose”這是我曾經的一位trainer給我的一句話，無論在産品設計、體驗設計、交互設計、還是可視化設計的過程中，頭腦中始終帶着一個清晰的目的，會幫助設計師維護自己的設計理念，以及産出一個優秀的設計。

回到可視化平台的設計中，數據平台總結來說有兩類目的：探索型數據可視化（Exploratory Data Visualisation）、解釋型數據可視化（Explanatory Data Visualisation）。

• 技術人員、業務人員等等通常需要探索型數據可視化，來監控實時的數據變化、尋找問題、快速進行溝通、實施行動等等，這類數據可視化通常通過操作型儀表盤（Operational Dashboard）來實現。
• 企業領導、戰略專家等等通常需要解釋型數據可視化，來查看一段時間内的數據總體波動趨勢的結果，幫助規劃及做出決策等等，這類數據可視化通常通過分析型儀表盤（Analytical Dashboard）來實現。

探查不同的用戶和他們的目标，可以幫助确定可視化的基本類型和設計邏輯。

下面用兩個例子來更清楚的展示操作型儀表盤和分析型儀表盤的區别：

（Operational Dashboard designed by Cadabra Studio）

（Analytical Dashboard designed by Shihab Tuhin）

3.3 用戶洞察地圖（User Insight Journey Map）

從确定可視化四要素到确定可視化類型，我們已經逐漸從抽象的想法逐漸落實到了具象的界面。數據可視化設計和普通網站不同的一點，就是可視化會在同一個界面中呈現大量數據信息、數據圖表，合理規劃界面的設計可以讓用戶更高效地找到問題的答案。

一個有效的方法是通過用戶洞察地圖（User Insight Journey Map）來設計眼動追蹤模式（Eye Tracking Pattern）。用戶洞察地圖和普遍的用戶旅程地圖（User Journey Map）不同的是，它更專注于用戶通過數據可視化探索問題答案的過程。在選擇可視化圖表類型，以及布局圖表位置前，要考慮用戶來到這個界面要解決什麼問題，用戶需要獲取哪些信息，用戶會得到什麼答案等等。在得到這個思路曆程後，可以通過設計界面的眼動追蹤模式來指引用戶浏覽圖表的順序，這裡就不詳細展開了。

3.4 最後回到開頭的問題：如何讓可視化設計酷炫起來？

不僅僅在數據平台概念設計中，在過往的平面設計、APP設計經曆中，經常會聽到客戶想要設計“酷炫一點”、“高端一點”，審美是一個很主觀的評判标準，面對不同客戶的喜好、不同的項目背景，當然要靈活的改變設計風格，在這裡隻結合過去的項目經曆，總結一些通用的設計“酷炫的可視化”的小技巧。

結合FUI & HUD風格

在設計産品之前，設計師一般會參考現有的同類産品設計、設計趨勢，結合品牌的風格去做Moodboard，如果想要設計科技感的數據可視化，可以參考平視顯示器（Head Up Display）以及未來用戶界面（Futuristic User Interface）的設計風格。

HUD最早出現在軍用飛機上，降低飛行員需要低頭查看儀表的頻率，避免注意力中斷，HUD中平視的意思是指用戶不需要低頭就能夠看到他需要的重要資訊。HUD現在被廣泛應用在遊戲界面設計中，用戶的視線會主要集中在屏幕中心的核心任務，其他功能模塊在四周為用戶提供必要信息。在數據可視化設計中可以參考HUD風格的界面布局以及元素設計。

（HUD Design by Booyang Jang）

FUI中F不僅僅代表Futuristic，還可以理解為Fictional/Fantasy/Fake，這些用戶界面它們是科幻的，是未來派的，是奇幻的，是虛假的，它們隻出現在影視作品裡面和一些視頻遊戲當中。在日常生活中我們不會去為太空艙、鋼鐵俠設計用戶界面，但是FUI的概念讓設計師有機會去突破現有的用戶體驗和用戶界面的限制，去大膽地設想、探索新的領域、尋找新的解決方案。FUI風格會大膽地使用豐富的圖形元素，并輔以點線元素作為裝飾，這些都可以成為數據可視化的靈感來源。

（FUI Design by Territory Studio）

配色

數據可視化的配色和産品配色一樣，需要有背景色調、主色調、輔色調、功能色調等等。在選擇背景色調時，我們通常選擇深色，因為深色背景可以營造強烈空間感，可視化的背景需要襯托畫面中的主視覺，如果背景色比較跳，會模糊可視化的重點，影響視覺效果。談到選擇科技感的主色調，大家可能第一個會想到科技藍，但是藍色其實也有很多不同飽和度、不同色相的藍，其他的色調例如綠色、橘色等等亦可嘗試應用到數據可視化中，數據可視化設計最重要的是，要根據不同的業務範疇以及不同的應用場景去确定配色。

結合上述的概念，以下是一些個人認為設計欠佳和優秀的案例：

（圖片來源網絡）

圖形元素

在項目中，客戶經常會提出這樣的想法“我這裡要放一個三維的柱圖是不是就特别酷炫”，大家可能會有一個誤解認為三維的是立體的所以一定看起來特别有科技感，但是在設計數據可視化的過程中，我們應當優先考慮産品的業務場景和數據内容，并結合設計的一緻性來選擇可視化圖表，如果主視覺是二維的就不必要将某一模塊設計為三維的。在設計二維圖形時，可以從FUI風格中獲取靈感，點線的裝飾、漸變的圖形、發光的效果等等都可以提升設計的科技感。如果條件允許，在适合的業務場景下設計三維場景也是增強視覺效果的選擇。

（FUI Elements designed by Pixflow）

動效

如今我們在設計産品交互時，已經不拘泥于在靜态的界面中獲取信息，動态效果是增加産品豐富度、提升産品體驗的一個重要方法。通過動效展示數據信息是體現可視化科技感效果的一個合理的途徑，動效可以通過：位移、旋轉、透明度、縮放等方式去制作，形成獨特的動畫節奏，渲染科技感氛圍，提升用戶體驗。

想要設計好的數據可視化，先要理解數據可視化是探索、展示和表達數據含義，講述數據故事的一種方法；此外，我們需要數據可視化的原因是它能為用戶提供一個對事物的深刻認知、遠見，甚至幫助用戶作出正确選擇；在設計數據可視化的過程中，始終要考慮數據是什麼，用戶是誰，在什麼應用場景下，以及可視化的目的是什麼。

設計界面架構與邏輯時，要結合用戶使用可視化平台的目的，選擇适合的儀表盤類型，進一步通過用戶洞察旅程，選擇可視化圖表類型并設計圖表布局；設計界面風格時，要充分考慮數據平台的應用場景，利用配色、圖形元素和動效等提高界面豐富度。

參考資料：

數據之美，Nanthan Yau；

DIKW體系；

What you should know before designing dashboard，Mimi；

可視化設計十要素-風格篇，AYONG_BDR；

更多數據可視化相關文章：

一張漂亮的可視化圖表背後 - Thoughtworks洞見

數據可視化産生生産力 - Thoughtworks洞見

文/Thoughtworks 李欣書

更多精彩洞見，請關注公衆号Thoughtworks洞見

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!