欧美牲交a欧美牲交aⅴ免费,欧美日韩精品成人网站二区

搜索

APP

起點課堂會員權益

職業體系課特權

線下行業大會特權

個人IP打造特權

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業技能直播

會員專屬社群

榮耀標識

發布

注冊 | 登錄

可視化大屏搭建工具調研探索分享（下篇）

Yashon一瞬

2024-04-29

2 評論 3638 瀏覽 32 收藏

70 分鐘

全文主要分享本人對當下主流可視化大屏搭建工具的調研分析，淺談對可視化行業的探索思考。

文章目錄

一、前言 —— 1.1 閱讀之前、1.2 調研背景、1.3 分享目的、1.4 術語說明

二、市場分析 —— 2.1 行業背景PEST、2.2 市場現狀

三、主流工具 —— 3.1 調查篩選、3.2 工具介紹、3.3 分析模型、3.4 結構層、3.5 框架&表現層

四、功能體驗 —— 4.1 創建大屏、4.2 分享導出、4.3 設計亮點、4.4 其他、4.5 體驗總結

五、探索思考 —— 5.1 未來迭代、5.2 設計價值

前言概要

閱讀之前

閱讀提醒

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

2、文章下篇約17300字，閱讀時長約30分鐘。全文主要分享本人對當下主流可視化大屏搭建工具的調研分析，淺談對可視化行業的探索思考。由于篇幅有限，閱讀體驗更佳，故分為上下兩篇，下篇接著講主流工具（DataV、Raydata、EasyV、森大屏）的功能體驗，淺談可視化行業未來的探索和思考。

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

4、雖工具持續迭代更新，較難與最新版本同步（當時調研時間是2022年10月前），但文章更多的是想表達，在調研過程中的如何用結構化思維來分析拆解產品，以及對未來的探索思考是什么。

適合讀者

B端UI設計師、產品經理，可視化行業相關從業者及愛好者。

四、功能體驗

拆解分析完可視化主流工具（DataV、Raydata、EasyV、森大屏）基礎結構后，繼續深入功能體驗。主要圍繞功能、視覺、交互等維度來進行體驗分析。以核心流程任務【1創建大屏】(新建大屏頁面、使用大屏模板、拖入組件到畫布、調整并定稿設計）-【2分享導出】來展開。

4.1 創建大屏

這包括了創建和設計大屏的整個核心任務流程，也是工具質量的核心體現。

4.1.1、新建大屏頁面

首先，我們需要先在系統頁新建大屏頁面。

DataV企業版試用 – 新建大屏頁面
DataV企業版試用有3種大屏創建方式，分別是PC端、移動端和識圖創建。

在PC端和移動端創建的交互路徑都是以使用推薦模板-立即創建或直接點擊空白模板創建。值得一提的是，點擊某個模板后，彈出預覽窗口時依然可在頂部模板列表切換模板，方便預覽。

在識圖創建時，用戶可自行上傳圖片或在線手繪的方式來生成大屏草稿圖，很方便售前經理/產品經理在項目前期進行原型的搭建。

Raydata Web專業版 – 新建大屏頁面

Raydata Web專業版的系統頁無大屏模板推薦（官網模板放在別處，案例管理-官方案例），只能創建空白頁面。創建時可使用預設尺寸也可以自定義尺寸。交互路徑簡單便捷，體現專業版定位準確。

EasyV個人版 – 新建大屏頁面

EasyV個人版新建頁面的說法叫新建應用，大屏項目相當于一個可視化應用。在新建應用時，可以新建空白模板，也可以使用官方推薦模板。預覽官方模板的彈窗中可左右切換，快速決策。

森大屏基礎版 – 新建大屏頁面

森工廠中的森大屏基礎版，在系統頁的頂部導航需要選中【大屏】，再新建大屏。即可新建空白大屏，也可使用官方的推薦大屏。使用推薦大屏需要購買操作（免費的也要），交互路徑略顯繁瑣。

較為特別的是，進入編輯器頁后依然可以新建大屏，交互操作貼近win系統用戶習慣。

4.1.2 使用大屏模板

當用戶想快速搭建大屏時，可以使用工具自帶的模板再進行微調，這種方式提高效率而是上手成本較低。

4.1.2.1 模板效果

DataV企業版試用 – 模板效果

DataV的模板風格多樣，裝飾元素和光效的處理很到位，發光動效體現大屏的科技感。

因為阿里涵蓋了金融服務、數據云服務等眾多業務，那么他們這類行業模板也很豐富。還有，阿里有一部分主業務是電商，那么對于電商行業的模板也挺多，特點是有濃濃的“電商味”，色彩鮮艷，以霓虹藍紫色為主，這類主題模板很適合營造商品促銷的購物氛圍。

官方也提供了淺色和深色的移動端模板，針對用戶隨時隨地查看數據的使用場景，數量較少。

Raydata Web專業版 – 模板效果

Raydata的模板風格在所有競品中最獨特，無論模型場景還是圖表組件，它都有一套自己獨有的設計語言，字體使用了比較方正穩重的字體，體現科技感，再結合模型場景而言，整體效果類似游戲場景，把科技感、抽象感、細節感表現得淋漓盡致。

這套風格可能喜歡的客戶會很喜歡，不喜歡的可能無感，但不管怎么說，Raydata服務了許多項目，客戶會買帳自然有一定原因的，整體效果和落地性都很穩定。

EasyV個人版 – 模板效果

EasyV的模板風格頗具美感且精致，大屏整體感和細節感不錯，模板數量也很多（多也是個特點，海量選擇且質量高），但移動端的大屏模板數量不多。從素材結構角度看，將素材不斷解組，能拆開分到顆粒度極小的元素，可見在設計素材上EasyV沒少花功夫。

大屏模板中經常能從少量的配置主題色中營造出“高級感”，不會為了炫酷效果而過分花里胡哨，而是遵循 *GLAD 原則（數據可視化原則)，在保證信息傳達效率的基礎上，再去點綴視覺效果。

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

森大屏基礎版 – 模板效果

森大屏的模板風格比較側重于三維模型場景的表現，而對于二維的 UI 層效果則比較簡約，視覺裝飾用得較少。以大屏整體而言，三維場景效果比較復雜時，UI 層使用簡單一點的效果，這種做法也不失穩妥，畢竟數據信息的傳達的優先級最高，其次才是利用視覺效果抓住觀眾的注意力。

另外，不管是粒子動效、掃光、飛線，還是地圖或建筑的動態邊緣線等等，三維場景的視覺效果都做得很豐富，森大屏基技術上使用了 *ThreeJS 前端 3D 技術，實現的效果可在網頁端上有極強的表現力且流暢絲滑。也因為效果豐富的問題，模型面數必須優化（減面處理)，否則在網頁上加載半天都沒看到模型場景或者卡頓。

4.1.2.2 組件效果

DataV企業版試用 – 組件效果

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

DataV比較有特色的是，圖表組件結合了 BI 分析功能（商務智能），部分圖表組件如柱形圖等可轉換為 BI 圖表組件，用戶可進行數據分析，該功能很適合數據分析師或產品經理使用。

Raydata Web專業版 – 組件效果

Raydata的組件效果整體而言比較纖細優雅，再搭配較大的圓角和特殊字體后，略顯活潑親切的個性。組件數量也很多，一開始以為只要頂部組件庫才有組件可用，然后較難發現的是，其實更多細分的業務組件都藏在了畫布右上角的【收藏列表】-【基礎素材庫】中。

地圖或模型場景的【標記】【繪制】【交互】組件為本身已經視覺效果豐富的地圖或建筑場景，增添了更多交互上的層次細節。場景層還有動態粒子上浮的效果豐富細節，也由于整體細節較多，所以對于復雜模型場景的網頁加載相對較慢，很吃配置內存。

EasyV個人版 – 組件效果

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

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

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

森大屏基礎版 – 組件效果

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

但只細看【主題】組件，可以發現每套主題風格的整體性還是很強的，而且UI層結合三維場景來看，整體效果也相當出彩。比如【數字孿生平臺-矩陣革命】主題模板，或許參考了《黑客帝國：矩陣革命》，配色采用暗色調，黃綠色作為主題色，視覺裝飾上運用了很多“代碼雨”的元素，體現了酷炫的科技未來感。

4.1.3 拖入組件到畫布

通常來說，我們新建大屏頁面后，需要把適合的組件拖入到畫布中。如業務需求有一個產業 A 和 B 銷售量的5 年同比數據，那么就需要把一個柱形/折線圖組件拖入畫布中。

4.1.3.1、組件庫

4款工具的組件庫中，DataV和森大屏采用了垂直導航，Raydata和EasyV采用了水平導航。上篇已經解釋過結構層的分析了，不贅述。

DataV企業版試用 – 組件庫

可以發現DataV的【資產】(組件庫）位于畫布編輯器比較顯眼的位置，用戶很易覺察到它。通過拖拽左側組件到畫布，我們所見即所得的看到大屏搭建過程中的效果，交互前中后都十分流暢。

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

在【資產】左上角是資產選擇。可以選擇額外的資產，類似于電子游戲的拓展包、資料卡，部分需要付費購買。一般沒有特殊設計要求，官方資產已經足夠使用了。

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

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

Raydata Web專業版 – 組件庫

而Raydata的組件庫則是頂部導航，通過點擊頂部一級導航，向下展開二級導航菜單面板。不足之處是展開的面板已經幾乎占了畫布的一半，導致畫布空間利用率低，不得不通過再次折疊面板或向下滾動畫布來查看被遮擋區域。視覺方面雖如此，但在交互方面，在拖拽組件時，面板會立即消失，面板不遮擋畫布，那么上面提到的信息遮擋問題就通過交互設計手段避開了。

因為Raydata區分了【UI 層】和【場景層】，所以用戶在不同類型的圖層看到的組件庫菜單也會不同。【UI 層】的一級導航是圖表、形狀、文本、裝飾、按鈕、媒體、控件，【場景層】的一級導航是場景、模型、標記、繪制、數據、交互。

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

組件庫【場景層】的封面圖信息識別效率高。因為對于三維場景而言，能在通過二維圖片就能預想到拖拽到畫布時的畫面，能針對性且準確地提取關鍵元素，那么信息識別效率就自然提高了。

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

EasyV個人版 – 組件庫

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

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

可以降低用戶理解成本的是，組件庫里的部分組件封面圖是動態的，用戶能預知到將組件拖拽到畫布后的情況，立馬就有畫面感了，比起嚴肅的靜態圖，動態封面圖更有趣味和活力。

森大屏基礎版 – 組件庫

森大屏的組件庫與DataV同樣使用側邊導航，組件庫面板的面積相對比較大，消息容易感知，因為面板不方便折疊，因此比較占畫布位置。需要額外在頂部任務欄-視圖-左側面板勾選進行顯隱，也提供了快捷鍵。組件庫采用了 3 層導航結構，第 3 層是切換【我的】和【官方】，或許更強調的是用戶當前擁有的資產，但大部分場景是期望全部組件都展示出來，期望信息聚合且獲取高效的，當前顯然無法滿足。用戶需要切換 tab 才能得知具體細分組件中【我的】或【官方】的信息，冗余操作頻繁切換，導致操作低效。

比較獨特的是，組件庫的【孿生】關聯了其他子產品的內容，比如森園區、森城市、森展廳的模型場景，也就是說，如果用戶在其他子產品中擁有模型資產，就可以在森大屏中復用。

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

在【孿生】中的組件封面圖風格不一，有淺色風格也有暗黑風格。封面圖的概括提煉方面還待優化，目前信息識別效率相對低些，如通用標題封面，小圖看就是一塊藍色塊，不易識別具體是什么組件。

4.1.3.2 圖層

4款工具的圖層結構不同，其中 DataV 和 EasyV 結構近似，功能按鈕比較聚合，特殊的是，森大屏的圖層放在了左下方，比較隱秘，陌生的結構不易讓用戶發現。文案角度上，森大屏用大綱這個詞表達圖層，更近似寫作場景，而用于設計場景可能并不易讓用戶理解。

4.1.4、調整并定稿設計

調整定稿時用得最多的就是信息面板了，或者叫配置面板。用戶通過在信息面板中調整組件的參數，達到符合自己需求的目的，比如酷炫好看的樣式、滿足業務的動/靜態數據、符合邏輯的交互事件等。

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

DataV企業版試用 – 調整并定稿設計

DataV 的信息面板中設置數據源時，內容比較多，因此以覆蓋彈窗方式出現。為了展示更多信息，面板相應也變大些，那么信息獲取效率是提升了，但每次切換又得按多一次關閉按鈕的操作。雖然看似是很小一個動作，但信息面板是高頻操作區域，每增加一個冗余操作，對核心任務流程而言，累計起來無疑是個巨大的工作量。

Raydata Web專業版 – 調整并定稿設計

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

EasyV個人版 – 調整并定稿設計

EasyV 的信息面板在切換頂部tab時，依然是同樣的尺寸，因為信息比較緊湊聚合，看似功能就挺復雜的了，因為給到小白用戶看到密密麻麻的信息，可能會造成上手成本較高的風險。畢竟信息面板本身就是比較復雜且常用的功能，所以剛開始接觸新工具具有陌生感是正常的，EasyV 的做法是在樣式 tab 下的組件標題旁邊加了查看教程的跳轉鏈接，通過提供就近幫助，讓小白用戶快速上手，減少認知卡點，流暢完成核心任務。

森大屏基礎版 – 調整并定稿設計

森大屏和上面提到的 EasyV 類似，不過它更復雜些，頂部 tab 有 4 個，功能看起來就更臃腫復雜了，其中額外增加的是【動畫】，功能類似于 PPT 的進出場動畫效果，個人建議可并入到【交互】中，理由是它本身也屬于交互事件的一類。

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

4.2 分享導出

當完成大屏搭建后，用戶需要通過在線發布或本地導出來分享給需求方或業務方查看。當然大屏調整的過程中也需要頻繁用到【預覽】功能來預覽調整效果，因為該功能位置比較靠近【導出】功能，所以這里放在一起來講。

DataV企業版試用 – 分享導出

DataV 把【發布大屏】和【預覽大屏】功能都放在頂部任務欄的右上方區域。高頻功能放在用戶最易發現的位置，符合用戶認知。【預覽大屏】分為正常預覽和調試預覽，可能是為了信息降噪，于是選擇折疊在二級菜單。

Raydata Web專業版 – 分享導出

Raydata 與 DataV 的近似，其中，【預覽大屏】分為當前瀏覽器打開和新窗口打開的方式，可能因為右側功能不多，直接展示出來會更方便點擊。編輯器內無【發布大屏】功能，而放了【保存項目】功能，需要先保存項目后，在系統頁進行發布分享。

EasyV個人版 – 分享導出

EasyV 也與 DataV 的近似，只不過把【預覽大屏】與【發布大屏】功能位置交換了。按照 Z 型設計布局角度而言，用戶習慣是右上角區域閱讀同行信息時，采用從右到左的順序進行閱讀。那么，【預覽大屏】會被頻繁使用，應和 DataV 的做法那樣才合適，即左側【發布大屏】，右側【預覽大屏】。

森大屏基礎版 – 分享導出

森大屏與前面 3 款工具的做法都不同。因為頂部任務欄是類似 Win 系統的工具菜單占了一行，所以分享導出相關的功能都放在了畫布頂部菜單欄，它們包括了左側的【保存項目】，右側的【預覽大屏】和【發布大屏】。體驗比較友好的是，每次未保存狀態，【保存項目】的圖標的右上角會有一個藍色徽標，增強用戶感知，提醒用戶記得做保存操作。

4.3 設計亮點

談一談 4 款工具的設計亮點，這些差異點你是否有關注呢？或許就是吸引用戶初步接觸并持續使用的地方？

之所以在后面小結的【優點】旁邊補充【待改進】之處，是希望讀者保持理性思考的態度，能客觀綜合分析，這樣方便對 4 款工具產品形成一個整體認知。

4.3.1 DataV企業版試用 – 設計亮點

1、易感知原則

遷移至移動端預覽

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

移動端適配不同機型

在調整并定稿設計的環節中，我們需要用到大屏預覽功能。預覽移動端的大屏時，DataV 設計了不同機型讓用戶選擇，提供的常用機型可讓用戶預覽大屏效果時體驗更友好。假設只做了一個默認機型的適配，那么用戶看到的效果可能就會被裁剪了一部分，或者一部分數據太小或太大等適配效果不合適的問題。

2、交互操作便捷

移動端調整操作

在設計移動端大屏時，大屏觀眾一般是管理者角色。他們比較關心的是，快速閱讀大屏的指標和圖表數據，而視覺裝飾則是次要的。因此工具的用戶需要把關注點放在圖表和布局上，而移動端的調整寬度和排序布局功能很方便。用戶直接在畫布右側邊緣往水平方向拖拽，即可調整移動端大屏的寬度。用戶往垂直方向拖拽畫布中的元素，則可以快速排序元素的順序，從而改變整體的大屏布局。

另外，移動端大屏編輯過程中，大屏高度是自適應的，也就是說，畫布有多少元素，它就能手動給你撐開多少高度，用戶無需在畫布下方邊緣往垂直方向反復拖拽，減少冗余操作以提高調整效率。

導出到藍圖編輯器

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

另外，UE虛幻引擎常常也運用在本地部署的大屏設計中。使用UE虛幻引擎設計游戲交互時，也是分為兩種方式，用藍圖來拉線或者用代碼來編程來添加交互事件?？梢娝{圖功能對于添加交互邏輯而言能極大提高效率，它讓編程小白無需編程即可添加交互，它也幫助技術工程師輔助排查交互錯誤或代碼缺陷。

3、提高檢索效率

搜索配置

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

4、降低學習成本

智能識圖創建大屏

前面提到過 DataV 有 3 種創建大屏的方式，其中智能識圖創建大屏降低了用戶的上手成本和使用門檻。對用戶而言，這類智能化的功能，確實可降低用戶的學習成本。

組件文檔教程

對于小白用戶，組件不會使用時會產生焦慮的負面情緒。而 EasyV 在信息面板中的組件標題旁邊放入文檔教程入口，降低了用戶的學習成本。還有，就近提供幫助，用戶可高效獲取信息，更易找到教程入口。

系列視頻教程

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

小結1

優點：

1.功能模塊

有AI制圖功能，方便快速設計大屏原型；
有藍圖編輯功能，方便添加交互事件；

2.引導提示

藍圖編輯器進入時有引導提示，降低學習成本；
選中組件后配置面板有教程入口，降低學習成本;

3.交互視覺

編輯器面板能最大化隱藏，有效利用有限空間；
可框選操作，且框選組件時下方預覽窗會自動縮小體驗很好；
產品設計語言貼近科幻酷炫風格，尤其是系統頁的tab欄目的掃光效果和頂部banner輪播圖，全局刪除提示的漸變頂部線條、警告三角形圖標設計；

4.交互操作

畫布編輯器和藍圖編輯器模式的交互易切換；
有快捷拷貝/粘貼組件樣式功能，方便復用；
雙擊畫布的參考線可刪除，操作便捷；
刪除高頻操作可按del后按enter直接刪除；
移動端編輯器有“輔助框”顯示的開關，方便布局操作；
復雜藍圖編輯器支持單選和框選模式，點選模式按住comand照樣可多選；
詳情設置面板中的搜索配置功能，搜索結果可直接調整且可定位當前配置；

待改進：

1. 引導提示

刪除組件提示的文案過于臃腫；

2.交互視覺

刪除組件提示的文案過于臃腫；
配置面板內部分字段標題同時出現兩種氣泡提示，不一致導致易誤讀信息；

3.交互操作

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

4. 功能加載

首次進入系統頁加載不出頂部banner；

4.3.2 Raydata Web專業版 – 設計亮點

1、滿足多場景需求

圖表工作站

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

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

這個圖表工作站也相當于把核心任務流程進行了拆解，用戶更好的分工執行任務。還有，設計完成的定制圖表，很方便用戶高效復用。

場景工作站

不僅是圖表工作站，Raydata 還內置了場景工作站，它能高效定制三維場景。使用過After effects的插件E3D，或許會感覺界面很熟悉。界面結構主要分為 6 個模塊，分別是【節點列表】【檢查窗口】【材質設置】【資源庫】【場景】【場景工具欄】。

場景工作站方便用戶高度定制化自己的模型。用戶可以上傳模型，導入場景中，就可得到 Raydata 視覺風格的的模型場景了，因為內置的材質、貼圖、背景天空的效果都是十分獨特的。

2、交互操作便捷

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

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

3、功能靈活個性化

字體選擇器

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

小結2

優點：

1.功能模塊

有圖表工作站，方便制作圖表；
有模型場景工作站，方便制作場景；

2.交互視覺

圖表樣式有獨有的風格，令人印象深刻，如高低飽和度配色運用，線條粗細的運用；
三維模型場景的視覺效果不錯且獨特，如掃光、粒子動畫；
場景層組件的封面圖易理解，所見即所得；
區分【UI層】和【場景層】，避免畫布中誤點其他元素，造成干擾；

3.交互操作

撒點打標的交互易理解易操作，鼠標多次點擊即可在地圖上打標；
調整靜態【數據】有表格編輯方式，方便批量修改；

待改進：

1. 引導提示

缺少引導導致找不到場景圖層、資源庫；
官方模板案例難找到；
場景工作站的“透明度”與大屏編輯頁的“不透明度”文案不統一；

2. 交互視覺

隱藏操作后仍然能看到半隱藏的圖表組件，容易誤讀信息導致誤操作，以為可調整；
資源庫部分封面展示過大，有點浪費空間；
畫布無顯隱參考線，易造成信息干擾；

3. 交互操作

無法在畫布進行框選操作；
全屏操作設置的簡易導航、標尺點擊后無法用；
無法刪除單條參考線，只能全部刪除；
字體初始為“系統默認”，選擇其他字體后無恢復還原“系統默認”選項；
編輯頁內左上角無法返回首頁；
畫布右下角無預覽窗，不易了解畫布全貌；

4.功能加載

3D場景加載時比較慢，而加載完成后交互順暢；

4.3.3、EasyV個人版 – 設計亮點

1、降低設計門檻

豐富的素材資源社區

EasyV 有著成熟的素材資源社區，降低設計門檻，而且用戶積極參與創作，促進生產更多素材模板。

豐富的主題資源

資源庫的素材分為主題資源和設計素材，其中2D素材資源較多，面板上方有搜索功能，方便用戶快速定位目標素材。

2、交互操作便捷

拖拽圖層邊欄寬度

編輯器內的圖層面板可通過拖拽右側邊緣來調整邊欄寬度。當用戶使用小屏顯示器時，或是設計大屏過程中覺得窗口太小時，那么就可以把編輯器中次重要的圖層面板縮小面積，讓用戶專注在畫布區域有更大面積來設計大屏。

3、降低學習成本

組件文檔教程

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

小結3

優點：

1.功能模塊

有成熟的素材資源社區，降低設計門檻，而且用戶積極參與創作，促進生產更多素材模板；

2 引導提示

選中組件后配置面板有教程入口，降低學習成本；
下方縮放輸入負數時，會變為1%，異常狀態交互細節處理得好；

3.交互視覺

2D資源素材豐富，降低設計門檻；
編輯頁內左上方雙擊標題即可為大屏項目重命名；
編輯頁內左上角點擊按鈕可返回首頁，方便跳轉；
圖層面板右側可拖拽邊欄寬度；
調整靜態【數據】有表格編輯方式，方便批量修改；

待改進：

1.功能模塊

文本樣式的行距設置了也不管用；

2. 交互視覺

回收站內的元素圖標與文件夾圖標放一起有點違和；

3. 交互操作

組件庫缺乏就近搜索，雖然有全局搜索，但交互關聯度比較弱，而資源庫卻有就近搜索；
在資源庫中，通過拖拽的方式無法添加資源，只能點擊，并且與組件庫添加素材的鼠標手勢不統一；

4.3.4 森大屏基礎版 – 設計亮點

1、易感知原則

保存圖標徽標狀態

未保存狀態會在保存圖標右上角出現小圓點徽標，提醒用戶記得保存操作。當保存之后，小圓點才會從保存按鈕?；諛说慕换顟B可以增強用戶對保存狀態的感知。

2、交互操作便捷

官方模板快速布局大屏

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

三維場景預置濾鏡效果

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

3、降低學習成本

組件文檔教程

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

小結4

優點：

1.功能模塊

有藍圖編輯功能，方便添加交互事件；
有代碼二開功能，方便技術工程師組件做定制設計；

2.引導提示

未保存狀態會在保存圖標右上角出現小圓點徽標，提醒用戶記得保存操作；

3.交互視覺

右側組件的配置面板使用混合導航菜單，操作效率更高；
同一編輯器內，可編輯多張【圖層】（即大屏頁面），且區分【3D 圖層】和【圖層】，更精準操作；

4.交互操作

三維場景模板有預置濾鏡，方便快速預留效果；
頂部菜單與電腦端布局一致，遵循用戶習慣，降低學習成本；
調整靜態【數據】有表格編輯方式，方便批量修改；
有【布局塊】組件，且配有官方布局模板，方便快速布局大屏；

待改進：

1. 引導提示

【大綱】相對于【圖層】的文案更難理解；
左下角的【大綱】圖層功能的位置比較難找到；
【圖層】實際是大屏項目的多個頁面，用【圖層】文案易誤解信息，而【大綱】才是【圖層】；

2. 交互視覺

logo與編輯器內的主題色不一致，logo為綠，主題色為藍；
在暗色風格編輯器的場景下，【模型庫】的資源封面圖使用了淺色底色，視覺比較突兀；

3.功能加載

3D場景加載時比較慢；

4.4 其他

4.4.1 插畫圖標設計

DataV的情感化設計

DataV 的主插畫圖標始終以冷色調為主，扁平且光感強，足夠吸引用戶注意到它們。而一些表單場景的插畫圖標則選用扁平簡約的風格，整合后去看，樣式風格不夠統一，比如加載的樣式就有 2 種：DataV 的 logo 和 DNA 螺旋結構。扁平圖標的主色有的用偏青的藍，有的用偏深的藍。

情感化設計當然不僅是減少負面情緒和加深品牌印象，除此之外，主插畫圖標還提高了用戶獲許信息的效率，第一眼能關注到它們，調動起專注的情緒狀態，也有的圖標比如表單頁的圖標，突出功能性，用戶可通過圖形快速識別該視覺所傳達到信息含義，提升信息識別效率。

Raydata的情感化設計

對比 DataV 來看，Raydata 的缺省態圖標風格十分統一，都是形狀較方正、偏冷的中性色、扁平微漸變風格，表現看起來精致而不失細節。小圖標用到了扁平加投影的風格，增強立體感。

比較特別的是，大部分圖標使用了中性色，放在實際界面中存在感比較低，起到視覺點綴作用，這也正是它們存在的意義，不過分干擾用戶視覺，信息降噪，符合 Raydata 產品的設計語言，相比 DataV，Raydata 是簡約與柔和一體。

EasyV的情感化設計

EasyV的部分缺省態圖標配色上比較突出，有點且有用到正視圖也用到等距視圖，視覺上稍顯突兀且雜亂。也有部分缺省態圖標用到較暗的中性色，主要起到緩解用戶負面情緒而不過分突出視覺，在工具類產品定位中這樣的做法或許比較合適。

森大屏的情感化設計

森大屏的系統頁和編輯器頁的風格不夠統一，缺省態圖標大部分是重復的，站在技術開發角度而言，可以節省素材緩存資源，站在視覺體驗角度而言，則比較單調和隨意，也許當前產品階段不需把太多精力花在情感化設計上，而放在更重要的產品規劃上。

值得一提的是，加載的動態圖標是一顆綠色小樹開枝散葉，具有趣味性，減少用戶負面情緒，同時明確了森大屏的“森”的概念和加深了品牌印象。

4.4.2 彈窗文案設計

DataV的彈窗文案設計

DataV 的部分刪除彈窗文案略顯重復瑣碎，比如在一些選中較多數據的刪除場景下，用戶通過多選的方式選擇15個組件，那么點擊刪除會彈出刪除彈窗，彈窗的文案會寫著“XX組件、XX組件、XX組件等X個組件”的一大串文字，看著就感覺很復雜且低效。用戶不需要關注羅列出多少個組件，不必浪費時間閱讀一大串文字，當前需要的是立即馬上給我刪掉它。這不是一個高危警告，只需了解概況即可，無需知道所有瑣碎信息，因為即使誤刪了組件，也照樣可以撤銷，做回退操作。

因為文字多且密集的時候，用戶的閱讀效率就會降低。嘗試對DataV 更新組件彈窗的文案排版進行了修改，下方左右圖是修改前后對比。修改前的文案是一堆聚在一起的句子，缺少標題和分點，信息獲取低效。修改后的文案拆分標題，有利于用戶快速識別一段長文案的核心主題是什么。通過分點的方法，讓用戶明確閱讀順序，哪些是最重要的，哪些次之，哪些是輔助信息。

下面對 1 個版本不支持的彈窗和 3 個刪除彈窗也嘗試修改，通過拆分標題的方式，并且視覺上加大字號和加粗字重，拉開信息主次關系，提高信息識別效率。

Raydata的彈窗文案設計

Raydata 彈窗文案沒有太大問題，或許視覺樣式上不太統一和易用。

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

下面對 2 個刪除彈窗也嘗試修改，同 DataV 一樣，通過拆分標題的方式，并且視覺上樣式進行風格統一，加大字號和加粗字重，拉開信息主次關系，提高信息識別效率。

EasyV的彈窗文案設計

EasyV 彈窗文案未發現有問題之處，因為拆分了標題，并且重要信息也進行高亮處理，這樣做信息識別效率高些。

森大屏的彈窗文案設計

森大屏的彈窗樣式和文案都不太統一。尤其是文案方面，比如有的彈窗文案標題還寫了無意義的內容“信息”，再比如“確定刪除所選項目”這個疑問句是否感覺缺少一個“？”標點符號呢？再比如彈窗的陳述句文案是否有必要加“。”句號呢？

嘗試對購買成功的彈窗進行修改，換一個頂部狀態欄的樣式，也是森大屏的組件樣式中提取的，這樣即可言簡意賅的把提示展示出來。因為這個結果提示只起到一個持續通知的作用，不需要做決策，所以把“取消”刪除掉，“確定”按鈕作用不大，也可刪掉，剩余一個關閉按鈕即可，購買成功的結果提示可一直持續展示，直到用戶跳轉第三方平臺完成購買后，回到此界面才可手動點擊關閉。