作者 | 李欣書

最近在項(xiàng)目上常常聽到這樣的話：“我想要一個(gè)酷炫的數(shù)據(jù)大屏”，“設(shè)計(jì)一定要有科技感”，“這個(gè)可視化設(shè)計(jì)沒有重點(diǎn)”……每當(dāng)聽到這些需求，作為設(shè)計(jì)師一般都是欲哭無淚的。到底什么叫酷炫有科技感？客戶理解的數(shù)據(jù)大屏什么樣？是數(shù)據(jù)還是可視化出了問題？？

這篇文章將會結(jié)合最近在數(shù)據(jù)可視化項(xiàng)目上的一些經(jīng)歷，從設(shè)計(jì)的角度，聊一聊什么是數(shù)據(jù)可視化，為什么需要可視化設(shè)計(jì)，以及該從何處著手來設(shè)計(jì)一個(gè)數(shù)據(jù)可視化平臺。

1. 什么是數(shù)據(jù)可視化設(shè)計(jì)？(WHAT)

在聊如何設(shè)計(jì)數(shù)據(jù)可視化平臺前，想先聊一下我所理解的數(shù)據(jù)可視化?！皵?shù)據(jù)可視化就是把數(shù)據(jù)變成圖表”，這可能是很多人對于數(shù)據(jù)可視化最直觀的一個(gè)理解，我們工作中常見的Excel圖表、Power BI報(bào)表等等都是數(shù)據(jù)可視化工具，他們的功能就是將數(shù)據(jù)以圖表的方式呈現(xiàn)，這種理解并沒有錯，狹義上理解數(shù)據(jù)可視化就是將抽象的數(shù)據(jù)語言進(jìn)行具象圖形表達(dá)的過程。

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

數(shù)據(jù)研究專家Viktor Mayer-Schnberger曾有一句名言：“世界的本質(zhì)是數(shù)據(jù)”。數(shù)據(jù)可否理解為現(xiàn)實(shí)世界的一個(gè)個(gè)快照？每個(gè)數(shù)據(jù)點(diǎn)所代表的是現(xiàn)實(shí)生活的一個(gè)記錄，比如便利店剛賣出去的一杯奶茶、社交平臺上在線的一個(gè)賬號。

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

2. 為什么我們需要數(shù)據(jù)可視化？(WHY)

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

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

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

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

3. 如何設(shè)計(jì)數(shù)據(jù)可視化平臺？（HOW）

在思考了什么是數(shù)據(jù)可視化，以及為什么需要數(shù)據(jù)可視化之后，如何設(shè)計(jì)數(shù)據(jù)可視化可能是一個(gè)更加實(shí)用的問題，數(shù)據(jù)可視化如果想傳達(dá)給用戶，常見的方法就是就是通過可視化平臺展現(xiàn)，例如網(wǎng)頁、軟件等等，這一節(jié)將從抽象的設(shè)計(jì)思路到具象的界面設(shè)計(jì)，分析應(yīng)該如何設(shè)計(jì)數(shù)據(jù)可視化平臺。

3.1 設(shè)計(jì)之前先考慮四個(gè)基本要素

和設(shè)計(jì)產(chǎn)品相同，在設(shè)計(jì)數(shù)據(jù)可視化前也需要考慮用戶是誰，在什么應(yīng)用場景下，可視化的目的是什么，除此之外，尤其重要的還要思考數(shù)據(jù)是什么。

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

關(guān)于用戶可以問：

• 用戶是誰？?
• 用戶的需求是什么？?
• 用戶的專業(yè)技能是什么？?
• 用戶對于可視化平臺的熟悉程度如何？?
• 用戶如何利用數(shù)據(jù)去解決問題？?
• 用戶如何向其他人傳達(dá)信息？?
• ……?

關(guān)于場景可以問：

• 數(shù)據(jù)平臺在什么設(shè)備上使用？?
• 用戶查看/觀測數(shù)據(jù)的頻率如何？每天一次還是多次？?
• ……?

關(guān)于數(shù)據(jù)可以問：

• 數(shù)據(jù)的變量是什么？?
• 數(shù)據(jù)的類型是什么？?
• 數(shù)據(jù)的范圍是多少？?
• 有沒有異常的數(shù)據(jù)需要清理或者凸顯？?
• ……?

當(dāng)然關(guān)于數(shù)據(jù)的問題會有BA、DA等等來分析，但是作為可視化設(shè)計(jì)師，需要對所要展示數(shù)據(jù)有基礎(chǔ)的理解，這樣會便于我們選擇適合的圖表來傳達(dá)視覺暗示。

關(guān)于目的可以問：

• 數(shù)據(jù)可視化平臺可以幫助用戶解決什么問題？?
• 數(shù)據(jù)可視化平臺可以幫助用戶做出什么決定？?
• ……?

3.2 目的！目的！目的！—— 數(shù)據(jù)可視化的兩類Dashboard

“Always think about the purpose”這是我曾經(jīng)的一位trainer給我的一句話，無論在產(chǎn)品設(shè)計(jì)、體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、還是可視化設(shè)計(jì)的過程中，頭腦中始終帶著一個(gè)清晰的目的，會幫助設(shè)計(jì)師維護(hù)自己的設(shè)計(jì)理念，以及產(chǎn)出一個(gè)優(yōu)秀的設(shè)計(jì)。

回到可視化平臺的設(shè)計(jì)中，數(shù)據(jù)平臺總結(jié)來說有兩類目的：探索型數(shù)據(jù)可視化（Exploratory Data Visualisation）、解釋型數(shù)據(jù)可視化（Explanatory Data Visualisation）。

• 技術(shù)人員、業(yè)務(wù)人員等等通常需要探索型數(shù)據(jù)可視化，來監(jiān)控實(shí)時(shí)的數(shù)據(jù)變化、尋找問題、快速進(jìn)行溝通、實(shí)施行動等等，這類數(shù)據(jù)可視化通常通過操作型儀表盤（Operational Dashboard）來實(shí)現(xiàn)。?
• 企業(yè)領(lǐng)導(dǎo)、戰(zhàn)略專家等等通常需要解釋型數(shù)據(jù)可視化，來查看一段時(shí)間內(nèi)的數(shù)據(jù)總體波動趨勢的結(jié)果，幫助規(guī)劃及做出決策等等，這類數(shù)據(jù)可視化通常通過分析型儀表盤（Analytical Dashboard）來實(shí)現(xiàn)。?

探查不同的用戶和他們的目標(biāo)，可以幫助確定可視化的基本類型和設(shè)計(jì)邏輯。

下面用兩個(gè)例子來更清楚的展示操作型儀表盤和分析型儀表盤的區(qū)別：

（Operational Dashboard designed by Cadabra Studio）

（Analytical Dashboard designed by Shihab Tuhin）

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

從確定可視化四要素到確定可視化類型，我們已經(jīng)逐漸從抽象的想法逐漸落實(shí)到了具象的界面。數(shù)據(jù)可視化設(shè)計(jì)和普通網(wǎng)站不同的一點(diǎn)，就是可視化會在同一個(gè)界面中呈現(xiàn)大量數(shù)據(jù)信息、數(shù)據(jù)圖表，合理規(guī)劃界面的設(shè)計(jì)可以讓用戶更高效地找到問題的答案。

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

3.4 最后回到開頭的問題：如何讓可視化設(shè)計(jì)酷炫起來？

不僅僅在數(shù)據(jù)平臺概念設(shè)計(jì)中，在過往的平面設(shè)計(jì)、APP設(shè)計(jì)經(jīng)歷中，經(jīng)常會聽到客戶想要設(shè)計(jì)“酷炫一點(diǎn)”、“高端一點(diǎn)”，審美是一個(gè)很主觀的評判標(biāo)準(zhǔn)，面對不同客戶的喜好、不同的項(xiàng)目背景，當(dāng)然要靈活的改變設(shè)計(jì)風(fēng)格，在這里只結(jié)合過去的項(xiàng)目經(jīng)歷，總結(jié)一些通用的設(shè)計(jì)“酷炫的可視化”的小技巧。

(1) 結(jié)合FUI & HUD風(fēng)格

在設(shè)計(jì)產(chǎn)品之前，設(shè)計(jì)師一般會參考現(xiàn)有的同類產(chǎn)品設(shè)計(jì)、設(shè)計(jì)趨勢，結(jié)合品牌的風(fēng)格去做Moodboard，如果想要設(shè)計(jì)科技感的數(shù)據(jù)可視化，可以參考平視顯示器（Head Up Display）以及未來用戶界面（Futuristic User Interface）的設(shè)計(jì)風(fēng)格。

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

（HUD Design by Booyang Jang）

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

（FUI Design by Territory Studio）

(2) 配色

數(shù)據(jù)可視化的配色和產(chǎn)品配色一樣，需要有背景色調(diào)、主色調(diào)、輔色調(diào)、功能色調(diào)等等。在選擇背景色調(diào)時(shí)，我們通常選擇深色，因?yàn)樯钌尘翱梢誀I造強(qiáng)烈空間感，可視化的背景需要襯托畫面中的主視覺，如果背景色比較跳，會模糊可視化的重點(diǎn)，影響視覺效果。談到選擇科技感的主色調(diào)，大家可能第一個(gè)會想到科技藍(lán)，但是藍(lán)色其實(shí)也有很多不同飽和度、不同色相的藍(lán)，其他的色調(diào)例如綠色、橘色等等亦可嘗試應(yīng)用到數(shù)據(jù)可視化中，數(shù)據(jù)可視化設(shè)計(jì)最重要的是，要根據(jù)不同的業(yè)務(wù)范疇以及不同的應(yīng)用場景去確定配色。

結(jié)合上述的概念，以下是一些個(gè)人認(rèn)為設(shè)計(jì)欠佳和優(yōu)秀的案例：

（圖片來源網(wǎng)絡(luò)）

(3) 圖形元素

在項(xiàng)目中，客戶經(jīng)常會提出這樣的想法“我這里要放一個(gè)三維的柱圖是不是就特別酷炫”，大家可能會有一個(gè)誤解認(rèn)為三維的是立體的所以一定看起來特別有科技感，但是在設(shè)計(jì)數(shù)據(jù)可視化的過程中，我們應(yīng)當(dāng)優(yōu)先考慮產(chǎn)品的業(yè)務(wù)場景和數(shù)據(jù)內(nèi)容，并結(jié)合設(shè)計(jì)的一致性來選擇可視化圖表，如果主視覺是二維的就不必要將某一模塊設(shè)計(jì)為三維的。在設(shè)計(jì)二維圖形時(shí)，可以從FUI風(fēng)格中獲取靈感，點(diǎn)線的裝飾、漸變的圖形、發(fā)光的效果等等都可以提升設(shè)計(jì)的科技感。如果條件允許，在適合的業(yè)務(wù)場景下設(shè)計(jì)三維場景也是增強(qiáng)視覺效果的選擇。

（FUI Elements designed by Pixflow）

(4) 動效

如今我們在設(shè)計(jì)產(chǎn)品交互時(shí)，已經(jīng)不拘泥于在靜態(tài)的界面中獲取信息，動態(tài)效果是增加產(chǎn)品豐富度、提升產(chǎn)品體驗(yàn)的一個(gè)重要方法。通過動效展示數(shù)據(jù)信息是體現(xiàn)可視化科技感效果的一個(gè)合理的途徑，動效可以通過：位移、旋轉(zhuǎn)、透明度、縮放等方式去制作，形成獨(dú)特的動畫節(jié)奏，渲染科技感氛圍，提升用戶體驗(yàn)。

4. 最后

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

設(shè)計(jì)界面架構(gòu)與邏輯時(shí)，要結(jié)合用戶使用可視化平臺的目的，選擇適合的儀表盤類型，進(jìn)一步通過用戶洞察旅程，選擇可視化圖表類型并設(shè)計(jì)圖表布局；設(shè)計(jì)界面風(fēng)格時(shí)，要充分考慮數(shù)據(jù)平臺的應(yīng)用場景，利用配色、圖形元素和動效等提高界面豐富度。