全文主要分享本人對(duì)當(dāng)下主流可視化大屏搭建工具的調(diào)研分析，淺談對(duì)可視化行業(yè)的探索思考。

文章目錄

一、前言 —— 1.1 閱讀之前、1.2 調(diào)研背景、1.3 分享目的、1.4 術(shù)語(yǔ)說(shuō)明

二、市場(chǎng)分析 —— 2.1 行業(yè)背景PEST、2.2 市場(chǎng)現(xiàn)狀

三、主流工具 —— 3.1 調(diào)查篩選、3.2 工具介紹、3.3 分析模型、3.4 結(jié)構(gòu)層、3.5 框架&表現(xiàn)層

四、功能體驗(yàn) —— 4.1 創(chuàng)建大屏、4.2 分享導(dǎo)出、4.3 設(shè)計(jì)亮點(diǎn)、4.4 其他、4.5 體驗(yàn)總結(jié)

五、探索思考 —— 5.1 未來(lái)迭代、5.2 設(shè)計(jì)價(jià)值

前言概要

閱讀之前

閱讀提醒

1、建議先閱讀完上篇，再閱讀下篇，全面了解文章框架脈絡(luò)?！犊梢暬笃链罱üぞ哒{(diào)研探索分享（上）》文章傳送門：http://m.codemsi.com/?p=6041167&preview=true

2、文章下篇約17300字，閱讀時(shí)長(zhǎng)約30分鐘。全文主要分享本人對(duì)當(dāng)下主流可視化大屏搭建工具的調(diào)研分析，淺談對(duì)可視化行業(yè)的探索思考。由于篇幅有限，閱讀體驗(yàn)更佳，故分為上下兩篇，下篇接著講主流工具（DataV、Raydata、EasyV、森大屏）的功能體驗(yàn)，淺談可視化行業(yè)未來(lái)的探索和思考。

3、文中的拆解分析部分，多款工具可能存在較多重復(fù)觀點(diǎn)，由于篇幅有限，故不再贅述。

4、雖工具持續(xù)迭代更新，較難與最新版本同步（當(dāng)時(shí)調(diào)研時(shí)間是2022年10月前），但文章更多的是想表達(dá)，在調(diào)研過(guò)程中的如何用結(jié)構(gòu)化思維來(lái)分析拆解產(chǎn)品，以及對(duì)未來(lái)的探索思考是什么。

適合讀者

B端UI設(shè)計(jì)師、產(chǎn)品經(jīng)理，可視化行業(yè)相關(guān)從業(yè)者及愛(ài)好者。

四、功能體驗(yàn)

拆解分析完可視化主流工具（DataV、Raydata、EasyV、森大屏）基礎(chǔ)結(jié)構(gòu)后，繼續(xù)深入功能體驗(yàn)。主要圍繞功能、視覺(jué)、交互等維度來(lái)進(jìn)行體驗(yàn)分析。以核心流程任務(wù)【1創(chuàng)建大屏】(新建大屏頁(yè)面、使用大屏模板、拖入組件到畫(huà)布、調(diào)整并定稿設(shè)計(jì)）-【2分享導(dǎo)出】來(lái)展開(kāi)。

4.1 創(chuàng)建大屏

這包括了創(chuàng)建和設(shè)計(jì)大屏的整個(gè)核心任務(wù)流程，也是工具質(zhì)量的核心體現(xiàn)。

4.1.1、新建大屏頁(yè)面

首先，我們需要先在系統(tǒng)頁(yè)新建大屏頁(yè)面。

DataV企業(yè)版試用 – 新建大屏頁(yè)面
DataV企業(yè)版試用有3種大屏創(chuàng)建方式，分別是PC端、移動(dòng)端和識(shí)圖創(chuàng)建。

在PC端和移動(dòng)端創(chuàng)建的交互路徑都是以使用推薦模板-立即創(chuàng)建或直接點(diǎn)擊空白模板創(chuàng)建。值得一提的是，點(diǎn)擊某個(gè)模板后，彈出預(yù)覽窗口時(shí)依然可在頂部模板列表切換模板，方便預(yù)覽。

在識(shí)圖創(chuàng)建時(shí)，用戶可自行上傳圖片或在線手繪的方式來(lái)生成大屏草稿圖，很方便售前經(jīng)理/產(chǎn)品經(jīng)理在項(xiàng)目前期進(jìn)行原型的搭建。

Raydata Web專業(yè)版 – 新建大屏頁(yè)面

Raydata Web專業(yè)版的系統(tǒng)頁(yè)無(wú)大屏模板推薦（官網(wǎng)模板放在別處，案例管理-官方案例），只能創(chuàng)建空白頁(yè)面。創(chuàng)建時(shí)可使用預(yù)設(shè)尺寸也可以自定義尺寸。交互路徑簡(jiǎn)單便捷，體現(xiàn)專業(yè)版定位準(zhǔn)確。

EasyV個(gè)人版 – 新建大屏頁(yè)面

EasyV個(gè)人版新建頁(yè)面的說(shuō)法叫新建應(yīng)用，大屏項(xiàng)目相當(dāng)于一個(gè)可視化應(yīng)用。在新建應(yīng)用時(shí)，可以新建空白模板，也可以使用官方推薦模板。預(yù)覽官方模板的彈窗中可左右切換，快速?zèng)Q策。

森大屏基礎(chǔ)版 – 新建大屏頁(yè)面

森工廠中的森大屏基礎(chǔ)版，在系統(tǒng)頁(yè)的頂部導(dǎo)航需要選中【大屏】，再新建大屏。即可新建空白大屏，也可使用官方的推薦大屏。使用推薦大屏需要購(gòu)買操作（免費(fèi)的也要），交互路徑略顯繁瑣。

較為特別的是，進(jìn)入編輯器頁(yè)后依然可以新建大屏，交互操作貼近win系統(tǒng)用戶習(xí)慣。

4.1.2 使用大屏模板

當(dāng)用戶想快速搭建大屏?xí)r，可以使用工具自帶的模板再進(jìn)行微調(diào)，這種方式提高效率而是上手成本較低。

4.1.2.1 模板效果

DataV企業(yè)版試用 – 模板效果

DataV的模板風(fēng)格多樣，裝飾元素和光效的處理很到位，發(fā)光動(dòng)效體現(xiàn)大屏的科技感。

因?yàn)榘⒗锖w了金融服務(wù)、數(shù)據(jù)云服務(wù)等眾多業(yè)務(wù)，那么他們這類行業(yè)模板也很豐富。還有，阿里有一部分主業(yè)務(wù)是電商，那么對(duì)于電商行業(yè)的模板也挺多，特點(diǎn)是有濃濃的“電商味”，色彩鮮艷，以霓虹藍(lán)紫色為主，這類主題模板很適合營(yíng)造商品促銷的購(gòu)物氛圍。

官方也提供了淺色和深色的移動(dòng)端模板，針對(duì)用戶隨時(shí)隨地查看數(shù)據(jù)的使用場(chǎng)景，數(shù)量較少。

Raydata Web專業(yè)版 – 模板效果

Raydata的模板風(fēng)格在所有競(jìng)品中最獨(dú)特，無(wú)論模型場(chǎng)景還是圖表組件，它都有一套自己獨(dú)有的設(shè)計(jì)語(yǔ)言，字體使用了比較方正穩(wěn)重的字體，體現(xiàn)科技感，再結(jié)合模型場(chǎng)景而言，整體效果類似游戲場(chǎng)景，把科技感、抽象感、細(xì)節(jié)感表現(xiàn)得淋漓盡致。

這套風(fēng)格可能喜歡的客戶會(huì)很喜歡，不喜歡的可能無(wú)感，但不管怎么說(shuō)，Raydata服務(wù)了許多項(xiàng)目，客戶會(huì)買帳自然有一定原因的，整體效果和落地性都很穩(wěn)定。

EasyV個(gè)人版 – 模板效果

EasyV的模板風(fēng)格頗具美感且精致，大屏整體感和細(xì)節(jié)感不錯(cuò)，模板數(shù)量也很多（多也是個(gè)特點(diǎn)，海量選擇且質(zhì)量高），但移動(dòng)端的大屏模板數(shù)量不多。從素材結(jié)構(gòu)角度看，將素材不斷解組，能拆開(kāi)分到顆粒度極小的元素，可見(jiàn)在設(shè)計(jì)素材上EasyV沒(méi)少花功夫。

大屏模板中經(jīng)常能從少量的配置主題色中營(yíng)造出“高級(jí)感”，不會(huì)為了炫酷效果而過(guò)分花里胡哨，而是遵循 *GLAD 原則（數(shù)據(jù)可視化原則)，在保證信息傳達(dá)效率的基礎(chǔ)上，再去點(diǎn)綴視覺(jué)效果。

*作為科普題外話，GLAD原則也就是：（G）Good Data and Insight——圖表的靈魂:發(fā)現(xiàn)好數(shù)據(jù)與好洞察、Less Noise——降噪:簡(jiǎn)約至上、（A）Accurate Expression——精準(zhǔn)表達(dá):提升數(shù)據(jù)表達(dá)的準(zhǔn)確度、（D）Distinct Mark——畫(huà)龍點(diǎn)睛:突出洞察信息的標(biāo)識(shí)。這4部分共同組成了 Glad to See Data（成功的商業(yè)數(shù)據(jù)可視化)。具體見(jiàn)帆軟《數(shù)據(jù)分析與可視化指南》： https://help.fanruan.com/dvg/doc-view-80.html

森大屏基礎(chǔ)版 – 模板效果

森大屏的模板風(fēng)格比較側(cè)重于三維模型場(chǎng)景的表現(xiàn)，而對(duì)于二維的 UI 層效果則比較簡(jiǎn)約，視覺(jué)裝飾用得較少。以大屏整體而言，三維場(chǎng)景效果比較復(fù)雜時(shí)，UI 層使用簡(jiǎn)單一點(diǎn)的效果，這種做法也不失穩(wěn)妥，畢竟數(shù)據(jù)信息的傳達(dá)的優(yōu)先級(jí)最高，其次才是利用視覺(jué)效果抓住觀眾的注意力。

另外，不管是粒子動(dòng)效、掃光、飛線，還是地圖或建筑的動(dòng)態(tài)邊緣線等等，三維場(chǎng)景的視覺(jué)效果都做得很豐富，森大屏基技術(shù)上使用了 *ThreeJS 前端 3D 技術(shù)，實(shí)現(xiàn)的效果可在網(wǎng)頁(yè)端上有極強(qiáng)的表現(xiàn)力且流暢絲滑。也因?yàn)樾ЧS富的問(wèn)題，模型面數(shù)必須優(yōu)化（減面處理)，否則在網(wǎng)頁(yè)上加載半天都沒(méi)看到模型場(chǎng)景或者卡頓。

4.1.2.2 組件效果

DataV企業(yè)版試用 – 組件效果

DataV的組件效果整體概括為酷炫硬朗的個(gè)性，默認(rèn)以青色、藍(lán)色作為主題色，也可以用主題美化功能將組件切換成不同的配色方案。圖表組件數(shù)量豐富，比如條形圖等基礎(chǔ)圖表細(xì)分為條形圖、水平膠囊柱狀圖、分組柱狀圖、對(duì)稱條形圖、百分比條形圖、雙11消費(fèi)屏柱圖、雙11輪播列表柱狀圖等，組件細(xì)致分類以滿足更多的業(yè)務(wù)場(chǎng)景。

DataV比較有特色的是，圖表組件結(jié)合了 BI 分析功能（商務(wù)智能），部分圖表組件如柱形圖等可轉(zhuǎn)換為 BI 圖表組件，用戶可進(jìn)行數(shù)據(jù)分析，該功能很適合數(shù)據(jù)分析師或產(chǎn)品經(jīng)理使用。

Raydata Web專業(yè)版 – 組件效果

Raydata的組件效果整體而言比較纖細(xì)優(yōu)雅，再搭配較大的圓角和特殊字體后，略顯活潑親切的個(gè)性。組件數(shù)量也很多，一開(kāi)始以為只要頂部組件庫(kù)才有組件可用，然后較難發(fā)現(xiàn)的是，其實(shí)更多細(xì)分的業(yè)務(wù)組件都藏在了畫(huà)布右上角的【收藏列表】-【基礎(chǔ)素材庫(kù)】中。

地圖或模型場(chǎng)景的【標(biāo)記】【繪制】【交互】組件為本身已經(jīng)視覺(jué)效果豐富的地圖或建筑場(chǎng)景，增添了更多交互上的層次細(xì)節(jié)。場(chǎng)景層還有動(dòng)態(tài)粒子上浮的效果豐富細(xì)節(jié)，也由于整體細(xì)節(jié)較多，所以對(duì)于復(fù)雜模型場(chǎng)景的網(wǎng)頁(yè)加載相對(duì)較慢，很吃配置內(nèi)存。

EasyV個(gè)人版 – 組件效果

EasyV的組件效果精致多樣，比如一個(gè)模塊標(biāo)題欄，通過(guò)裝飾元素、文字排版、顏色等不同的搭配就可以玩出很多花樣，并且里面的元素可以繼續(xù)解組拆解，更靈活調(diào)整。

還有，EasyV自己封裝的組件也很實(shí)用且豐富，比如3D圖片列表組件的展示效果，很適合用于大屏主/次視覺(jué)。

另外，【資源庫(kù)】的分類也很詳細(xì)易用，比如【資源庫(kù)】下分為【主題資源】【設(shè)計(jì)素材】，【主題資源】分為標(biāo)題類、地圖類、裝飾類、面板類、組件類，【設(shè)計(jì)素材】分為背景類、圖標(biāo)類、裝飾類等，其中圖標(biāo)類細(xì)分為標(biāo)記、通用、形狀、天氣。

森大屏基礎(chǔ)版 – 組件效果

森大屏的組件效果整體感視覺(jué)感一般，整體性不夠統(tǒng)一，可能造成的原因：配色規(guī)范不夠統(tǒng)一、基于ECharts的圖表組件未封裝完善、為了突出三維場(chǎng)景而弱化UI層視覺(jué)。

但只細(xì)看【主題】組件，可以發(fā)現(xiàn)每套主題風(fēng)格的整體性還是很強(qiáng)的，而且UI層結(jié)合三維場(chǎng)景來(lái)看，整體效果也相當(dāng)出彩。比如【數(shù)字孿生平臺(tái)-矩陣革命】主題模板，或許參考了《黑客帝國(guó)：矩陣革命》，配色采用暗色調(diào)，黃綠色作為主題色，視覺(jué)裝飾上運(yùn)用了很多“代碼雨”的元素，體現(xiàn)了酷炫的科技未來(lái)感。

4.1.3 拖入組件到畫(huà)布

通常來(lái)說(shuō)，我們新建大屏頁(yè)面后，需要把適合的組件拖入到畫(huà)布中。如業(yè)務(wù)需求有一個(gè)產(chǎn)業(yè) A 和 B 銷售量的5 年同比數(shù)據(jù)，那么就需要把一個(gè)柱形/折線圖組件拖入畫(huà)布中。

4.1.3.1、組件庫(kù)

4款工具的組件庫(kù)中，DataV和森大屏采用了垂直導(dǎo)航，Raydata和EasyV采用了水平導(dǎo)航。上篇已經(jīng)解釋過(guò)結(jié)構(gòu)層的分析了，不贅述。

DataV企業(yè)版試用 – 組件庫(kù)

可以發(fā)現(xiàn)DataV的【資產(chǎn)】(組件庫(kù)）位于畫(huà)布編輯器比較顯眼的位置，用戶很易覺(jué)察到它。通過(guò)拖拽左側(cè)組件到畫(huà)布，我們所見(jiàn)即所得的看到大屏搭建過(guò)程中的效果，交互前中后都十分流暢。

不管是拖入畫(huà)布的交互，還是畫(huà)布中進(jìn)行調(diào)整，但釋放鼠標(biāo)時(shí)，部分組件都會(huì)重新加載一次，大部分圖表類組件如此，站在技術(shù)角度看，加載一次意味著只需要監(jiān)聽(tīng)一次數(shù)據(jù)變化，而不用實(shí)時(shí)監(jiān)聽(tīng)而額外的耗費(fèi)內(nèi)存?？紤]到一個(gè)完整的大屏需要很多組件集中在一個(gè)頁(yè)面，如果采用實(shí)時(shí)加載則會(huì)讓網(wǎng)頁(yè)變得卡頓或崩潰，因此減少監(jiān)聽(tīng)次數(shù)的做法更優(yōu)，體驗(yàn)更流暢。(其余4款工具也運(yùn)用到此做法，后不贅述。)

在【資產(chǎn)】左上角是資產(chǎn)選擇?？梢赃x擇額外的資產(chǎn)，類似于電子游戲的拓展包、資料卡，部分需要付費(fèi)購(gòu)買。一般沒(méi)有特殊設(shè)計(jì)要求，官方資產(chǎn)已經(jīng)足夠使用了。

在【資產(chǎn)】右上角是更新組件、搜索組件和折疊功能。其中搜索功能很實(shí)用，在原列表也顯示搜索結(jié)果，交互信息集中，用戶更易獲取。舉個(gè)反例，如果搜索結(jié)果放在了別處，那么用戶的視線就會(huì)游離于搜索按鈕和搜索結(jié)果之間，兩個(gè)位置的視線來(lái)回跳轉(zhuǎn)，降低了信息獲取效率，也增加了操作成本。

值得一提的是，DataV的組件封面圖的尺寸根據(jù)實(shí)際內(nèi)容量多少來(lái)分別展示，比如柱狀圖占了 1 行，點(diǎn)熱力層用了 1/2 行，交通圖標(biāo)素材限使用了 1/3 行，這樣做信息識(shí)別效率獲取更高。另外封面圖的圖形抽象概括得很到位，比如地圖組件中的 3D 平面地圖、基礎(chǔ)平面地圖、 3D 平面世界地圖、 3D 地球，靈活運(yùn)用點(diǎn)線面元素表現(xiàn)不同組件種類，提高了信息識(shí)別效率。

Raydata Web專業(yè)版 – 組件庫(kù)

而Raydata的組件庫(kù)則是頂部導(dǎo)航，通過(guò)點(diǎn)擊頂部一級(jí)導(dǎo)航，向下展開(kāi)二級(jí)導(dǎo)航菜單面板。不足之處是展開(kāi)的面板已經(jīng)幾乎占了畫(huà)布的一半，導(dǎo)致畫(huà)布空間利用率低，不得不通過(guò)再次折疊面板或向下滾動(dòng)畫(huà)布來(lái)查看被遮擋區(qū)域。視覺(jué)方面雖如此，但在交互方面，在拖拽組件時(shí)，面板會(huì)立即消失，面板不遮擋畫(huà)布，那么上面提到的信息遮擋問(wèn)題就通過(guò)交互設(shè)計(jì)手段避開(kāi)了。

因?yàn)镽aydata區(qū)分了【UI 層】和【場(chǎng)景層】，所以用戶在不同類型的圖層看到的組件庫(kù)菜單也會(huì)不同?！綰I 層】的一級(jí)導(dǎo)航是圖表、形狀、文本、裝飾、按鈕、媒體、控件，【場(chǎng)景層】的一級(jí)導(dǎo)航是場(chǎng)景、模型、標(biāo)記、繪制、數(shù)據(jù)、交互。

組件很多且分類也很詳細(xì)，導(dǎo)航層級(jí)分成了 3 層，相對(duì)而言比較深了。如果在組件庫(kù)近處增加一個(gè)搜索組件的功能，或許對(duì)用戶來(lái)說(shuō)操作效率會(huì)有說(shuō)提升，這里需要留意一下就近幫助原則的作用，或者說(shuō)尼爾森十大可用性原則的靈活高效原則的作用，就近顯示用戶立即就能看到，獲取信息高效，使用靈活且操作快捷。

組件庫(kù)【場(chǎng)景層】的封面圖信息識(shí)別效率高。因?yàn)閷?duì)于三維場(chǎng)景而言，能在通過(guò)二維圖片就能預(yù)想到拖拽到畫(huà)布時(shí)的畫(huà)面，能針對(duì)性且準(zhǔn)確地提取關(guān)鍵元素，那么信息識(shí)別效率就自然提高了。

比如一個(gè) 4G信號(hào)塔，它真實(shí)影像是怎樣的，它可以提煉哪些代表性的元素，它有哪些特征和象征符號(hào)，它不是高壓電塔所以要有所區(qū)分，它最終的圖形能不能讓用戶一眼就能識(shí)別清晰不造成誤讀？這些都很考驗(yàn)設(shè)計(jì)師將具象轉(zhuǎn)化為抽象再轉(zhuǎn)化為具象的能力。

EasyV個(gè)人版 – 組件庫(kù)

EasyV的組件庫(kù)與Raydata同樣使用頂部導(dǎo)航，但EasyV把組件庫(kù)的功能入口縮小成一個(gè)圖標(biāo)，放在頂部任務(wù)欄中。用戶通過(guò)點(diǎn)擊才展示一級(jí)、二級(jí)導(dǎo)航菜單內(nèi)容，而且展開(kāi)的面板相對(duì)而言比較小，因此下方溢出的信息就需要手動(dòng)向下滾動(dòng)才能獲得，在組件多的情況下，易導(dǎo)致信息獲取低效問(wèn)題。

組件封面圖比較小，而且使用了實(shí)際組件效果，即拖拽到畫(huà)布實(shí)際看到的效果，所見(jiàn)即所得，部分圖表組件是適用這種效果的，但有些不好處理的組件比如水平時(shí)間軸、分頁(yè)，在小封面圖的情況下，較難閱讀信息，更好的做法或許是適度放大其特點(diǎn)來(lái)提煉圖形或增加封面圖尺寸，讓不同組件更好的識(shí)別和區(qū)分。

可以降低用戶理解成本的是，組件庫(kù)里的部分組件封面圖是動(dòng)態(tài)的，用戶能預(yù)知到將組件拖拽到畫(huà)布后的情況，立馬就有畫(huà)面感了，比起嚴(yán)肅的靜態(tài)圖，動(dòng)態(tài)封面圖更有趣味和活力。

森大屏基礎(chǔ)版 – 組件庫(kù)

森大屏的組件庫(kù)與DataV同樣使用側(cè)邊導(dǎo)航，組件庫(kù)面板的面積相對(duì)比較大，消息容易感知，因?yàn)槊姘宀环奖阏郫B，因此比較占畫(huà)布位置。需要額外在頂部任務(wù)欄-視圖-左側(cè)面板勾選進(jìn)行顯隱，也提供了快捷鍵。組件庫(kù)采用了 3 層導(dǎo)航結(jié)構(gòu)，第 3 層是切換【我的】和【官方】，或許更強(qiáng)調(diào)的是用戶當(dāng)前擁有的資產(chǎn)，但大部分場(chǎng)景是期望全部組件都展示出來(lái)，期望信息聚合且獲取高效的，當(dāng)前顯然無(wú)法滿足。用戶需要切換 tab 才能得知具體細(xì)分組件中【我的】或【官方】的信息，冗余操作頻繁切換，導(dǎo)致操作低效。

比較獨(dú)特的是，組件庫(kù)的【孿生】關(guān)聯(lián)了其他子產(chǎn)品的內(nèi)容，比如森園區(qū)、森城市、森展廳的模型場(chǎng)景，也就是說(shuō)，如果用戶在其他子產(chǎn)品中擁有模型資產(chǎn)，就可以在森大屏中復(fù)用。

還有，組件庫(kù)中的【布局】功能，原理是將組件拖入畫(huà)布中的布局塊中，即可替換為當(dāng)前的組件，尺寸和位置會(huì)隨著布局塊自動(dòng)做適配，不管是在項(xiàng)目初期設(shè)計(jì)大屏原型，還是項(xiàng)目中期想要調(diào)整布局，都是很方便且高頻使用的。

在【孿生】中的組件封面圖風(fēng)格不一，有淺色風(fēng)格也有暗黑風(fēng)格。封面圖的概括提煉方面還待優(yōu)化，目前信息識(shí)別效率相對(duì)低些，如通用標(biāo)題封面，小圖看就是一塊藍(lán)色塊，不易識(shí)別具體是什么組件。

4.1.3.2 圖層

4款工具的圖層結(jié)構(gòu)不同，其中 DataV 和 EasyV 結(jié)構(gòu)近似，功能按鈕比較聚合，特殊的是，森大屏的圖層放在了左下方，比較隱秘，陌生的結(jié)構(gòu)不易讓用戶發(fā)現(xiàn)。文案角度上，森大屏用大綱這個(gè)詞表達(dá)圖層，更近似寫(xiě)作場(chǎng)景，而用于設(shè)計(jì)場(chǎng)景可能并不易讓用戶理解。

4.1.4、調(diào)整并定稿設(shè)計(jì)

調(diào)整定稿時(shí)用得最多的就是信息面板了，或者叫配置面板。用戶通過(guò)在信息面板中調(diào)整組件的參數(shù)，達(dá)到符合自己需求的目的，比如酷炫好看的樣式、滿足業(yè)務(wù)的動(dòng)/靜態(tài)數(shù)據(jù)、符合邏輯的交互事件等。

這4款工具的信息面板都比較相似，其中 EasyV 和森大屏的層級(jí)比較深，有3層，信息獲取效率相對(duì)較低。

DataV企業(yè)版試用 – 調(diào)整并定稿設(shè)計(jì)

DataV 的信息面板中設(shè)置數(shù)據(jù)源時(shí)，內(nèi)容比較多，因此以覆蓋彈窗方式出現(xiàn)。為了展示更多信息，面板相應(yīng)也變大些，那么信息獲取效率是提升了，但每次切換又得按多一次關(guān)閉按鈕的操作。雖然看似是很小一個(gè)動(dòng)作，但信息面板是高頻操作區(qū)域，每增加一個(gè)冗余操作，對(duì)核心任務(wù)流程而言，累計(jì)起來(lái)無(wú)疑是個(gè)巨大的工作量。

Raydata Web專業(yè)版 – 調(diào)整并定稿設(shè)計(jì)

再看看 Raydata 如何處理剛剛那個(gè)問(wèn)題的？在切換到數(shù)據(jù)面板時(shí)，整個(gè)面板向右增大尺寸而不是覆蓋彈窗出現(xiàn)，整個(gè)切換頂部tab操作流暢迅速，既解決了信息不夠放需要滾動(dòng)而導(dǎo)致消息獲取低效的問(wèn)題，同時(shí)也減少了冗余操作以提高操作效率。

EasyV個(gè)人版 – 調(diào)整并定稿設(shè)計(jì)

EasyV 的信息面板在切換頂部tab時(shí)，依然是同樣的尺寸，因?yàn)樾畔⒈容^緊湊聚合，看似功能就挺復(fù)雜的了，因?yàn)榻o到小白用戶看到密密麻麻的信息，可能會(huì)造成上手成本較高的風(fēng)險(xiǎn)。畢竟信息面板本身就是比較復(fù)雜且常用的功能，所以剛開(kāi)始接觸新工具具有陌生感是正常的，EasyV 的做法是在樣式 tab 下的組件標(biāo)題旁邊加了查看教程的跳轉(zhuǎn)鏈接，通過(guò)提供就近幫助，讓小白用戶快速上手，減少認(rèn)知卡點(diǎn)，流暢完成核心任務(wù)。

森大屏基礎(chǔ)版 – 調(diào)整并定稿設(shè)計(jì)

森大屏和上面提到的 EasyV 類似，不過(guò)它更復(fù)雜些，頂部 tab 有 4 個(gè)，功能看起來(lái)就更臃腫復(fù)雜了，其中額外增加的是【動(dòng)畫(huà)】，功能類似于 PPT 的進(jìn)出場(chǎng)動(dòng)畫(huà)效果，個(gè)人建議可并入到【交互】中，理由是它本身也屬于交互事件的一類。

結(jié)構(gòu)上而言，歸入【交互】邏輯說(shuō)得通。重要性而言，它屬于錦上添花的效果，不必展示在最重要的頂部 tab 上。信息面板還運(yùn)用了混合導(dǎo)航，如【屬性】 tab 下的二級(jí) tab 是垂直導(dǎo)航，優(yōu)點(diǎn)是可以壓縮面積，容納更多信息量，缺點(diǎn)是增加了信息復(fù)雜度。

4.2 分享導(dǎo)出

當(dāng)完成大屏搭建后，用戶需要通過(guò)在線發(fā)布或本地導(dǎo)出來(lái)分享給需求方或業(yè)務(wù)方查看。當(dāng)然大屏調(diào)整的過(guò)程中也需要頻繁用到【預(yù)覽】功能來(lái)預(yù)覽調(diào)整效果，因?yàn)樵摴δ芪恢帽容^靠近【導(dǎo)出】功能，所以這里放在一起來(lái)講。

DataV企業(yè)版試用 – 分享導(dǎo)出

DataV 把【發(fā)布大屏】和【預(yù)覽大屏】功能都放在頂部任務(wù)欄的右上方區(qū)域。高頻功能放在用戶最易發(fā)現(xiàn)的位置，符合用戶認(rèn)知?！绢A(yù)覽大屏】分為正常預(yù)覽和調(diào)試預(yù)覽，可能是為了信息降噪，于是選擇折疊在二級(jí)菜單。

Raydata Web專業(yè)版 – 分享導(dǎo)出

Raydata 與 DataV 的近似，其中，【預(yù)覽大屏】分為當(dāng)前瀏覽器打開(kāi)和新窗口打開(kāi)的方式，可能因?yàn)橛覀?cè)功能不多，直接展示出來(lái)會(huì)更方便點(diǎn)擊。編輯器內(nèi)無(wú)【發(fā)布大屏】功能，而放了【保存項(xiàng)目】功能，需要先保存項(xiàng)目后，在系統(tǒng)頁(yè)進(jìn)行發(fā)布分享。

EasyV個(gè)人版 – 分享導(dǎo)出

EasyV 也與 DataV 的近似，只不過(guò)把【預(yù)覽大屏】與【發(fā)布大屏】功能位置交換了。按照 Z 型設(shè)計(jì)布局角度而言，用戶習(xí)慣是右上角區(qū)域閱讀同行信息時(shí)，采用從右到左的順序進(jìn)行閱讀。那么，【預(yù)覽大屏】會(huì)被頻繁使用，應(yīng)和 DataV 的做法那樣才合適，即左側(cè)【發(fā)布大屏】，右側(cè)【預(yù)覽大屏】。

森大屏基礎(chǔ)版 – 分享導(dǎo)出

森大屏與前面 3 款工具的做法都不同。因?yàn)轫敳咳蝿?wù)欄是類似 Win 系統(tǒng)的工具菜單占了一行，所以分享導(dǎo)出相關(guān)的功能都放在了畫(huà)布頂部菜單欄，它們包括了左側(cè)的【保存項(xiàng)目】，右側(cè)的【預(yù)覽大屏】和【發(fā)布大屏】。體驗(yàn)比較友好的是，每次未保存狀態(tài)，【保存項(xiàng)目】的圖標(biāo)的右上角會(huì)有一個(gè)藍(lán)色徽標(biāo)，增強(qiáng)用戶感知，提醒用戶記得做保存操作。

4.3 設(shè)計(jì)亮點(diǎn)

談一談 4 款工具的設(shè)計(jì)亮點(diǎn)，這些差異點(diǎn)你是否有關(guān)注呢？或許就是吸引用戶初步接觸并持續(xù)使用的地方？

之所以在后面小結(jié)的【優(yōu)點(diǎn)】旁邊補(bǔ)充【待改進(jìn)】之處，是希望讀者保持理性思考的態(tài)度，能客觀綜合分析，這樣方便對(duì) 4 款工具產(chǎn)品形成一個(gè)整體認(rèn)知。

4.3.1 DataV企業(yè)版試用 – 設(shè)計(jì)亮點(diǎn)

1、易感知原則

遷移至移動(dòng)端預(yù)覽

在網(wǎng)頁(yè)端大屏的情況下，頂部任務(wù)欄有遷移至移動(dòng)端功能，點(diǎn)擊后左側(cè)彈出抽屜，顯示遷移至移動(dòng)端的預(yù)覽效果，頂部 tab 可切換垂直或水平等排版布局。這個(gè)功能可以讓用戶更易感知到調(diào)整后的效果，減少用戶的理解成本，尤其是面對(duì)需求方情況下，可大大減少溝通成本。

移動(dòng)端適配不同機(jī)型

在調(diào)整并定稿設(shè)計(jì)的環(huán)節(jié)中，我們需要用到大屏預(yù)覽功能。預(yù)覽移動(dòng)端的大屏?xí)r，DataV 設(shè)計(jì)了不同機(jī)型讓用戶選擇，提供的常用機(jī)型可讓用戶預(yù)覽大屏效果時(shí)體驗(yàn)更友好。假設(shè)只做了一個(gè)默認(rèn)機(jī)型的適配，那么用戶看到的效果可能就會(huì)被裁剪了一部分，或者一部分?jǐn)?shù)據(jù)太小或太大等適配效果不合適的問(wèn)題。

2、交互操作便捷

移動(dòng)端調(diào)整操作

在設(shè)計(jì)移動(dòng)端大屏?xí)r，大屏觀眾一般是管理者角色。他們比較關(guān)心的是，快速閱讀大屏的指標(biāo)和圖表數(shù)據(jù)，而視覺(jué)裝飾則是次要的。因此工具的用戶需要把關(guān)注點(diǎn)放在圖表和布局上，而移動(dòng)端的調(diào)整寬度和排序布局功能很方便。用戶直接在畫(huà)布右側(cè)邊緣往水平方向拖拽，即可調(diào)整移動(dòng)端大屏的寬度。用戶往垂直方向拖拽畫(huà)布中的元素，則可以快速排序元素的順序，從而改變整體的大屏布局。

另外，移動(dòng)端大屏編輯過(guò)程中，大屏高度是自適應(yīng)的，也就是說(shuō)，畫(huà)布有多少元素，它就能手動(dòng)給你撐開(kāi)多少高度，用戶無(wú)需在畫(huà)布下方邊緣往垂直方向反復(fù)拖拽，減少冗余操作以提高調(diào)整效率。

導(dǎo)出到藍(lán)圖編輯器

用戶平常添加交互事件時(shí)，都要在信息面板右側(cè)進(jìn)行調(diào)整，這么做有兩個(gè)不好的地方，一是面板區(qū)域小導(dǎo)致不好操作，二是交互邏輯不夠直觀。藍(lán)圖功能可解決剛剛提到的不足。當(dāng)用戶專注在添加交互事件時(shí)，希望條理清晰，目標(biāo)明確，如果能像流程圖那樣把整個(gè)交互過(guò)程展示出來(lái)，那么既直觀，也方便調(diào)整。打個(gè)比喻，就像是早期網(wǎng)頁(yè)設(shè)計(jì)軟件Dreamweaver，可拆分設(shè)計(jì)視圖和代碼視圖。

另外，UE虛幻引擎常常也運(yùn)用在本地部署的大屏設(shè)計(jì)中。使用UE虛幻引擎設(shè)計(jì)游戲交互時(shí)，也是分為兩種方式，用藍(lán)圖來(lái)拉線或者用代碼來(lái)編程來(lái)添加交互事件。可見(jiàn)藍(lán)圖功能對(duì)于添加交互邏輯而言能極大提高效率，它讓編程小白無(wú)需編程即可添加交互，它也幫助技術(shù)工程師輔助排查交互錯(cuò)誤或代碼缺陷。

3、提高檢索效率

搜索配置

DataV 在信息面板搜索配置這個(gè)地方做得很好，信息獲取效率倍增。一般情況下，一個(gè)組件的配置數(shù)量是十分多的，因此，對(duì)配置不熟的用戶想要找到對(duì)應(yīng)的配置項(xiàng)相對(duì)比較難，效率比較慢。而搜索配置這個(gè)功能不僅可以搜到當(dāng)前組件的配置項(xiàng)，而且可以定位到目標(biāo)位置，十分方便。

4、降低學(xué)習(xí)成本

智能識(shí)圖創(chuàng)建大屏

前面提到過(guò) DataV 有 3 種創(chuàng)建大屏的方式，其中智能識(shí)圖創(chuàng)建大屏降低了用戶的上手成本和使用門檻。對(duì)用戶而言，這類智能化的功能，確實(shí)可降低用戶的學(xué)習(xí)成本。

組件文檔教程

對(duì)于小白用戶，組件不會(huì)使用時(shí)會(huì)產(chǎn)生焦慮的負(fù)面情緒。而 EasyV 在信息面板中的組件標(biāo)題旁邊放入文檔教程入口，降低了用戶的學(xué)習(xí)成本。還有，就近提供幫助，用戶可高效獲取信息，更易找到教程入口。

系列視頻教程

無(wú)需在工具外，DataV 就可直接點(diǎn)擊視頻教程來(lái)觀看，而另外 3 個(gè)競(jìng)品的做法通常是專門去官網(wǎng)的教程中心或B站個(gè)人主頁(yè)才能觀看，跳轉(zhuǎn)和搜索比較麻煩。對(duì)比下來(lái)，顯然DataV的做法更方便用戶找到并觀看視頻教程，用戶體感是尋找教程不迷路、不費(fèi)勁。

小結(jié)1

優(yōu)點(diǎn)：

1.功能模塊

• 有AI制圖功能，方便快速設(shè)計(jì)大屏原型；
• 有藍(lán)圖編輯功能，方便添加交互事件；

2.引導(dǎo)提示

• 藍(lán)圖編輯器進(jìn)入時(shí)有引導(dǎo)提示，降低學(xué)習(xí)成本；
• 選中組件后配置面板有教程入口，降低學(xué)習(xí)成本;

3.交互視覺(jué)

• 編輯器面板能最大化隱藏，有效利用有限空間；
• 可框選操作，且框選組件時(shí)下方預(yù)覽窗會(huì)自動(dòng)縮小體驗(yàn)很好；
• 產(chǎn)品設(shè)計(jì)語(yǔ)言貼近科幻酷炫風(fēng)格，尤其是系統(tǒng)頁(yè)的tab欄目的掃光效果和頂部banner輪播圖，全局刪除提示的漸變頂部線條、警告三角形圖標(biāo)設(shè)計(jì)；

4.交互操作

• 畫(huà)布編輯器和藍(lán)圖編輯器模式的交互易切換；
• 有快捷拷貝/粘貼組件樣式功能，方便復(fù)用；
• 雙擊畫(huà)布的參考線可刪除，操作便捷；
• 刪除高頻操作可按del后按enter直接刪除；
• 移動(dòng)端編輯器有“輔助框”顯示的開(kāi)關(guān)，方便布局操作；
• 復(fù)雜藍(lán)圖編輯器支持單選和框選模式，點(diǎn)選模式按住comand照樣可多選；
• 詳情設(shè)置面板中的搜索配置功能，搜索結(jié)果可直接調(diào)整且可定位當(dāng)前配置；

待改進(jìn)：

1. 引導(dǎo)提示

• 刪除組件提示的文案過(guò)于臃腫；

2.交互視覺(jué)

• 刪除組件提示的文案過(guò)于臃腫；
• 配置面板內(nèi)部分字段標(biāo)題同時(shí)出現(xiàn)兩種氣泡提示，不一致導(dǎo)致易誤讀信息；

3.交互操作

• 全選操作快捷鍵缺乏；
• 至多退一步，操作記錄步數(shù)太少；
• 一鍵清空參考線功能缺乏；
• 主動(dòng)保存按鈕缺乏；
• 主題模板素材缺乏；
• 點(diǎn)選激活后才可拖拽組件，高頻操作冗余；
• 大屏常用推薦尺寸功能缺乏；
• 編輯頁(yè)內(nèi)左上角無(wú)法返回首頁(yè)；
• 編輯器中無(wú)法修改項(xiàng)目名稱；
• 移動(dòng)端大屏頁(yè)面無(wú)法退一步操作；

4. 功能加載

• 首次進(jìn)入系統(tǒng)頁(yè)加載不出頂部banner；

4.3.2 Raydata Web專業(yè)版 – 設(shè)計(jì)亮點(diǎn)

1、滿足多場(chǎng)景需求

圖表工作站

Raydata 專門在工具內(nèi)置了圖表編輯器，讓用戶更高效的定制化自己的圖表樣式。界面結(jié)構(gòu)主要分為 4 個(gè)模塊，分別是【圖表選擇】【圖表配置】【數(shù)據(jù)編輯和代碼編輯】【效果預(yù)覽】。

圖表工作站還可以把圖表的數(shù)據(jù)也錄入進(jìn)來(lái)，那么這樣做的好處是什么呢？當(dāng)然是更高效地完成下一步大屏設(shè)計(jì)的主流程任務(wù)，用戶只需要把設(shè)計(jì)好的圖表導(dǎo)入到大屏畫(huà)布中并排版好即可。數(shù)據(jù)編輯方式提供了2種，即數(shù)據(jù)編輯和代碼編輯，用戶既可用 Excel表格的方式錄入數(shù)據(jù)，也可用代碼編輯的方式來(lái)錄入數(shù)據(jù)，適合非開(kāi)發(fā)者和開(kāi)發(fā)者不同角色傾向的使用場(chǎng)景，其中表格的方式更方便用戶做批量修改。

這個(gè)圖表工作站也相當(dāng)于把核心任務(wù)流程進(jìn)行了拆解，用戶更好的分工執(zhí)行任務(wù)。還有，設(shè)計(jì)完成的定制圖表，很方便用戶高效復(fù)用。

場(chǎng)景工作站

不僅是圖表工作站，Raydata 還內(nèi)置了場(chǎng)景工作站，它能高效定制三維場(chǎng)景。使用過(guò)After effects的插件E3D，或許會(huì)感覺(jué)界面很熟悉。界面結(jié)構(gòu)主要分為 6 個(gè)模塊，分別是【節(jié)點(diǎn)列表】【檢查窗口】【材質(zhì)設(shè)置】【資源庫(kù)】【場(chǎng)景】【場(chǎng)景工具欄】。

場(chǎng)景工作站方便用戶高度定制化自己的模型。用戶可以上傳模型，導(dǎo)入場(chǎng)景中，就可得到 Raydata 視覺(jué)風(fēng)格的的模型場(chǎng)景了，因?yàn)閮?nèi)置的材質(zhì)、貼圖、背景天空的效果都是十分獨(dú)特的。

2、交互操作便捷

給3d地球和地圖添加飛線

撒點(diǎn)打標(biāo)的交互易理解易操作。在場(chǎng)景層中，選中頂部任務(wù)欄【標(biāo)記】的信息標(biāo)記，拖入場(chǎng)景中，鼠標(biāo)多次點(diǎn)擊即可在地圖上打標(biāo)。同理，頂部任務(wù)欄【繪制】操作一致，很方便為3d地球或地圖添加飛線。

3、功能靈活個(gè)性化

字體選擇器

一個(gè)好的大屏必定是恰到好處的用到適合的字體，因此，字體為何重要無(wú)需多言。Raydata 內(nèi)置了很多字體樣式，包括中文、英文、數(shù)字，都可免費(fèi)商用。字體選擇器提供了搜索功能，字體數(shù)量比較多情況下，信息獲取依然高效。另外，在系統(tǒng)頁(yè)用戶可自行上傳字體使用。

小結(jié)2

優(yōu)點(diǎn)：

1.功能模塊

• 有圖表工作站，方便制作圖表；
• 有模型場(chǎng)景工作站，方便制作場(chǎng)景；

2.交互視覺(jué)

• 圖表樣式有獨(dú)有的風(fēng)格，令人印象深刻，如高低飽和度配色運(yùn)用，線條粗細(xì)的運(yùn)用；
• 三維模型場(chǎng)景的視覺(jué)效果不錯(cuò)且獨(dú)特，如掃光、粒子動(dòng)畫(huà)；
• 場(chǎng)景層組件的封面圖易理解，所見(jiàn)即所得；
• 區(qū)分【UI層】和【場(chǎng)景層】，避免畫(huà)布中誤點(diǎn)其他元素，造成干擾；

3.交互操作

• 撒點(diǎn)打標(biāo)的交互易理解易操作，鼠標(biāo)多次點(diǎn)擊即可在地圖上打標(biāo)；
• 調(diào)整靜態(tài)【數(shù)據(jù)】有表格編輯方式，方便批量修改；

待改進(jìn)：

1. 引導(dǎo)提示

• 缺少引導(dǎo)導(dǎo)致找不到場(chǎng)景圖層、資源庫(kù)；
• 官方模板案例難找到；
• 場(chǎng)景工作站的“透明度”與大屏編輯頁(yè)的“不透明度”文案不統(tǒng)一；

2. 交互視覺(jué)

• 隱藏操作后仍然能看到半隱藏的圖表組件，容易誤讀信息導(dǎo)致誤操作，以為可調(diào)整；
• 資源庫(kù)部分封面展示過(guò)大，有點(diǎn)浪費(fèi)空間；
• 畫(huà)布無(wú)顯隱參考線，易造成信息干擾；

3. 交互操作

• 無(wú)法在畫(huà)布進(jìn)行框選操作；
• 全屏操作設(shè)置的簡(jiǎn)易導(dǎo)航、標(biāo)尺點(diǎn)擊后無(wú)法用；
• 無(wú)法刪除單條參考線，只能全部刪除；
• 字體初始為“系統(tǒng)默認(rèn)”，選擇其他字體后無(wú)恢復(fù)還原“系統(tǒng)默認(rèn)”選項(xiàng)；
• 編輯頁(yè)內(nèi)左上角無(wú)法返回首頁(yè)；
• 畫(huà)布右下角無(wú)預(yù)覽窗，不易了解畫(huà)布全貌；

4.功能加載

• 3D場(chǎng)景加載時(shí)比較慢，而加載完成后交互順暢；

4.3.3、EasyV個(gè)人版 – 設(shè)計(jì)亮點(diǎn)

1、降低設(shè)計(jì)門檻

豐富的素材資源社區(qū)

EasyV 有著成熟的素材資源社區(qū)，降低設(shè)計(jì)門檻，而且用戶積極參與創(chuàng)作，促進(jìn)生產(chǎn)更多素材模板。

豐富的主題資源

資源庫(kù)的素材分為主題資源和設(shè)計(jì)素材，其中2D素材資源較多，面板上方有搜索功能，方便用戶快速定位目標(biāo)素材。

2、交互操作便捷

拖拽圖層邊欄寬度

編輯器內(nèi)的圖層面板可通過(guò)拖拽右側(cè)邊緣來(lái)調(diào)整邊欄寬度。當(dāng)用戶使用小屏顯示器時(shí)，或是設(shè)計(jì)大屏過(guò)程中覺(jué)得窗口太小時(shí)，那么就可以把編輯器中次重要的圖層面板縮小面積，讓用戶專注在畫(huà)布區(qū)域有更大面積來(lái)設(shè)計(jì)大屏。

3、降低學(xué)習(xí)成本

組件文檔教程

同 DataV，EasyV 也在信息面板提供了組件文檔教程入口，不贅述。

小結(jié)3

優(yōu)點(diǎn)：

1.功能模塊

• 有成熟的素材資源社區(qū)，降低設(shè)計(jì)門檻，而且用戶積極參與創(chuàng)作，促進(jìn)生產(chǎn)更多素材模板；

2 引導(dǎo)提示

• 選中組件后配置面板有教程入口，降低學(xué)習(xí)成本；
• 下方縮放輸入負(fù)數(shù)時(shí)，會(huì)變?yōu)?%，異常狀態(tài)交互細(xì)節(jié)處理得好；

3.交互視覺(jué)

• 2D資源素材豐富，降低設(shè)計(jì)門檻；
• 編輯頁(yè)內(nèi)左上方雙擊標(biāo)題即可為大屏項(xiàng)目重命名；
• 編輯頁(yè)內(nèi)左上角點(diǎn)擊按鈕可返回首頁(yè)，方便跳轉(zhuǎn)；
• 圖層面板右側(cè)可拖拽邊欄寬度；
• 調(diào)整靜態(tài)【數(shù)據(jù)】有表格編輯方式，方便批量修改；

待改進(jìn)：

1.功能模塊

• 文本樣式的行距設(shè)置了也不管用；

2. 交互視覺(jué)

• 回收站內(nèi)的元素圖標(biāo)與文件夾圖標(biāo)放一起有點(diǎn)違和；

3. 交互操作

• 組件庫(kù)缺乏就近搜索，雖然有全局搜索，但交互關(guān)聯(lián)度比較弱，而資源庫(kù)卻有就近搜索；
• 在資源庫(kù)中，通過(guò)拖拽的方式無(wú)法添加資源，只能點(diǎn)擊，并且與組件庫(kù)添加素材的鼠標(biāo)手勢(shì)不統(tǒng)一；

4.3.4 森大屏基礎(chǔ)版 – 設(shè)計(jì)亮點(diǎn)

1、易感知原則

保存圖標(biāo)徽標(biāo)狀態(tài)

未保存狀態(tài)會(huì)在保存圖標(biāo)右上角出現(xiàn)小圓點(diǎn)徽標(biāo)，提醒用戶記得保存操作。當(dāng)保存之后，小圓點(diǎn)才會(huì)從保存按鈕。徽標(biāo)的交互狀態(tài)可以增強(qiáng)用戶對(duì)保存狀態(tài)的感知。

2、交互操作便捷

官方模板快速布局大屏

森大屏提供了官方模板給用戶使用，并且有【布局塊】組件，它相當(dāng)于一個(gè)容器，作用是確定好了位置和尺寸，只需要把組件拖拽進(jìn)【布局塊】組件里就會(huì)被自動(dòng)匹配尺寸，撐滿整個(gè)容器，方便用戶快速布局大屏。

三維場(chǎng)景預(yù)置濾鏡效果

對(duì)于不同需求的大屏效果，三維場(chǎng)景也需注意匹配整體大屏的風(fēng)格，可以快速修改三維場(chǎng)景的濾鏡功能就能很高效地完成需求。藍(lán)色主題？青色主題？白天？夜晚？一鍵即可換膚。

3、降低學(xué)習(xí)成本

組件文檔教程

不同其他競(jìng)品，森大屏未在信息面板提供組件文檔教程入口，但在官網(wǎng)能找到森大屏的使用教程。

小結(jié)4

優(yōu)點(diǎn)：

1.功能模塊

• 有藍(lán)圖編輯功能，方便添加交互事件；
• 有代碼二開(kāi)功能，方便技術(shù)工程師組件做定制設(shè)計(jì)；

2.引導(dǎo)提示

• 未保存狀態(tài)會(huì)在保存圖標(biāo)右上角出現(xiàn)小圓點(diǎn)徽標(biāo)，提醒用戶記得保存操作；

3.交互視覺(jué)

• 右側(cè)組件的配置面板使用混合導(dǎo)航菜單，操作效率更高；
• 同一編輯器內(nèi)，可編輯多張【圖層】（即大屏頁(yè)面），且區(qū)分 【3D 圖層】和【圖層】，更精準(zhǔn)操作；

4.交互操作

• 三維場(chǎng)景模板有預(yù)置濾鏡，方便快速預(yù)留效果；
• 頂部菜單與電腦端布局一致，遵循用戶習(xí)慣，降低學(xué)習(xí)成本；
• 調(diào)整靜態(tài)【數(shù)據(jù)】有表格編輯方式，方便批量修改；
• 有【布局塊】組件，且配有官方布局模板，方便快速布局大屏；

待改進(jìn)：

1. 引導(dǎo)提示

• 【大綱】相對(duì)于【圖層】的文案更難理解；
• 左下角的【大綱】圖層功能的位置比較難找到；
• 【圖層】實(shí)際是大屏項(xiàng)目的多個(gè)頁(yè)面，用【圖層】文案易誤解信息，而【大綱】才是【圖層】；

2. 交互視覺(jué)

• logo與編輯器內(nèi)的主題色不一致，logo為綠，主題色為藍(lán)；
• 在暗色風(fēng)格編輯器的場(chǎng)景下，【模型庫(kù)】的資源封面圖使用了淺色底色，視覺(jué)比較突兀；

3.功能加載

• 3D場(chǎng)景加載時(shí)比較慢；

4.4 其他

4.4.1 插畫(huà)圖標(biāo)設(shè)計(jì)

DataV的情感化設(shè)計(jì)

DataV 的主插畫(huà)圖標(biāo)始終以冷色調(diào)為主，扁平且光感強(qiáng)，足夠吸引用戶注意到它們。而一些表單場(chǎng)景的插畫(huà)圖標(biāo)則選用扁平簡(jiǎn)約的風(fēng)格，整合后去看，樣式風(fēng)格不夠統(tǒng)一，比如加載的樣式就有 2 種：DataV 的 logo 和 DNA 螺旋結(jié)構(gòu)。扁平圖標(biāo)的主色有的用偏青的藍(lán)，有的用偏深的藍(lán)。

情感化設(shè)計(jì)當(dāng)然不僅是減少負(fù)面情緒和加深品牌印象，除此之外，主插畫(huà)圖標(biāo)還提高了用戶獲許信息的效率，第一眼能關(guān)注到它們，調(diào)動(dòng)起專注的情緒狀態(tài)，也有的圖標(biāo)比如表單頁(yè)的圖標(biāo)，突出功能性，用戶可通過(guò)圖形快速識(shí)別該視覺(jué)所傳達(dá)到信息含義，提升信息識(shí)別效率。

Raydata的情感化設(shè)計(jì)

對(duì)比 DataV 來(lái)看，Raydata 的缺省態(tài)圖標(biāo)風(fēng)格十分統(tǒng)一，都是形狀較方正、偏冷的中性色、扁平微漸變風(fēng)格，表現(xiàn)看起來(lái)精致而不失細(xì)節(jié)。小圖標(biāo)用到了扁平加投影的風(fēng)格，增強(qiáng)立體感。

比較特別的是，大部分圖標(biāo)使用了中性色，放在實(shí)際界面中存在感比較低，起到視覺(jué)點(diǎn)綴作用，這也正是它們存在的意義，不過(guò)分干擾用戶視覺(jué)，信息降噪，符合 Raydata 產(chǎn)品的設(shè)計(jì)語(yǔ)言，相比 DataV，Raydata 是簡(jiǎn)約與柔和一體。

EasyV的情感化設(shè)計(jì)

EasyV的部分缺省態(tài)圖標(biāo)配色上比較突出，有點(diǎn)且有用到正視圖也用到等距視圖，視覺(jué)上稍顯突兀且雜亂。也有部分缺省態(tài)圖標(biāo)用到較暗的中性色，主要起到緩解用戶負(fù)面情緒而不過(guò)分突出視覺(jué)，在工具類產(chǎn)品定位中這樣的做法或許比較合適。

森大屏的情感化設(shè)計(jì)

森大屏的系統(tǒng)頁(yè)和編輯器頁(yè)的風(fēng)格不夠統(tǒng)一，缺省態(tài)圖標(biāo)大部分是重復(fù)的，站在技術(shù)開(kāi)發(fā)角度而言，可以節(jié)省素材緩存資源，站在視覺(jué)體驗(yàn)角度而言，則比較單調(diào)和隨意，也許當(dāng)前產(chǎn)品階段不需把太多精力花在情感化設(shè)計(jì)上，而放在更重要的產(chǎn)品規(guī)劃上。

值得一提的是，加載的動(dòng)態(tài)圖標(biāo)是一顆綠色小樹(shù)開(kāi)枝散葉，具有趣味性，減少用戶負(fù)面情緒，同時(shí)明確了森大屏的“森”的概念和加深了品牌印象。

4.4.2 彈窗文案設(shè)計(jì)

DataV的彈窗文案設(shè)計(jì)

DataV 的部分刪除彈窗文案略顯重復(fù)瑣碎，比如在一些選中較多數(shù)據(jù)的刪除場(chǎng)景下，用戶通過(guò)多選的方式選擇15個(gè)組件，那么點(diǎn)擊刪除會(huì)彈出刪除彈窗，彈窗的文案會(huì)寫(xiě)著“XX組件、XX組件、XX組件等X個(gè)組件”的一大串文字，看著就感覺(jué)很復(fù)雜且低效。用戶不需要關(guān)注羅列出多少個(gè)組件，不必浪費(fèi)時(shí)間閱讀一大串文字，當(dāng)前需要的是立即馬上給我刪掉它。這不是一個(gè)高危警告，只需了解概況即可，無(wú)需知道所有瑣碎信息，因?yàn)榧词拐`刪了組件，也照樣可以撤銷，做回退操作。

因?yàn)槲淖侄嗲颐芗臅r(shí)候，用戶的閱讀效率就會(huì)降低。嘗試對(duì)DataV 更新組件彈窗的文案排版進(jìn)行了修改，下方左右圖是修改前后對(duì)比。修改前的文案是一堆聚在一起的句子，缺少標(biāo)題和分點(diǎn)，信息獲取低效。修改后的文案拆分標(biāo)題，有利于用戶快速識(shí)別一段長(zhǎng)文案的核心主題是什么。通過(guò)分點(diǎn)的方法，讓用戶明確閱讀順序，哪些是最重要的，哪些次之，哪些是輔助信息。

下面對(duì) 1 個(gè)版本不支持的彈窗和 3 個(gè)刪除彈窗也嘗試修改，通過(guò)拆分標(biāo)題的方式，并且視覺(jué)上加大字號(hào)和加粗字重，拉開(kāi)信息主次關(guān)系，提高信息識(shí)別效率。

Raydata的彈窗文案設(shè)計(jì)

Raydata 彈窗文案沒(méi)有太大問(wèn)題，或許視覺(jué)樣式上不太統(tǒng)一和易用。

嘗試對(duì)新建項(xiàng)目的彈窗進(jìn)行調(diào)整，在輸入項(xiàng)目標(biāo)識(shí)碼的輸入框下方，如果出現(xiàn)警告文案，一般用戶習(xí)慣是從左往右閱讀信息的，而且當(dāng)前的信息排版是屬于F型布局，意思即眼動(dòng)順序是先水平方向從左到右掃視，再?gòu)淖髠?cè)往垂直向下的掃視下一行。那么“標(biāo)識(shí)碼不能為空”就需要對(duì)齊在輸入框左下方，而不是右下方，這樣做左側(cè)往垂直向下的掃視可以更快地獲取到信息，讓用戶的信息獲取效率更高一些。

下面對(duì) 2 個(gè)刪除彈窗也嘗試修改，同 DataV 一樣，通過(guò)拆分標(biāo)題的方式，并且視覺(jué)上樣式進(jìn)行風(fēng)格統(tǒng)一，加大字號(hào)和加粗字重，拉開(kāi)信息主次關(guān)系，提高信息識(shí)別效率。

EasyV的彈窗文案設(shè)計(jì)

EasyV 彈窗文案未發(fā)現(xiàn)有問(wèn)題之處，因?yàn)椴鸱至藰?biāo)題，并且重要信息也進(jìn)行高亮處理，這樣做信息識(shí)別效率高些。

森大屏的彈窗文案設(shè)計(jì)

森大屏的彈窗樣式和文案都不太統(tǒng)一。尤其是文案方面，比如有的彈窗文案標(biāo)題還寫(xiě)了無(wú)意義的內(nèi)容“信息”，再比如“確定刪除所選項(xiàng)目”這個(gè)疑問(wèn)句是否感覺(jué)缺少一個(gè)“？”標(biāo)點(diǎn)符號(hào)呢？再比如彈窗的陳述句文案是否有必要加“?！本涮?hào)呢？

嘗試對(duì)購(gòu)買成功的彈窗進(jìn)行修改，換一個(gè)頂部狀態(tài)欄的樣式，也是森大屏的組件樣式中提取的，這樣即可言簡(jiǎn)意賅的把提示展示出來(lái)。因?yàn)檫@個(gè)結(jié)果提示只起到一個(gè)持續(xù)通知的作用，不需要做決策，所以把“取消”刪除掉，“確定”按鈕作用不大，也可刪掉，剩余一個(gè)關(guān)閉按鈕即可，購(gòu)買成功的結(jié)果提示可一直持續(xù)展示，直到用戶跳轉(zhuǎn)第三方平臺(tái)完成購(gòu)買后，回到此界面才可手動(dòng)點(diǎn)擊關(guān)閉。

4.5 體驗(yàn)總結(jié)

體驗(yàn)了 4 款可視化大屏搭建工具，得出體驗(yàn)總結(jié)。觀點(diǎn)僅代表個(gè)人，且具有比較強(qiáng)的主觀性。4 款工具各有優(yōu)勢(shì)且都在持續(xù)迭代，認(rèn)為無(wú)高低好壞之分，而是放在推薦場(chǎng)景中，可以更好的發(fā)揮其作用。

DataV企業(yè)版試用

優(yōu)勢(shì)：

智能識(shí)圖高效、藍(lán)圖編輯直觀、BI分析組件方便

推薦場(chǎng)景：

網(wǎng)頁(yè)端和移動(dòng)端適配的大屏

Raydata Web專業(yè)版

優(yōu)勢(shì)：

圖表和模型設(shè)計(jì)風(fēng)格獨(dú)特、精準(zhǔn)

推薦場(chǎng)景：

偏向設(shè)計(jì)3D場(chǎng)景為主的大屏

EasyV個(gè)人版

優(yōu)勢(shì)：

海量大屏模板、高質(zhì)量主題套件

推薦場(chǎng)景：

偏向2D風(fēng)格的設(shè)計(jì)，較少的3D場(chǎng)景

森大屏基礎(chǔ)版

優(yōu)勢(shì)：

工具鏈生態(tài)完善、藍(lán)圖編輯直觀

推薦場(chǎng)景：

園區(qū)、城市、展廳、拓?fù)涞葟?fù)合型大屏

五、探索思考

通過(guò)發(fā)散思維，大膽聯(lián)想，探索思考可視化大屏工具的未來(lái)迭代和設(shè)計(jì)價(jià)值。

5.1 未來(lái)迭代

多端語(yǔ)音交互

手機(jī)和平板端通過(guò)輸入文字或語(yǔ)音指令可以控制大屏數(shù)據(jù)的展示，這一功能市面上或許已有廠家已實(shí)現(xiàn)，如何將這一功能充分影響人們的日常交互習(xí)慣，這還待技術(shù)不斷革新，不斷優(yōu)化功能，借助AI助手，讓機(jī)器更懂人類，在未來(lái)，也許還沒(méi)等你開(kāi)口，你最關(guān)注的大屏數(shù)據(jù)早已呈現(xiàn)在你眼前。

如今，利用數(shù)字人形象可以把多端語(yǔ)音交互功能，更生動(dòng)地展示給觀眾。

多人實(shí)時(shí)協(xié)同

近年來(lái)，F(xiàn)igma成熱門設(shè)計(jì)生產(chǎn)力工具后，越來(lái)越強(qiáng)調(diào)多人在線實(shí)時(shí)協(xié)同主題，而可視化大屏工具如今由于技術(shù)壁壘仍舊無(wú)法進(jìn)行多人在線實(shí)時(shí)協(xié)同，轉(zhuǎn)而使用編輯鎖（允許部分用戶進(jìn)行編輯，其他用戶則無(wú)法編輯）來(lái)緩解當(dāng)前多人協(xié)同需求。

期望未來(lái)迭代，能夠像Figma一樣做到云端實(shí)時(shí)保存，多人實(shí)時(shí)協(xié)同，提高生產(chǎn)效率。

AI智能創(chuàng)作

如2023年比較火的AI的智能工具如Midjourney/ChatGPT/Galileo AI，可通過(guò)與AI對(duì)話，讓AI解決你的需求。

當(dāng)你有一個(gè)可視化大屏需求的時(shí)候，就可以命令A(yù)I按照設(shè)計(jì)師的需求幫助設(shè)計(jì)師來(lái)創(chuàng)作可視化大屏，而像你這種職業(yè)就被稱作AI訓(xùn)練師。

AI智能作圖難點(diǎn)還在于AI訓(xùn)練師本身的想象力是否足夠豐富，要不斷嘗試關(guān)鍵詞，不斷對(duì)AI訓(xùn)練優(yōu)化，讓AI更聰明，更智能。

AR/VR沉浸設(shè)計(jì)

在元宇宙中，設(shè)計(jì)師通過(guò)VR設(shè)備進(jìn)入沉浸式的世界中，將圖表變?yōu)槿S化，大屏也是立體空間，支持多人在虛擬辦公空間中自由協(xié)作，人們可以用AR技術(shù)將可視化大屏空間投射在現(xiàn)實(shí)世界中展示。

像《我的世界》拼樂(lè)高積木一樣，設(shè)計(jì)師在元宇宙中親自搭建可視化大屏空間，此時(shí)數(shù)據(jù)被真實(shí)的具象化，感覺(jué)身臨其境，設(shè)計(jì)樂(lè)在其中。

5.2 設(shè)計(jì)價(jià)值

賦能業(yè)務(wù)

在可視化行業(yè)火熱趨勢(shì)下，設(shè)計(jì)師借助可視化工具能為業(yè)務(wù)賦能，間接推動(dòng)商業(yè)發(fā)展進(jìn)步，越來(lái)越多的出海設(shè)計(jì)，這是企業(yè)取得的成績(jī)，也是民族的驕傲，這體現(xiàn)設(shè)計(jì)師個(gè)人的職業(yè)價(jià)值。

思維革新

隨著人工智能趨勢(shì)發(fā)展，AI能替代設(shè)計(jì)師大部分工作量，于是，設(shè)計(jì)師迎來(lái)更高的挑戰(zhàn)，進(jìn)行思維革新，用大膽的創(chuàng)造力借助AI設(shè)計(jì)出更好用、好看、驚喜的設(shè)計(jì)，體現(xiàn)出設(shè)計(jì)師群體的創(chuàng)造價(jià)值。

回歸社會(huì)

遙遠(yuǎn)的未來(lái)或者是不久的將來(lái)，設(shè)計(jì)的盡頭是什么？在數(shù)智化時(shí)代中，換句話說(shuō)是科技高度發(fā)達(dá)的時(shí)代，我們最終仍是以人為本，服務(wù)人，傳遞愛(ài)，用心做設(shè)計(jì)，做有溫度的設(shè)計(jì)，回報(bào)社會(huì)，帶領(lǐng)人們過(guò)上更美好的生活，這體現(xiàn)出整個(gè)設(shè)計(jì)行業(yè)的社會(huì)價(jià)值。

參考文獻(xiàn)

* 部分資料來(lái)源網(wǎng)絡(luò)，若有疑問(wèn)，聯(lián)系侵刪

9、騰訊數(shù)字孿生實(shí)驗(yàn)室 – B站主頁(yè)

https://space.bilibili.com/525916779

10、簡(jiǎn)立方 -《2023年可視化大屏現(xiàn)狀與趨勢(shì)分析報(bào)告》

https://research.tencent.com/report?id=BO6

11、百度百科 – ChatGPT

https://baike.baidu.com/item/ChatGPT?fromModule=lemma_search-box