2021-7-29 資深UI設計者
我們毫無疑問已經處在一個大數(shù)據(jù)的時代。各行各業(yè)都在快速產生和積累數(shù)據(jù)。 本文結合 UED 團隊過去所參與 B 端數(shù)據(jù)可視化項目分享一些經驗及思考。
“得益于計算機技術和海量數(shù)據(jù)庫的發(fā)展，個人在真實世界的活動得到了前所未有的記錄……社會科學將脫下‘準科學’的外衣， 在21世紀全面邁進科學的殿堂?！? 雅虎首席科學家Duncan J. Watts
“大數(shù)據(jù)的影響，就像四個世紀前人類發(fā)明的顯微鏡一樣……而大數(shù)據(jù)，將成為我們下一個觀察人類自身社會行為的‘顯微鏡’?！?– 麻省理工教授Erik Brynjolfsson
從數(shù)據(jù)，到海量數(shù)據(jù)，再到大數(shù)據(jù)，對人類的做事和思維方式都有很大的影響。在《大數(shù)據(jù)時代：生活、工作與思維的大變革》一書中，作者歸納了大數(shù)據(jù)的三個特點:
當前對大數(shù)據(jù)的研究涉及計算機科學、數(shù)學、生物學等多個領域。大數(shù)據(jù)尤其是對數(shù)據(jù)存儲、數(shù)據(jù)挖掘等提出了重大挑戰(zhàn)。而數(shù)據(jù)可視化也將在大數(shù)據(jù)時代扮演一個重要的角色。數(shù)據(jù)可視化可以將紛繁復雜的大數(shù)據(jù)集、晦澀難懂的數(shù)據(jù)報告變得直觀易讀、易于理解，通過圖表將雜亂的數(shù)據(jù)進行科學有序的呈現(xiàn)，使用戶找到數(shù)據(jù)的變化規(guī)律以及潛在價值，幫助用戶作出決策。就數(shù)據(jù)可視化的應用來看，應用范圍極其廣泛，如政府應用、商業(yè)決策、公共服務等等。
顧名思義，數(shù)據(jù)可視化就是將數(shù)據(jù)轉換成圖或表等形式，以一種更直觀的方式呈現(xiàn)數(shù)據(jù)。通過可視化的方式，我們可以將大量復雜的數(shù)據(jù)通過圖形化的手段進行有效地表達，幫助用戶發(fā)現(xiàn)規(guī)律和特征，發(fā)掘數(shù)據(jù)背后的價值。
圖 1 @Marco Zemolin Siresia Bagnoli
使用可視化的方式來表達復雜的數(shù)據(jù)，可以確保對關系的理解要比那些混亂的報告或電子表格更快。通過圖形化的表現(xiàn)方式，我們可以以清晰和連貫的方式解釋大量的數(shù)據(jù)，從而讓我們理解數(shù)據(jù)，得出結論。
案例：流媒體平臺節(jié)目數(shù)量的變化
以下圖為例，當用戶希望了解 2011 至 2020 下圖四大流媒體平臺節(jié)目的數(shù)量變化情況時，以表格方式呈現(xiàn)效果如下圖：
未經可視化設計的表格數(shù)據(jù)圖
如果通過可視化設計處理后效果如下圖：
經可視化設計后的數(shù)據(jù)圖
在這個案例中，我們可以看到，通過文字信息表達的方式，所有的數(shù)據(jù)在文字信息的表達中都只是零散的個體，我們很難在短時間內對列舉數(shù)據(jù)有一個大致的了解，更不用說發(fā)現(xiàn)特征得到結論了；而在可視化表達中則不同，所有的元數(shù)據(jù)通過圖表形成一個整體，數(shù)字信息被轉化為視覺信息，通過可視化圖表，通過觀察點的位置和顏色即可感知到數(shù)據(jù)的差異，原本需要通過計算數(shù)字大小完成的對比，變成了肉眼可見的點的顏色與間距對比，我們可以迅速了解到近十年四大流媒體平臺每年節(jié)目數(shù)量、每年不同平臺節(jié)目數(shù)量的對比以及各個流媒體平臺節(jié)目數(shù)量的增長趨勢等。
據(jù)研究發(fā)現(xiàn)：人腦處理圖片信息的速度顯著快于處理文字信息，例如一篇 300 字的小故事，看一遍需要數(shù)十秒，而轉化成圖片后則只需要一眼即可記在腦海里。
這表明，在信息的類型中，人腦對圖片信息的接收和處理效率遠高于文字信息。而數(shù)據(jù)可視化則可以將數(shù)據(jù)通過可視化的方式轉化一個以圖片形式展示的故事，幫助用戶快速接收、處理信息，激發(fā)用戶聯(lián)想并產生情感共鳴。
案例一：新冠病毒如何通過空氣傳播
隨著新冠疫情在全球各個地區(qū)的蔓延，如何做好疫情防控已經成為了每個民眾的頭等大事 。Mariano 和 Javier 用可視化的方式生動形象地傳達了新冠病毒是如何通過空氣傳播的以及可以通過哪些措施來降低傳染風險。
圖 2 @Mariano & Javier
案例二：在敘利亞，誰和誰戰(zhàn)斗？
許多不同的團體之間的關系可能很難理解 – 尤其是當有11個這樣的團體存在的時候，這些團體之間有的結盟，有的敵對，這讓人難以理解。但是，Joshua Keating 和Chris Kirk通過表格的形式和熟悉的視覺效果和色彩，將這些數(shù)據(jù)簡化為一種簡單的、易于理解和可互動的形式，讓人們可以輕松了解這些團體之間的關系和故事
圖 3 @Joshua Keating and Chris Kirk
現(xiàn)實生活中大部分的人是視覺學習者，他們傾向于在與視覺元素相關聯(lián)的情況下進行學習并與信息互動。[2] 人類大腦識別并理解一張圖像最快僅需 13 毫秒。[3] 因此，相比起閱讀和理解文本，大部分人更容易通過圖表或其他可視化形式來理解數(shù)據(jù)，合理的數(shù)據(jù)可視化設計可以提高他們作出決策的速度。
圖 4 @Bea Vaquero
1. 明確客戶需求
設計師在設計數(shù)據(jù)可視化項目的開始階段應該盡量與客戶進行深入溝通，確定他們的業(yè)務訴求，也可以理解為確定客戶的初衷與目的，從企業(yè)客戶對數(shù)據(jù)可視化的需求看來，通常會有兩種類型：
明確客戶訴求，通過設計手段幫助客戶達成目標，這才是 B 端數(shù)據(jù)可視化設計的關鍵所在。只有當我們了解客戶的需要，我們才能快速推導產品結構、關鍵數(shù)據(jù)、視效風格等信息。
圖 5 @Daria
2. 確定關鍵指標與優(yōu)先級
關鍵指標是對一組或者一系列數(shù)據(jù)的統(tǒng)稱。一般情況下，一個指標在屏幕上獨占一塊區(qū)域，所以通過關鍵指標定義，我們就知道數(shù)據(jù)大屏上大概會顯示哪些內容以及數(shù)據(jù)大屏會被分為幾塊。
那么關鍵指標的選取依據(jù)是什么呢？我個人認為主要還是依據(jù)客戶訴求，數(shù)據(jù)可視化的最終目的就是幫助客戶達成業(yè)務目標。需要思考的是，哪些數(shù)據(jù)通過何種呈現(xiàn)方式能夠幫助客戶解決問題、達到目的、滿足他們的期望，選擇出一系列關鍵指標。
對于這些選取出來的關鍵指標，我們需要對其進行優(yōu)先級的排列，一般來說，主要指標能夠呈現(xiàn)業(yè)務的主要邏輯，一般放在顯眼位置，用重點元素標識；次要指標圍繞主要信息進一步闡述；輔助指標是對主要信息的補充，一般放在非核心區(qū)域，或者二級結構中。
通過合理優(yōu)化關鍵指標并進行優(yōu)先級排列，能夠保證數(shù)據(jù)可視化的核心設計的重點，避免數(shù)據(jù)空洞散亂。
3. 合理使用數(shù)據(jù)圖表
在選擇圖表展示相關數(shù)據(jù)指標時我們要思考各個指標的主要呈現(xiàn)，更進一步的講，是我們想通過可視化表達怎樣的信息。下面這張圖就清晰告知了我們如何從數(shù)據(jù)的展示目的出發(fā)，選擇合適的可視化方式來呈現(xiàn)數(shù)據(jù)。
圖 6 翻譯自@Stephen Few
4. 合理進行頁面布局
數(shù)據(jù)可視化頁面布局的設計是相對靈活的，為了保證數(shù)據(jù)呈現(xiàn)最佳效果需要結合實際需求來合理規(guī)劃。關注核心數(shù)據(jù)的比例和位置，橫向布局最為常見（人眼的水平運動比垂直運動快，會先注意水平方向的事物），核心數(shù)據(jù)場景劃分在中心位置，占較大面積；其余的指標按優(yōu)先級遵循人們的瀏覽習慣在核心指標周圍依次展開。將類型相近的指標放一起，這樣能減少觀者認知上的負擔并提高信息傳遞的效率。
@布局設計案例
5. 制定設計方向
在定義設計風格的階段，從項目背景出發(fā)，綜合行業(yè)類型、產品定位、品牌傳播等因素，提取關鍵信息，構建設計框架。
數(shù)據(jù)可視化的設計風格主要根據(jù)客戶要求、行業(yè)特性、數(shù)據(jù)指標等因素決定。通常我們很容易看到的可視化設計以深色為主，是因為相比于淺色基調，深色背景設計能夠有效緩解視覺疲勞，其次深色設計能夠更好地營造對比差異以及數(shù)據(jù)層級，再者深色設計更容易呈現(xiàn)豐富的動態(tài)效果，營造出強烈的空間感等。配色的設計使用應該充分考慮項目背景以及項目屬性，例如黨政機關類項目會慎重考慮用色，應當確保設計嚴肅，莊重。
數(shù)據(jù)可視化的設計除了對數(shù)據(jù)進行合理設計，還需要注重場景感的塑造，例如，我們通過場景化設計可以讓某大數(shù)據(jù)平臺成為大型“圖書館”，查看數(shù)據(jù)的過程就跟圖書館看書一致，場景化設計的優(yōu)勢是能夠讓用戶能夠以一種具象的互動方式來理解十分抽象的業(yè)務數(shù)據(jù)，當然合理的構建動態(tài)數(shù)據(jù)效果能夠讓數(shù)據(jù)具備“生命力”。
圖 7 @Gan Gryc
6. 設計對比
除了尺寸和位置，我們還可以通過配色來突出數(shù)據(jù)。
無論是通過顏色或形狀對比設計，容易產生強烈的視覺沖擊力。
圖 8 @Bureau Oberhaeuser
利用明度的對比，我們可以用深色烘托鮮明的色彩，或者用鮮明的色彩襯托某一塊暗沉的色彩，亮色靠附近的暗色襯托顯得更加鮮明，其色彩特征表現(xiàn)得更加充分；
圖 9 @Zoey Shen
正確的對數(shù)據(jù)進行配色，讓數(shù)據(jù)傳遞出的信息更清楚、更明白，例如國內 A 股，紅色代表漲，綠色代表跌（美股綠漲紅跌）如果給國內的股票、金融等相關客戶做數(shù)據(jù)可視化設計時，需要避免不同地區(qū)文化所產生的差異。
圖 10 @Dima Groshev
7. 選擇 2D or 3D?
隨著數(shù)字孿生概念的火熱，越來越多的企業(yè)熱衷于打造自己的 3D 數(shù)據(jù)可視化產品，那么 3D 可視化就一定比 2D 強嗎？
數(shù)據(jù)可視化設計本身就是為了高效傳達數(shù)據(jù)信息而服務的，相比平面呈現(xiàn)，3D 最大的優(yōu)勢在于多了空間維度，適合那些需要跟空間結合的數(shù)據(jù)呈現(xiàn)，例如地理信息、建筑樓宇、工業(yè)生產等場景。那么 3D 數(shù)據(jù)可視化相比 2D 就一定能夠展示更多的信息嗎，顯然不是絕對的；需要根據(jù)實際業(yè)務需求出發(fā)。
通常我們所說的數(shù)據(jù) 3D 可視化，就是把大量復雜抽象的數(shù)據(jù)信息，通過 3D 模型以視覺方式呈現(xiàn)出來，幫助人們理解和分析數(shù)據(jù)。相比于數(shù)據(jù) 2d 可視化，數(shù)據(jù) 3d 可視化具有以下的優(yōu)勢：
在一個實際的數(shù)據(jù)可視化產品項目中，有必要應用 3D 數(shù)據(jù)可視化的情形；
相比 2D，3D 的設計與開發(fā)成本相對較高；其次 3D 場景會容易產生視角遮擋以及操作成本等問題，那么從實際項目出發(fā)合理選擇才是最重要的。
亞信數(shù)字樓宇@PRD MO UED
8. 設計還原
設計稿完成了并不代表設計師在這個項目中的工作就結束了，在后續(xù)的開發(fā)工作中，設計師還要與開發(fā)人員合作，減少上線產品與設計稿的差異。
這個階段的工作也并非聽上去那么容易，尤其是 3D 可視化設計，我們會使用相關 3D 工具制作設計效果，但 3D 設計工具與最終開發(fā)引擎存在著色、渲染等差異；在這個時候我們需要靈活運用開發(fā)引擎特性，提供對應的美術資源。作為設計師同樣需要了解相關引擎著色器知識，幫助設計效果實現(xiàn)同時也提升對接效率。
亞信數(shù)字樓宇@PRD MO UED
9. 調優(yōu)與測試
測試客戶終端上線是否正常，有無適配所造成的兼容性問題；排查有無視效及體驗問題，同時也要考慮極端場景下所產生的問題及應對方案。
對于大型 3D 可視化場景會存在性能卡頓，加載緩慢等問題，在保證視效基礎上盡可能壓縮相關美術資源，減少不必要的效果計算和內存占用量，根據(jù)實時效果需要不斷優(yōu)化性能提升產品體驗度。
趨勢一：數(shù)據(jù)可視化 ╳ AI人工智能
隨著企業(yè)發(fā)展數(shù)據(jù)量日益龐大，通過人腦分析復雜數(shù)據(jù)變得越來越困難，我們需要借助 AI 人工智能的幫助。AI 人工智能可以通過強大的算法快速識別分析數(shù)據(jù)，為企業(yè)節(jié)省了寶貴的時間和資源，目前人工智能已經被廣泛應用于醫(yī)療保健服務、銷售、供應鏈、客戶分析和欺詐預防的數(shù)據(jù)可視化項目中。
IBM 數(shù)據(jù)可視化專家 Mauro Martino 創(chuàng)建的儀表板，允許用戶可視化新聞中出現(xiàn)的主題
趨勢二：數(shù)據(jù)可視化 ╳ XR
AR 和 VR 技術的應用可以增強數(shù)據(jù)在空間上的感知，從而幫助人們更好地使用數(shù)據(jù)。通過結合 VR、AR 技術，用戶能夠更好，更快地理解、分析數(shù)據(jù)。最近進行的許多研究表明，VR 和 AR 具有較強的感官體驗，可以促進更快的學習和理解。幫助用戶對業(yè)務問題進行多維度的分析，并更快速地找到解決方案。
圖 11 LM9000@5puj47980xk
趨勢三：數(shù)據(jù)可視化 ╳ 實時數(shù)據(jù)
在數(shù)字時代，事物變化很快，企業(yè)需要對數(shù)據(jù)告訴他們的信息做出快速反應——正因為如此，實時可視化數(shù)據(jù)比以往任何時候都更重要。
在 COVID-19 大流行期間，企業(yè)能夠迅速作出反應更加重要。各國政府和衛(wèi)生當局已經使用實時數(shù)據(jù)可視化來跟蹤感染情況并據(jù)此進行調整。越來越多的公司正在將實時數(shù)據(jù)集成到他們的產品中。
實時數(shù)據(jù)可視化可以采取一些簡單的形式，如實時更新的折線圖或使用新信息(如銷售)快速更新的交互式地圖。
圖 13 @Esri & The Science of Where Podcast
趨勢四：數(shù)據(jù)可視化 ╳ 全面體驗設計
以用戶體驗為核心的數(shù)據(jù)可視化設計是一種重要趨勢，將用戶放在第一位，然后是數(shù)據(jù)。無論處在哪個行業(yè)，設計師都應該遵循類似的思考過程，從思考用戶需求及其痛點開始, 用戶正在嘗試解決哪些問題，以及他們面臨哪些可能的困難？他們需要什么信息和功能來解決這些問題？我們如何以最佳方式為他們打造數(shù)據(jù)可視化？
最新的趨勢之一是將用戶的工作流與可行的見解、建議、預測以及針對當前任務或決策的最佳后續(xù)操作合并，幫助用戶進一步鉆研數(shù)據(jù)并發(fā)現(xiàn)模式、趨勢和相關性。
數(shù)據(jù)可視化是一門同時結合了科學和藝術的復雜學科，其核心意義在于清晰的敘述和藝術化的呈現(xiàn)，這些需要依靠數(shù)據(jù)工程師和設計師的精心策劃而不是僅僅考慮如何實現(xiàn)炫酷的效果 ，只有最終達到幫助用戶理解數(shù)據(jù)和做出決策的目標，才能發(fā)揮它巨大的價值和無限的潛力。
文章來源：優(yōu)設 作者：AsiaInfo Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( www.wnxcall.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務