3D數(shù)據(jù)可視化能夠在多維度對數(shù)據(jù)進(jìn)行管理和展示，受到了企業(yè)和管理者的歡迎。但相關(guān)的業(yè)務(wù)一部分產(chǎn)品經(jīng)理可能還比較陌生，如何完成3D數(shù)據(jù)可視化大屏設(shè)計(jì)？本文作者分享了他的幾點(diǎn)經(jīng)驗(yàn)，供大家一同參考和學(xué)習(xí)。

隨著現(xiàn)代信息社會(huì)的高速發(fā)展，人類在社會(huì)活動(dòng)中產(chǎn)生越來越多的數(shù)據(jù)，由于這些數(shù)據(jù)過于龐大，以至于我們需要新的模式去處理才能高效實(shí)現(xiàn)數(shù)據(jù)最大化利用。

在To B市場中，具有一定規(guī)模的政、企單位已經(jīng)不再滿足于二維的數(shù)據(jù)可視化，追求效果更好的3D數(shù)據(jù)可視化去打造“數(shù)字孿生”的虛實(shí)動(dòng)態(tài)結(jié)合。而3D數(shù)據(jù)可視化則也能夠在更多維度去管理、展示數(shù)據(jù)，讓管理者直觀去認(rèn)知數(shù)據(jù)，實(shí)現(xiàn)更有效的決策管理。

圖1 3D大數(shù)據(jù)可視化（來源騰訊云RayData）

剛接觸3D數(shù)據(jù)可視化的產(chǎn)品經(jīng)理可能會(huì)一頭霧水，偏向于UI側(cè)的3D大屏場景該如何設(shè)計(jì)呢？以下是個(gè)人在項(xiàng)目中總結(jié)的一些經(jīng)驗(yàn)，或許對你有些幫助。

01 明確需求

因?yàn)?D數(shù)據(jù)可視化對一般甲方用戶來說還是比較陌生的，所以會(huì)出現(xiàn)用戶無法準(zhǔn)確表達(dá)出功能需求，加上我們對其業(yè)務(wù)領(lǐng)域陌生的情況，這就增加了我們需求分析的難度。

簡單來說，我們先來問自己四個(gè)問題：

1. 用戶想要做什么？
2. 做這個(gè)產(chǎn)品目的是什么？
3. 想要達(dá)到什么樣的效果？
4. 最后是我們?nèi)绾稳プ觯?/li>

“搞清楚用戶想要做什么”我們要去了解用戶行業(yè)背景及其業(yè)務(wù)場景。比如用戶需求就是“開發(fā)一款高校3D數(shù)據(jù)可視化大屏”，在產(chǎn)品經(jīng)理眼里，這句話可能算不上需求，因?yàn)闆]有準(zhǔn)確表達(dá)某個(gè)業(yè)務(wù)場景下的需求。

這個(gè)時(shí)候就需要進(jìn)一步溝通，是哪些業(yè)務(wù)場景下的3D數(shù)據(jù)可視化，如教務(wù)、財(cái)務(wù)、安防、學(xué)生行為分析等；是學(xué)校層級(jí)還是學(xué)院，班級(jí)層級(jí)的。通過進(jìn)一步溝通，假使我們得到的答案是“為XX班級(jí)開發(fā)一款全班學(xué)生成績3D數(shù)據(jù)可視化”，這樣我們就得一個(gè)大致需求。

“做產(chǎn)品目的是什么”即搞清楚用戶為什么要做這款產(chǎn)品，目的可能有如下兩點(diǎn)：

1. 發(fā)掘業(yè)務(wù)數(shù)據(jù)價(jià)值，通過精準(zhǔn)數(shù)據(jù)可視化實(shí)現(xiàn)輔助決策、科學(xué)管理，實(shí)戰(zhàn)性較強(qiáng)等；
2. 用來匯報(bào)演示，體現(xiàn)單位業(yè)績、發(fā)展情況，注重3D效果展示等。

從馬斯洛需求層次理論來說，其一是滿足單位業(yè)務(wù)數(shù)據(jù)分析的“生理需求”，需要數(shù)據(jù)可視化的結(jié)果要求非常準(zhǔn)確；而其二已經(jīng)上升到單位“自我價(jià)值、能力”的展現(xiàn)，只是通過已有數(shù)據(jù)來展示單位的實(shí)力等，不需過多精準(zhǔn)的業(yè)務(wù)數(shù)據(jù)展示，這一細(xì)微的需求感受可能會(huì)影響到產(chǎn)品功能點(diǎn)的優(yōu)先級(jí)。

還是上面的例子,“為XX班級(jí)開發(fā)一款全班學(xué)生成績3D數(shù)據(jù)可視化”是為了對每個(gè)學(xué)生成績分析，提高學(xué)生學(xué)習(xí)效率或者改善教學(xué)方式；還是為了將本班學(xué)生總體以及優(yōu)秀成績以炫酷的3D效果對外展示呢?

在效果表達(dá)上，注重業(yè)務(wù)的數(shù)據(jù)可視化，3D模型比較寫實(shí)，可能效果上不夠炫酷，但能夠切實(shí)反應(yīng)實(shí)際情況達(dá)到業(yè)務(wù)數(shù)據(jù)實(shí)時(shí)準(zhǔn)確展示；而注重效果呢，可能3D模型比較抽象，但數(shù)據(jù)也是滿足客戶的需求。

圖2 與用戶明確需求

02 獲取數(shù)據(jù)

通過對用戶需求的不斷挖掘之后，我們得到了更詳細(xì)的需求文檔，這個(gè)時(shí)候，產(chǎn)品經(jīng)理就要考慮“怎么去做”。我們要將用戶需求轉(zhuǎn)換為產(chǎn)品需求，切忌直接將用戶需求堆疊到產(chǎn)品，最后開發(fā)出來慘不忍睹。那該怎么做呢？我們來分析一下。

首先，數(shù)據(jù)可視化需要大量的數(shù)據(jù)支撐；其次將哪些數(shù)據(jù)進(jìn)行可視化；然后這些數(shù)據(jù)以什么方式接入系統(tǒng)；最后，以什么3D模型展示實(shí)時(shí)數(shù)據(jù)，圖表該以什么樣的形式去做數(shù)據(jù)分析。所以處理數(shù)據(jù)的步驟可以分為收集數(shù)據(jù)、篩選數(shù)據(jù)、分析數(shù)據(jù)。

圖3 處理數(shù)據(jù)流程

我們根據(jù)業(yè)務(wù)場景向用戶收集相關(guān)數(shù)據(jù)，此時(shí)拿到的可能是一個(gè)無序、無規(guī)律甚至格式不同的數(shù)據(jù)集合。在收集數(shù)據(jù)的同時(shí)，根據(jù)需求初步判斷是否符合業(yè)務(wù)場景，如拿到的是學(xué)生成績包含體育成績、競賽成績、專業(yè)課成績等，若只做專業(yè)課可視化的情況下，這樣就可以摒棄其他沒有意義的數(shù)據(jù)。

然后根據(jù)MECE原則按照對數(shù)據(jù)進(jìn)行細(xì)分業(yè)務(wù)場景歸類，這樣我們得到的是一個(gè)有規(guī)律、雜而不亂的數(shù)據(jù)集。當(dāng)數(shù)據(jù)有規(guī)律可循時(shí)，方便我們進(jìn)行數(shù)據(jù)篩選，進(jìn)一步篩選哪些數(shù)據(jù)放在3D模型中展示合適，哪些作為平面圖表展示更為合理。

最后從空間、時(shí)間等多維度進(jìn)行專業(yè)的數(shù)據(jù)分析，為數(shù)據(jù)在3D場景中展示做基礎(chǔ)。

03 構(gòu)造場景

1. 結(jié)構(gòu)設(shè)計(jì)

在數(shù)據(jù)得到合理篩選之后，此時(shí)就可以來構(gòu)造一個(gè)3D場景。這個(gè)3D場景可以從概念上分為3D場景與2D場景，“場景”一詞不易于理解的話，我們可以將其理解為PhotoShop中的“圖層”概念，即3D圖層和2D圖層。

• 3D場景是一個(gè)基于x,y,z坐標(biāo)系建立的3D模型與數(shù)據(jù)結(jié)合的場景，也就是說在3D場景以模型為主，所有單元都具有高度，承擔(dān)著實(shí)時(shí)數(shù)據(jù)動(dòng)態(tài)呈現(xiàn)、虛實(shí)結(jié)合動(dòng)態(tài)交互的責(zé)任。模型本身承載著大量的數(shù)據(jù)，如根據(jù)GIS、BIM系統(tǒng)做出的模型，此外還有各種物聯(lián)網(wǎng)設(shè)備的實(shí)時(shí)數(shù)據(jù)接入等；
• 2D場景是基于x,y坐標(biāo)系建立的平面圖形圖表場景，通常用來展示數(shù)據(jù)的統(tǒng)計(jì)分析結(jié)果及預(yù)測為主。3D模型場景中通常接入的是模型本身和其他實(shí)時(shí)數(shù)據(jù)，不能夠直觀展示統(tǒng)計(jì)分析出來的數(shù)據(jù)，因此2D場景主要承擔(dān)著專業(yè)數(shù)據(jù)分析的責(zé)任。

圖4 3D與2D場景介紹

2. 模型設(shè)計(jì)

3D場景中主要是模型與數(shù)據(jù)結(jié)合的設(shè)計(jì)，如在“為XX班級(jí)開發(fā)一款全班學(xué)生成績3D數(shù)據(jù)可視化”項(xiàng)目中，我們可以在原型中設(shè)計(jì)一個(gè)3D教室的模型草圖，每個(gè)書桌模型/人體模型代替學(xué)生個(gè)體。

將學(xué)生個(gè)體的成績信息與每個(gè)模型對應(yīng)，當(dāng)我們點(diǎn)擊模型時(shí)，在3D場景中彈出該生信息等；甚至是呈現(xiàn)人體動(dòng)態(tài)模型，實(shí)時(shí)展示該生身體狀況及預(yù)警（前提是有物聯(lián)網(wǎng)設(shè)備檢測并傳輸數(shù)據(jù)）這就實(shí)現(xiàn)了簡單的3D數(shù)據(jù)可視化。

可以從模型中獲取的信息如下：

1. 動(dòng)態(tài)成績排名：假設(shè)排名規(guī)則為“左上角座位的同學(xué)排名為班級(jí)第一，依次往下，‘S’型順序排名?！保瑢W(xué)生的排名通過模型直觀展示出來所在位置
2. 學(xué)生個(gè)人成績：點(diǎn)擊3D模型時(shí)，彈出學(xué)生個(gè)人成績信息
3. 成績動(dòng)態(tài)變化：從在3D場景中，可以通過設(shè)計(jì)一個(gè)時(shí)間軸，來實(shí)現(xiàn)拖動(dòng)觀察學(xué)生成績排名的變化。
4. ……

圖5 3D場景白模草圖

圖6 3D場景常用交互操作

3. 2D場景設(shè)計(jì)（圖表設(shè)計(jì)）

圖表設(shè)計(jì)是尤為重要的一環(huán)，上文中提到：

2D場景是基于x,y坐標(biāo)系建立的平面圖形圖表場景，通常用來展示數(shù)據(jù)的統(tǒng)計(jì)分析結(jié)果及預(yù)測為主。3D模型場景中通常接入的是模型本身和其他實(shí)時(shí)數(shù)據(jù)，不能夠直觀展示統(tǒng)計(jì)分析出來的數(shù)據(jù)，因此2D場景主要承擔(dān)著專業(yè)數(shù)據(jù)分析的責(zé)任。

關(guān)于圖表的設(shè)計(jì)，像AntV、ECharts等數(shù)據(jù)可視化圖表組件已經(jīng)給出專業(yè)的設(shè)計(jì)規(guī)范，結(jié)合業(yè)務(wù)數(shù)據(jù)設(shè)計(jì)出符合場景可視化圖表。在設(shè)計(jì)圖表之前，最關(guān)鍵的是數(shù)據(jù)分析，這將決定展示出來的數(shù)據(jù)是否專業(yè)合理。

圖7 3D白模場景+2D圖表原型圖

04 總結(jié)

在大屏設(shè)計(jì)過程中，還有其他更多細(xì)節(jié)沒有贅述。3D數(shù)據(jù)可視化大屏產(chǎn)品設(shè)計(jì)比較特殊，因?yàn)榧夹g(shù)實(shí)現(xiàn)、業(yè)務(wù)場景不同，可能導(dǎo)致設(shè)計(jì)思路的不同。我的整體設(shè)計(jì)思路為：

1. 先進(jìn)行需求分析，明確用戶想要得到的產(chǎn)品形態(tài)及功能；
2. 其次是獲取基礎(chǔ)數(shù)據(jù)，分析場景所需數(shù)據(jù)，篩選出合理數(shù)據(jù)；
3. 最后是構(gòu)造場景，結(jié)合已有數(shù)據(jù)，對模型和圖表設(shè)計(jì)，實(shí)現(xiàn)3D數(shù)據(jù)可視化。

圖8 設(shè)計(jì)思路

《數(shù)據(jù)之美》這本書這樣去闡述數(shù)據(jù)可視化：

絕大多數(shù)時(shí)候，我們不是追求數(shù)據(jù)本身；我們感興趣的是數(shù)據(jù)的真正含義。這個(gè)微小的區(qū)別，卻是非常重要的一點(diǎn)。這個(gè)需求要求系統(tǒng)能夠處理個(gè)人數(shù)據(jù)流，高效準(zhǔn)確地處理這些數(shù)據(jù)，把這些信息通過易于理解且有用的方式分發(fā)給非專業(yè)人員

這也正是我們在設(shè)計(jì)3D數(shù)據(jù)可視化應(yīng)該所遵守的一點(diǎn)。

作者：Shawn（微信公眾號(hào)：一只彈吉他的程序猿），一個(gè)正在學(xué)習(xí)成長中的數(shù)據(jù)可視化產(chǎn)品經(jīng)理。

本文由 @Shawn 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。