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