藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.jghy.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

文章目錄

一、前言 —— 1.1 閱讀之前、1.2 調(diào)研背景、1.3 分享目的、1.4 術(shù)語說明
二、市場分析 —— 2.1 行業(yè)背景PEST、2.2 市場現(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 更多玩法
五、探索思考 —— 5.1 未來迭代、5.2 設(shè)計(jì)價(jià)值

一、前言

1.1 閱讀之前

閱讀提醒
1、文章上篇約10300字，閱讀時(shí)長約20分鐘。全文主要分享本人對當(dāng)下主流可視化大屏搭建工具的調(diào)研分析，淺談對可視化行業(yè)的探索思考。由于篇幅有限，閱讀體驗(yàn)更佳，故分為上下兩篇，上篇簡述可視化行業(yè)的市場分析，拆解分析主流工具（DataV、Raydata、EasyV、森大屏）的結(jié)構(gòu)層、框架層和表現(xiàn)層。下篇接著講主流工具（DataV、Raydata、EasyV、森大屏）的功能體驗(yàn)，淺談可視化行業(yè)未來的探索和思考。
2、文中的拆解分析部分，多款工具可能存在較多重復(fù)觀點(diǎn)，由于篇幅有限，故不再贅述。

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

1.2 調(diào)研背景

調(diào)研時(shí)間
2022年9~10月

調(diào)研方式
桌面研究、問卷調(diào)查

1.3 分享目的

首先，本次分享僅作為個(gè)人學(xué)習(xí)交流，文章觀點(diǎn)僅代表個(gè)人。目前比較少有可視化工具的產(chǎn)品分析，本次通過調(diào)研，希望了解更多可視化大屏工具的背景、知識(shí)，也希望能通過文章的形式，達(dá)成兩個(gè)分享目的：一、提升自身的復(fù)盤總結(jié)能力，鼓勵(lì)將知識(shí)沉淀后輸出分享；二、借此機(jī)會(huì)與更多行業(yè)相關(guān)者分享交流學(xué)習(xí)。

1.4 術(shù)語說明

數(shù)據(jù)可視化
關(guān)于數(shù)據(jù)視覺表現(xiàn)形式的科學(xué)技術(shù)研究。

數(shù)據(jù)可視化平合
它是大數(shù)據(jù)內(nèi)在價(jià)值的最終呈現(xiàn)手殷，它利用各類圖表、趨勢圖、視覺效果對數(shù)據(jù)進(jìn)行分析并展現(xiàn)，幫助用戶發(fā)現(xiàn)內(nèi)在規(guī)律、發(fā)掘深度規(guī)律、指導(dǎo)經(jīng)營決策。

大屏搭建工具
利用簡單拖拉拽、低代碼開發(fā)等方式，幫助非專業(yè)工程師快速實(shí)現(xiàn)炫酷大屏的數(shù)據(jù)可視化大屏效果的互聯(lián)網(wǎng)工具類產(chǎn)品。業(yè)務(wù)場景主要有行業(yè)可視化、智能終端、模擬演示、數(shù)據(jù)統(tǒng)計(jì)分析。

二、市場分析

在2011年左右，國內(nèi)帆軟公司研發(fā)簡單的可視化產(chǎn)品，起名“FineBI”，解決了用戶個(gè)性化的可視化分析的需求。隨著技術(shù)發(fā)展和行業(yè)趨勢發(fā)展，在滿足智能分析報(bào)表的基礎(chǔ)上，又迎來了更高的可視化大屏的挑戰(zhàn)，國內(nèi)如光啟元Raydata、阿里DataV等可視化大屏工具開始出現(xiàn)，各大廠商如京東、百度、網(wǎng)易有數(shù)等紛紛踏上可視化賽道，隨著近年的政策支持企業(yè)數(shù)字化轉(zhuǎn)型的浪潮下，可視化行業(yè)得以快速發(fā)展成熟，為企事業(yè)單位解決了一個(gè)又一個(gè)可視化分析難題……

本次調(diào)研經(jīng)過桌面研究，分析出近年來可視化行業(yè)背景和市場現(xiàn)狀。

2.1 行業(yè)背景PEST

從政策、經(jīng)濟(jì)、社會(huì)、技術(shù)這四個(gè)方面，分析數(shù)據(jù)可視化行業(yè)的背景，得出以下結(jié)論：

一、在政策方面，數(shù)據(jù)可視化行業(yè)受到政策扶持；

二、在經(jīng)濟(jì)方面，IT產(chǎn)業(yè)體系擴(kuò)大且成熟；
三、在社會(huì)方面，數(shù)據(jù)可視化解決企業(yè)痛點(diǎn)，機(jī)會(huì)點(diǎn)在政企和醫(yī)療行業(yè)；
四、在技術(shù)方面，企業(yè)通過數(shù)據(jù)可視化進(jìn)行精細(xì)化管理成為現(xiàn)實(shí)。

* PEST分析法 是對宏觀環(huán)境進(jìn)行分析，以便找到機(jī)會(huì)，認(rèn)清威脅與挑戰(zhàn)。所謂PEST，P是政治(Polotics)，E是經(jīng)濟(jì)(Economy）, S是社會(huì)(Society），T是技術(shù)(Technology)。這種方法就是將這4個(gè)元素分別寫在4個(gè)格子中，并羅列出這4個(gè)元素相關(guān)聯(lián)的與產(chǎn)品有關(guān)的環(huán)境因素，最后投票選出3~5個(gè)點(diǎn)子作為PEST分析的結(jié)果。 

P政策

中國相繼出臺(tái)多項(xiàng)政策（如《“十四五”大數(shù)據(jù)產(chǎn)業(yè)發(fā)展規(guī)劃》）重點(diǎn)扶持?jǐn)?shù)據(jù)采集、數(shù)據(jù)安全、數(shù)據(jù)處理、數(shù)據(jù)存儲(chǔ)及大數(shù)據(jù)在產(chǎn)業(yè)端的應(yīng)用等方面的快速提升，進(jìn)一步利好數(shù)據(jù)可視化平臺(tái)等相關(guān)細(xì)分產(chǎn)業(yè)的快速發(fā)展。

制定5個(gè)發(fā)展目標(biāo)、6大主要任務(wù)，明確大數(shù)據(jù)產(chǎn)業(yè)將步入“集成創(chuàng)新、快速發(fā)展、深度應(yīng)用、結(jié)構(gòu)優(yōu)化"的高質(zhì)量發(fā)展新階段設(shè)置數(shù)據(jù)治理能力提升、重點(diǎn)標(biāo)準(zhǔn)研制及應(yīng)用推廣工業(yè)大數(shù)據(jù)價(jià)值提升、行業(yè)大數(shù)據(jù)開發(fā)利用、企業(yè)主體發(fā)展能級(jí)躍升、數(shù)據(jù)安全鑄盾六個(gè)專項(xiàng)行動(dòng)。（參考來源：頭豹研究院）

E經(jīng)濟(jì)

2021全年國內(nèi)生產(chǎn)總值突破110萬億，GDP達(dá)114萬億元，按不變價(jià)格計(jì)算，比上年增長8.1%，兩年平均增長5.1%。

我國IT產(chǎn)業(yè)在經(jīng)歷了三十多年的發(fā)展后，已經(jīng)基本形成了產(chǎn)業(yè)規(guī)模龐大、專業(yè)門類齊全的IT產(chǎn)業(yè)體系，2020年我國IT支出達(dá)2.9萬億人民幣。

在應(yīng)用軟件領(lǐng)域百花齊放，2021年上半年我國軟件業(yè)完成軟件業(yè)務(wù)收入44198億元，同比增長23.2%；全行業(yè)實(shí)現(xiàn)利潤總額4999億元，同比增長13.6%。另外，對于云計(jì)算、大數(shù)據(jù)、物聯(lián)網(wǎng)、人工智能等新一代技術(shù)，我國也由單點(diǎn)向融合互動(dòng)不斷演進(jìn)。（參考來源：頭豹研究院）

S社會(huì)

數(shù)據(jù)可視化可有效解決企事業(yè)單位在傳統(tǒng)數(shù)據(jù)分析的痛點(diǎn)，降低了企業(yè)數(shù)據(jù)分析成本，助力企業(yè)在技術(shù)層、業(yè)務(wù)層、管理層及決策層等層面的決策能力。

受疫情影響，政務(wù)及醫(yī)療領(lǐng)域?qū)残l(wèi)生等等公共領(lǐng)域掌控力度加強(qiáng)，因此，中國數(shù)據(jù)可視化未來市場增長點(diǎn)將主要集中在政務(wù)及醫(yī)療衛(wèi)生領(lǐng)域。（參考來源：頭豹研究院）

T技術(shù)

伴隨著互聯(lián)網(wǎng)、物聯(lián)網(wǎng)快速發(fā)展，中國數(shù)據(jù)量持續(xù)增加，通過對數(shù)據(jù)的可視化處理及分析，企業(yè)端對日常精細(xì)化管理成為現(xiàn)實(shí)。

過去5年間，中國數(shù)據(jù)產(chǎn)生量快速增加ie中2017年的6ZB快速增加至2021年的16ZB。預(yù)計(jì)未來5年中國數(shù)據(jù)產(chǎn)生量將繼續(xù)增加，有望于2026年達(dá)到62ZB。（參考來源：頭豹研究院）

2.2 市場現(xiàn)狀

分為市場階段和市場規(guī)模，說明當(dāng)前數(shù)據(jù)可視化行業(yè)的市場現(xiàn)狀。結(jié)論如下：

一、國內(nèi)數(shù)據(jù)可視化平臺(tái)市場尚處于發(fā)展期，潛在市場容量非常巨大，前景廣闊；
二、預(yù)計(jì)未來5年國內(nèi)數(shù)據(jù)可視化平臺(tái)市場規(guī)?？焖僭黾?，復(fù)合增長率達(dá)32.5%。

市場階段

國外可視化展現(xiàn)平臺(tái)行業(yè)起步較早，市場相對成熟，消費(fèi)者認(rèn)可較高，而國內(nèi)可視化展現(xiàn)平臺(tái)行業(yè)市場還處于發(fā)展期，雖然2012年呈現(xiàn)出小爆發(fā)式增長，但市場尚不成熟，還有待于培育，然而國內(nèi)人口基數(shù)大，隨著國內(nèi)經(jīng)濟(jì)的發(fā)展，人民生活水平的提高，收入的增長，對精神生活方面的消費(fèi)也不斷增加，國內(nèi)潛在市場容量非常巨大，前景廣闊，因此，可視化展現(xiàn)平臺(tái)行業(yè)的發(fā)展將逐漸向本土化轉(zhuǎn)移。

當(dāng)前，中國數(shù)據(jù)可視化平臺(tái)行業(yè)尚處于發(fā)展早期，36.8%投融資事件主要發(fā)生在早期A輪階段，行業(yè)尚具有較大發(fā)展?jié)摿?。從地域分布情況來看，中國數(shù)據(jù)可視化企業(yè)主要分布于廣東省、北京市、上海市、江蘇省及浙江省等區(qū)域，約占總體的93.5%。當(dāng)前，中國數(shù)據(jù)可視化行業(yè)投融資較為活躍。其中約36.8%的企業(yè)處于A輪融資階段，2家企業(yè)已于新三板掛板，其中，觀遠(yuǎn)數(shù)據(jù)于2022年2月完成C輪融資，共計(jì)2.8億元。（參考來源：頭豹研究院）

市場規(guī)模

過去5年間，中國數(shù)據(jù)可視化平合市場快速增加，由2017年的13.2億元快速增加至2021年的43.8億元，復(fù)合增長率達(dá)27.1%。預(yù)計(jì)未來五年中國數(shù)據(jù)可視化平臺(tái)市場年復(fù)合增長率有望達(dá)到32.5%。（參考來源：頭豹研究院）

三、主流工具

根據(jù)上面的行業(yè)背景和市場現(xiàn)狀，從政策扶持、經(jīng)濟(jì)增長、社會(huì)機(jī)會(huì)點(diǎn)增加、技術(shù)革新、市場階段成熟、市場規(guī)模擴(kuò)大方面都是正向推動(dòng)著可視化行業(yè)的快速發(fā)展，于是，市面上逐漸出現(xiàn)了很多數(shù)據(jù)可視化大屏搭建工具，目的是有效解決企事業(yè)單位在傳統(tǒng)數(shù)據(jù)分析的痛點(diǎn)，助力企事業(yè)單位快速進(jìn)行數(shù)字化轉(zhuǎn)型，整合數(shù)據(jù)、提高數(shù)據(jù)展示效率及輔助管理決策。

3.1 調(diào)查篩選

經(jīng)桌面研究、問卷調(diào)查后，發(fā)現(xiàn)并整理出市面主流的數(shù)據(jù)可視化大屏搭建工具梯度說明。以工具滿意度、行業(yè)普及率、用戶量幾個(gè)維度來劃分梯度：

第一梯隊(duì)有阿里云DataV、騰訊RayData、袋鼠云易知微；

第二梯隊(duì)有騰訊Banber（現(xiàn)改名RayData Report）、山海鯨可視化、森工廠森大屏、51WORLD、華為云DLV；

第三梯隊(duì)有微兔可視化、ByteV中臺(tái)等。

*本次未歸入調(diào)研范圍內(nèi)：京東、百度、網(wǎng)易有數(shù)等廠商可視化產(chǎn)品，以及一些開發(fā)大佬的開源大屏工具
*使用騰訊問卷自發(fā)進(jìn)行問卷調(diào)查，主要渠道為微信群，有效樣本量較少，數(shù)據(jù)僅供參考

3.2 工具介紹

第一梯度的阿里云DataV、騰訊RayData、袋鼠云易知微的工具滿意度、行業(yè)普及率、用戶量綜合評(píng)分較高，還有第二梯度的森工廠森大屏對比其他競品產(chǎn)來說，產(chǎn)品形式不同，后面將以阿里云DataV、騰訊RayData、袋鼠云易知微、森工廠森大屏這4個(gè)工具產(chǎn)品來進(jìn)行體驗(yàn)分析。

調(diào)研版本：*阿里云DataV - 企業(yè)版試用 - V6.2； 騰訊RayData - Web版 - V2.6.0； 袋鼠云易知微EasyV - 個(gè)人版 - V5.1.0； 森工廠森大屏 - V2.10.11 。

*EasyV2022年12月上新了「節(jié)點(diǎn)管理」功能（類似DataV的「藍(lán)圖」功能) 會(huì)與本次調(diào)研版本有一定差異。
*由于阿里云DataV在調(diào)研后2023年UI進(jìn)行較大更新，所以會(huì)與本次調(diào)研版本有一定差異，更新日志傳送門：https://developer.aliyun.com/article/1127824?spm=5176.14082271.J_5834642020.1.42c74dcf64Y3FZ#slide-12

阿里云DataV

a.產(chǎn)品簡介
使用可視化應(yīng)用的方式來分析并展示龐雜數(shù)據(jù)的阿里云產(chǎn)品。其中DataV企業(yè)版試用是適合剛接觸DataV的新用戶，輕松搭建可視化大屏，匯報(bào)、客戶參觀必備。而DataV數(shù)據(jù)可視化企業(yè)版是開箱即用實(shí)時(shí)數(shù)據(jù)大屏搭建工具。

b.產(chǎn)品特點(diǎn)
智能識(shí)圖；藍(lán)圖節(jié)點(diǎn)編輯器；三維城市編輯器；BI分析組件

c.產(chǎn)品版本
企業(yè)版（本次調(diào)研）、專業(yè)版、尊享版

騰訊光啟元RayData

a.產(chǎn)品簡介
專注3D數(shù)據(jù)可視化原型設(shè)計(jì)。RayData Web是B/S架構(gòu)開發(fā)的網(wǎng)頁端可視化系統(tǒng)搭建工具，支持在線3D可視化編輯，輕松構(gòu)建商業(yè)級(jí)數(shù)字孿生項(xiàng)目。

b.產(chǎn)品特點(diǎn)
3D模型風(fēng)格獨(dú)特；圖表工作站；模型場景工作站；提供定制服務(wù)

c.產(chǎn)品版本
個(gè)人版、Web版（原名專業(yè)版，本次調(diào)研）、Plus版（私有化部署）

袋鼠云易知微EasyV

a.產(chǎn)品簡介：
數(shù)字孿生，EasyV是低成本無門檻上手?jǐn)?shù)據(jù)可視化大屏的工具，數(shù)據(jù)看板可視化，輕松設(shè)計(jì) 高效搭建。

b.產(chǎn)品特點(diǎn)：
素材資源豐富；資源社區(qū)氛圍好；提供定制服務(wù)

c.產(chǎn)品版本：
個(gè)人版（本次調(diào)研）、高級(jí)版、尊享版、運(yùn)行平臺(tái)（私有化部署）

UINO優(yōu)锘科技 森工廠森大屏

a.產(chǎn)品簡介：
拖拉拽搭建可視化大屏，內(nèi)置豐富模板和在線圖表開發(fā)工具

b.產(chǎn)品特點(diǎn)：
數(shù)字孿生工具鏈生態(tài)完善；藍(lán)圖節(jié)點(diǎn)編輯器；圖表工作站；提供建模服務(wù)

c.產(chǎn)品版本：
基礎(chǔ)版（本次調(diào)研）、專業(yè)版、高級(jí)版

3.3 分析模型

本次調(diào)研使用【用戶體驗(yàn)五要素】模型方法來分析主流工具DataV企業(yè)版試用、Raydata Web專業(yè)版、EasyV個(gè)人版、森大屏基礎(chǔ)版，主要側(cè)重在表現(xiàn)層、框架層、結(jié)構(gòu)層。

此處說明一下，例如本次調(diào)研的屬于功能型產(chǎn)品，那么功能型產(chǎn)品的結(jié)構(gòu)層側(cè)重于交互設(shè)計(jì)，通?？捎盟季S導(dǎo)圖、流程圖方式來說明情況。再往上看，功能型產(chǎn)品的框架層側(cè)重于信息設(shè)計(jì)、界面設(shè)計(jì)，大致模塊尺寸大小、位置擺放，通?？捎玫捅Ｕ嬖?、交互文檔來說明情況。到了模型最頂層，不論功能型還是信息型產(chǎn)品的表現(xiàn)層都是感知設(shè)計(jì)，關(guān)注視覺如何呈現(xiàn)，通常運(yùn)用形、色、字、質(zhì)、構(gòu)、動(dòng)著6個(gè)維度進(jìn)行整體視覺設(shè)計(jì)。

用戶體驗(yàn)五要素來自Jesse James Garrett 的《用戶體驗(yàn)要素》一書：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。 

3.4 結(jié)構(gòu)層

在結(jié)構(gòu)層中，DataV企業(yè)版試用、Raydata Web專業(yè)版、EasyV個(gè)人版、森大屏基礎(chǔ)版4款產(chǎn)品略有不同（且名稱叫法不一），整理總結(jié)出共性，產(chǎn)品包括系統(tǒng)頁和編輯器，系統(tǒng)頁下包括項(xiàng)目列表、資源管理、用戶管理、幫助中心，編輯器下包括頂部導(dǎo)航欄、組件庫、圖層面板、畫布區(qū)、信息面板。

為了更清晰了解4款產(chǎn)品的產(chǎn)品設(shè)計(jì)側(cè)重點(diǎn)，接下來，對比分析它們的結(jié)構(gòu)層。

3.4.1、DataV企業(yè)版試用產(chǎn)品 - 結(jié)構(gòu)層

關(guān)鍵詞：強(qiáng)調(diào)品牌感、幫助中心、靈活切換藍(lán)圖

DataV企業(yè)版試用分為系統(tǒng)頁+編輯器。系統(tǒng)頁頂部是輪播banner圖，強(qiáng)調(diào)品牌感和打造產(chǎn)品差異化。

系統(tǒng)頁主要包括我的可視化、我的數(shù)據(jù)、我的資產(chǎn)、教程，其中我的可視化包括3個(gè)創(chuàng)建入口，分別是PC創(chuàng)建、移動(dòng)端創(chuàng)建和識(shí)圖創(chuàng)建，滿足用戶在不同場景的使用需求。系統(tǒng)頁中教程層級(jí)放在一級(jí)菜單下容易被用戶發(fā)現(xiàn)，對小白用戶比較友好，快速觀看視頻教程。

編輯器中包含畫布編輯器和藍(lán)圖編輯器。進(jìn)入編輯器后，可切換畫布編輯器與藍(lán)圖編輯器，放在同一層級(jí)，方便用戶從畫布編輯器中添加圖層到藍(lán)圖編輯器中。

畫布編輯器（PC和移動(dòng)端基本一致）包括圖層、資產(chǎn)列表（資產(chǎn)包、組件庫）、工具欄、畫布、頁面設(shè)置、組件設(shè)置。藍(lán)圖編輯器包括導(dǎo)入節(jié)點(diǎn)、邏輯節(jié)點(diǎn)、工具欄、配置面板。

3.4.2、Raydata Web專業(yè)版產(chǎn)品 - 結(jié)構(gòu)層

關(guān)鍵詞：可視化統(tǒng)計(jì)、定位專業(yè)用戶、畫布占比大

Raydata Web專業(yè)版分為系統(tǒng)頁+編輯器。系統(tǒng)頁主要包括工程列表、資源管理、數(shù)據(jù)管理、權(quán)限管理。因?yàn)楫a(chǎn)品定位是專業(yè)版，所以弱化了幫助手冊的入口，同時(shí)編輯器中也是基于熟悉掌握工具的用戶而設(shè)計(jì)的。類比于Raydata Web個(gè)人版，系統(tǒng)頁的更多幫助入口更為明顯，適用于新手小白使用。

系統(tǒng)中的資源管理包括3D資源和2D資源，顯示資源數(shù)量，以環(huán)圖可視化的形式表現(xiàn)，系統(tǒng)中的權(quán)限管理也同樣顯示人員數(shù)量，數(shù)據(jù)統(tǒng)計(jì)一目了然。

編輯器中的大綱、概要與其他產(chǎn)品結(jié)構(gòu)不同，大綱包括系統(tǒng)UI層（放2D）、層級(jí)（放3D）、頁面（2D&3D），概要分不同情況而定，處于UI層時(shí)顯示2D組件，處于場景層時(shí)顯示3D組件。

畫布編輯器包括頂部欄（基礎(chǔ)功能、組件庫）、概要、大綱、畫布、頁面設(shè)置，頁面設(shè)置（畫布設(shè)置、組件設(shè)置）。其中組件庫折疊在頂部欄中，增大了編輯器中畫布的占比，讓用戶更關(guān)注當(dāng)前畫布操作。

3.4.3、EasyV個(gè)人版產(chǎn)品 - 結(jié)構(gòu)層

關(guān)鍵詞：素材資源、幫助中心、畫布占比大

EasyV個(gè)人版分為系統(tǒng)頁+編輯器。系統(tǒng)頁包括我的應(yīng)用、我的數(shù)據(jù)、終端交互（高級(jí)版有）、組件開發(fā)（尊享版有）、后臺(tái)管理、門戶管理（高級(jí)版有）、資源中心。

其中系統(tǒng)頁的資源中心包括應(yīng)用模板、設(shè)計(jì)素材、主題資源，有入口可跳往素材廣場，EasyV的素材資源十分豐富，該跳轉(zhuǎn)入口可以很好引導(dǎo)用戶去使用官網(wǎng)設(shè)計(jì)素材，輕松搭建大屏。幫助菜單位于常駐懸浮于系統(tǒng)頁側(cè)邊欄，其包括操作日志、幫助文檔、視頻教程、問答中心、版本日志，幫助菜單對于新手小白比較友好，操作路徑簡短，方便新手查閱幫助資料。

編輯器包括任務(wù)欄（基礎(chǔ)功能、組件、資源）、圖層、畫布、詳情設(shè)置（頁面設(shè)置、組件設(shè)置）。同Raydata Web專業(yè)版產(chǎn)品，其中組件庫折疊在任務(wù)欄中，增大了編輯器中畫布的占比，讓用戶更關(guān)注當(dāng)前畫布操作。

3.4.4、森大屏基礎(chǔ)版產(chǎn)品 - 結(jié)構(gòu)層

關(guān)鍵詞：工具鏈、模板推薦、藍(lán)圖和代碼二開

森大屏基礎(chǔ)版分為系統(tǒng)頁+編輯器。森大屏的結(jié)構(gòu)和其他產(chǎn)品不同，由于數(shù)字孿生工具鏈生態(tài)比較完善，打通其他工具鏈入口（森工廠旗下有低代碼、零代碼、森大屏、森城市、森園區(qū)、森展廳、森拓?fù)?、森?shù)據(jù)、森模型等），所以系統(tǒng)頁頂部導(dǎo)航菜單可快速切換工具。

系統(tǒng)頁包括了個(gè)人中心、幫助手冊、我的大屏、推薦大屏（模板），側(cè)重展示推薦大屏，引導(dǎo)用戶優(yōu)先選用模板進(jìn)行大屏快速搭建，生產(chǎn)提效。

編輯器包括大綱、工具欄、畫布、畫布屬性、資源管理、菜單欄、資源中心、藍(lán)圖和代碼二開。編輯器中與DataV不同的是，藍(lán)圖、代碼與畫布位于同一層級(jí)，用戶可隨時(shí)使用藍(lán)圖來鏈接交互事件，也可進(jìn)行代碼二次開發(fā)操作。

3.5 框架&表現(xiàn)層

將4款產(chǎn)品的框架層和表現(xiàn)層進(jìn)行拆解分析。

在框架層中，大體而言按鈕、輸入框等控件圓角較小，看起來比較方正，弧線的異形設(shè)計(jì)，容易體現(xiàn)科幻造型。在登錄頁中，頁面布局各有差異。在編輯器中的布局大體一致，畫布都位于界面中心，強(qiáng)調(diào)用戶最關(guān)注大屏設(shè)計(jì)的畫布區(qū)域。高頻操作的組件庫在頁面的位置各有差異。

在表現(xiàn)層中，主要通過形、色、字、質(zhì)、構(gòu)、動(dòng)這6個(gè)維度來進(jìn)行對比分析。DataV企業(yè)版試用、Raydata Web專業(yè)版、EasyV個(gè)人版、森大屏基礎(chǔ)版4款產(chǎn)品的整體視覺調(diào)性都是以暗色、科幻風(fēng)格為主。登錄頁都選擇了亮色風(fēng)格界面，系統(tǒng)頁和編輯器都是暗黑風(fēng)格。部分產(chǎn)品品牌字體以直線為主并加入弧線和粒子元素，科幻的界面動(dòng)效主要體現(xiàn)在加載頁面。

3.5.1、登錄頁拆解 - 框架&表現(xiàn)層

阿里云（DataV企業(yè)版試用）- 登錄頁

DataV 的登錄頁統(tǒng)一由阿里云登錄頁進(jìn)入。以中心布局（核心面板偏右），三維模型+灰色背景+線條點(diǎn)綴的形式進(jìn)行設(shè)計(jì)，主題色是阿里的橙色。因?yàn)镈ataV是阿里云旗下的產(chǎn)品，共用入口，所以此處沒做額外的產(chǎn)品登錄頁以強(qiáng)調(diào) DataV 產(chǎn)品一致的品牌感。

Raydata Web專業(yè)版 - 登錄頁

Raydata Web 登錄頁以中心布局的形式，無其他設(shè)計(jì)元素，只保留關(guān)鍵信息，同其他競品相比略顯單調(diào)。登錄頁的淺色風(fēng)格與進(jìn)入系統(tǒng)頁和編輯器的暗黑風(fēng)格，缺乏界面整體色調(diào)的一致性。界面控件主題色使用藍(lán)紫漸變色，與系統(tǒng)頁和編輯器的藍(lán)色也略有差異。（可從Raychart產(chǎn)品使用手冊發(fā)現(xiàn)，舊版布局為同EasyV）

EasyV個(gè)人版 - 登錄頁

EasyV 的登錄頁有2處觸發(fā)，常規(guī)觸發(fā)和資源中心觸發(fā)，分別以左右布局的全頁和彈窗形式進(jìn)行框架設(shè)計(jì)。彈窗的形式不需額外跳轉(zhuǎn)，讓用戶在資源中心挑選素材時(shí)能更快進(jìn)行登錄操作。登錄頁以左右布局的形式，插圖與登錄模塊大致各占50%，深色插圖的和淺色登錄模塊的兩個(gè)色塊形成強(qiáng)烈視覺對比，更能吸引用戶注意。

森工廠（森大屏基礎(chǔ)版) - 登錄頁

森大屏的登錄頁以中心布局的形式，有利于聚焦視覺，背景使用簡約抽象的形狀來點(diǎn)綴畫面。灰色背景+抽象圖形點(diǎn)綴，與淺色登錄模塊拉開視覺對比。按鈕主題色是橙色，是因?yàn)樯笃潦莾?yōu)锘科技森工廠旗下的產(chǎn)品，共用入口，所以此處沒做額外的產(chǎn)品登錄頁以強(qiáng)調(diào)森大屏產(chǎn)品一致的品牌感。

3.5.2、系統(tǒng)頁拆解 - 框架&表現(xiàn)層

DataV企業(yè)版試用 - 系統(tǒng)頁

頂部輪播圖占整個(gè)頁面四分之一左右，強(qiáng)調(diào)品牌感同時(shí)打造產(chǎn)品差異化，Banner內(nèi)容為統(tǒng)一風(fēng)格的3D模型場景+無襯線字體標(biāo)題為主，一級(jí)導(dǎo)航邊緣弧線的流光動(dòng)效表現(xiàn)科幻酷炫風(fēng)格。

一級(jí)導(dǎo)航欄與輪播圖的重疊關(guān)系，半透的玻璃質(zhì)感，仿佛是用戶透過一層玻璃，打開可視化世界的大門，結(jié)合暗黑風(fēng)格的界面，給用戶一種進(jìn)入游戲的沉浸感、躍躍欲試的沖動(dòng)。縱向與橫向結(jié)合的混合導(dǎo)航，對于后期有規(guī)劃新功能而言，拓展性較強(qiáng)，缺點(diǎn)是占用面積大、交互路徑長，適用于大屏項(xiàng)目數(shù)不多的情況下，若項(xiàng)目數(shù)量較多，可能有空間不夠的焦慮。

我的可視化中的3個(gè)創(chuàng)建入口按鈕使用了扁平加光感強(qiáng)、冷色調(diào)風(fēng)格插畫，引起用戶注意，快速識(shí)別創(chuàng)建功能入口。主題色使用比較鮮艷活躍的藍(lán)色，輔助色為青色，占用面積不多，起到豐富點(diǎn)綴畫面的作用。設(shè)計(jì)元素的四周輪廓不做圓角處理，顯得整體界面比較方正端正、硬朗嚴(yán)肅的印象。

Raydata Web專業(yè)版 - 系統(tǒng)頁

左上方展示品牌Logo，清晰寫明當(dāng)前產(chǎn)品及版本，符合用戶認(rèn)知。品牌元素融入進(jìn)頂部欄右側(cè)頭像及皇冠圖標(biāo)，加深品牌印象。

以側(cè)邊懸浮導(dǎo)航的形式使用戶快速定位查找功能模塊的位置，拓展性較強(qiáng)，以較瓷片“大包小”的結(jié)構(gòu)，聚合了較多功能模塊，如果是小分辨率屏幕的情況下，經(jīng)常要鼠標(biāo)輪滑來回滾動(dòng)才可看到下方功能模塊，導(dǎo)致不夠靈活高效。側(cè)邊導(dǎo)航模塊中的圖標(biāo)統(tǒng)一為形狀較方正、偏冷的中性色、扁平微漸變風(fēng)格。敬請期待的藍(lán)色沙漏圖標(biāo)在界面中略微突兀出，缺少圖標(biāo)風(fēng)格一致性。

界面為偏冷中性純色，無背景裝飾，同登錄頁只保留關(guān)鍵信息（如大屏項(xiàng)目卡片），不加過多裝飾的簡約風(fēng)格調(diào)性保持一致。按鈕主題色使用比較灰的藍(lán)色，透出沉穩(wěn)柔和的調(diào)性。設(shè)計(jì)元素的四周輪廓略微加了些圓角，同DataV硬朗的感覺則稍微緩和一些。

EasyV個(gè)人版 - 系統(tǒng)頁

上方展示品牌Logo，同Raydata，不再贅述。對于創(chuàng)建大屏按鈕而言，DataV用的是插畫按鈕的形式，Raydata是用卡片按鈕的形式，而EasyV則用圖文按鈕的形式，而圖文按鈕的優(yōu)點(diǎn)是占用面積少。

同DataV，選用了縱向與橫向結(jié)合的混合導(dǎo)航，拓展性較強(qiáng)，不再贅述。二級(jí)導(dǎo)航底部使用了動(dòng)態(tài)插圖點(diǎn)綴界面，插圖是不斷旋轉(zhuǎn)的科幻裝置，角度帶有透視，讓扁平的整體界面附帶了層次感、空間感。右側(cè)側(cè)邊菜單的幫助圖標(biāo)提供給用戶快捷操作，對新手小白友好。

缺省頁運(yùn)用情感化設(shè)計(jì)，以2.5d插圖的表現(xiàn)形式緩解用戶負(fù)面情緒，配色在深色界面中顯得比較明顯，個(gè)人認(rèn)為可以適當(dāng)弱化插畫亮色部分。主題色使用鮮艷活躍的藍(lán)色為主，在深色的界面中同樣相對明顯、突出。設(shè)計(jì)元素的四周輪廓既有全圓角，也有小圓角，界面形狀統(tǒng)一性待加強(qiáng)。

森工廠（森大屏基礎(chǔ)版) - 系統(tǒng)頁

左上方展示品牌Logo，同Raydata，不再贅述。由于是森工廠旗下的工具鏈，所以森大屏的系統(tǒng)頁頂部欄可進(jìn)行工具切換，界面左右兩側(cè)留白很多、版心小、淺色風(fēng)格，讓整體界面更像是一個(gè)前臺(tái)官網(wǎng)的印象。

使用了像是混合導(dǎo)航的方式，用“像”這樣表達(dá)是因?yàn)?，頂部欄是工具切換欄，而側(cè)邊懸浮導(dǎo)航1竟然是所有工具的個(gè)人中心，側(cè)邊懸浮導(dǎo)航2卻是當(dāng)前工具森大屏的資源中心，右側(cè)內(nèi)容區(qū)是當(dāng)前工具森大屏的我的大屏、推薦大屏模塊?？蚣苌嫌幸欢ǔ潭炔惶嫌脩粽J(rèn)知，導(dǎo)致引起疑惑和誤解。盡管如此，配色上使用橙色（森工廠）和具體工具主題色來區(qū)分當(dāng)前位置，能一定程度防止用戶混淆概念，通過多次在頂部欄切換工具，可預(yù)知上面提到的導(dǎo)航1是指所有工具而言的，而導(dǎo)航2則是指當(dāng)前具體工具而言。

右側(cè)側(cè)邊菜單提供用戶快速反饋的入口，簡單便捷。其中側(cè)邊菜單的問號(hào)圖標(biāo)與頂部欄的一樣，跳轉(zhuǎn)鏈接一致，而文案卻使用了“常見問題”和“幫助中心”2種，重復(fù)功能入口也許考慮的是為了增加點(diǎn)擊，而同個(gè)界面重復(fù)堆放功能入口的合理性還有待考究。圖標(biāo)使用了毛玻璃和線性圖標(biāo)的表現(xiàn)手法，為界面提升質(zhì)感。設(shè)計(jì)元素的四周輪廓加了小圓角，整體給人的感覺更為親切、友好。

3.5.3 編輯器拆解 - 框架&表現(xiàn)層

DataV企業(yè)版試用 - 畫布/藍(lán)圖編輯器

整體暗黑風(fēng)格的界面下，能使得用戶設(shè)計(jì)深色風(fēng)格的可視化大屏?xí)r，保持更專注的狀態(tài)。題外話，DataV新版本的編輯器界面可切換有淺色風(fēng)格，同理，淺色編輯器界面則更適合在設(shè)計(jì)淺色風(fēng)格的大屏的場景。通過不同深色色階的背景色塊讓每個(gè)功能模塊的框架位置區(qū)分得清晰明了，另外整體配色、形狀方面都遵循視覺呈現(xiàn)一致性，降低用戶認(rèn)知成本。

在編輯器左上方無退回系統(tǒng)頁的返回按鈕，用戶只能通過切換瀏覽器標(biāo)簽頁回看系統(tǒng)頁，而無法在當(dāng)前頁返回上一層級(jí)回到系統(tǒng)頁，所以對于想要快速返回上層的場景下，則顯得不那么便捷。頂部欄左側(cè)的畫布編輯器與藍(lán)圖編輯器選項(xiàng)按鈕歸于一組符合用戶認(rèn)知，可快速切換當(dāng)前編輯器進(jìn)行大屏視覺設(shè)計(jì)或鏈接交互事件。畫布編輯器和藍(lán)圖編輯器的畫布外區(qū)域保持視覺統(tǒng)一，使用了點(diǎn)平鋪的背景與畫布做出層次區(qū)分。

右側(cè)的屬性面板中展示組件的配置功能，當(dāng)信息較多時(shí)，用視覺較弱的分割線區(qū)分每組的配置信息，數(shù)據(jù)之間比較緊湊，提高面積利用率。編輯器中多處的功能組使用了格式塔原則的接近性，讓距離更近的功能組更有關(guān)聯(lián)性，層次清晰有序，降低用戶認(rèn)知成本。

圖標(biāo)表現(xiàn)方式只使用了單色線性圖標(biāo)一種，讓整體界面表現(xiàn)得更簡潔、輕量化，忽略圖標(biāo)形狀而讓用戶更多去關(guān)注功能。配色、圓角遵循視覺呈現(xiàn)一致性，當(dāng)功能被選中時(shí)，會(huì)以藍(lán)色背景、圖標(biāo)反白的方式強(qiáng)調(diào)該功能的狀態(tài)、位置。

Raydata Web專業(yè)版 - 編輯器

同DataV，暗黑風(fēng)格界面，不同深淺色塊背景區(qū)分功能模塊，且界面左上方無退回系統(tǒng)頁的返回按鈕，不太便捷，不贅述。

大綱與概要類似于頁面與圖層的關(guān)系，像設(shè)計(jì)軟件Figma的Page（頁面）與Layer（圖層），大綱與概要位于界面左側(cè)的區(qū)分上下模塊，框架從上至下擺放，符合用戶認(rèn)知。對于新手小白，還需額外查看教程引導(dǎo)才能認(rèn)知大綱與概要的框架，因?yàn)榇税姹径ㄎ粸閷I(yè)版，所以弱化了幫助指引，簡化界面，讓專家級(jí)用戶更沉浸地、不受過多干擾地使用。

組件庫位于頂部，占用面積小，前面結(jié)構(gòu)層提過，作用是增大了畫布占比，讓用戶更專注設(shè)計(jì)，不贅述。

圖標(biāo)表現(xiàn)方式使用了單色面性圖標(biāo)和微漸變扁平投影圖標(biāo)，界面頂部是組件庫，這些微漸變圖標(biāo)呼應(yīng)了系統(tǒng)頁同樣使用了為漸變風(fēng)風(fēng)格。為了強(qiáng)調(diào)組件庫這種用戶高頻操作區(qū)域，使用了更吸引用戶注意力的微漸變扁平投影圖標(biāo)，而其他區(qū)域則使用單色面性圖標(biāo)，弱化視覺，讓界面輕量化，讓用戶更多去關(guān)注功能。同DataV，同樣使用格式塔原則的接近性，層次清晰，降低認(rèn)知成本，不贅述。

配色、圓角遵循視覺呈現(xiàn)一致性，當(dāng)功能被選中時(shí)，會(huì)以藍(lán)色背景、圖標(biāo)反白的方式強(qiáng)調(diào)該功能的狀態(tài)、位置。

EasyV個(gè)人版 - 編輯器

與其余3款工具不同，EasyV在編輯器左上方有退回系統(tǒng)頁的返回按鈕，方便用戶快速返回上層的系統(tǒng)頁。

同Raydata，組件庫位于頂部任務(wù)欄中，占用面積小，前面結(jié)構(gòu)層提過，作用是增大了畫布占比，讓用戶更專注設(shè)計(jì)，不贅述。

圖標(biāo)表現(xiàn)方式使用了單色微漸變線性圖標(biāo)，部分圖標(biāo)線細(xì)節(jié)還用半透明效果，而部分則用了不透明度漸變的方式，提升圖標(biāo)質(zhì)感，讓整體界面輕量化而不至于過于單調(diào)。配色、圓角遵循視覺呈現(xiàn)一致性，降低用戶認(rèn)知成本。

森工廠（森大屏基礎(chǔ)版) - 編輯器

同DataV，暗黑風(fēng)格界面，不同深淺色塊背景區(qū)分功能模塊，且界面左上方無退回系統(tǒng)頁的返回按鈕，不太便捷，不贅述。
編輯器的任務(wù)欄設(shè)計(jì)類似本地客戶端軟件的頂部菜單欄，通用的“文件、編輯、視圖、排列、圖表、調(diào)試、幫助”菜單都放在了頂部任務(wù)欄，符合用戶交互習(xí)慣，缺點(diǎn)占用面積較大。

與Raydata結(jié)構(gòu)一樣，同樣有類似設(shè)計(jì)軟件Figma的Page（頁面）與Layer（圖層）的關(guān)系，森大屏把圖層放在畫布底部欄，而大綱放在組件庫的左下角位置?？赡芸紤]不占用過多面積而折疊在左下角，但缺點(diǎn)也很明顯，層級(jí)較深，難以找到大綱中的畫布元素，對新手小白不太友好。通過畫布底部欄切換圖層，這里圖層也是分2D和3D，還可設(shè)置圖層為全局圖層，即預(yù)覽大屏?xí)r跳轉(zhuǎn)任何地方都始終顯示該圖層，可減少重復(fù)勞動(dòng)設(shè)計(jì)。

藍(lán)圖和代碼二開也位于畫布底部區(qū)域，同DataV，森大屏也有藍(lán)圖功能。底部有藍(lán)圖和代碼二開的切換按鈕，方便用戶鏈接交互事件和調(diào)試二改組件的時(shí)候，不完全遮擋畫布，讓用戶更易感知當(dāng)前所處位置和狀態(tài)，無需來回切換頁面而增加操作成本。

界面圖標(biāo)表現(xiàn)方式同DataV，只使用了單色線性圖標(biāo)，讓整體界面表現(xiàn)得更簡潔、輕量化，不贅述。畫布外區(qū)域使用了點(diǎn)平鋪的背景與畫布做出層次區(qū)分。

上篇小結(jié)

上篇簡述可視化行業(yè)的市場分析，了解到國家政策如《“十四五”大數(shù)據(jù)產(chǎn)業(yè)發(fā)展規(guī)劃》大力支持可視化行業(yè)的發(fā)展，可視化行業(yè)解決企業(yè)痛點(diǎn)，助力企事業(yè)單位進(jìn)行數(shù)字化轉(zhuǎn)型。隨著數(shù)據(jù)可視化行業(yè)的發(fā)展，可視化報(bào)表分析工具逐漸衍生出更利于輔助分析的可視化大屏工具，隨后進(jìn)行桌面研究、問卷調(diào)查后，篩選出4款主流工具（DataV、Raydata、EasyV、森大屏），分別對它們的結(jié)構(gòu)層、框架層和表現(xiàn)層進(jìn)行拆解分析。

設(shè)計(jì)師在了解和體驗(yàn)工具型產(chǎn)品時(shí)，也要對其行業(yè)有一定的思考，這樣更有利于了解業(yè)務(wù)、用戶以及產(chǎn)品。下篇接著講主流工具（DataV、Raydata、EasyV、森大屏）的功能體驗(yàn)，淺談可視化行業(yè)未來的探索和思考。

那么，下篇再見！

前言

有許多小伙伴經(jīng)常會(huì)有這種疑問，我做的可視化設(shè)計(jì)為什么按著需求做了，可是為什么畫面卻被吐槽空，太簡單，不夠炫。因?yàn)樵诳梢暬I(lǐng)域會(huì)經(jīng)常存在誤區(qū)，要把他們跟平面或者UI區(qū)分開，拆解開來講?？梢暬I(lǐng)域所注重的小伙伴們一定不陌生：字要大，顏色多一點(diǎn)，要酷炫，要科技感。沒錯(cuò)這就是老板口中的設(shè)計(jì)，但并不否認(rèn)，這些點(diǎn)都說在了可視化的關(guān)鍵點(diǎn)上，但是想要更了解可視化如何制作，我們需要從以下幾個(gè)方面去解讀數(shù)據(jù)可視化。

1. 畫面裝飾線

靈活運(yùn)用點(diǎn)線面構(gòu)成（可以單獨(dú)去找一下三大構(gòu)成中的平面構(gòu)成內(nèi)容），科技感線條，不可太過顯眼而喧賓奪主，只求使畫面豐富，透氣，不影響整體畫面效果。

下圖就是我選用的一種畫面裝飾線，并通過點(diǎn)線面等元素來設(shè)計(jì)成的一個(gè)畫面

2. 模塊邊框

邊框的樣式很大程度決定了畫面的整體協(xié)調(diào)性，在邊框融入整體畫面的時(shí)候，要考慮到與主視覺的協(xié)調(diào)性。一般邊框的顏色可以根據(jù)主視覺所展現(xiàn)出來的色彩傾向，從而進(jìn)行選擇，最大程度上保持協(xié)調(diào)統(tǒng)一。

3. 分級(jí)邊框

分級(jí)邊框可以很大程度上切割大的模塊，獨(dú)立的同時(shí)融于整體。由各種方塊分割，同時(shí)選取最適合畫面的切割比例。（大框套小框）

4. 主視覺彈框

主要包括：主視覺撒點(diǎn)，地圖彈框，主視覺數(shù)字指標(biāo)，以及懸浮于地圖之上的分級(jí)菜單以及圖例。

1. 圖表的使用方式

文字加數(shù)字，文字是數(shù)字的描述，數(shù)字是對文字的統(tǒng)計(jì) （可以著重展示數(shù)字，數(shù)字大，文字小，一般可以上下結(jié)構(gòu)，或者結(jié)合圖形，特殊情況特殊對待）

凡是出現(xiàn)對比，占比或者其他需要做對比的東西，一般推薦用餅圖

出現(xiàn)多條數(shù)據(jù)，多個(gè)維度，多角度進(jìn)行比較的時(shí)候，一般推薦用柱狀圖（包含柱折圖），出現(xiàn)趨勢，走勢等字眼時(shí)，一般采用折線圖。

2. 圖表的表現(xiàn)形式

例：描邊，描邊可以虛線，虛線可以調(diào)整間距，間距可以調(diào)圓角和直角。

例：發(fā)光，發(fā)光可以外發(fā)光，可以內(nèi)發(fā)光。

例：漸變，漸變可以線性漸變，角度漸變，鏡像漸變。

例：填充，可以漸變填充，可以純色填充，可以填充有透明，透明度沒有透明。

3. 圖表的組件化

在你嘔心瀝血做完一兩個(gè)圖表的時(shí)候，如果想讓他有更多的同風(fēng)格的東西，就好比做字體設(shè)計(jì)一樣，所有字體都要寫完，才是一套完整的，所以需要提煉該“字體”的細(xì)節(jié)，或者說是與正常字體不同的地方，提煉出他的特殊樣式，再運(yùn)用到其他的圖表當(dāng)中去，這個(gè)從0到1的過程，我把它叫做組件化的過程。在你多做了幾套組件的時(shí)候，就會(huì)覺得圖表可以千變?nèi)f化，但你還是能夠知道他是怎么利用基礎(chǔ)圖形變形而來的?？炊嗔耍龆嗔?，網(wǎng)上看到好看的圖表，一眼就能提煉出他的特殊點(diǎn)，再運(yùn)用組件化思維，真正的化為己用。

再教大家一個(gè)方法，設(shè)計(jì)出一套組件的時(shí)候，只有運(yùn)用到項(xiàng)目中，實(shí)現(xiàn)出來，才是一個(gè)成功的商業(yè)組件化過程（我自己做項(xiàng)目就是，看到好的設(shè)計(jì)，我下次做項(xiàng)目怎么我都要用上去）。此處指的不是抄襲，而是提煉不同點(diǎn)，運(yùn)用到自己的組件中。

找出所有圖表的共性

區(qū)分不同圖表的差異性

結(jié)合基礎(chǔ)組件，去變形，去豐富

了解組件的顏色以及風(fēng)格，去運(yùn)用

拓展文字排版，地圖樣式

拓展撒點(diǎn)，以及彈框

布局及優(yōu)化

在布局的時(shí)候，挑選合適的布局方式，需要考慮到字段的長短，圖表的寬窄，圖標(biāo)的大小，以及畫面的平衡，需要提前進(jìn)行布局（就跟繪畫構(gòu)草圖一個(gè)道理）。

找出問題

1. 標(biāo)題與logo沒有形成好的聯(lián)系

2. 指標(biāo)數(shù)字類的東西，沒有與地圖關(guān)聯(lián)，比較分散

3. 地圖主視覺表現(xiàn)內(nèi)容太少，空洞

4. 文字區(qū)域示意不明，圖表？地圖內(nèi)容？

5. 整體布局不和諧，各處模塊太分散

6. 畫面裝飾無法連接各個(gè)模塊

解決問題

1. 標(biāo)題與LOGO之間要建立聯(lián)系

2. 將指標(biāo)類的數(shù)字通過主視覺結(jié)合起來

3. 豐富地圖區(qū)域，增加表現(xiàn)形式

4. 文字區(qū)域單獨(dú)模塊，獨(dú)立又與主視覺有聯(lián)系

5. 優(yōu)化整體布局，添加邊框，豐富模塊

6. 調(diào)整畫面裝飾，與模塊結(jié)合

視覺差異性

在設(shè)計(jì)的過程中我們經(jīng)常會(huì)遇到一個(gè)模塊的內(nèi)容（一個(gè)畫面），兩個(gè)或者多個(gè)都是同樣的數(shù)據(jù)或者需求（或者同樣的圖表），這就要求我們在設(shè)計(jì)的過程中有變化可循，那么該如何解決此類問題呢？

1. 可以通過不同的表現(xiàn)方式來進(jìn)行區(qū)分，兩個(gè)或者多個(gè)情況時(shí)，可以通過改變一些輕微的東西，來使之具有差異性，同時(shí)又有統(tǒng)一的風(fēng)格。

2. 兩個(gè)或者多個(gè)的情況下，該處區(qū)域只夠展示一個(gè)，但又必須展示，可以通過tab列表的方式，或者做切換等方式（例如柱狀圖時(shí)，x軸顯示不完時(shí)，可以做個(gè)x軸滑動(dòng)功能）。

在同一個(gè)畫面里有同一個(gè)類型的圖表時(shí)（比如兩個(gè)餅圖），盡可能地不要讓這兩個(gè)餅圖靠近顯示，盡量互相遠(yuǎn)離，在數(shù)據(jù)導(dǎo)入的情況下，一左一右，呼應(yīng)的同時(shí)又統(tǒng)一。