2019-7-1 資深UI設計者
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在大數據時代，數字化轉型已經成為行業迫切的需求。2016-2018年金融、醫療、政府、安全等行業在大數據方向上的投入持續增加，大數據可視化的需求呈現爆發式增長，相關產品也紛紛推出：阿里 DataV 的「雙十一的天貓可視化大屏」、360的數博會企業安全大屏、帆軟的 BI系統。面對井噴式的市場需求和部門業務在 To G、To B 的拓展需求，需要快速儲備大數據可視化的能力，作為一個 To C 的設計團隊面臨的挑戰和責任都是巨大的。（編者注：由于本文動圖太大，將近100M，為了不影響移動端讀者的閱讀體驗，本文圖片都是靜態截圖，動圖文章鏈接戳：https://docs.qq.com/doc）
在過去一年中，潘洛斯（Penrose）團隊參與了「靈鯤」態勢感知系統、「麒麟」系統、「鷹眼」反電話詐騙系統等14個大數據可視化產品的設計。隨著產品不斷的探索和迭代，積累了一些行之有效的大數據可視化設計的心得和方法。基于「靈鯤」這個案例，分享一下我們在大數據可視化方向的設計和思考，希望能夠給對大數據可視化感興趣的同學提供一些思路。
「靈鯤」是 MIG 安全云部門與潘洛斯（Penrose）團隊合作的，基于潘洛斯大數據可視化引擎衍生出的一款金融風險監控可視化產品。應北京與深圳金融辦的需求，搭建靈鯤金融風險態勢感知系統，實現事中風險控制，減少網絡欺詐損失。
著手設計之前，我們需要了解：大數據市場規模和各行業投入有多大， 政企客戶的大數據可視化產品的痛點是什么？對比深耕多年的競品，我們設計的突破口在哪？——挖掘我們的機遇和發力點。
數據顯示，2017年中國大數據產業規模為4700億元。隨著一系列政策的出臺，大數據國家戰略正在加速落地，大數據行業將持續增長，預計2018年中國大數據產業規模將達到6200億元，增幅達32%。需求層面，預計2020年大數據應用市場需求中，僅政府需求就占比35%，另外包括醫療、交通、金融等多個行業在大數據和信息化建設投入也將持續增加。
除了旺盛的需求以外，我們還注意到很多政企內部數據基礎很好，以宜昌為例，宜昌智慧辦匯集了來自32個部門、60個系統的大量詳盡的實施城市數據。與這些政企單位合作，易形成行業燈塔，便于規模復制。另外，針對大數據可視化，目前政企已不滿足于「面子工程」，更多的希望大數據可視化與 AI 結合，呈現更復雜多樣的數據，以輔助決策。
基于以上的市場潛在規模的考察和典型客戶研究，在進行「靈鯤」產品能力規劃時，我們主要考慮以下三類使用場景： 政府機構決策、展會展臺及參觀視察。
在金融局等相關政府機構的日常工作中，決策層和相關工作人員會基于實時金融平臺數據，針對日常事務或緊急事件進行決策管理，監控大廳也就應運而生。基于這種工作方式，我們可以發現潘洛斯的產品特性非常契合監控大廳的使用場景。在監控大廳中，用戶是通過兩種不同的信息界面進行工作的，分別是綜合數據可視化大屏（總屏）以及工作人員獨立使用的電腦屏幕（分屏）。其中，在總屏上，呈現的內容通常是一些對于決策者來說至關重要的信息：正在發生的事件的狀態和可能趨勢（發生了什么）、值得注意的風險（需要團隊做什么）以及風險的處理進度（團隊做的怎么樣）；而在分屏上，主要為工作人員提供數據分析及風險事件處理功能，幫助團隊對事件迅速作出響應，協作。
不同于工作場景，靈鯤產品在展會中展臺的主要受眾是參會人士，除了一般民眾外，更有價值的觀眾主要來自于媒體和潛在客戶等。所以在這個場景中展示的內容與實際工作中的數據可視化內容有一定的區別，更多的是對產品能力的展示、產品的宣傳以及社會價值的呈現。如何直觀的呈現產品的能力，并使觀眾快速獲得有價值的信息并留下深刻印象非常重要。這也決定了在這個場景中，用戶不僅包括觀眾，也包括演講者。我們需要考慮如何通過控制端讓講演者而流暢的完成產品介紹。
在金融局等政府機構，經常會有上級領導視察參觀的接待活動。這些來訪的貴賓往往希望了解關于機構更全面和具體的信息，包括但不限于工作流程、工作成績等，所以我們認為這個場景綜合了以上兩種場景的主要特點。這里的用戶包括來訪人員，演示人員以及工作人員，展示的內容也往往不局限于金融風險大數據的可視化，還會包括工作方式和流程本身。
通過對阿里 DataV，AntV、360、帆軟的大數據可視化產品的體驗，我們從產品呈現、產品體驗、產品技術、部署方式和商業模式幾個維度的橫向對比。阿里的技術對可視化效果的局限性很大，優點是產品實現模板化、系統實時可交互，用戶可以快速搭建自己的可視化產品；360產品可視化呈現3D化，數據呈現效果和數據感知度較2D更優，但是系統非實時可交互，而且搭建周期長，成本較高；帆軟的可視化是傳統報表型，可視化效果呈現缺乏競爭力。
經過對比，我們不難發現3D化數據呈現能力和數據感知度是最高的。但是局限于目前的技術，項目成本高、研發周期長、難以滿足業務的發展速度。
基于市場需求和競品分析，我們從以下三個方面分別分析了產品的機會和突破點：
基于對靈鯤態勢感知系統的使用場景、用戶需求以及機會點的考慮，我們規劃了未來產品的整體架構，包括大屏端、云端、客戶管理端、小屏端以及虛屏端。大屏端基于本地端引擎進行大數據可視化呈現。客戶管理端包括報表和配置管理等工具，幫助用戶進行分析數據和策略管理。小屏端主要考慮操作控制和移動辦公等移動使用場景，提供大屏控制、移動審批、監管、公眾號等功能。以上三個端由云端拉取和更新數據。虛屏則提供差異化的大數據可視化體驗，如增強現實等新奇有趣的玩法。由于大屏端在我們的規劃里是態勢感知系統的核心，且落地到合作方的模塊，以下分享的內容將主要圍繞大屏的內容設計展開，未來如果產品規劃中的其他模塊陸續上線，我們再做分享。
本地端引擎
早期我們設計的「麒麟」系統、「鷹眼」反電話詐騙系統在對外在大屏上展示主要是通過 web 端的方式去實現，雖然適配性尚可，但很多設計效果無法完全還原。我們也嘗試性用 webGL 和 three.js 的方式把設計效果再做進一步提升，但迫于研發周期和實際性能的壓力，最后也只能作罷。中期我們嘗試使用3D工具輸出視頻的方式做過一些過渡，輸出效果是沒有問題，但如果在展會上遇到媒體采訪，事情就會變得異常尷尬。媒體會詢問展示內容的真實性，數據的實效性，甚至采訪的時候需要停留在某一個畫面，我方參會人員配合起來非常麻煩。后來我們也研究過競品使用的工具，例如 Ventuz，工具最終輸出的效果是不錯，但是界面、操作極其復雜，相關教程和素材在網絡上極少，授權費用也相當昂貴。最終經過我們內部商討和研究，也請教了一些 IEG 專家的意見，決定使用游戲引擎作為本地端的顯示引擎。
Unity 和 Unreal 我們也糾結過許久，甚至 Unity 上我們也出過可交互的 Demo，但最終選擇了 Unreal 的原因主要有以下幾個點：
色彩基調
為了打造靈鯤產品的可視化，在競品中脫穎而出，我們從產品功能、用戶、愿景三個維度發散，提煉出設計指南的關鍵詞：智能、直觀、未來，塑造獨特的大數據可視化風格體系。
靈鯤金融態勢感知系統內容架構分為數據維度和場景維度，數據是核心，場景是大數據呈現的承載體；場景使用具有金屬質感的深青灰，符合理性的、冷靜的、智能化產品的個性；數據色彩使用透明、發光、具有未來感的高亮色，和場景形成強對比，使數據更為突顯、更具吸引力；為了強化客戶對于風險的感知，通過顏色區分數據的風險等級，更直觀的傳達數據的含義。如：高風險的使用紅色，紅色讓人聯想到危險、警報。
呈現方式
在現有的產品和傳統認知中，大數據產品內容是各種樣式的圖形和圖表，主要以平面為主。我們從游戲、科幻電影中收集了一輪大數據可視化內容相關的案例，從視覺維度上看，主要有這幾個特點：一、具有很強的空間感，支持多種數據同屏呈現，可交叉分析對比，承載性強；二、高精度的模型和材質，豐富的粒子、動效，更加貼近現實的光影呈現；三、互動性強，可交互，實時演算。
從大數據可視化的內容維度上看，梳理的3D架構，主要包括：數據維度>基礎建設>交通運輸>行政分區>自然條件。
數據維度層是最核心的部分，位于場景上方最突出的位置，能夠更清晰的展示風險數據的分布、量級；行政區域和交通層是城市場景最基礎的數據維度，方便用戶進行區域的數據對比和分析；基礎建設層包括城市的建筑、標志性建筑、照明、橋梁、等，還原城市獨特風貌；通過突出城市的標志性建筑，強化城市、區域的識別性，輔助數據傳達；自然條件層包括地形、河流、植被、展示真實的環境特征，用戶更有代入感。
△ 北京場景
△ 鳥瞰視角、漫游視角自由切換，滿足全局、街道、建筑的不同顆粒度的數據呈現，方便用戶進行縱向的數據對比。
△ 場景整體風格圖
數據表現
靈鯤的3D數據樣式有柱狀圖和散點圖。如何把司空見慣的數據樣式，設計出產品的個性，是我們重點要解決的問題。為了體現大數據的力量感，使用科幻電影中的聚合能量、發光的能量石作為柱狀圖的主圖形；同時把數據采集、融合、分析的過程具象為動態粒子網絡，作為輔助圖形。數據圖形和結構中都融合了品牌 DNA 的三角圖形，數據樣式更具有品牌的個性。
△ 柱狀圖
△ 散點圖
預見未來的功能創新
時間線：3D的維度基礎上，我們增加了時間的維度，通過拖動時間線查看不同時間點的數據的變化趨勢，由此對未來數據進行預測。為了強化用戶對于時間感知，設計了白天和晚上兩種風格，白天和夜晚隨著時間變化而變化。
天氣系統：天氣是未來數據分析極其重要的一個因子，它會直接影響交通（例如人流、物流、航空）、醫療(例如疾病傳播、醫院就診）等領域。所以我們設計了通用的天氣系統組件，呈現實時天氣情況，以輔助用戶進行數據分析。
控制端：符合大屏使用場景和用戶操作習慣，同時小屏控制端支持更復雜更精準的操作。
組件庫搭建
為了提升產品搭建的效率，降低了研發周期和成本，產品功能模塊實現了組件化，分為3D場景組件、3D數據組件、2D數據組件。任何一位設計師都可以根據產品需求，搭配組件模塊，快速搭建大數據可視化產品。
數據內容的包裝
通過該產品，一方面能夠輔助金融局等政府機構領導把控整體金融平臺風險、輔助做出平臺整改指導決策意見，展示金融工作成績；另一方面體現出騰訊大數據能力和公司的社會責任；最后，通過從更長遠的眼光去包裝產品，打造智慧監管標桿產品，從而推動與政府客戶更深入廣泛的合作。具體內容通過以下兩條線進行組織：
橫線：各個監管維度
靈鯤金融風險態勢感知系統專注于呈現金融風險數據的呈現，主要分為公司層面和用戶層面，綜合體現潛在的風險趨勢和實際影響的范圍。除了靈鯤用于監管金融數據，整個監管平臺還負責展示包括政治、生態、電信、消費在內的多個監管維度，這些維度與金融監管維度為同一個內容層級。我們考慮到騰訊的大數據能力可以幫助更多城市綜合管理者了解整個網絡社會的全局性風險，所以每個維度都是智慧監管必不可少的一部分，并且每個維度之間的橫向交叉對比能夠使智慧監管平臺發揮出更大的社會價值。
縱線：監管顆粒度
靈鯤系統中觀眾可以從全局數據一直下鉆到個體數據，實現不同顆粒度的監管目的。
具體來講，全國的安全風險最終是以加權平均后的指數形式體現出來；再到具體的省份和城市，內容細化到具體風險事件的發生情況，如電信安全監管維度，呈現電信詐騙使用的偽基站的位置，以及發送詐騙短信的數量等；最后細化到城市中的機構和建筑，呈現具體機構的運行情況和具體高風險企業所在建筑進行實時監控。
https://v.qq.com/x/page/d0742kep4k1.html
潘洛斯團隊是基于 DNA 設計中心下的大數據可視化團隊，成員來自于 MIG 安全和醫療部門，早期專注于 To C 端的產品設計，過去一年里隨著公司戰略的變化和部門業務方向的變化，我們逐漸開始把產品設計的重心和思考放在了 To B、To G 領域，不斷做著嘗試和探索。以前做 To C 的時候我們關注的更多是 DAU、轉化率、日活、滿意度這些和產品體驗相關聯的指標，滿足絕大多數互聯網用戶的訴求是我們首要去解決的問題。現在做 To B、To G 領域的設計，我們更多思考的是如何包裝我們現有的業務能力，能夠通過更加簡單、直接、有效的方式觸達給我們的客戶，讓他們更容易理解像騰訊這樣擁有海量數據和算法能力的互聯網公司如何幫助他們進一步提升他們的業務效率和產出，給這個社會創造更多的價值，這也是騰訊多年來想要承擔的社會責任之一。
文章來源：優設
藍藍設計( m.axecq.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。