3個(gè)步驟-完成3D數(shù)據(jù)可視化大屏設(shè)計(jì)VIP

1、3個(gè)步驟，完成3D數(shù)據(jù)可視化大屏設(shè)計(jì)3D數(shù)據(jù)可視化能夠在多維度對(duì)數(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)生越來(lái)越多的數(shù)據(jù)，由于這些數(shù)據(jù)過(guò)于龐大，以至于我們需要新的模式去處理才能高效實(shí)現(xiàn)數(shù)據(jù)最大化利用。 在To B市場(chǎng)中，具有一定規(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)更有

2、效的決策管理。 圖1 3D大數(shù)據(jù)可視化（來(lái)源騰訊云RayData） 剛接觸3D數(shù)據(jù)可視化的產(chǎn)品經(jīng)理可能會(huì)一頭霧水，偏向于UI側(cè)的3D大屏場(chǎng)景該如何設(shè)計(jì)呢？以下是個(gè)人在項(xiàng)目中總結(jié)的一些經(jīng)驗(yàn)，或許對(duì)你有些幫助。01 明確需求 因?yàn)?D數(shù)據(jù)可視化對(duì)一般甲方用戶來(lái)說(shuō)還是比較陌生的，所以會(huì)出現(xiàn)用戶無(wú)法準(zhǔn)確表達(dá)出功能需求，加上我們對(duì)其業(yè)務(wù)領(lǐng)域陌生的情況，這就增加了我們需求分析的難度。 簡(jiǎn)單來(lái)說(shuō)，我們先來(lái)問(wèn)自己四個(gè)問(wèn)題：用戶想要做什么？做這個(gè)產(chǎn)品目的是什么？想要達(dá)到什么樣的效果？最后是我們?nèi)绾稳プ觯?“搞清楚用戶想要做什么”我們要去了解用戶行業(yè)背景及其業(yè)務(wù)場(chǎng)景。比如用戶需求就是“開(kāi)發(fā)一款高校3D數(shù)據(jù)可視化大

3、屏”，在產(chǎn)品經(jīng)理眼里，這句話可能算不上需求，因?yàn)闆](méi)有準(zhǔn)確表達(dá)某個(gè)業(yè)務(wù)場(chǎng)景下的需求。 這個(gè)時(shí)候就需要進(jìn)一步溝通，是哪些業(yè)務(wù)場(chǎng)景下的3D數(shù)據(jù)可視化，如教務(wù)、財(cái)務(wù)、安防、學(xué)生行為分析等；是學(xué)校層級(jí)還是學(xué)院，班級(jí)層級(jí)的。通過(guò)進(jìn)一步溝通，假使我們得到的答案是“為XX班級(jí)開(kāi)發(fā)一款全班學(xué)生成績(jī)3D數(shù)據(jù)可視化”，這樣我們就得一個(gè)大致需求。 “做產(chǎn)品目的是什么”即搞清楚用戶為什么要做這款產(chǎn)品，目的可能有如下兩點(diǎn)：發(fā)掘業(yè)務(wù)數(shù)據(jù)價(jià)值，通過(guò)精準(zhǔn)數(shù)據(jù)可視化實(shí)現(xiàn)輔助決策、科學(xué)管理，實(shí)戰(zhàn)性較強(qiáng)等；用來(lái)匯報(bào)演示，體現(xiàn)單位業(yè)績(jī)、發(fā)展情況，注重3D效果展示等。 從馬斯洛需求層次理論來(lái)說(shuō)，其一是滿足單位業(yè)務(wù)數(shù)據(jù)分析的“生理需求”，

4、需要數(shù)據(jù)可視化的結(jié)果要求非常準(zhǔn)確；而其二已經(jīng)上升到單位“自我價(jià)值、能力”的展現(xiàn)，只是通過(guò)已有數(shù)據(jù)來(lái)展示單位的實(shí)力等，不需過(guò)多精準(zhǔn)的業(yè)務(wù)數(shù)據(jù)展示，這一細(xì)微的需求感受可能會(huì)影響到產(chǎn)品功能點(diǎn)的優(yōu)先級(jí)。 還是上面的例子,“為XX班級(jí)開(kāi)發(fā)一款全班學(xué)生成績(jī)3D數(shù)據(jù)可視化”是為了對(duì)每個(gè)學(xué)生成績(jī)分析，提高學(xué)生學(xué)習(xí)效率或者改善教學(xué)方式；還是為了將本班學(xué)生總體以及優(yōu)秀成績(jī)以炫酷的3D效果對(duì)外展示呢? 在效果表達(dá)上，注重業(yè)務(wù)的數(shù)據(jù)可視化，3D模型比較寫(xiě)實(shí)，可能效果上不夠炫酷，但能夠切實(shí)反應(yīng)實(shí)際情況達(dá)到業(yè)務(wù)數(shù)據(jù)實(shí)時(shí)準(zhǔn)確展示；而注重效果呢，可能3D模型比較抽象，但數(shù)據(jù)也是滿足客戶的需求。 圖2 與用戶明確需求02 獲取

5、數(shù)據(jù) 通過(guò)對(duì)用戶需求的不斷挖掘之后，我們得到了更詳細(xì)的需求文檔，這個(gè)時(shí)候，產(chǎn)品經(jīng)理就要考慮“怎么去做”。我們要將用戶需求轉(zhuǎn)換為產(chǎn)品需求，切忌直接將用戶需求堆疊到產(chǎn)品，最后開(kāi)發(fā)出來(lái)慘不忍睹。那該怎么做呢？我們來(lái)分析一下。 首先，數(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ù)場(chǎng)景向用戶收集相關(guān)數(shù)據(jù)，此時(shí)拿到的可能是一個(gè)無(wú)序、無(wú)規(guī)律甚至格式不同的數(shù)據(jù)集合。在收集數(shù)據(jù)的同時(shí)，根據(jù)需求初步判斷是否符合業(yè)務(wù)場(chǎng)

6、景，如拿到的是學(xué)生成績(jī)包含體育成績(jī)、競(jìng)賽成績(jī)、專業(yè)課成績(jī)等，若只做專業(yè)課可視化的情況下，這樣就可以摒棄其他沒(méi)有意義的數(shù)據(jù)。 然后根據(jù)MECE原則按照對(duì)數(shù)據(jù)進(jìn)行細(xì)分業(yè)務(wù)場(chǎng)景歸類，這樣我們得到的是一個(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ǎng)景中展示做基礎(chǔ)。03 構(gòu)造場(chǎng)景1. 結(jié)構(gòu)設(shè)計(jì) 在數(shù)據(jù)得到合理篩選之后，此時(shí)就可以來(lái)構(gòu)造一個(gè)3D場(chǎng)景。這個(gè)3D場(chǎng)景可以從概念上分為3D場(chǎng)景與2D場(chǎng)景，“場(chǎng)景”一詞不易于理解的話，我們可以將其理解為Photo

7、Shop中的“圖層”概念，即3D圖層和2D圖層。3D場(chǎng)景是一個(gè)基于x,y,z坐標(biāo)系建立的3D模型與數(shù)據(jù)結(jié)合的場(chǎng)景，也就是說(shuō)在3D場(chǎng)景以模型為主，所有單元都具有高度，承擔(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場(chǎng)景是基于x,y坐標(biāo)系建立的平面圖形圖表場(chǎng)景，通常用來(lái)展示數(shù)據(jù)的統(tǒng)計(jì)分析結(jié)果及預(yù)測(cè)為主。3D模型場(chǎng)景中通常接入的是模型本身和其他實(shí)時(shí)數(shù)據(jù)，不能夠直觀展示統(tǒng)計(jì)分析出來(lái)的數(shù)據(jù)，因此2D場(chǎng)景主要承擔(dān)著專業(yè)數(shù)據(jù)分析的責(zé)任。 圖4 3D與2D場(chǎng)景介紹2. 模型設(shè)計(jì) 3D場(chǎng)景中主要是模型與數(shù)據(jù)

8、結(jié)合的設(shè)計(jì)，如在“為XX班級(jí)開(kāi)發(fā)一款全班學(xué)生成績(jī)3D數(shù)據(jù)可視化”項(xiàng)目中，我們可以在原型中設(shè)計(jì)一個(gè)3D教室的模型草圖，每個(gè)書(shū)桌模型/人體模型代替學(xué)生個(gè)體。 將學(xué)生個(gè)體的成績(jī)信息與每個(gè)模型對(duì)應(yīng)，當(dāng)我們點(diǎn)擊模型時(shí)，在3D場(chǎng)景中彈出該生信息等；甚至是呈現(xiàn)人體動(dòng)態(tài)模型，實(shí)時(shí)展示該生身體狀況及預(yù)警（前提是有物聯(lián)網(wǎng)設(shè)備檢測(cè)并傳輸數(shù)據(jù)）這就實(shí)現(xiàn)了簡(jiǎn)單的3D數(shù)據(jù)可視化。 可以從模型中獲取的信息如下：動(dòng)態(tài)成績(jī)排名：假設(shè)排名規(guī)則為“左上角座位的同學(xué)排名為班級(jí)第一，依次往下，S型順序排名。”，學(xué)生的排名通過(guò)模型直觀展示出來(lái)所在位置學(xué)生個(gè)人成績(jī)：點(diǎn)擊3D模型時(shí)，彈出學(xué)生個(gè)人成績(jī)信息成績(jī)動(dòng)態(tài)變化：從在3D場(chǎng)景中，可以通過(guò)

9、設(shè)計(jì)一個(gè)時(shí)間軸，來(lái)實(shí)現(xiàn)拖動(dòng)觀察學(xué)生成績(jī)排名的變化。 圖5 3D場(chǎng)景白模草圖 圖6 3D場(chǎng)景常用交互操作3. 2D場(chǎng)景設(shè)計(jì)（圖表設(shè)計(jì)） 圖表設(shè)計(jì)是尤為重要的一環(huán)，上文中提到： 2D場(chǎng)景是基于x,y坐標(biāo)系建立的平面圖形圖表場(chǎng)景，通常用來(lái)展示數(shù)據(jù)的統(tǒng)計(jì)分析結(jié)果及預(yù)測(cè)為主。3D模型場(chǎng)景中通常接入的是模型本身和其他實(shí)時(shí)數(shù)據(jù)，不能夠直觀展示統(tǒng)計(jì)分析出來(lái)的數(shù)據(jù)，因此2D場(chǎng)景主要承擔(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ì)出符合場(chǎng)景可視化圖表。在設(shè)計(jì)圖表之前，最關(guān)鍵的是數(shù)據(jù)分析，這將決定展示出來(lái)的數(shù)據(jù)是否專業(yè)合理。 圖7 3D白模場(chǎng)景+2D圖表原型圖04 總結(jié) 在大屏設(shè)計(jì)過(guò)程中，還有其他更多細(xì)節(jié)沒(méi)有贅述。3D數(shù)據(jù)可視化大屏產(chǎn)品設(shè)計(jì)比較特殊，因?yàn)榧夹g(shù)實(shí)現(xiàn)、業(yè)務(wù)場(chǎng)景不同，可能導(dǎo)致設(shè)計(jì)思路的不同。我的整體設(shè)計(jì)思路為：先進(jìn)行需求分析，明確用戶想要得到的產(chǎn)品形態(tài)及功能；其次是獲取基礎(chǔ)數(shù)據(jù)，分析場(chǎng)景所需數(shù)據(jù)，篩選出合理數(shù)據(jù)；最后是構(gòu)造場(chǎng)景，結(jié)合已有數(shù)據(jù)，對(duì)模型和圖表設(shè)計(jì)，實(shí)現(xiàn)3D數(shù)據(jù)可視化。 圖8 設(shè)計(jì)思路 數(shù)據(jù)之美這本書(shū)