我們毫無疑問已經(jīng)處在一個大數(shù)據(jù)的時代。各行各業(yè)都在快速產(chǎn)生和積累數(shù)據(jù)。 本文結(jié)合 UED 團隊過去所參與 B 端數(shù)據(jù)可視化項目分享一些經(jīng)驗及思考。

• 背景
• 什么是數(shù)據(jù)可視化
• 數(shù)據(jù)可視化的應(yīng)用價值
• 如何做好數(shù)據(jù)可視化設(shè)計
• 數(shù)據(jù)可視化發(fā)展趨勢
• 結(jié)語

背景

“得益于計算機技術(shù)和海量數(shù)據(jù)庫的發(fā)展，個人在真實世界的活動得到了前所未有的記錄……社會科學(xué)將脫下‘準(zhǔn)科學(xué)’的外衣， 在21世紀(jì)全面邁進科學(xué)的殿堂。”- 雅虎首席科學(xué)家Duncan J. Watts

“大數(shù)據(jù)的影響，就像四個世紀(jì)前人類發(fā)明的顯微鏡一樣……而大數(shù)據(jù)，將成為我們下一個觀察人類自身社會行為的‘顯微鏡’?！?– 麻省理工教授Erik Brynjolfsson

從數(shù)據(jù)，到海量數(shù)據(jù)，再到大數(shù)據(jù)，對人類的做事和思維方式都有很大的影響。在《大數(shù)據(jù)時代：生活、工作與思維的大變革》一書中，作者歸納了大數(shù)據(jù)的三個特點:

• 更多：不是隨機樣本，而是所有的數(shù)據(jù);
• 更雜：不是精確性，而是混雜性;
• 更好：不是因果關(guān)系，而是相關(guān)關(guān)系。 [1]

當(dāng)前對大數(shù)據(jù)的研究涉及計算機科學(xué)、數(shù)學(xué)、生物學(xué)等多個領(lǐng)域。大數(shù)據(jù)尤其是對數(shù)據(jù)存儲、數(shù)據(jù)挖掘等提出了重大挑戰(zhàn)。而數(shù)據(jù)可視化也將在大數(shù)據(jù)時代扮演一個重要的角色。數(shù)據(jù)可視化可以將紛繁復(fù)雜的大數(shù)據(jù)集、晦澀難懂的數(shù)據(jù)報告變得直觀易讀、易于理解，通過圖表將雜亂的數(shù)據(jù)進行科學(xué)有序的呈現(xiàn)，使用戶找到數(shù)據(jù)的變化規(guī)律以及潛在價值，幫助用戶作出決策。就數(shù)據(jù)可視化的應(yīng)用來看，應(yīng)用范圍極其廣泛，如政府應(yīng)用、商業(yè)決策、公共服務(wù)等等。

什么是數(shù)據(jù)可視化

顧名思義，數(shù)據(jù)可視化就是將數(shù)據(jù)轉(zhuǎn)換成圖或表等形式，以一種更直觀的方式呈現(xiàn)數(shù)據(jù)。通過可視化的方式，我們可以將大量復(fù)雜的數(shù)據(jù)通過圖形化的手段進行有效地表達，幫助用戶發(fā)現(xiàn)規(guī)律和特征，發(fā)掘數(shù)據(jù)背后的價值。

圖 1 @Marco Zemolin Siresia Bagnoli

數(shù)據(jù)可視化的應(yīng)用價值

1. 易于理解，有利于發(fā)現(xiàn)信息特征

使用可視化的方式來表達復(fù)雜的數(shù)據(jù)，可以確保對關(guān)系的理解要比那些混亂的報告或電子表格更快。通過圖形化的表現(xiàn)方式，我們可以以清晰和連貫的方式解釋大量的數(shù)據(jù)，從而讓我們理解數(shù)據(jù)，得出結(jié)論。

案例：流媒體平臺節(jié)目數(shù)量的變化

以下圖為例，當(dāng)用戶希望了解 2011 至 2020 下圖四大流媒體平臺節(jié)目的數(shù)量變化情況時，以表格方式呈現(xiàn)效果如下圖：

未經(jīng)可視化設(shè)計的表格數(shù)據(jù)圖

如果通過可視化設(shè)計處理后效果如下圖：

經(jīng)可視化設(shè)計后的數(shù)據(jù)圖

在這個案例中，我們可以看到，通過文字信息表達的方式，所有的數(shù)據(jù)在文字信息的表達中都只是零散的個體，我們很難在短時間內(nèi)對列舉數(shù)據(jù)有一個大致的了解，更不用說發(fā)現(xiàn)特征得到結(jié)論了；而在可視化表達中則不同，所有的元數(shù)據(jù)通過圖表形成一個整體，數(shù)字信息被轉(zhuǎn)化為視覺信息，通過可視化圖表，通過觀察點的位置和顏色即可感知到數(shù)據(jù)的差異，原本需要通過計算數(shù)字大小完成的對比，變成了肉眼可見的點的顏色與間距對比，我們可以迅速了解到近十年四大流媒體平臺每年節(jié)目數(shù)量、每年不同平臺節(jié)目數(shù)量的對比以及各個流媒體平臺節(jié)目數(shù)量的增長趨勢等。

2. 將數(shù)據(jù)轉(zhuǎn)化為更具吸引力的故事

據(jù)研究發(fā)現(xiàn)：人腦處理圖片信息的速度顯著快于處理文字信息，例如一篇 300 字的小故事，看一遍需要數(shù)十秒，而轉(zhuǎn)化成圖片后則只需要一眼即可記在腦海里。

這表明，在信息的類型中，人腦對圖片信息的接收和處理效率遠高于文字信息。而數(shù)據(jù)可視化則可以將數(shù)據(jù)通過可視化的方式轉(zhuǎn)化一個以圖片形式展示的故事，幫助用戶快速接收、處理信息，激發(fā)用戶聯(lián)想并產(chǎn)生情感共鳴。

案例一：新冠病毒如何通過空氣傳播

隨著新冠疫情在全球各個地區(qū)的蔓延，如何做好疫情防控已經(jīng)成為了每個民眾的頭等大事 。Mariano 和 Javier 用可視化的方式生動形象地傳達了新冠病毒是如何通過空氣傳播的以及可以通過哪些措施來降低傳染風(fēng)險。

圖 2 @Mariano & Javier

案例二：在敘利亞，誰和誰戰(zhàn)斗？

許多不同的團體之間的關(guān)系可能很難理解 – 尤其是當(dāng)有11個這樣的團體存在的時候，這些團體之間有的結(jié)盟，有的敵對，這讓人難以理解。但是，Joshua Keating 和Chris Kirk通過表格的形式和熟悉的視覺效果和色彩，將這些數(shù)據(jù)簡化為一種簡單的、易于理解和可互動的形式，讓人們可以輕松了解這些團體之間的關(guān)系和故事

圖 3 @Joshua Keating and Chris Kirk

3. 幫助人們作出決策，加快決策過程

現(xiàn)實生活中大部分的人是視覺學(xué)習(xí)者，他們傾向于在與視覺元素相關(guān)聯(lián)的情況下進行學(xué)習(xí)并與信息互動。[2] 人類大腦識別并理解一張圖像最快僅需 13 毫秒。[3] 因此，相比起閱讀和理解文本，大部分人更容易通過圖表或其他可視化形式來理解數(shù)據(jù)，合理的數(shù)據(jù)可視化設(shè)計可以提高他們作出決策的速度。

圖 4 @Bea Vaquero

如何做好 B 端數(shù)據(jù)可視化設(shè)計

1. 明確客戶需求

設(shè)計師在設(shè)計數(shù)據(jù)可視化項目的開始階段應(yīng)該盡量與客戶進行深入溝通，確定他們的業(yè)務(wù)訴求，也可以理解為確定客戶的初衷與目的，從企業(yè)客戶對數(shù)據(jù)可視化的需求看來，通常會有兩種類型：

• 側(cè)重于匯報展示，主要用途是為了對外宣傳、對內(nèi)展示等，對于這類需求，設(shè)計時可強化視覺效果的呈現(xiàn)，對數(shù)據(jù)進行場景化設(shè)計，嘗試讓數(shù)據(jù)以一種新的載體，有趣的互動等形式結(jié)合展現(xiàn)。
• 側(cè)重于數(shù)據(jù)分析和協(xié)助決策，對于這類需求，一定要清晰了解需求方的業(yè)務(wù)內(nèi)容和重點指標(biāo)，重點關(guān)注數(shù)據(jù)的維度、種類、數(shù)量等信息，視效設(shè)計上應(yīng)該優(yōu)先滿足業(yè)務(wù)訴求。

明確客戶訴求，通過設(shè)計手段幫助客戶達成目標(biāo)，這才是 B 端數(shù)據(jù)可視化設(shè)計的關(guān)鍵所在。只有當(dāng)我們了解客戶的需要，我們才能快速推導(dǎo)產(chǎn)品結(jié)構(gòu)、關(guān)鍵數(shù)據(jù)、視效風(fēng)格等信息。

圖 5 @Daria

2. 確定關(guān)鍵指標(biāo)與優(yōu)先級

關(guān)鍵指標(biāo)是對一組或者一系列數(shù)據(jù)的統(tǒng)稱。一般情況下，一個指標(biāo)在屏幕上獨占一塊區(qū)域，所以通過關(guān)鍵指標(biāo)定義，我們就知道數(shù)據(jù)大屏上大概會顯示哪些內(nèi)容以及數(shù)據(jù)大屏?xí)环譃閹讐K。

那么關(guān)鍵指標(biāo)的選取依據(jù)是什么呢？我個人認為主要還是依據(jù)客戶訴求，數(shù)據(jù)可視化的最終目的就是幫助客戶達成業(yè)務(wù)目標(biāo)。需要思考的是，哪些數(shù)據(jù)通過何種呈現(xiàn)方式能夠幫助客戶解決問題、達到目的、滿足他們的期望，選擇出一系列關(guān)鍵指標(biāo)。

對于這些選取出來的關(guān)鍵指標(biāo)，我們需要對其進行優(yōu)先級的排列，一般來說，主要指標(biāo)能夠呈現(xiàn)業(yè)務(wù)的主要邏輯，一般放在顯眼位置，用重點元素標(biāo)識；次要指標(biāo)圍繞主要信息進一步闡述；輔助指標(biāo)是對主要信息的補充，一般放在非核心區(qū)域，或者二級結(jié)構(gòu)中。

通過合理優(yōu)化關(guān)鍵指標(biāo)并進行優(yōu)先級排列，能夠保證數(shù)據(jù)可視化的核心設(shè)計的重點，避免數(shù)據(jù)空洞散亂。

3. 合理使用數(shù)據(jù)圖表

在選擇圖表展示相關(guān)數(shù)據(jù)指標(biāo)時我們要思考各個指標(biāo)的主要呈現(xiàn)，更進一步的講，是我們想通過可視化表達怎樣的信息。下面這張圖就清晰告知了我們?nèi)绾螐臄?shù)據(jù)的展示目的出發(fā)，選擇合適的可視化方式來呈現(xiàn)數(shù)據(jù)。

圖 6 翻譯自@Stephen Few

4. 合理進行頁面布局

數(shù)據(jù)可視化頁面布局的設(shè)計是相對靈活的，為了保證數(shù)據(jù)呈現(xiàn)最佳效果需要結(jié)合實際需求來合理規(guī)劃。關(guān)注核心數(shù)據(jù)的比例和位置，橫向布局最為常見（人眼的水平運動比垂直運動快，會先注意水平方向的事物），核心數(shù)據(jù)場景劃分在中心位置，占較大面積；其余的指標(biāo)按優(yōu)先級遵循人們的瀏覽習(xí)慣在核心指標(biāo)周圍依次展開。將類型相近的指標(biāo)放一起，這樣能減少觀者認知上的負擔(dān)并提高信息傳遞的效率。

@布局設(shè)計案例

5. 制定設(shè)計方向

在定義設(shè)計風(fēng)格的階段，從項目背景出發(fā)，綜合行業(yè)類型、產(chǎn)品定位、品牌傳播等因素，提取關(guān)鍵信息，構(gòu)建設(shè)計框架。

數(shù)據(jù)可視化的設(shè)計風(fēng)格主要根據(jù)客戶要求、行業(yè)特性、數(shù)據(jù)指標(biāo)等因素決定。通常我們很容易看到的可視化設(shè)計以深色為主，是因為相比于淺色基調(diào)，深色背景設(shè)計能夠有效緩解視覺疲勞，其次深色設(shè)計能夠更好地營造對比差異以及數(shù)據(jù)層級，再者深色設(shè)計更容易呈現(xiàn)豐富的動態(tài)效果，營造出強烈的空間感等。配色的設(shè)計使用應(yīng)該充分考慮項目背景以及項目屬性，例如黨政機關(guān)類項目會慎重考慮用色，應(yīng)當(dāng)確保設(shè)計嚴(yán)肅，莊重。

數(shù)據(jù)可視化的設(shè)計除了對數(shù)據(jù)進行合理設(shè)計，還需要注重場景感的塑造，例如，我們通過場景化設(shè)計可以讓某大數(shù)據(jù)平臺成為大型“圖書館”，查看數(shù)據(jù)的過程就跟圖書館看書一致，場景化設(shè)計的優(yōu)勢是能夠讓用戶能夠以一種具象的互動方式來理解十分抽象的業(yè)務(wù)數(shù)據(jù)，當(dāng)然合理的構(gòu)建動態(tài)數(shù)據(jù)效果能夠讓數(shù)據(jù)具備“生命力”。

圖 7 @Gan Gryc

6. 設(shè)計對比

除了尺寸和位置，我們還可以通過配色來突出數(shù)據(jù)。

無論是通過顏色或形狀對比設(shè)計，容易產(chǎn)生強烈的視覺沖擊力。

圖 8 @Bureau Oberhaeuser

利用明度的對比，我們可以用深色烘托鮮明的色彩，或者用鮮明的色彩襯托某一塊暗沉的色彩，亮色靠附近的暗色襯托顯得更加鮮明，其色彩特征表現(xiàn)得更加充分；

圖 9 @Zoey Shen

正確的對數(shù)據(jù)進行配色，讓數(shù)據(jù)傳遞出的信息更清楚、更明白，例如國內(nèi) A 股，紅色代表漲，綠色代表跌（美股綠漲紅跌）如果給國內(nèi)的股票、金融等相關(guān)客戶做數(shù)據(jù)可視化設(shè)計時，需要避免不同地區(qū)文化所產(chǎn)生的差異。

圖 10 @Dima Groshev

7. 選擇 2D or 3D?

隨著數(shù)字孿生概念的火熱，越來越多的企業(yè)熱衷于打造自己的 3D 數(shù)據(jù)可視化產(chǎn)品，那么 3D 可視化就一定比 2D 強嗎？

數(shù)據(jù)可視化設(shè)計本身就是為了高效傳達數(shù)據(jù)信息而服務(wù)的，相比平面呈現(xiàn)，3D 最大的優(yōu)勢在于多了空間維度，適合那些需要跟空間結(jié)合的數(shù)據(jù)呈現(xiàn)，例如地理信息、建筑樓宇、工業(yè)生產(chǎn)等場景。那么 3D 數(shù)據(jù)可視化相比 2D 就一定能夠展示更多的信息嗎，顯然不是絕對的；需要根據(jù)實際業(yè)務(wù)需求出發(fā)。

通常我們所說的數(shù)據(jù) 3D 可視化，就是把大量復(fù)雜抽象的數(shù)據(jù)信息，通過 3D 模型以視覺方式呈現(xiàn)出來，幫助人們理解和分析數(shù)據(jù)。相比于數(shù)據(jù) 2d 可視化，數(shù)據(jù) 3d 可視化具有以下的優(yōu)勢：

• 展示空間相關(guān)的數(shù)據(jù)，因為空間數(shù)據(jù)具有三個維度，如果想要將其以視覺方式直觀呈現(xiàn)出來，就必須要借助 3d 模型。例如顯示一棟大樓不同樓層的人員分布情況，此時只有 3D 數(shù)據(jù)可視化能夠幫助我們達到目標(biāo)；
• 視覺沖擊力更強，相比于 3D 可視化從視覺上表現(xiàn)力更強；
• 場景/對象仿真，在一些需要高度仿真的項目，例如與軍事、地理勘測相關(guān)的項目中，數(shù)據(jù) 3D 可視化就不可或缺了，無論宏觀態(tài)勢還是細微結(jié)構(gòu)的精密運行，數(shù)據(jù) 3d 可視化都可以將相關(guān)信息清晰呈現(xiàn)給使用者，將真實的環(huán)境、對象搬到屏幕上，降低使用者的認知成本。

在一個實際的數(shù)據(jù)可視化產(chǎn)品項目中，有必要應(yīng)用 3D 數(shù)據(jù)可視化的情形；

• 需要展示多維空間數(shù)據(jù)
• 需要通過對場景/對象進行仿真，減少使用者的認知成本和學(xué)習(xí)成本
• 需要依靠 3D 效果來提升視覺沖擊力

相比 2D，3D 的設(shè)計與開發(fā)成本相對較高；其次 3D 場景會容易產(chǎn)生視角遮擋以及操作成本等問題，那么從實際項目出發(fā)合理選擇才是最重要的。

亞信數(shù)字樓宇@PRD MO UED

8. 設(shè)計還原

設(shè)計稿完成了并不代表設(shè)計師在這個項目中的工作就結(jié)束了，在后續(xù)的開發(fā)工作中，設(shè)計師還要與開發(fā)人員合作，減少上線產(chǎn)品與設(shè)計稿的差異。

這個階段的工作也并非聽上去那么容易，尤其是 3D 可視化設(shè)計，我們會使用相關(guān) 3D 工具制作設(shè)計效果，但 3D 設(shè)計工具與最終開發(fā)引擎存在著色、渲染等差異；在這個時候我們需要靈活運用開發(fā)引擎特性，提供對應(yīng)的美術(shù)資源。作為設(shè)計師同樣需要了解相關(guān)引擎著色器知識，幫助設(shè)計效果實現(xiàn)同時也提升對接效率。

亞信數(shù)字樓宇@PRD MO UED

9. 調(diào)優(yōu)與測試

測試客戶終端上線是否正常，有無適配所造成的兼容性問題；排查有無視效及體驗問題，同時也要考慮極端場景下所產(chǎn)生的問題及應(yīng)對方案。

對于大型 3D 可視化場景會存在性能卡頓，加載緩慢等問題，在保證視效基礎(chǔ)上盡可能壓縮相關(guān)美術(shù)資源，減少不必要的效果計算和內(nèi)存占用量，根據(jù)實時效果需要不斷優(yōu)化性能提升產(chǎn)品體驗度。

數(shù)據(jù)可視化發(fā)展趨勢

趨勢一：數(shù)據(jù)可視化 ╳ AI人工智能

隨著企業(yè)發(fā)展數(shù)據(jù)量日益龐大，通過人腦分析復(fù)雜數(shù)據(jù)變得越來越困難，我們需要借助 AI 人工智能的幫助。AI 人工智能可以通過強大的算法快速識別分析數(shù)據(jù)，為企業(yè)節(jié)省了寶貴的時間和資源，目前人工智能已經(jīng)被廣泛應(yīng)用于醫(yī)療保健服務(wù)、銷售、供應(yīng)鏈、客戶分析和欺詐預(yù)防的數(shù)據(jù)可視化項目中。

IBM 數(shù)據(jù)可視化專家 Mauro Martino 創(chuàng)建的儀表板，允許用戶可視化新聞中出現(xiàn)的主題

趨勢二：數(shù)據(jù)可視化 ╳ XR

AR 和 VR 技術(shù)的應(yīng)用可以增強數(shù)據(jù)在空間上的感知，從而幫助人們更好地使用數(shù)據(jù)。通過結(jié)合 VR、AR 技術(shù)，用戶能夠更好，更快地理解、分析數(shù)據(jù)。最近進行的許多研究表明，VR 和 AR 具有較強的感官體驗，可以促進更快的學(xué)習(xí)和理解。幫助用戶對業(yè)務(wù)問題進行多維度的分析，并更快速地找到解決方案。

圖 11 LM9000@5puj47980xk

趨勢三：數(shù)據(jù)可視化 ╳ 實時數(shù)據(jù)

在數(shù)字時代，事物變化很快，企業(yè)需要對數(shù)據(jù)告訴他們的信息做出快速反應(yīng)——正因為如此，實時可視化數(shù)據(jù)比以往任何時候都更重要。

在 COVID-19 大流行期間，企業(yè)能夠迅速作出反應(yīng)更加重要。各國政府和衛(wèi)生當(dāng)局已經(jīng)使用實時數(shù)據(jù)可視化來跟蹤感染情況并據(jù)此進行調(diào)整。越來越多的公司正在將實時數(shù)據(jù)集成到他們的產(chǎn)品中。

實時數(shù)據(jù)可視化可以采取一些簡單的形式，如實時更新的折線圖或使用新信息(如銷售)快速更新的交互式地圖。

圖 13 @Esri & The Science of Where Podcast

趨勢四：數(shù)據(jù)可視化 ╳ 全面體驗設(shè)計

以用戶體驗為核心的數(shù)據(jù)可視化設(shè)計是一種重要趨勢，將用戶放在第一位，然后是數(shù)據(jù)。無論處在哪個行業(yè)，設(shè)計師都應(yīng)該遵循類似的思考過程，從思考用戶需求及其痛點開始, 用戶正在嘗試解決哪些問題，以及他們面臨哪些可能的困難？他們需要什么信息和功能來解決這些問題？我們?nèi)绾我宰罴逊绞綖樗麄兇蛟鞌?shù)據(jù)可視化？

最新的趨勢之一是將用戶的工作流與可行的見解、建議、預(yù)測以及針對當(dāng)前任務(wù)或決策的最佳后續(xù)操作合并，幫助用戶進一步鉆研數(shù)據(jù)并發(fā)現(xiàn)模式、趨勢和相關(guān)性。

結(jié)語

數(shù)據(jù)可視化是一門同時結(jié)合了科學(xué)和藝術(shù)的復(fù)雜學(xué)科，其核心意義在于清晰的敘述和藝術(shù)化的呈現(xiàn)，這些需要依靠數(shù)據(jù)工程師和設(shè)計師的精心策劃而不是僅僅考慮如何實現(xiàn)炫酷的效果 ，只有最終達到幫助用戶理解數(shù)據(jù)和做出決策的目標(biāo)，才能發(fā)揮它巨大的價值和無限的潛力。

文章來源：優(yōu)設(shè) 作者：AsiaInfo Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)