一、前言 —— 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 更多玩法
五、探索思考 —— 5.1 未來(lái)迭代、5.2 設(shè)計(jì)價(jià)值
閱讀提醒
1、文章上篇約10300字，閱讀時(shí)長(zhǎng)約20分鐘。全文主要分享本人對(duì)當(dāng)下主流可視化大屏搭建工具的調(diào)研分析，淺談對(duì)可視化行業(yè)的探索思考。由于篇幅有限，閱讀體驗(yàn)更佳，故分為上下兩篇，上篇簡(jiǎn)述可視化行業(yè)的市場(chǎng)分析，拆解分析主流工具（DataV、Raydata、EasyV、森大屏）的結(jié)構(gòu)層、框架層和表現(xiàn)層。下篇接著講主流工具（DataV、Raydata、EasyV、森大屏）的功能體驗(yàn)，淺談可視化行業(yè)未來(lái)的探索和思考。
2、文中的拆解分析部分，多款工具可能存在較多重復(fù)觀點(diǎn)，由于篇幅有限，故不再贅述。
適合讀者
B端UI設(shè)計(jì)師、產(chǎn)品經(jīng)理，可視化行業(yè)相關(guān)從業(yè)者及愛(ài)好者。
調(diào)研時(shí)間
2022年9~10月
調(diào)研方式
桌面研究、問(wèn)卷調(diào)查
首先，本次分享僅作為個(gè)人學(xué)習(xí)交流，文章觀點(diǎn)僅代表個(gè)人。目前比較少有可視化工具的產(chǎn)品分析，本次通過(guò)調(diào)研，希望了解更多可視化大屏工具的背景、知識(shí)，也希望能通過(guò)文章的形式，達(dá)成兩個(gè)分享目的：一、提升自身的復(fù)盤(pán)總結(jié)能力，鼓勵(lì)將知識(shí)沉淀后輸出分享；二、借此機(jī)會(huì)與更多行業(yè)相關(guān)者分享交流學(xué)習(xí)。
數(shù)據(jù)可視化
關(guān)于數(shù)據(jù)視覺(jué)表現(xiàn)形式的科學(xué)技術(shù)研究。
數(shù)據(jù)可視化平合
它是大數(shù)據(jù)內(nèi)在價(jià)值的最終呈現(xiàn)手殷，它利用各類圖表、趨勢(shì)圖、視覺(jué)效果對(duì)數(shù)據(jù)進(jìn)行分析并展現(xiàn)，幫助用戶發(fā)現(xiàn)內(nèi)在規(guī)律、發(fā)掘深度規(guī)律、指導(dǎo)經(jīng)營(yíng)決策。
大屏搭建工具
利用簡(jiǎn)單拖拉拽、低代碼開(kāi)發(fā)等方式，幫助非專業(yè)工程師快速實(shí)現(xiàn)炫酷大屏的數(shù)據(jù)可視化大屏效果的互聯(lián)網(wǎng)工具類產(chǎn)品。業(yè)務(wù)場(chǎng)景主要有行業(yè)可視化、智能終端、模擬演示、數(shù)據(jù)統(tǒng)計(jì)分析。
在2011年左右，國(guó)內(nèi)帆軟公司研發(fā)簡(jiǎn)單的可視化產(chǎn)品，起名“FineBI”，解決了用戶個(gè)性化的可視化分析的需求。隨著技術(shù)發(fā)展和行業(yè)趨勢(shì)發(fā)展，在滿足智能分析報(bào)表的基礎(chǔ)上，又迎來(lái)了更高的可視化大屏的挑戰(zhàn)，國(guó)內(nèi)如光啟元Raydata、阿里DataV等可視化大屏工具開(kāi)始出現(xiàn)，各大廠商如京東、百度、網(wǎng)易有數(shù)等紛紛踏上可視化賽道，隨著近年的政策支持企業(yè)數(shù)字化轉(zhuǎn)型的浪潮下，可視化行業(yè)得以快速發(fā)展成熟，為企事業(yè)單位解決了一個(gè)又一個(gè)可視化分析難題……
本次調(diào)研經(jīng)過(guò)桌面研究，分析出近年來(lái)可視化行業(yè)背景和市場(chǎng)現(xiàn)狀。
從政策、經(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è)通過(guò)數(shù)據(jù)可視化進(jìn)行精細(xì)化管理成為現(xiàn)實(shí)。
* PEST分析法 是對(duì)宏觀環(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è)元素分別寫(xiě)在4個(gè)格子中，并羅列出這4個(gè)元素相關(guān)聯(lián)的與產(chǎn)品有關(guān)的環(huán)境因素，最后投票選出3~5個(gè)點(diǎn)子作為PEST分析的結(jié)果。
P政策
中國(guó)相繼出臺(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ù)開(kāi)發(fā)利用、企業(yè)主體發(fā)展能級(jí)躍升、數(shù)據(jù)安全鑄盾六個(gè)專項(xiàng)行動(dòng)。（參考來(lái)源：頭豹研究院）
E經(jīng)濟(jì)
2021全年國(guó)內(nèi)生產(chǎn)總值突破110萬(wàn)億，GDP達(dá)114萬(wàn)億元，按不變價(jià)格計(jì)算，比上年增長(zhǎng)8.1%，兩年平均增長(zhǎng)5.1%。
我國(guó)IT產(chǎn)業(yè)在經(jīng)歷了三十多年的發(fā)展后，已經(jīng)基本形成了產(chǎn)業(yè)規(guī)模龐大、專業(yè)門(mén)類齊全的IT產(chǎn)業(yè)體系，2020年我國(guó)IT支出達(dá)2.9萬(wàn)億人民幣。
在應(yīng)用軟件領(lǐng)域百花齊放，2021年上半年我國(guó)軟件業(yè)完成軟件業(yè)務(wù)收入44198億元，同比增長(zhǎng)23.2%；全行業(yè)實(shí)現(xiàn)利潤(rùn)總額4999億元，同比增長(zhǎng)13.6%。另外，對(duì)于云計(jì)算、大數(shù)據(jù)、物聯(lián)網(wǎng)、人工智能等新一代技術(shù)，我國(guó)也由單點(diǎn)向融合互動(dòng)不斷演進(jìn)。（參考來(lái)源：頭豹研究院）
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)，因此，中國(guó)數(shù)據(jù)可視化未來(lái)市場(chǎng)增長(zhǎng)點(diǎn)將主要集中在政務(wù)及醫(yī)療衛(wèi)生領(lǐng)域。（參考來(lái)源：頭豹研究院）
T技術(shù)
伴隨著互聯(lián)網(wǎng)、物聯(lián)網(wǎng)快速發(fā)展，中國(guó)數(shù)據(jù)量持續(xù)增加，通過(guò)對(duì)數(shù)據(jù)的可視化處理及分析，企業(yè)端對(duì)日常精細(xì)化管理成為現(xiàn)實(shí)。
過(guò)去5年間，中國(guó)數(shù)據(jù)產(chǎn)生量快速增加ie中2017年的6ZB快速增加至2021年的16ZB。預(yù)計(jì)未來(lái)5年中國(guó)數(shù)據(jù)產(chǎn)生量將繼續(xù)增加，有望于2026年達(dá)到62ZB。（參考來(lái)源：頭豹研究院）
分為市場(chǎng)階段和市場(chǎng)規(guī)模，說(shuō)明當(dāng)前數(shù)據(jù)可視化行業(yè)的市場(chǎng)現(xiàn)狀。結(jié)論如下：
一、國(guó)內(nèi)數(shù)據(jù)可視化平臺(tái)市場(chǎng)尚處于發(fā)展期，潛在市場(chǎng)容量非常巨大，前景廣闊；
二、預(yù)計(jì)未來(lái)5年國(guó)內(nèi)數(shù)據(jù)可視化平臺(tái)市場(chǎng)規(guī)?？焖僭黾樱瑥?fù)合增長(zhǎng)率達(dá)32.5%。
市場(chǎng)階段
國(guó)外可視化展現(xiàn)平臺(tái)行業(yè)起步較早，市場(chǎng)相對(duì)成熟，消費(fèi)者認(rèn)可較高，而國(guó)內(nèi)可視化展現(xiàn)平臺(tái)行業(yè)市場(chǎng)還處于發(fā)展期，雖然2012年呈現(xiàn)出小爆發(fā)式增長(zhǎng)，但市場(chǎng)尚不成熟，還有待于培育，然而國(guó)內(nèi)人口基數(shù)大，隨著國(guó)內(nèi)經(jīng)濟(jì)的發(fā)展，人民生活水平的提高，收入的增長(zhǎng)，對(duì)精神生活方面的消費(fèi)也不斷增加，國(guó)內(nèi)潛在市場(chǎng)容量非常巨大，前景廣闊，因此，可視化展現(xiàn)平臺(tái)行業(yè)的發(fā)展將逐漸向本土化轉(zhuǎn)移。
當(dāng)前，中國(guó)數(shù)據(jù)可視化平臺(tái)行業(yè)尚處于發(fā)展早期，36.8%投融資事件主要發(fā)生在早期A輪階段，行業(yè)尚具有較大發(fā)展?jié)摿?。從地域分布情況來(lái)看，中國(guó)數(shù)據(jù)可視化企業(yè)主要分布于廣東省、北京市、上海市、江蘇省及浙江省等區(qū)域，約占總體的93.5%。當(dāng)前，中國(guó)數(shù)據(jù)可視化行業(yè)投融資較為活躍。其中約36.8%的企業(yè)處于A輪融資階段，2家企業(yè)已于新三板掛板，其中，觀遠(yuǎn)數(shù)據(jù)于2022年2月完成C輪融資，共計(jì)2.8億元。（參考來(lái)源：頭豹研究院）
市場(chǎng)規(guī)模
過(guò)去5年間，中國(guó)數(shù)據(jù)可視化平合市場(chǎng)快速增加，由2017年的13.2億元快速增加至2021年的43.8億元，復(fù)合增長(zhǎng)率達(dá)27.1%。預(yù)計(jì)未來(lái)五年中國(guó)數(shù)據(jù)可視化平臺(tái)市場(chǎng)年復(fù)合增長(zhǎng)率有望達(dá)到32.5%。（參考來(lái)源：頭豹研究院）
根據(jù)上面的行業(yè)背景和市場(chǎng)現(xiàn)狀，從政策扶持、經(jīng)濟(jì)增長(zhǎng)、社會(huì)機(jī)會(huì)點(diǎn)增加、技術(shù)革新、市場(chǎng)階段成熟、市場(chǎng)規(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ù)展示效率及輔助管理決策。
經(jīng)桌面研究、問(wèn)卷調(diào)查后，發(fā)現(xiàn)并整理出市面主流的數(shù)據(jù)可視化大屏搭建工具梯度說(shuō)明。以工具滿意度、行業(yè)普及率、用戶量幾個(gè)維度來(lái)劃分梯度：
第一梯隊(duì)有阿里云DataV、騰訊RayData、袋鼠云易知微；
第二梯隊(duì)有騰訊Banber（現(xiàn)改名RayData Report）、山海鯨可視化、森工廠森大屏、51WORLD、華為云DLV；
第三梯隊(duì)有微兔可視化、ByteV中臺(tái)等。
*本次未歸入調(diào)研范圍內(nèi)：京東、百度、網(wǎng)易有數(shù)等廠商可視化產(chǎn)品，以及一些開(kāi)發(fā)大佬的開(kāi)源大屏工具
*使用騰訊問(wèn)卷自發(fā)進(jìn)行問(wèn)卷調(diào)查，主要渠道為微信群，有效樣本量較少，數(shù)據(jù)僅供參考
第一梯度的阿里云DataV、騰訊RayData、袋鼠云易知微的工具滿意度、行業(yè)普及率、用戶量綜合評(píng)分較高，還有第二梯度的森工廠森大屏對(duì)比其他競(jìng)品產(chǎn)來(lái)說(shuō)，產(chǎn)品形式不同，后面將以阿里云DataV、騰訊RayData、袋鼠云易知微、森工廠森大屏這4個(gè)工具產(chǎn)品來(lái)進(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)研版本有一定差異，更新日志傳送門(mén)：https://developer.aliyun.com/article/1127824?spm=5176.14082271.J_5834642020.1.42c74dcf64Y3FZ#slide-12
阿里云DataV
a.產(chǎn)品簡(jiǎn)介
使用可視化應(yīng)用的方式來(lái)分析并展示龐雜數(shù)據(jù)的阿里云產(chǎn)品。其中DataV企業(yè)版試用是適合剛接觸DataV的新用戶，輕松搭建可視化大屏，匯報(bào)、客戶參觀必備。而DataV數(shù)據(jù)可視化企業(yè)版是開(kāi)箱即用實(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)品簡(jiǎn)介
專注3D數(shù)據(jù)可視化原型設(shè)計(jì)。RayData Web是B/S架構(gòu)開(kāi)發(fā)的網(wǎng)頁(yè)端可視化系統(tǒng)搭建工具，支持在線3D可視化編輯，輕松構(gòu)建商業(yè)級(jí)數(shù)字孿生項(xiàng)目。
b.產(chǎn)品特點(diǎn)
3D模型風(fēng)格獨(dú)特；圖表工作站；模型場(chǎng)景工作站；提供定制服務(wù)
c.產(chǎn)品版本
個(gè)人版、Web版（原名專業(yè)版，本次調(diào)研）、Plus版（私有化部署）
袋鼠云易知微EasyV
a.產(chǎn)品簡(jiǎn)介：
數(shù)字孿生，EasyV是低成本無(wú)門(mén)檻上手?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)（私有化部署）
a.產(chǎn)品簡(jiǎn)介：
拖拉拽搭建可視化大屏，內(nèi)置豐富模板和在線圖表開(kāi)發(fā)工具
b.產(chǎn)品特點(diǎn)：
數(shù)字孿生工具鏈生態(tài)完善；藍(lán)圖節(jié)點(diǎn)編輯器；圖表工作站；提供建模服務(wù)
c.產(chǎn)品版本：
基礎(chǔ)版（本次調(diào)研）、專業(yè)版、高級(jí)版
本次調(diào)研使用【用戶體驗(yàn)五要素】模型方法來(lái)分析主流工具DataV企業(yè)版試用、Raydata Web專業(yè)版、EasyV個(gè)人版、森大屏基礎(chǔ)版，主要側(cè)重在表現(xiàn)層、框架層、結(jié)構(gòu)層。
此處說(shuō)明一下，例如本次調(diào)研的屬于功能型產(chǎn)品，那么功能型產(chǎn)品的結(jié)構(gòu)層側(cè)重于交互設(shè)計(jì)，通?？捎盟季S導(dǎo)圖、流程圖方式來(lái)說(shuō)明情況。再往上看，功能型產(chǎn)品的框架層側(cè)重于信息設(shè)計(jì)、界面設(shè)計(jì)，大致模塊尺寸大小、位置擺放，通?？捎玫捅Ｕ嬖?、交互文檔來(lái)說(shuō)明情況。到了模型最頂層，不論功能型還是信息型產(chǎn)品的表現(xiàn)層都是感知設(shè)計(jì)，關(guān)注視覺(jué)如何呈現(xiàn)，通常運(yùn)用形、色、字、質(zhì)、構(gòu)、動(dòng)著6個(gè)維度進(jìn)行整體視覺(jué)設(shè)計(jì)。
用戶體驗(yàn)五要素來(lái)自Jesse James Garrett 的《用戶體驗(yàn)要素》一書(shū)：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。
在結(jié)構(gòu)層中，DataV企業(yè)版試用、Raydata Web專業(yè)版、EasyV個(gè)人版、森大屏基礎(chǔ)版4款產(chǎn)品略有不同（且名稱叫法不一），整理總結(jié)出共性，產(chǎn)品包括系統(tǒng)頁(yè)和編輯器，系統(tǒng)頁(yè)下包括項(xiàng)目列表、資源管理、用戶管理、幫助中心，編輯器下包括頂部導(dǎo)航欄、組件庫(kù)、圖層面板、畫(huà)布區(qū)、信息面板。
為了更清晰了解4款產(chǎn)品的產(chǎn)品設(shè)計(jì)側(cè)重點(diǎn)，接下來(lái)，對(duì)比分析它們的結(jié)構(gòu)層。
關(guān)鍵詞：強(qiáng)調(diào)品牌感、幫助中心、靈活切換藍(lán)圖
DataV企業(yè)版試用分為系統(tǒng)頁(yè)+編輯器。系統(tǒng)頁(yè)頂部是輪播banner圖，強(qiáng)調(diào)品牌感和打造產(chǎn)品差異化。
系統(tǒng)頁(yè)主要包括我的可視化、我的數(shù)據(jù)、我的資產(chǎn)、教程，其中我的可視化包括3個(gè)創(chuàng)建入口，分別是PC創(chuàng)建、移動(dòng)端創(chuàng)建和識(shí)圖創(chuàng)建，滿足用戶在不同場(chǎng)景的使用需求。系統(tǒng)頁(yè)中教程層級(jí)放在一級(jí)菜單下容易被用戶發(fā)現(xiàn)，對(duì)小白用戶比較友好，快速觀看視頻教程。
編輯器中包含畫(huà)布編輯器和藍(lán)圖編輯器。進(jìn)入編輯器后，可切換畫(huà)布編輯器與藍(lán)圖編輯器，放在同一層級(jí)，方便用戶從畫(huà)布編輯器中添加圖層到藍(lán)圖編輯器中。
畫(huà)布編輯器（PC和移動(dòng)端基本一致）包括圖層、資產(chǎn)列表（資產(chǎn)包、組件庫(kù)）、工具欄、畫(huà)布、頁(yè)面設(shè)置、組件設(shè)置。藍(lán)圖編輯器包括導(dǎo)入節(jié)點(diǎn)、邏輯節(jié)點(diǎn)、工具欄、配置面板。
關(guān)鍵詞：可視化統(tǒng)計(jì)、定位專業(yè)用戶、畫(huà)布占比大
Raydata Web專業(yè)版分為系統(tǒng)頁(yè)+編輯器。系統(tǒng)頁(yè)主要包括工程列表、資源管理、數(shù)據(jù)管理、權(quán)限管理。因?yàn)楫a(chǎn)品定位是專業(yè)版，所以弱化了幫助手冊(cè)的入口，同時(shí)編輯器中也是基于熟悉掌握工具的用戶而設(shè)計(jì)的。類比于Raydata Web個(gè)人版，系統(tǒng)頁(yè)的更多幫助入口更為明顯，適用于新手小白使用。
系統(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）、頁(yè)面（2D&3D），概要分不同情況而定，處于UI層時(shí)顯示2D組件，處于場(chǎng)景層時(shí)顯示3D組件。
畫(huà)布編輯器包括頂部欄（基礎(chǔ)功能、組件庫(kù)）、概要、大綱、畫(huà)布、頁(yè)面設(shè)置，頁(yè)面設(shè)置（畫(huà)布設(shè)置、組件設(shè)置）。其中組件庫(kù)折疊在頂部欄中，增大了編輯器中畫(huà)布的占比，讓用戶更關(guān)注當(dāng)前畫(huà)布操作。
關(guān)鍵詞：素材資源、幫助中心、畫(huà)布占比大
EasyV個(gè)人版分為系統(tǒng)頁(yè)+編輯器。系統(tǒng)頁(yè)包括我的應(yīng)用、我的數(shù)據(jù)、終端交互（高級(jí)版有）、組件開(kāi)發(fā)（尊享版有）、后臺(tái)管理、門(mén)戶管理（高級(jí)版有）、資源中心。
其中系統(tǒng)頁(yè)的資源中心包括應(yīng)用模板、設(shè)計(jì)素材、主題資源，有入口可跳往素材廣場(chǎng)，EasyV的素材資源十分豐富，該跳轉(zhuǎn)入口可以很好引導(dǎo)用戶去使用官網(wǎng)設(shè)計(jì)素材，輕松搭建大屏。幫助菜單位于常駐懸浮于系統(tǒng)頁(yè)側(cè)邊欄，其包括操作日志、幫助文檔、視頻教程、問(wèn)答中心、版本日志，幫助菜單對(duì)于新手小白比較友好，操作路徑簡(jiǎn)短，方便新手查閱幫助資料。
編輯器包括任務(wù)欄（基礎(chǔ)功能、組件、資源）、圖層、畫(huà)布、詳情設(shè)置（頁(yè)面設(shè)置、組件設(shè)置）。同Raydata Web專業(yè)版產(chǎn)品，其中組件庫(kù)折疊在任務(wù)欄中，增大了編輯器中畫(huà)布的占比，讓用戶更關(guān)注當(dāng)前畫(huà)布操作。
關(guān)鍵詞：工具鏈、模板推薦、藍(lán)圖和代碼二開(kāi)
森大屏基礎(chǔ)版分為系統(tǒng)頁(yè)+編輯器。森大屏的結(jié)構(gòu)和其他產(chǎn)品不同，由于數(shù)字孿生工具鏈生態(tài)比較完善，打通其他工具鏈入口（森工廠旗下有低代碼、零代碼、森大屏、森城市、森園區(qū)、森展廳、森拓?fù)?、森?shù)據(jù)、森模型等），所以系統(tǒng)頁(yè)頂部導(dǎo)航菜單可快速切換工具。
系統(tǒng)頁(yè)包括了個(gè)人中心、幫助手冊(cè)、我的大屏、推薦大屏（模板），側(cè)重展示推薦大屏，引導(dǎo)用戶優(yōu)先選用模板進(jìn)行大屏快速搭建，生產(chǎn)提效。
編輯器包括大綱、工具欄、畫(huà)布、畫(huà)布屬性、資源管理、菜單欄、資源中心、藍(lán)圖和代碼二開(kāi)。編輯器中與DataV不同的是，藍(lán)圖、代碼與畫(huà)布位于同一層級(jí)，用戶可隨時(shí)使用藍(lán)圖來(lái)鏈接交互事件，也可進(jìn)行代碼二次開(kāi)發(fā)操作。
將4款產(chǎn)品的框架層和表現(xiàn)層進(jìn)行拆解分析。
在框架層中，大體而言按鈕、輸入框等控件圓角較小，看起來(lái)比較方正，弧線的異形設(shè)計(jì)，容易體現(xiàn)科幻造型。在登錄頁(yè)中，頁(yè)面布局各有差異。在編輯器中的布局大體一致，畫(huà)布都位于界面中心，強(qiáng)調(diào)用戶最關(guān)注大屏設(shè)計(jì)的畫(huà)布區(qū)域。高頻操作的組件庫(kù)在頁(yè)面的位置各有差異。
在表現(xiàn)層中，主要通過(guò)形、色、字、質(zhì)、構(gòu)、動(dòng)這6個(gè)維度來(lái)進(jìn)行對(duì)比分析。DataV企業(yè)版試用、Raydata Web專業(yè)版、EasyV個(gè)人版、森大屏基礎(chǔ)版4款產(chǎn)品的整體視覺(jué)調(diào)性都是以暗色、科幻風(fēng)格為主。登錄頁(yè)都選擇了亮色風(fēng)格界面，系統(tǒng)頁(yè)和編輯器都是暗黑風(fēng)格。部分產(chǎn)品品牌字體以直線為主并加入弧線和粒子元素，科幻的界面動(dòng)效主要體現(xiàn)在加載頁(yè)面。
阿里云（DataV企業(yè)版試用）- 登錄頁(yè)
DataV 的登錄頁(yè)統(tǒng)一由阿里云登錄頁(yè)進(jìn)入。以中心布局（核心面板偏右），三維模型+灰色背景+線條點(diǎn)綴的形式進(jìn)行設(shè)計(jì)，主題色是阿里的橙色。因?yàn)镈ataV是阿里云旗下的產(chǎn)品，共用入口，所以此處沒(méi)做額外的產(chǎn)品登錄頁(yè)以強(qiáng)調(diào) DataV 產(chǎn)品一致的品牌感。
Raydata Web專業(yè)版 - 登錄頁(yè)
Raydata Web 登錄頁(yè)以中心布局的形式，無(wú)其他設(shè)計(jì)元素，只保留關(guān)鍵信息，同其他競(jìng)品相比略顯單調(diào)。登錄頁(yè)的淺色風(fēng)格與進(jìn)入系統(tǒng)頁(yè)和編輯器的暗黑風(fēng)格，缺乏界面整體色調(diào)的一致性。界面控件主題色使用藍(lán)紫漸變色，與系統(tǒng)頁(yè)和編輯器的藍(lán)色也略有差異。（可從Raychart產(chǎn)品使用手冊(cè)發(fā)現(xiàn)，舊版布局為同EasyV）
EasyV個(gè)人版 - 登錄頁(yè)
EasyV 的登錄頁(yè)有2處觸發(fā)，常規(guī)觸發(fā)和資源中心觸發(fā)，分別以左右布局的全頁(yè)和彈窗形式進(jìn)行框架設(shè)計(jì)。彈窗的形式不需額外跳轉(zhuǎn)，讓用戶在資源中心挑選素材時(shí)能更快進(jìn)行登錄操作。登錄頁(yè)以左右布局的形式，插圖與登錄模塊大致各占50%，深色插圖的和淺色登錄模塊的兩個(gè)色塊形成強(qiáng)烈視覺(jué)對(duì)比，更能吸引用戶注意。
森工廠（森大屏基礎(chǔ)版) - 登錄頁(yè)
森大屏的登錄頁(yè)以中心布局的形式，有利于聚焦視覺(jué)，背景使用簡(jiǎn)約抽象的形狀來(lái)點(diǎn)綴畫(huà)面。灰色背景+抽象圖形點(diǎn)綴，與淺色登錄模塊拉開(kāi)視覺(jué)對(duì)比。按鈕主題色是橙色，是因?yàn)樯笃潦莾?yōu)锘科技森工廠旗下的產(chǎn)品，共用入口，所以此處沒(méi)做額外的產(chǎn)品登錄頁(yè)以強(qiáng)調(diào)森大屏產(chǎn)品一致的品牌感。
DataV企業(yè)版試用 - 系統(tǒng)頁(yè)
頂部輪播圖占整個(gè)頁(yè)面四分之一左右，強(qiáng)調(diào)品牌感同時(shí)打造產(chǎn)品差異化，Banner內(nèi)容為統(tǒng)一風(fēng)格的3D模型場(chǎng)景+無(wú)襯線字體標(biāo)題為主，一級(jí)導(dǎo)航邊緣弧線的流光動(dòng)效表現(xiàn)科幻酷炫風(fēng)格。
一級(jí)導(dǎo)航欄與輪播圖的重疊關(guān)系，半透的玻璃質(zhì)感，仿佛是用戶透過(guò)一層玻璃，打開(kāi)可視化世界的大門(mén)，結(jié)合暗黑風(fēng)格的界面，給用戶一種進(jìn)入游戲的沉浸感、躍躍欲試的沖動(dòng)?？v向與橫向結(jié)合的混合導(dǎo)航，對(duì)于后期有規(guī)劃新功能而言，拓展性較強(qiáng)，缺點(diǎn)是占用面積大、交互路徑長(zhǎng)，適用于大屏項(xiàng)目數(shù)不多的情況下，若項(xiàng)目數(shù)量較多，可能有空間不夠的焦慮。
我的可視化中的3個(gè)創(chuàng)建入口按鈕使用了扁平加光感強(qiáng)、冷色調(diào)風(fēng)格插畫(huà)，引起用戶注意，快速識(shí)別創(chuàng)建功能入口。主題色使用比較鮮艷活躍的藍(lán)色，輔助色為青色，占用面積不多，起到豐富點(diǎn)綴畫(huà)面的作用。設(shè)計(jì)元素的四周輪廓不做圓角處理，顯得整體界面比較方正端正、硬朗嚴(yán)肅的印象。
Raydata Web專業(yè)版 - 系統(tǒng)頁(yè)
左上方展示品牌Logo，清晰寫(xiě)明當(dāng)前產(chǎn)品及版本，符合用戶認(rèn)知。品牌元素融入進(jìn)頂部欄右側(cè)頭像及皇冠圖標(biāo)，加深品牌印象。
以側(cè)邊懸浮導(dǎo)航的形式使用戶快速定位查找功能模塊的位置，拓展性較強(qiáng)，以較瓷片“大包小”的結(jié)構(gòu)，聚合了較多功能模塊，如果是小分辨率屏幕的情況下，經(jīng)常要鼠標(biāo)輪滑來(lái)回滾動(dòng)才可看到下方功能模塊，導(dǎo)致不夠靈活高效。側(cè)邊導(dǎo)航模塊中的圖標(biāo)統(tǒng)一為形狀較方正、偏冷的中性色、扁平微漸變風(fēng)格。敬請(qǐng)期待的藍(lán)色沙漏圖標(biāo)在界面中略微突兀出，缺少圖標(biāo)風(fēng)格一致性。
界面為偏冷中性純色，無(wú)背景裝飾，同登錄頁(yè)只保留關(guān)鍵信息（如大屏項(xiàng)目卡片），不加過(guò)多裝飾的簡(jiǎn)約風(fēng)格調(diào)性保持一致。按鈕主題色使用比較灰的藍(lán)色，透出沉穩(wěn)柔和的調(diào)性。設(shè)計(jì)元素的四周輪廓略微加了些圓角，同DataV硬朗的感覺(jué)則稍微緩和一些。
EasyV個(gè)人版 - 系統(tǒng)頁(yè)
上方展示品牌Logo，同Raydata，不再贅述。對(duì)于創(chuàng)建大屏按鈕而言，DataV用的是插畫(huà)按鈕的形式，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)提供給用戶快捷操作，對(duì)新手小白友好。
缺省頁(yè)運(yùn)用情感化設(shè)計(jì)，以2.5d插圖的表現(xiàn)形式緩解用戶負(fù)面情緒，配色在深色界面中顯得比較明顯，個(gè)人認(rèn)為可以適當(dāng)弱化插畫(huà)亮色部分。主題色使用鮮艷活躍的藍(lán)色為主，在深色的界面中同樣相對(duì)明顯、突出。設(shè)計(jì)元素的四周輪廓既有全圓角，也有小圓角，界面形狀統(tǒng)一性待加強(qiáng)。
森工廠（森大屏基礎(chǔ)版) - 系統(tǒng)頁(yè)
左上方展示品牌Logo，同Raydata，不再贅述。由于是森工廠旗下的工具鏈，所以森大屏的系統(tǒng)頁(yè)頂部欄可進(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)致引起疑惑和誤解。盡管如此，配色上使用橙色（森工廠）和具體工具主題色來(lái)區(qū)分當(dāng)前位置，能一定程度防止用戶混淆概念，通過(guò)多次在頂部欄切換工具，可預(yù)知上面提到的導(dǎo)航1是指所有工具而言的，而導(dǎo)航2則是指當(dāng)前具體工具而言。
右側(cè)側(cè)邊菜單提供用戶快速反饋的入口，簡(jiǎn)單便捷。其中側(cè)邊菜單的問(wèn)號(hào)圖標(biāo)與頂部欄的一樣，跳轉(zhuǎn)鏈接一致，而文案卻使用了“常見(jiàn)問(wèn)題”和“幫助中心”2種，重復(fù)功能入口也許考慮的是為了增加點(diǎn)擊，而同個(gè)界面重復(fù)堆放功能入口的合理性還有待考究。圖標(biāo)使用了毛玻璃和線性圖標(biāo)的表現(xiàn)手法，為界面提升質(zhì)感。設(shè)計(jì)元素的四周輪廓加了小圓角，整體給人的感覺(jué)更為親切、友好。
DataV企業(yè)版試用 - 畫(huà)布/藍(lán)圖編輯器
整體暗黑風(fēng)格的界面下，能使得用戶設(shè)計(jì)深色風(fēng)格的可視化大屏?xí)r，保持更專注的狀態(tài)。題外話，DataV新版本的編輯器界面可切換有淺色風(fēng)格，同理，淺色編輯器界面則更適合在設(shè)計(jì)淺色風(fēng)格的大屏的場(chǎng)景。通過(guò)不同深色色階的背景色塊讓每個(gè)功能模塊的框架位置區(qū)分得清晰明了，另外整體配色、形狀方面都遵循視覺(jué)呈現(xiàn)一致性，降低用戶認(rèn)知成本。
在編輯器左上方無(wú)退回系統(tǒng)頁(yè)的返回按鈕，用戶只能通過(guò)切換瀏覽器標(biāo)簽頁(yè)回看系統(tǒng)頁(yè)，而無(wú)法在當(dāng)前頁(yè)返回上一層級(jí)回到系統(tǒng)頁(yè)，所以對(duì)于想要快速返回上層的場(chǎng)景下，則顯得不那么便捷。頂部欄左側(cè)的畫(huà)布編輯器與藍(lán)圖編輯器選項(xiàng)按鈕歸于一組符合用戶認(rèn)知，可快速切換當(dāng)前編輯器進(jìn)行大屏視覺(jué)設(shè)計(jì)或鏈接交互事件。畫(huà)布編輯器和藍(lán)圖編輯器的畫(huà)布外區(qū)域保持視覺(jué)統(tǒng)一，使用了點(diǎn)平鋪的背景與畫(huà)布做出層次區(qū)分。
右側(cè)的屬性面板中展示組件的配置功能，當(dāng)信息較多時(shí)，用視覺(jué)較弱的分割線區(qū)分每組的配置信息，數(shù)據(jù)之間比較緊湊，提高面積利用率。編輯器中多處的功能組使用了格式塔原則的接近性，讓距離更近的功能組更有關(guān)聯(lián)性，層次清晰有序，降低用戶認(rèn)知成本。
圖標(biāo)表現(xiàn)方式只使用了單色線性圖標(biāo)一種，讓整體界面表現(xiàn)得更簡(jiǎn)潔、輕量化，忽略圖標(biāo)形狀而讓用戶更多去關(guān)注功能。配色、圓角遵循視覺(jué)呈現(xiàn)一致性，當(dāng)功能被選中時(shí)，會(huì)以藍(lán)色背景、圖標(biāo)反白的方式強(qiáng)調(diào)該功能的狀態(tài)、位置。
Raydata Web專業(yè)版 - 編輯器
同DataV，暗黑風(fēng)格界面，不同深淺色塊背景區(qū)分功能模塊，且界面左上方無(wú)退回系統(tǒng)頁(yè)的返回按鈕，不太便捷，不贅述。
大綱與概要類似于頁(yè)面與圖層的關(guān)系，像設(shè)計(jì)軟件Figma的Page（頁(yè)面）與Layer（圖層），大綱與概要位于界面左側(cè)的區(qū)分上下模塊，框架從上至下擺放，符合用戶認(rèn)知。對(duì)于新手小白，還需額外查看教程引導(dǎo)才能認(rèn)知大綱與概要的框架，因?yàn)榇税姹径ㄎ粸閷I(yè)版，所以弱化了幫助指引，簡(jiǎn)化界面，讓專家級(jí)用戶更沉浸地、不受過(guò)多干擾地使用。
組件庫(kù)位于頂部，占用面積小，前面結(jié)構(gòu)層提過(guò)，作用是增大了畫(huà)布占比，讓用戶更專注設(shè)計(jì)，不贅述。
圖標(biāo)表現(xiàn)方式使用了單色面性圖標(biāo)和微漸變扁平投影圖標(biāo)，界面頂部是組件庫(kù)，這些微漸變圖標(biāo)呼應(yīng)了系統(tǒng)頁(yè)同樣使用了為漸變風(fēng)風(fēng)格。為了強(qiáng)調(diào)組件庫(kù)這種用戶高頻操作區(qū)域，使用了更吸引用戶注意力的微漸變扁平投影圖標(biāo)，而其他區(qū)域則使用單色面性圖標(biāo)，弱化視覺(jué)，讓界面輕量化，讓用戶更多去關(guān)注功能。同DataV，同樣使用格式塔原則的接近性，層次清晰，降低認(rèn)知成本，不贅述。
配色、圓角遵循視覺(jué)呈現(xiàn)一致性，當(dāng)功能被選中時(shí)，會(huì)以藍(lán)色背景、圖標(biāo)反白的方式強(qiáng)調(diào)該功能的狀態(tài)、位置。
EasyV個(gè)人版 - 編輯器
與其余3款工具不同，EasyV在編輯器左上方有退回系統(tǒng)頁(yè)的返回按鈕，方便用戶快速返回上層的系統(tǒng)頁(yè)。
同Raydata，組件庫(kù)位于頂部任務(wù)欄中，占用面積小，前面結(jié)構(gòu)層提過(guò)，作用是增大了畫(huà)布占比，讓用戶更專注設(shè)計(jì)，不贅述。
圖標(biāo)表現(xiàn)方式使用了單色微漸變線性圖標(biāo)，部分圖標(biāo)線細(xì)節(jié)還用半透明效果，而部分則用了不透明度漸變的方式，提升圖標(biāo)質(zhì)感，讓整體界面輕量化而不至于過(guò)于單調(diào)。配色、圓角遵循視覺(jué)呈現(xiàn)一致性，降低用戶認(rèn)知成本。
森工廠（森大屏基礎(chǔ)版) - 編輯器
同DataV，暗黑風(fēng)格界面，不同深淺色塊背景區(qū)分功能模塊，且界面左上方無(wú)退回系統(tǒng)頁(yè)的返回按鈕，不太便捷，不贅述。
編輯器的任務(wù)欄設(shè)計(jì)類似本地客戶端軟件的頂部菜單欄，通用的“文件、編輯、視圖、排列、圖表、調(diào)試、幫助”菜單都放在了頂部任務(wù)欄，符合用戶交互習(xí)慣，缺點(diǎn)占用面積較大。
與Raydata結(jié)構(gòu)一樣，同樣有類似設(shè)計(jì)軟件Figma的Page（頁(yè)面）與Layer（圖層）的關(guān)系，森大屏把圖層放在畫(huà)布底部欄，而大綱放在組件庫(kù)的左下角位置?？赡芸紤]不占用過(guò)多面積而折疊在左下角，但缺點(diǎn)也很明顯，層級(jí)較深，難以找到大綱中的畫(huà)布元素，對(duì)新手小白不太友好。通過(guò)畫(huà)布底部欄切換圖層，這里圖層也是分2D和3D，還可設(shè)置圖層為全局圖層，即預(yù)覽大屏?xí)r跳轉(zhuǎn)任何地方都始終顯示該圖層，可減少重復(fù)勞動(dòng)設(shè)計(jì)。
藍(lán)圖和代碼二開(kāi)也位于畫(huà)布底部區(qū)域，同DataV，森大屏也有藍(lán)圖功能。底部有藍(lán)圖和代碼二開(kāi)的切換按鈕，方便用戶鏈接交互事件和調(diào)試二改組件的時(shí)候，不完全遮擋畫(huà)布，讓用戶更易感知當(dāng)前所處位置和狀態(tài)，無(wú)需來(lái)回切換頁(yè)面而增加操作成本。
界面圖標(biāo)表現(xiàn)方式同DataV，只使用了單色線性圖標(biāo)，讓整體界面表現(xiàn)得更簡(jiǎn)潔、輕量化，不贅述。畫(huà)布外區(qū)域使用了點(diǎn)平鋪的背景與畫(huà)布做出層次區(qū)分。
上篇簡(jiǎn)述可視化行業(yè)的市場(chǎng)分析，了解到國(guó)家政策如《“十四五”大數(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)行桌面研究、問(wèn)卷調(diào)查后，篩選出4款主流工具（DataV、Raydata、EasyV、森大屏），分別對(duì)它們的結(jié)構(gòu)層、框架層和表現(xiàn)層進(jìn)行拆解分析。
設(shè)計(jì)師在了解和體驗(yàn)工具型產(chǎn)品時(shí)，也要對(duì)其行業(yè)有一定的思考，這樣更有利于了解業(yè)務(wù)、用戶以及產(chǎn)品。下篇接著講主流工具（DataV、Raydata、EasyV、森大屏）的功能體驗(yàn)，淺談可視化行業(yè)未來(lái)的探索和思考。
那么，下篇再見(jiàn)！
有許多小伙伴經(jīng)常會(huì)有這種疑問(wèn)，我做的可視化設(shè)計(jì)為什么按著需求做了，可是為什么畫(huà)面卻被吐槽空，太簡(jiǎn)單，不夠炫。因?yàn)樵诳梢暬I(lǐng)域會(huì)經(jīng)常存在誤區(qū)，要把他們跟平面或者UI區(qū)分開(kāi)，拆解開(kāi)來(lái)講?？梢暬I(lǐng)域所注重的小伙伴們一定不陌生：字要大，顏色多一點(diǎn)，要酷炫，要科技感。沒(méi)錯(cuò)這就是老板口中的設(shè)計(jì)，但并不否認(rèn)，這些點(diǎn)都說(shuō)在了可視化的關(guān)鍵點(diǎn)上，但是想要更了解可視化如何制作，我們需要從以下幾個(gè)方面去解讀數(shù)據(jù)可視化。
靈活運(yùn)用點(diǎn)線面構(gòu)成（可以單獨(dú)去找一下三大構(gòu)成中的平面構(gòu)成內(nèi)容），科技感線條，不可太過(guò)顯眼而喧賓奪主，只求使畫(huà)面豐富，透氣，不影響整體畫(huà)面效果。
下圖就是我選用的一種畫(huà)面裝飾線，并通過(guò)點(diǎn)線面等元素來(lái)設(shè)計(jì)成的一個(gè)畫(huà)面
邊框的樣式很大程度決定了畫(huà)面的整體協(xié)調(diào)性，在邊框融入整體畫(huà)面的時(shí)候，要考慮到與主視覺(jué)的協(xié)調(diào)性。一般邊框的顏色可以根據(jù)主視覺(jué)所展現(xiàn)出來(lái)的色彩傾向，從而進(jìn)行選擇，最大程度上保持協(xié)調(diào)統(tǒng)一。
分級(jí)邊框可以很大程度上切割大的模塊，獨(dú)立的同時(shí)融于整體。由各種方塊分割，同時(shí)選取最適合畫(huà)面的切割比例。（大框套小框）
主要包括：主視覺(jué)撒點(diǎn)，地圖彈框，主視覺(jué)數(shù)字指標(biāo)，以及懸浮于地圖之上的分級(jí)菜單以及圖例。
文字加數(shù)字，文字是數(shù)字的描述，數(shù)字是對(duì)文字的統(tǒng)計(jì) （可以著重展示數(shù)字，數(shù)字大，文字小，一般可以上下結(jié)構(gòu)，或者結(jié)合圖形，特殊情況特殊對(duì)待）
凡是出現(xiàn)對(duì)比，占比或者其他需要做對(duì)比的東西，一般推薦用餅圖
出現(xiàn)多條數(shù)據(jù)，多個(gè)維度，多角度進(jìn)行比較的時(shí)候，一般推薦用柱狀圖（包含柱折圖），出現(xiàn)趨勢(shì)，走勢(shì)等字眼時(shí)，一般采用折線圖。
例：描邊，描邊可以虛線，虛線可以調(diào)整間距，間距可以調(diào)圓角和直角。
例：發(fā)光，發(fā)光可以外發(fā)光，可以內(nèi)發(fā)光。
例：漸變，漸變可以線性漸變，角度漸變，鏡像漸變。
例：填充，可以漸變填充，可以純色填充，可以填充有透明，透明度沒(méi)有透明。
在你嘔心瀝血做完一兩個(gè)圖表的時(shí)候，如果想讓他有更多的同風(fēng)格的東西，就好比做字體設(shè)計(jì)一樣，所有字體都要寫(xiě)完，才是一套完整的，所以需要提煉該“字體”的細(xì)節(jié)，或者說(shuō)是與正常字體不同的地方，提煉出他的特殊樣式，再運(yùn)用到其他的圖表當(dāng)中去，這個(gè)從0到1的過(guò)程，我把它叫做組件化的過(guò)程。在你多做了幾套組件的時(shí)候，就會(huì)覺(jué)得圖表可以千變?nèi)f化，但你還是能夠知道他是怎么利用基礎(chǔ)圖形變形而來(lái)的。看多了，做多了，網(wǎng)上看到好看的圖表，一眼就能提煉出他的特殊點(diǎn)，再運(yùn)用組件化思維，真正的化為己用。
再教大家一個(gè)方法，設(shè)計(jì)出一套組件的時(shí)候，只有運(yùn)用到項(xiàng)目中，實(shí)現(xiàn)出來(lái)，才是一個(gè)成功的商業(yè)組件化過(guò)程（我自己做項(xiàng)目就是，看到好的設(shè)計(jì)，我下次做項(xiàng)目怎么我都要用上去）。此處指的不是抄襲，而是提煉不同點(diǎn)，運(yùn)用到自己的組件中。
找出所有圖表的共性
區(qū)分不同圖表的差異性
結(jié)合基礎(chǔ)組件，去變形，去豐富
了解組件的顏色以及風(fēng)格，去運(yùn)用
拓展文字排版，地圖樣式
拓展撒點(diǎn)，以及彈框
在布局的時(shí)候，挑選合適的布局方式，需要考慮到字段的長(zhǎng)短，圖表的寬窄，圖標(biāo)的大小，以及畫(huà)面的平衡，需要提前進(jìn)行布局（就跟繪畫(huà)構(gòu)草圖一個(gè)道理）。
1. 標(biāo)題與logo沒(méi)有形成好的聯(lián)系
2. 指標(biāo)數(shù)字類的東西，沒(méi)有與地圖關(guān)聯(lián)，比較分散
3. 地圖主視覺(jué)表現(xiàn)內(nèi)容太少，空洞
4. 文字區(qū)域示意不明，圖表？地圖內(nèi)容？
5. 整體布局不和諧，各處模塊太分散
6. 畫(huà)面裝飾無(wú)法連接各個(gè)模塊
1. 標(biāo)題與LOGO之間要建立聯(lián)系
2. 將指標(biāo)類的數(shù)字通過(guò)主視覺(jué)結(jié)合起來(lái)
3. 豐富地圖區(qū)域，增加表現(xiàn)形式
4. 文字區(qū)域單獨(dú)模塊，獨(dú)立又與主視覺(jué)有聯(lián)系
5. 優(yōu)化整體布局，添加邊框，豐富模塊
6. 調(diào)整畫(huà)面裝飾，與模塊結(jié)合
在設(shè)計(jì)的過(guò)程中我們經(jīng)常會(huì)遇到一個(gè)模塊的內(nèi)容（一個(gè)畫(huà)面），兩個(gè)或者多個(gè)都是同樣的數(shù)據(jù)或者需求（或者同樣的圖表），這就要求我們?cè)谠O(shè)計(jì)的過(guò)程中有變化可循，那么該如何解決此類問(wèn)題呢？
1. 可以通過(guò)不同的表現(xiàn)方式來(lái)進(jìn)行區(qū)分，兩個(gè)或者多個(gè)情況時(shí)，可以通過(guò)改變一些輕微的東西，來(lái)使之具有差異性，同時(shí)又有統(tǒng)一的風(fēng)格。
2. 兩個(gè)或者多個(gè)的情況下，該處區(qū)域只夠展示一個(gè)，但又必須展示，可以通過(guò)tab列表的方式，或者做切換等方式（例如柱狀圖時(shí)，x軸顯示不完時(shí)，可以做個(gè)x軸滑動(dòng)功能）。
在同一個(gè)畫(huà)面里有同一個(gè)類型的圖表時(shí)（比如兩個(gè)餅圖），盡可能地不要讓這兩個(gè)餅圖靠近顯示，盡量互相遠(yuǎn)離，在數(shù)據(jù)導(dǎo)入的情況下，一左一右，呼應(yīng)的同時(shí)又統(tǒng)一。
作者：AYONG_BDR 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司
政府大屏主要以點(diǎn)間距去區(qū)分屏幕的精細(xì)度，點(diǎn)間距越小，造價(jià)約昂貴；面積越大越整體，造價(jià)越高。離屏幕越近顆粒感越強(qiáng)，設(shè)計(jì)效果也就越不清晰，LED顯示屏表面不平整是導(dǎo)致LED顯示屏圖像失真的主要原因。LED顯示屏表面粗糙度的好壞主要取決于生產(chǎn)工藝。
拼接屏相比于點(diǎn)間距比較小的LED屏，價(jià)格方面會(huì)更便宜一點(diǎn)，拼接屏設(shè)計(jì)時(shí)最主要就是拼縫的處理，注意拼縫，設(shè)計(jì)時(shí)非必要情況下，都要跳過(guò)拼縫，尤其是“圓”這個(gè)造型。
拼接屏：46寸，55寸 物理分辨率：1920*N 1080*N（n代表屏幕數(shù)量），1.7mm、3.5mm 、0.88mm、0.44mm、無(wú)縫隙；企業(yè)常用（1.7mm 和3.5mm）
大屏拼接縫隙：設(shè)計(jì)時(shí)應(yīng)盡量不要跨屏去設(shè)計(jì)，會(huì)使畫(huà)面交叉，不重疊，尤其是圓形。
大屏拼接處理器主要功能是將一個(gè)完整的圖像信號(hào)劃分成N塊后分配給N個(gè)視頻顯示單元，完成用多個(gè)普通視頻單元組成一個(gè)超大屏幕動(dòng)態(tài)圖像顯示屏。大屏拼接處理器輸入信號(hào)數(shù)量和類型取決于用戶需要，輸出信號(hào)數(shù)量等于顯示單元數(shù)量。
矩陣是將多路輸入信號(hào)切換輸出到多個(gè)顯示設(shè)備，一般來(lái)說(shuō)輸入信號(hào)數(shù)量要大于輸出信號(hào)數(shù)量。（我們想在9塊顯示器上同時(shí)監(jiān)控100個(gè)攝像頭傳來(lái)的信號(hào)，就用矩陣來(lái)實(shí)現(xiàn)即可）
視頻矩陣是指通過(guò)陣列切換的方法將m路視頻信號(hào)任意輸出至n路監(jiān)控設(shè)備上的電子裝置，一般情況下矩陣的輸入大于輸出即m>n。有一些視頻矩陣也帶有音頻切換功能，能將視頻和音頻信號(hào)進(jìn)行同步切換，這種矩陣也叫做視音頻矩陣。
模擬視頻矩陣的輸入設(shè)備：監(jiān)控?cái)z像機(jī)、高速球、畫(huà)面處理器等很多個(gè)設(shè)備，顯示終端一般監(jiān)視器，電視墻，拼接屏等（通常視頻矩陣輸入很多，一般幾十路到幾千路視頻，輸出比較少一般2-128個(gè)顯示器；例如64進(jìn)8出，128進(jìn)16出，512進(jìn)32出，1024進(jìn)48出等）。
4*2大屏展示端，我們通過(guò)控制端，借由拼接處理器可以對(duì)大屏進(jìn)行隨意開(kāi)窗，漫游，疊加，畫(huà)中畫(huà)等效果。在控制端拖動(dòng)布局，大屏?xí)S之改變布局，非常方便。下面我就借由我以前做過(guò)的一個(gè)項(xiàng)目幫助大家理解一下拼接處理器的優(yōu)勢(shì)以及如何設(shè)定不同場(chǎng)景。
如果你們企業(yè)還在因?yàn)槠聊贿m配以及尺寸問(wèn)題而糾結(jié)，或者想展示：開(kāi)窗，漫游，疊加，畫(huà)中畫(huà)等效果，毫無(wú)疑問(wèn)你們應(yīng)該選擇拼接處理器，這比傳統(tǒng)投屏方式更合適，更沒(méi)有比例不對(duì)的困擾。
把控制端的分屏進(jìn)行編號(hào)，接下來(lái)移動(dòng)控制端對(duì)應(yīng)的編號(hào)區(qū)塊，就可以對(duì)大屏進(jìn)行重新布局，圖中展示的正是我們的預(yù)設(shè)正常場(chǎng)景。場(chǎng)景為居中布局，左右兩側(cè)為圖表展示。
對(duì)控制端進(jìn)行隨機(jī)布局，將主視覺(jué)模塊移動(dòng)到左側(cè)四塊屏幕，圖表都集中在右側(cè)，由此我們就由預(yù)設(shè)場(chǎng)景的居中布局變成了左右布局，左側(cè)為主視覺(jué)。
可以隨意的關(guān)閉大屏某個(gè)模塊的漫游，通過(guò)控制端進(jìn)行屏幕的顯示以及不顯示。
畫(huà)面的任何一個(gè)模塊都是可以進(jìn)行平移操作的，我們將模塊一和模塊五可以平移拖拽到任何一個(gè)位置。
畫(huà)面的任何一個(gè)模塊都是可以進(jìn)行疊加到屏幕任何一處，還可以控制模塊置頂和置底，非常靈活。
基于web網(wǎng)頁(yè)端的展示方式，通過(guò)在web開(kāi)發(fā)，有需要時(shí)會(huì)投屏到大屏上去展示。設(shè)備比例一定不能差距過(guò)大，比如16:9的投屏到32:9的大屏就不是合適，解決方案可以是外接一塊1920的顯示器即可。
此處要注意web端演示時(shí)，記得全屏顯示，瀏覽器邊框滑動(dòng)條等可以不考慮，前端會(huì)做相應(yīng)的瀏覽器細(xì)節(jié)考慮，設(shè)計(jì)按正常分辨率走即可。
觸摸屏（Touch Panel）又稱為“觸控屏”、“觸控面板”、“觸控臺(tái)“，是一種可接收觸頭等輸入訊號(hào)的感應(yīng)式液晶顯示裝置。
當(dāng)接觸了屏幕上的圖形按鈕時(shí)，屏幕上的觸覺(jué)反饋系統(tǒng)可根據(jù)預(yù)先編程的程式驅(qū)動(dòng)各種連結(jié)裝置可用作控制端操作大屏，原理等同于ipad控制，只是載體不同。
設(shè)計(jì)規(guī)范以及按鍵反饋等交互體驗(yàn)與ipad類似。
滑軌互動(dòng)屏系統(tǒng)——又稱為滑軌電視、滑軌播放等，通過(guò)特殊設(shè)計(jì)的機(jī)械滑軌控制裝置，結(jié)合高清液晶拼接幕墻，實(shí)現(xiàn)對(duì)屏幕內(nèi)容的互動(dòng)控制。滑動(dòng)到不同位置屏幕展示相關(guān)信息，包括圖片、文字、視頻等，是一種全新的互動(dòng)展示形式，可與觸摸同時(shí)使用。
虛擬沙盤(pán)/數(shù)字沙盤(pán)就是用計(jì)算機(jī)通過(guò)投影儀或者LED大屏顯示屏動(dòng)態(tài)/靜態(tài)三維顯示：智慧交通、智慧市政、智慧農(nóng)業(yè)、智慧物流、智慧停車、智慧公交、智慧公安、智慧交運(yùn)等模型，這是一種高科技的模型操作員通過(guò)程序，可以隨意調(diào)整沙盤(pán)的尺寸、規(guī)劃區(qū)域、區(qū)域布置，快速展示多種全新的創(chuàng)意。
具有三維顯示效果，并可以從不同角度觀察創(chuàng)意模型，篩選創(chuàng)意方案。注意虛擬沙盤(pán)和實(shí)體沙盤(pán)的聯(lián)動(dòng)效果，實(shí)體沙盤(pán)為底，虛擬沙盤(pán)做效果疊加。
分辨率：物理實(shí)際分辨率
A：首先我們需要了解適配最主要的痛點(diǎn)就是：靈活，復(fù)用性高，可延展。
圍繞這幾個(gè)點(diǎn)我們可以通過(guò)模塊化開(kāi)發(fā)去做，將每個(gè)模塊單獨(dú)開(kāi)發(fā)。我們?cè)O(shè)計(jì)師做這種需求之前，就需要提前去構(gòu)思，在設(shè)計(jì)各模塊時(shí)，盡量使用可擴(kuò)展和可自適應(yīng)的圖形，這樣面對(duì)適配的時(shí)候我們可以通過(guò)移動(dòng)，縮放這些模塊，來(lái)完成適配。盡量避免二次設(shè)計(jì)以及開(kāi)發(fā)，提升時(shí)間成本。
圖形放大適配
圖形位移適配
A：我們適配一定要記住靈活，減少工作量這些原則，如果不遵循這些原則，那么我們做適配的初衷就錯(cuò)誤了。這樣我們還不如直接就重新開(kāi)發(fā)一套了。就好比我們通過(guò)控制端去控制大屏，如何用開(kāi)發(fā)一套的時(shí)間去適配兩個(gè)甚至是多個(gè)終端，這是我們需要注意的。當(dāng)然考慮到一些實(shí)際情況，會(huì)有一定程度上的修改，但是一定是要從節(jié)省工作量去出發(fā)的。
從命題我們可以看到4*2的拼接屏，我們可以通過(guò)一塊屏幕為1920*1080去計(jì)算，那么通過(guò)計(jì)算分辨率應(yīng)該是1920*4 &1080*2，也就是7680*2160，這樣就計(jì)算出我們的分辨率了。
工作中相信不少同學(xué)都遇到過(guò)這種只知物理尺寸而不知道分辨率的項(xiàng)目，那么我們只能通過(guò)計(jì)算大概的設(shè)計(jì)分辨率來(lái)出初期的設(shè)計(jì)稿件。
此場(chǎng)景下公式為：15/4=X/2160 X=8100 那么可以大概得出寬度大概為8100像素（只是我們通過(guò)計(jì)算大概得出來(lái)的）
此場(chǎng)景下公式為：15/4=X/1080 X=4050
結(jié)果一：如果正方形比例不變，設(shè)計(jì)尺寸無(wú)限接近于大屏實(shí)際比例；
結(jié)果二：如果正方形比例被拉伸，設(shè)計(jì)尺寸小于大屏實(shí)際尺寸；
結(jié)果三：如果正方形比例被壓縮，設(shè)計(jì)尺寸大于大屏實(shí)際尺寸。
等比例投屏，投屏電腦投到2*2大屏（4K）
投屏電腦支持輸出4K分辨率，投屏電腦分辨率以3840*2160作為設(shè)計(jì)，投到4K拼接屏上，大屏?xí)昝勒故荆⑶耶?huà)面非常清晰。
投屏電腦支持輸出2K分辨率，投屏電腦分辨率以1920*1080作為設(shè)計(jì)，投到4K拼接屏上，只會(huì)以1920*1080進(jìn)行輸出，因?yàn)檩敵鱿袼刂荒苤С?K，也只是1920*1080的放大。
使用場(chǎng)景：科技展廳，以及一些帶主機(jī)的設(shè)備。
此種情況，一般我們的大屏?xí)詭е鳈C(jī)，大屏本身就可以看成一個(gè)顯示器非常大的電腦。我們?nèi)绻枰M(jìn)行可視化演示，那么我們直接就可以通過(guò)顯示器的尺寸去做設(shè)計(jì)，這樣就是大屏的設(shè)計(jì)尺寸。
一般這種靠硬件的投射，都是在拼接處理器的處理下，將多個(gè)屏幕拼合成一個(gè)大的顯示器，再通過(guò)拼控系統(tǒng)（硬件投屏）進(jìn)行輸出。
一般我們可以將我們大屏的（UE4或者U3D開(kāi)發(fā)）應(yīng)用程序打包，打包成一個(gè)后綴為.exe的應(yīng)用程序，在大屏電腦上直接點(diǎn)擊，程序就可以在大屏上完美的跑起來(lái)，也不需要去進(jìn)行電腦投射大屏。
如果通過(guò)控制端去控制大屏，那么投射設(shè)備就可以通過(guò)多種方式去展示了，可以是手機(jī)，平板，觸摸屏，手勢(shì)控制，體感控制等等。
這種情況下投射設(shè)備的尺寸就按照本身設(shè)備的規(guī)范去設(shè)計(jì)就可以了（比如750*1334，2048*1536），設(shè)計(jì)尺寸就是我們大屏本身的分辨率就可以了。
此種情況主要使用場(chǎng)景：屏幕寬度非常高，并且內(nèi)容可以分很多模塊展示，模塊彼此之間不受影響?yīng)毩⒄故荆@種情況下我們就可以通過(guò)此種方式去投屏。
通過(guò)多個(gè)主機(jī)分別去投射大屏的同等大小區(qū)域，比如圖中的場(chǎng)景模塊被我分成了四等份，我們就可以通過(guò)四臺(tái)主機(jī)去分別投射四個(gè)模塊，形成一個(gè)完整的大屏。
此種大屏設(shè)計(jì)尺寸我們以輸出設(shè)備的尺寸為主要參考，四臺(tái)主機(jī)那么整體寬度就是1920*4=7680，高度就是1080（如果設(shè)備支持4k輸出，那么提升相應(yīng)的設(shè)備尺寸*2就可以了）。
A：我們要記住，如果面對(duì)的是正常比例投屏到非等比的大屏，我們需要遵守的規(guī)范一定是：一切以大屏展示為主。所以我們?cè)O(shè)計(jì)尺寸一定是按照20:3來(lái)設(shè)計(jì)的，大屏展示正常才是我們的唯一標(biāo)準(zhǔn)，投屏電腦可能會(huì)出現(xiàn)的問(wèn)題，我們只能妥協(xié)（投屏電腦可能只能展示很小的一部分，但也是沒(méi)有辦法的）
那么我們遇到這種是否就沒(méi)有辦法了呢？在這阿勇給大家提供了三種解決辦法，在實(shí)際工作中，我也遇到過(guò)這種問(wèn)題，所以在這給大家分享一下。
A：前面的文章我們已經(jīng)介紹過(guò)拼接屏的尺寸的問(wèn)題，這個(gè)問(wèn)題的解答：1920*9/1080*6 ，這個(gè)就是設(shè)計(jì)分辨率，通過(guò)計(jì)算得出，最終設(shè)計(jì)稿尺寸為17280*6480?？梢钥闯鲈O(shè)計(jì)分辨率確實(shí)太大了，設(shè)計(jì)的時(shí)候如何去優(yōu)化設(shè)計(jì)尺寸呢？
通過(guò)命題我們可以看出電腦分辨率是支持4K的，就是說(shuō)輸出分辨率和顯示分辨率我們都是可以上4K的，而4K的分辨率一般會(huì)做3840*2160，再結(jié)合設(shè)計(jì)稿尺寸17280*6480，可以將整個(gè)效果圖尺寸縮小三倍，也就5760*2160。設(shè)計(jì)可以按照這個(gè)分辨率去出圖，最終交付給開(kāi)發(fā)的就是切三倍圖，并提示開(kāi)發(fā)是縮小三倍做的。
作者：AYONG_BDR 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司
總結(jié)了商業(yè)項(xiàng)目中遇到的一些可視化案例以及科幻可視化風(fēng)格，大體的將其分為三個(gè)大類：傳統(tǒng)風(fēng)格、HUD風(fēng)格、FUI風(fēng)格。
傳統(tǒng)狹義上的數(shù)據(jù)可視化, 更多是純圖形去代表數(shù)據(jù)，通過(guò)圖形去展示數(shù)據(jù)，直觀的展示所需要表現(xiàn)的指標(biāo)。數(shù)據(jù)可視化也有很多分類, 不過(guò)也許你也懶得了解了。
比如，網(wǎng)站后臺(tái)分析，可以說(shuō)是可視化分析報(bào)表類的，例如百度統(tǒng)計(jì)，谷歌統(tǒng)計(jì)等等；比如，面對(duì)B端后臺(tái)的數(shù)據(jù)可視化，國(guó)內(nèi)做的最好的無(wú)非就是antdesign，element；我們此處說(shuō)的是基于G端的數(shù)據(jù)可視化大屏，G端數(shù)據(jù)可視化從本質(zhì)上來(lái)說(shuō)是注重直接解決問(wèn)題，通過(guò)直觀的展示數(shù)據(jù)圖表去了解各個(gè)指標(biāo)的詳細(xì)數(shù)值；
也有甚者比較注重視覺(jué)效果，要酷炫，心理學(xué)家說(shuō), 人腦70%的神經(jīng)信號(hào)來(lái)自視覺(jué), 我們的視覺(jué)系統(tǒng)最完善, 而不同的感官之間, 多少是可以轉(zhuǎn)化的, 而且是每個(gè)人的天性。國(guó)內(nèi)傳統(tǒng)可視化對(duì)于此處的接受程度確實(shí)不一樣。B端和G端的用戶，對(duì)于可視化風(fēng)格的接受程度確實(shí)是不太一樣的，B端對(duì)于前沿技術(shù)以及可視化表現(xiàn)會(huì)有一定的接受能力，但是G端更多注重于界面酷炫，功能反而不是很重要了，這多少有點(diǎn)本末倒置的感覺(jué)。
平視顯示器(Head Up Display)，以下簡(jiǎn)稱HUD，是運(yùn)用在航空器的飛行輔助儀器。平視的意思是指飛行員不需要低頭就能夠看到他需要要的重要資訊。平視顯示器最早出現(xiàn)在軍用飛機(jī)上，降低飛行員需要低頭查看儀表的頻率，避免注意力中斷以及喪失對(duì)狀態(tài)意識(shí)(Situation Awareness)的掌握。
因?yàn)镠UD的方便性以及能夠提高飛行安全，民航機(jī)也紛紛跟進(jìn)安裝，汽車也開(kāi)始安裝，在一些游戲用戶界面，很多地方都會(huì)采用HUD的風(fēng)格，比如射擊類，格斗類，動(dòng)作類游戲等等（賽博朋克，堡壘之夜，絕地求生）。
相對(duì)于當(dāng)前流行的扁平化設(shè)計(jì)，F(xiàn)UI可謂是在Ul設(shè)計(jì)中獨(dú)樹(shù)一幟，設(shè)計(jì)風(fēng)格十分鮮明，極具未來(lái)感和科技感。
FUI是一個(gè)非常有趣的Ul設(shè)計(jì)領(lǐng)域，是我們?cè)谌粘，F(xiàn)實(shí)生活之中天法探索的用戶界面設(shè)計(jì)方式。在我們的日常工作中，通常日常設(shè)計(jì)很難有機(jī)會(huì)為宇宙飛船、時(shí)間旅行設(shè)備，或者感知型人工智能和外星人使用的用戶界面做設(shè)計(jì)。FUI使設(shè)計(jì)師有機(jī)會(huì)去突破現(xiàn)有的用戶體驗(yàn)和用戶界面的限制，探索一個(gè)新的領(lǐng)域。通過(guò)虛幻界面設(shè)計(jì)我們可以大膽的設(shè)想以及尋找新的解決方案。例如我們可以大膽的設(shè)想AR技術(shù)的應(yīng)用，地圖可以采用全息投影技術(shù)、人與智能硬件的環(huán)境交互等等。
虛幻界面設(shè)計(jì)甚至可以是新的發(fā)明，它們可以作為一種概念的驗(yàn)證它們可以啟發(fā)我們，提出問(wèn)題，探索什么可行，什么不可行。正如科幻小說(shuō)可以激勵(lì)人們登上月球或建造自動(dòng)駕駛汽車一樣，虛幻用戶界面可以激勵(lì)人們?yōu)槲磥?lái)創(chuàng)造技術(shù)。
如何培養(yǎng)和完善自己的可視化設(shè)計(jì)風(fēng)格呢？其實(shí)這個(gè)問(wèn)題有點(diǎn)狹隘，不同客戶不同使用場(chǎng)景我們可能風(fēng)格都會(huì)不太一樣，但是唯一我們不會(huì)變的是我們對(duì)于組件圖表的理解，圖表圖形的展示形式。
一個(gè)合格的可視化設(shè)計(jì)師，對(duì)于任何可以參考的頁(yè)面，都可以迅速領(lǐng)略到可以應(yīng)用的部分頁(yè)面和展示形式，多吸收知識(shí)，提升自己，這就是取其精華，去其糟粕的正確解答吧！所以要將現(xiàn)有風(fēng)格結(jié)合，完善設(shè)計(jì)理念，提升視覺(jué)技法，這才是當(dāng)下比較重要的。
最近由于工作中的一個(gè)項(xiàng)目，對(duì)自己充滿了懷疑，究竟什么叫科技感？不同的應(yīng)用場(chǎng)景，科技感是否還依舊有效？同展示條件下不同應(yīng)用場(chǎng)景，又會(huì)有什么樣的差異？究竟是什么樣子的設(shè)計(jì)，才能被“甲方爸爸"認(rèn)定為科技感十足，并且很酷炫呢？從酷炫科技感出發(fā)，總結(jié)了以下四個(gè)方面去解析科技感風(fēng)格。
相信很多可視化設(shè)計(jì)師聽(tīng)到最多的一句話：要酷炫，要科技感！每每聽(tīng)到這句話我都會(huì)變得非常暴躁。究竟是酷炫科技感代表可視化？還是數(shù)據(jù)可視才是可視化的內(nèi)核？每每遇到這種令人糟心的問(wèn)題，我想的是如何通過(guò)自己的專業(yè)知識(shí)去解釋，可是我發(fā)現(xiàn)根本解釋不清楚，也無(wú)法令甲方客戶信服，甚至和同為乙方的總包也無(wú)法達(dá)成統(tǒng)一戰(zhàn)線。那么我們應(yīng)該如何去做呢，又應(yīng)該如何去解釋科技感這個(gè)抽象的概念呢？
提到科技感色系一般我們想到的就是藍(lán)色系（科技藍(lán)），但是很多人可能走進(jìn)了一個(gè)誤區(qū)，科技感的專屬色彩并不是只有藍(lán)色，而且一些藍(lán)色確實(shí)讓我們有審美疲勞的感覺(jué)。如圖，就是我們比較常見(jiàn)的傳統(tǒng)可視化設(shè)計(jì)，一眼看去滿屏都是藍(lán)色，具有中國(guó)特色的藍(lán)色科技感。正如所有人都公認(rèn)的黨建題材為紅色加黃色，那么科技感真的只有藍(lán)色專屬嗎？黨建題材都是紅色專屬嗎？
由此可見(jiàn)，紅色并不是黨建題材的專屬色彩，存在即合理，也并沒(méi)有說(shuō)黨建可視化一定要做成紅色的。制約的因素有很多：項(xiàng)目背景，項(xiàng)目需求，設(shè)計(jì)提案，專業(yè)認(rèn)知等等，可視化大屏歸根結(jié)底還是做的是服務(wù)設(shè)計(jì)，因此服務(wù)好客戶，得到客戶的認(rèn)可，就能體現(xiàn)設(shè)計(jì)的價(jià)值。但是在設(shè)計(jì)稿中可以發(fā)現(xiàn)，界面運(yùn)用到了一些黨建色彩的元素，也是通過(guò)這種方式去展示，這也是設(shè)計(jì)師需要注意的一點(diǎn)。
藍(lán)色并不是科技感的專有屬性，任何一種顏色都是可以塑造科技感的感覺(jué)的。比如適合用綠色的場(chǎng)景做的界面，沒(méi)有做好看，那只能怪自己學(xué)藝不精，跟配色無(wú)關(guān)。不排斥藍(lán)色，但是討厭到處都是用藍(lán)色，上來(lái)就是用藍(lán)色。
說(shuō)到背景這是一個(gè)影響科技感非常重要的因素，一張超神比比皆是，一張超鬼也是隨處可見(jiàn)，究竟什么樣的背景才是一個(gè)優(yōu)秀的可視化界面所具備的？不是畫(huà)面發(fā)光，有閃光點(diǎn)，宇宙或者銀河那種圖；也不是科技點(diǎn)線，帶漸變的線條（混合工具做出來(lái)的那種）看起來(lái)就特別復(fù)雜；也不是那種亮度超過(guò)畫(huà)面任何一個(gè)元素的圖。
科技感的背景所起到的作用應(yīng)該是襯托畫(huà)面，而不是在畫(huà)面中比較跳，搶視覺(jué)，一大坨發(fā)光或者復(fù)雜的圖形，只會(huì)起到反作用。
圖形應(yīng)該是以上指標(biāo)中，最令人可以接受對(duì)科技感風(fēng)格詮釋的一種，科技感的圖形到底有哪些特征，我們又該如何去做呢？
通過(guò)以上案例我們可以發(fā)現(xiàn)，所謂圖形表現(xiàn)科技感，最大的特征就是點(diǎn)線面應(yīng)用的多元化，通過(guò)一種或者多種規(guī)律將點(diǎn)線面組合起來(lái)，線條粗細(xì)長(zhǎng)短不一，點(diǎn)大小不等。在使用圖形進(jìn)行點(diǎn)綴搭配時(shí)，切不可過(guò)于花哨，從而搶了主要內(nèi)容的風(fēng)頭。
此處可能會(huì)出現(xiàn)一些三維樣式的圖形，特殊的視角以及不常見(jiàn)的設(shè)計(jì)都會(huì)增加科技感的元素，但是也不是所有的三維都可以比二維更有科技感的。我最近做的就是甲方客戶一直覺(jué)得：三維元素太少了，科技感不夠。我就納悶了，到底什么才是科技感？難道科技感只能用三維的來(lái)表示了？只能說(shuō)一定條件下，三維是優(yōu)于二維展示的，但這也不是絕對(duì)的。如果你的場(chǎng)景主視覺(jué)本身就是二維范疇的，何必要要求組件三維展示。
下圖的二維科技感表現(xiàn)上肯定是超過(guò)三維地球的，至少我是這么認(rèn)為的。
動(dòng)效應(yīng)該是最能體現(xiàn)科技感的方式了，通過(guò)動(dòng)態(tài)演示組件，通過(guò)動(dòng)效展示界面，遠(yuǎn)遠(yuǎn)比靜態(tài)頁(yè)面要合理的多。動(dòng)效主要是通過(guò)：位移、旋轉(zhuǎn)、透明度（閃爍）、縮放等方式去制作，形成獨(dú)特的動(dòng)畫(huà)節(jié)奏。
可以發(fā)現(xiàn)科技感動(dòng)效一般都伴隨著極快的閃爍動(dòng)畫(huà)，動(dòng)畫(huà)的節(jié)奏也是比較偏快，再通過(guò)出現(xiàn)動(dòng)畫(huà)，字符偏移，剪切路徑等演示組件的形成過(guò)程。
可能大家沒(méi)有遇到過(guò)這種情況，比如在三維建筑可視化中，科技感本身就依賴于場(chǎng)景的表現(xiàn)，但是不知道大家有沒(méi)有試過(guò)，將三維建筑可視化換成二維GIS之后，我們?nèi)绾稳ナ巩?huà)面表現(xiàn)的更具科技感呢？
圖一，圖二，圖三分別就是替換不同的場(chǎng)景，那么我們來(lái)看看這些場(chǎng)景為什么不適合原本的之前的科技感風(fēng)格呢，我們一起思考一下~
大家可能會(huì)覺(jué)得科技感只針對(duì)于一些特殊的場(chǎng)景，或者說(shuō)是深色場(chǎng)景，比如一些實(shí)景地圖和衛(wèi)星地圖又該如何去表現(xiàn)科技感的元素呢？那么如果是淺色可視化我們又該如何去做科技感呢？
其實(shí)這本身就是一個(gè)偽命題，三維表現(xiàn)對(duì)畫(huà)面的沖擊力是非常強(qiáng)的，對(duì)于畫(huà)面視覺(jué)效果的提升有很大的幫助。不過(guò)是否所有的三維就是最合適的呢，這個(gè)也確實(shí)有待商榷。不過(guò)能肯定的是，一定程度上，三維一定會(huì)比二維更加具有沖擊，更加具有科技感。
其實(shí)最正確的表現(xiàn)就是二維表現(xiàn)加上三維場(chǎng)景展示，兩者相輔相成，對(duì)于畫(huà)面的展示才是最好的。通過(guò)下面這組案例可以發(fā)現(xiàn)，二維表現(xiàn)加上三維場(chǎng)景才是最優(yōu)解。
很多同學(xué)對(duì)于文字需求如何制作科技感有很多的疑問(wèn)，通過(guò)最近的作圖，總結(jié)出四種關(guān)于文字排版科技感的展示，總結(jié)起來(lái)其實(shí)就那么幾點(diǎn)：裝飾，圖形，字體，版式，表現(xiàn)形式...
其實(shí)對(duì)于數(shù)據(jù)可視化設(shè)計(jì)科技感的研究，不僅需要了解表現(xiàn)層，更需要上升到業(yè)務(wù)層。一些特定的圖形或者裝飾，對(duì)于畫(huà)面的豐富程度一定是有幫助的。
講了這么多，不知道對(duì)大家理解科技感是否有幫助，如何提升畫(huà)面科技感，是我們做為數(shù)據(jù)可視化設(shè)計(jì)必定會(huì)面臨的一大難題。希望大家在以后的工作或者項(xiàng)目中，多多酷炫，多多科技感?。?！
因此我們要確定的是，根據(jù)這四個(gè)“W”去確定整體業(yè)務(wù)框架的基礎(chǔ)構(gòu)成，這對(duì)于設(shè)計(jì)風(fēng)格的初步意向確認(rèn)有著很積極的意義。
who：王局長(zhǎng)
when：領(lǐng)導(dǎo)人會(huì)議時(shí)
where：公安局
what：新基建建設(shè) 數(shù)字化轉(zhuǎn)型事項(xiàng)
在領(lǐng)導(dǎo)人會(huì)試上，公安局王局長(zhǎng)提議通過(guò)了關(guān)于新基建，數(shù)字化轉(zhuǎn)型的各種措施。面對(duì)這一場(chǎng)景，有以下幾個(gè)問(wèn)題。受眾是誰(shuí)？需要干什么事情？誰(shuí)去干？數(shù)字化轉(zhuǎn)型怎么做？怎么實(shí)現(xiàn)？需要用到的技術(shù)？展示風(fēng)格？重功能？還是重展示？
在有了這些的前提下，對(duì)于我們?cè)O(shè)計(jì)風(fēng)格的選擇就有了很強(qiáng)的指導(dǎo)意義，比如王局長(zhǎng)比較喜歡多色搭配，科技感強(qiáng)的風(fēng)格，主要為了配合展示匯報(bào)，那么就可以通過(guò)這一些需求，初步制定風(fēng)格為效果酷炫的展示類大屏，但是主視覺(jué)的展示形式還是要根據(jù)其他的具體情況去進(jìn)一步確認(rèn)。
在面對(duì)一些特有的項(xiàng)目時(shí)，一般客戶會(huì)給出一些參考術(shù)語(yǔ)：“3個(gè)一帶”，“2個(gè)方針”，“八大成果”“三山，兩水，百林，千田”......
面對(duì)這種問(wèn)題，能做的就是理解其包含的真實(shí)意義，究竟需要展示哪方面的，了解清楚項(xiàng)目的背景需求，結(jié)合客戶所說(shuō)的一些關(guān)鍵字段，剖析以上的內(nèi)容可以發(fā)現(xiàn)，客戶通過(guò)一些方針和方法，對(duì)“山水林田”進(jìn)行治理，取得了一些階段性成果。
因此展示的內(nèi)容可以確定為智慧治理，或者智慧生態(tài)方向的，然后就可以根據(jù)項(xiàng)目背景的內(nèi)容去選擇可以應(yīng)用的具體的一些方案了。
因在到了需求分析的階段，可以根據(jù)客戶提供的大量的資料和業(yè)務(wù)需求，去明確的設(shè)計(jì)方向，究竟是需要展示哪些內(nèi)容？可以提供的數(shù)據(jù)有哪些？展示條件（硬件設(shè)施）是否具備？想要的效果有哪些？
比如客戶需要查看到山水林田的各個(gè)改進(jìn)措施的效果，以及改進(jìn)前后的效果對(duì)比。說(shuō)到這單純的二維GIS和影像已經(jīng)不太好滿足了，那么可以將場(chǎng)景風(fēng)格定位到三維展示，需要實(shí)際1:1建模，至于是通過(guò)WEBGL，UE，UNITY就看各自的團(tuán)隊(duì)擅長(zhǎng)的方向了。
場(chǎng)景大體風(fēng)格確定，那么展示面板需求根據(jù)場(chǎng)景去搭建就可以了，這樣一個(gè)完整的風(fēng)格選擇過(guò)程就算初步走通了，具體的驗(yàn)證環(huán)節(jié)，可以在一次次會(huì)議中再去進(jìn)行交流和修改即可。
展示容易，風(fēng)格切換皮膚多，可編輯性高，開(kāi)發(fā)難度低，地圖資源較多，適合快速搭建可視化大屏模版，開(kāi) 源內(nèi)容較多，前端開(kāi)發(fā)直接調(diào)用樣式即可。
展示形式較普通，地圖風(fēng)格樣式不出彩，設(shè)計(jì)效果也會(huì)打很多折扣，很難與同行拉開(kāi)差距。
開(kāi)發(fā)過(guò)程中可能需要基于高德API以及一些平臺(tái)，對(duì)封裝地圖進(jìn)行二次開(kāi)發(fā)，沒(méi)有GIS開(kāi)發(fā)經(jīng)驗(yàn)的前端，會(huì)比較困難。
https://lbs.amap.com/product/mapstyle#/ Mapbox，高德API，百度API，超圖，天地圖等等。
以高德API為例
展示靈活，可下載svg矢量區(qū)塊，并可下載json文件直接交付開(kāi)發(fā)，可下鉆到縣級(jí)，可編輯性高，一般會(huì)結(jié)合二維GIS來(lái)展示，有插件可以直接繪制全國(guó)地圖。
不夠立體，可選樣式比較少，畫(huà)面主視覺(jué)容易空洞導(dǎo)致畫(huà)面效果不強(qiáng)。
開(kāi)發(fā)對(duì)于設(shè)計(jì)圖的一些效果還原比較困難，例如發(fā)光，漸變等等。只能做一些比較基礎(chǔ)屬性的修改，對(duì)于效果還原可能達(dá)不到80%以上。
http://datav.aliyun.com/tools/atlas/index.html#&lat=33.50475906922609&lng=104.2822265625&zoom=4
以DATAV地圖下載器為例
展示效果好，三維場(chǎng)景，有立體效果，材質(zhì)貼圖不同效果會(huì)完全不一樣，可編輯性較強(qiáng)，相比較二維更推薦這種表現(xiàn)形式。
三維范疇，不會(huì)三維知識(shí)的小伙伴會(huì)比較難，此處會(huì)涉及到三維軟件合并擠壓，展UV，漫射貼圖，QGIS制作高度貼圖，PS制作法線貼圖等等知識(shí)點(diǎn)。
對(duì)于不懂三維的小伙伴比較困難，涉及知識(shí)點(diǎn)較多，容易一知半解。
https://mp.weixin.qq.com/s/zjR_pJyU1jpeLJMXZ-4FyA（原作者已授權(quán)）
3D地圖建模及貼圖的制作獲取方法
展示形式新穎，展示效果非常好，三維表現(xiàn)往往讓人耳目一新，對(duì)于可視化的展示可以說(shuō)是所見(jiàn)即所得，深得客戶喜愛(ài)。
開(kāi)發(fā)難度高，專業(yè)性人才比較少，懂三維的設(shè)計(jì)也是非常的少，對(duì)于三維知識(shí)以及引擎開(kāi)發(fā)知識(shí)需要比較熟悉才行。
人才稀缺，入門(mén)難，做好更難，教程自學(xué)難度有點(diǎn)大，例如cityengine程序化建模，houdini程序化建模等等。
https://space.bilibili.com/21247145?from=search&seid=10582171815506234319
cityengine程序化建模
主視覺(jué)效果強(qiáng)，特殊場(chǎng)景的處理能夠很完美的講清邏輯，對(duì)于圖形化的理解有很強(qiáng)的意義。
邏輯復(fù)雜，難懂，比較抽象，專業(yè)難度高，對(duì)業(yè)務(wù)理解能力需要很強(qiáng)。
邏輯處理比較難，設(shè)計(jì)效果比較難以想象，設(shè)計(jì)容易偏離主題，比如數(shù)據(jù)中臺(tái)，是一個(gè)非常虛幻的東西，很難講清楚處理邏輯和過(guò)程。
https://www.zcool.com.cn/work/ZMzg4OTQ5ODQ=.html
以知識(shí)圖譜為例
可視化風(fēng)格三大分類以及對(duì)于圖形的應(yīng)用（傳統(tǒng)、HUD、FUI）；
如何培養(yǎng)自己的數(shù)據(jù)可視化設(shè)計(jì)風(fēng)格（色彩+圖形+板式）；
影響科技感風(fēng)格的四大影響因素（配色，圖形，背景，動(dòng)效）；
設(shè)計(jì)風(fēng)格的選擇以及確定思路（根據(jù)場(chǎng)景、含義、需求）；
可視化風(fēng)格的應(yīng)用以及拓展（各種主視覺(jué)的應(yīng)用優(yōu)缺難點(diǎn)）。
作者：AYONG_BDR 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司
今天就帶大家好好聊一聊可視化大屏設(shè)計(jì)中的字體、字號(hào)、字重、字體優(yōu)化等一系類注意事項(xiàng)。字體篇主要分為四大模塊：字體選擇與字重、字號(hào)規(guī)范與應(yīng)用、字體優(yōu)化與交接、常用字體與推薦。
文字是界面中最核心的元素，是產(chǎn)品傳達(dá)給用戶的主要內(nèi)容，它的承載體即是字體。從字體的最基本屬性（字族、字類、字重、字號(hào)等）說(shuō)起，熟悉字體的那些特征，了解字體在界面中的作用。
襯線又被稱為“字腳”，襯線體就是有邊角裝飾的字體。我們常用的西文字體Times New Roman等；中文比較常見(jiàn)的比如宋體、明體等。
無(wú)襯線體則與襯線體相反，通常是機(jī)械和統(tǒng)一粗細(xì)的線條，沒(méi)有邊角的裝飾。最具代表性的Arial、Helvetica的西文字體，中文比較常見(jiàn)的比如黑體，微軟雅黑等。
無(wú)襯線字體所具備的技術(shù)感和理性氣質(zhì)，更受科技型企業(yè)或品牌青睞，騰訊谷歌等互聯(lián)網(wǎng)企業(yè)都是選用的無(wú)襯線體；襯線字體的優(yōu)雅與復(fù)古，則常用于藝術(shù)性文字，時(shí)尚品牌等。
因此在具有濃厚技術(shù)的可視化氛圍中，體現(xiàn)科技感和數(shù)字感，結(jié)合我們的觀測(cè)體驗(yàn)，展示形式等，我們統(tǒng)一選用的字體是無(wú)襯線體。
在使用數(shù)字屏幕閱讀時(shí)，字體的選擇要選用無(wú)襯線體（比如黑體，微軟雅黑）厚重一點(diǎn)，不可選用襯線體（比如宋體，書(shū)法體）比較單薄。
標(biāo)題可以用Bold，更厚重，更加醒目，且不需要長(zhǎng)時(shí)間觀看；正文由于需要長(zhǎng)時(shí)間觀看，因此采用Regular字重，觀感以及體驗(yàn)更佳；
英文字體類型的使用，英文選擇更明顯的粗體，因?yàn)橐故緮?shù)據(jù)，使得數(shù)據(jù)展示更加直觀，依舊是選用無(wú)襯線體，比較推薦：D-DIN字體。
字重用Regular，更加纖細(xì)精致，英文字體分為大小寫(xiě)，一般推薦使用純大寫(xiě)模式，因?yàn)榇髮?xiě)可以保證字體本身整齊，并且寬高都是一致的，對(duì)于排版以及展示會(huì)更加友好。
數(shù)字字體類型的使用，考慮畫(huà)面的字體的種類不超過(guò)三種，并考慮到字體的統(tǒng)一性，數(shù)字的字體與英文字體保持統(tǒng)一，比較推薦：D-DIN字體。
數(shù)字字體的字重盡量使用Bold，因?yàn)檎故靖用黠@，數(shù)字的展示一般都為數(shù)據(jù)展示，在界面的展示中，一般數(shù)字字體會(huì)比同字號(hào)下中文小4-6px，因此展示是保證數(shù)據(jù)清晰顯示，數(shù)字的字體大一點(diǎn)數(shù)據(jù)才能更清晰，更符合數(shù)據(jù)可視化展示。
數(shù)字字體盡量選用等距字體，比如數(shù)字“1”和“0”，有些字體的間距會(huì)相應(yīng)的縮小，我們要選用的就是等距字體，這樣在做一些列表數(shù)據(jù)對(duì)齊的時(shí)候，數(shù)據(jù)展示更加友好。
政府類客戶對(duì)于文字大小粗細(xì)的追求可以說(shuō)是非常的偏激，字體加大加粗幾乎成了標(biāo)配，這種需求下，我們能做的就是在原有規(guī)范的基礎(chǔ)上盡量去提升字號(hào)和字重。
常規(guī)16：9指的是1920*1080的分辨率
在字體大小的選擇上，參考了頁(yè)面上常規(guī)大小，定義了一套關(guān)于不同尺寸下的標(biāo)準(zhǔn)字號(hào)，正常1080P頁(yè)面，最小字號(hào)不小于16px。
此處字號(hào)并不是絕對(duì)，因?yàn)榭紤]到目標(biāo)群體適老化的原因，我們主動(dòng)提高了字體的大小，一切都是為了提高客戶的觀測(cè)體驗(yàn)，具體字號(hào)大小還需要參考設(shè)備清晰度，環(huán)境燈光，視距，人為原因等因素。
常規(guī)32：9指的是3840*1080的分辨率
在字體大小的選擇上，其實(shí)是兩塊1080P的屏幕進(jìn)行拼接，因此如果畫(huà)面內(nèi)容較多時(shí)，定義最小字號(hào)不小于16px。
如果畫(huà)面內(nèi)容較少時(shí)，具體字號(hào)大小還需要參考設(shè)備清晰度，環(huán)境燈光，視距等因素，對(duì)字體進(jìn)行相應(yīng)的放大，比例合適即可。
此處字號(hào)并不是絕對(duì)，因?yàn)榭紤]到目標(biāo)群體適老化的原因，我們主動(dòng)提高了字體的大小，一切都是為了提高客戶的觀測(cè)體驗(yàn)。
特殊尺寸指的是非主流的分辨率，比如2880*1920的分辨率
這塊的字號(hào)大小比較難定義，因?yàn)樾枰紤]的因素很多，總體來(lái)說(shuō)字號(hào)大小如果高度在1080px左右，那么就按16:9的字號(hào)規(guī)范來(lái)算。
如果高度高于1080且很多，則需要等比計(jì)算或者放大，具體實(shí)踐出的準(zhǔn)確數(shù)值還得需要根據(jù)大屏的實(shí)際情況來(lái)綜合考慮，這里只是提供一些基礎(chǔ)計(jì)算方式。
字號(hào)的大小受到屏幕大小的影響；
字號(hào)的大小受到界面內(nèi)容的影響；
字號(hào)的大小受到觀測(cè)距離的影響；
字號(hào)的大小受到設(shè)備性能的影響；
字號(hào)的大小受到主觀人為的影響；
給開(kāi)發(fā)的字體太大怎么辦？如何優(yōu)化？開(kāi)發(fā)采用默認(rèn)字體去開(kāi)發(fā)怎么辦？開(kāi)發(fā)用部署電腦沒(méi)有這個(gè)字體去打發(fā)你又該怎么辦？
其實(shí)我們可以用一些特殊的方法對(duì)原有的字體包進(jìn)行優(yōu)化，比如英文字體，我們可以刪除非必要的中文字體和數(shù)字，符號(hào)，只保留一些必要的英文字母。具體方法如下，我們可以用FontCreator軟件去進(jìn)行字體的優(yōu)化與刪減，并修改字體細(xì)節(jié)，重新命名發(fā)布。
同時(shí)如果有意向的同學(xué)，也可以用自己設(shè)計(jì)的字體去應(yīng)用到開(kāi)發(fā)，這樣的操作不是一舉兩得嗎？
優(yōu)化字體教程：https://www.bilibili.com/video/av82311138
默認(rèn)字體開(kāi)發(fā)可能有時(shí)候會(huì)出現(xiàn)文字換行，或者文字放不下的情況，因?yàn)椴煌煮w的字間距以及大小可能是不同的，因此在初期就需要跟開(kāi)發(fā)協(xié)調(diào)好，跟設(shè)計(jì)效果圖的字體保持同步，這樣才能保證設(shè)計(jì)效果的還原。
字體的存放一般是有兩種，一種是放到單獨(dú)的服務(wù)器然后每次加載去服務(wù)器訪問(wèn)字體，另一種是跟代碼放到一起。對(duì)于字體大小的要求。本地存儲(chǔ)不需要考慮字體包的大小，云存儲(chǔ)需要考慮字體包大小。
云存儲(chǔ)一般字體包大小的話可以限制在2、3M左右，5、6M的字體包就已經(jīng)非常大了，太大會(huì)影響我們字體的讀取，畫(huà)面加載很慢。
最優(yōu)解就是在部署本地的電腦上安裝你需要的字體，這樣的話程序就自動(dòng)讀取，可以識(shí)別本地部署的字體；如果不支持本地化部署的，字體是存放在服務(wù)器或者是跟代碼打包放一起的，可以要求開(kāi)發(fā)在全局代碼中多寫(xiě)幾個(gè)備用的字體。
比如你是Windows系統(tǒng)，哪呢么自帶的就是微軟雅黑，IOS系統(tǒng)自帶的就是蘋(píng)方平臺(tái)，會(huì)自動(dòng)根據(jù)寫(xiě)出的代碼按順序篩選自帶的系統(tǒng)字體。
一些特別好用的字體，會(huì)在設(shè)計(jì)過(guò)程中提升畫(huà)面視覺(jué)，因此給大家推薦并分享了一些可以做可視化大屏的商用中英文字體。
可視化商用免費(fèi)字體鏈接: https://pan.baidu.com/s/1QCihCIs5OK0w-f0oFv8BQQ 提取碼: owve
中文字體包含了一些可以做標(biāo)題的一些造型比較好看的字體，比如優(yōu)設(shè)標(biāo)題黑，站酷高端黑體，盧帥正銳黑體，胡曉波男神體等等。可做正文字體的比如，蘋(píng)方簡(jiǎn)體，思源黑體等等。
英文字體和數(shù)字字體主要是分享了一些數(shù)據(jù)展示比較奇特的造型字體，比如：DS-digital、Furore、以及正常數(shù)據(jù)展示的D-DIN字體家族等。
1、字體的最基本屬性：字族、字類、字重、字號(hào)，通過(guò)四種基本屬性為切入點(diǎn)，精準(zhǔn)的去講述大屏可視化的字體規(guī)范和樣式。
2、在可視化大屏設(shè)計(jì)中，字體更加偏向于無(wú)襯線體，無(wú)襯線字體所具備的技術(shù)感和理性氣質(zhì)，更受科技型企業(yè)或品牌青睞；
3、在可視化大屏中，展示數(shù)據(jù)的重要性不言而喻，因此要注意中文、英文、數(shù)字字體的選擇以及注意事項(xiàng)，一切以數(shù)據(jù)展示更加明顯為前提；
4、在不同屏幕中，可視化大屏的字號(hào)大小規(guī)范是有區(qū)別的，并且需要結(jié)合影響字號(hào)的五大因素：屏幕大小、界面內(nèi)容、觀測(cè)距離、設(shè)備性能、主觀人為去制定字體規(guī)范；
5、通過(guò)FontCreator軟件去對(duì)字體進(jìn)行優(yōu)化，掌握字體的刪減發(fā)布以及交付開(kāi)發(fā)的方法；
6、了解開(kāi)發(fā)存儲(chǔ)字體的兩種形式，一種是本地化部署，一種是與代碼打包服務(wù)器云存儲(chǔ)，以及了解兩種方式的優(yōu)缺點(diǎn)；
7、了解可視化開(kāi)發(fā)關(guān)于字體交接時(shí)的注意事項(xiàng)，可以通過(guò)自己的理解去解決工作中的關(guān)于字體的問(wèn)題；
8、推薦了常用的可視化大屏的字體：中文字體、英文字體；
9、如果畫(huà)面內(nèi)容較少時(shí)，可以適當(dāng)提高字號(hào)，反之亦然，比例合適即可。
10、可視化大屏設(shè)計(jì)字體規(guī)范不存在絕對(duì)字體規(guī)范。
作者：AYONG_BDR 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司
色彩篇主要分為：色彩三要素、配色方法、可視化中的顏色擴(kuò)展、色彩選用原則、行業(yè)配色
主要想通過(guò)色彩的原理，配色的多種方法，以及如何拓展可視化界面中的元素顏色（文字，裝飾，背景，彈框等），最后總結(jié)了顏色的記憶屬性（行業(yè)配色）。
色相是色彩的首要特征，是區(qū)別各種不同色彩的最準(zhǔn)確的標(biāo)準(zhǔn)。比如紅色、黃色、藍(lán)色等。色相可以具體到各個(gè)行業(yè)所代表的不同顏色，比如公安為藍(lán)色，黨建為紅色，金融為橘色等。
色相只是顏色的另一種說(shuō)法。
明度可以簡(jiǎn)單理解為顏色的亮度，不同的顏色具有不同的明度，例如天藍(lán)色就比紅色的明度高，如綠色中由淺到深有粉綠、淡綠、翠綠等明度變化。
明度定義了顏色的明亮程度，從黑色到白色。
飽和度也叫純度，通常是指色彩的鮮艷度。
色彩的純度強(qiáng)弱，是指色相感覺(jué)明確或含糊、鮮艷或混濁的程度。色彩的純度變化，可以產(chǎn)生豐富的強(qiáng)弱不同的色相，而且使色彩產(chǎn)生韻味與美感。
是指顏色從純度（100%）到灰度（0%）的取值范圍。
圖片配色法可以運(yùn)用PS工具，選擇你鐘意的一張圖，拖進(jìn)PS里，執(zhí)行：濾鏡-像素化-馬賽克，就可以得到基于圖片的馬賽克像素點(diǎn)，然后吸取顏色即可。
插件配色法可以通過(guò)Eagle、美葉等軟件直接獲取圖片色，非常之方便，此種方法相比較于圖片配色法，更具科學(xué)性和準(zhǔn)確性。
利用色環(huán)配色大家可能都知道，但是我們需要做到的是如何靈活的配色以及進(jìn)行適量的處理。
1、鄰近色配色法
三種顏色組成，觀感更加舒適，色系搭配更舒服。
2、補(bǔ)色配色法
補(bǔ)色是指色環(huán)中兩個(gè)對(duì)稱的色塊，他們是色環(huán)中相隔最遠(yuǎn)的兩個(gè)顏色，因此兩種顏色的對(duì)比也是最大的。
3、補(bǔ)色分割配色法
補(bǔ)色分割與補(bǔ)色配色相似。首先選定一個(gè)顏色，然后使用它一個(gè)鄰近色，最后找出它的補(bǔ)色。（也叫等腰三角形配色）
4、三角配色法
三角色由三種顏色組成，是色環(huán)上平均分布的三種顏色，共同在色環(huán)上連接成三角形。這種方法更適合色彩鮮艷。
5、四角配色法
這種方法由兩對(duì)補(bǔ)色組成，共4種顏色，其中只有一個(gè)是主色，另外三個(gè)顏色是輔助色。
通過(guò)對(duì)主色的疊加不同透明的黑色與白色（擴(kuò)展白度和擴(kuò)展黑度），可以擴(kuò)展出背景、彈框、裝飾、文字等顏色。
擴(kuò)展白度就是為所有顏色創(chuàng)建出更多較淺的顏色（增加白色透明）。比如我們通過(guò)大幅提升主色的白度，可以作為項(xiàng)目的文本色，那么我們?cè)撊绾卧黾影锥饶兀?
擴(kuò)展黑度就是為所有顏色創(chuàng)建出更多較深的顏色（增加黑色透明）。比如我們通過(guò)大幅提升主色的黑度，可以作為項(xiàng)目的背景色和卡片底色，那么我們?cè)撊绾卧黾雍诙饶兀?
我們通過(guò)將主色增加黑度的方式，去定義背景色。具體數(shù)值：主色增加90%-95%黑色，作為背景色。
我們通過(guò)將主色增加黑度的方式，去定義彈框色以及模塊背景色。具體數(shù)值：主色增加75%-85%黑色，作為彈框色和模塊背景色。
我們通過(guò)將主色增加黑度的方式，去定義裝飾線色。具體數(shù)值：主色增加50%-70%黑色，作為裝飾線的顏色。
我們通過(guò)將主色增加黑度的方式，去定義裝飾點(diǎn)色。具體數(shù)值：主色增加30%-50%黑色，作為裝飾點(diǎn)的顏色。
我們通過(guò)將主色增加白度的方式，去定義正文文字色。具體數(shù)值：主色增加90%-95%白色，作為正文的顏色（輔助文字可以減少一半透明度）。
餅圖中可以會(huì)用到很多的顏色去配置，那我們應(yīng)該如何去配置呢？
遵守“631”“三不”“兩多”這幾個(gè)原則，可以讓你在可視化中的色彩搭配能力更加自如。
運(yùn)用配色631法則，將配色定義為主色60%，輔助色30%，對(duì)比色10%去貫穿整套界面。文字的顏色通過(guò)重要，普通，次要去分配，帶有色彩傾向豐富頁(yè)面視覺(jué)。
1、不選用同一色系
同色系會(huì)使畫(huà)面看起來(lái)對(duì)比度非常弱，色彩指代感弱，色彩之間不好拉開(kāi)層級(jí)。
2、不選用顏色接近
鄰近色會(huì)使畫(huà)面感覺(jué)偏弱，沒(méi)有強(qiáng)對(duì)比，畫(huà)面層次感不足。
3、不選用同色透明
同色透明會(huì)讓畫(huà)面非常的灰，是可視化中的大忌，切勿使用。
1、多選用對(duì)比色
強(qiáng)對(duì)比可以拉開(kāi)視覺(jué)層級(jí)，突出畫(huà)面，視覺(jué)至上。
2、多選用黑白灰
黑白灰可以使畫(huà)面變的非常高級(jí)，并且畫(huà)面細(xì)節(jié)度拉滿。
色彩具有很強(qiáng)的記憶屬性，因此用戶會(huì)將他們感受到的內(nèi)容與色彩聯(lián)系起來(lái)。
可以從大量資源池中去尋找靈感，比如金融行業(yè)，我們可以從已知的金融元素都是紅黃搭配的，因此我們?cè)谂渖珪r(shí)肯定需要注意這一特征的。
交通一般以藍(lán)色為主調(diào)，配合紅黃綠（紅綠燈顏色）三種代表著道路擁擠程度，藍(lán)色是大多數(shù)人最喜歡的顏色。由于藍(lán)色自帶的親和力，它是數(shù)字產(chǎn)品設(shè)計(jì)中最常用的顏色（除了黑色和白色）。
含義： 平靜、和平、安全、寧?kù)o、信任。
適用： 交通，公安，監(jiān)控，政府機(jī)關(guān)。
缺點(diǎn)： 由于其流行性與適用性，作為品牌主色很難脫穎而出。
文化旅游代表著健康，和諧，自然，戶外，綠色是大自然的顏色，人們對(duì)綠色的喜愛(ài)程度僅次于藍(lán)色，綠色具有絕佳的親和力。
含義： 健康、自然、平靜、放松、成長(zhǎng)。
適用： 醫(yī)療康復(fù)、生態(tài)、旅游。
缺點(diǎn)： 當(dāng)綠色作為主色時(shí)，你可能需要再找一個(gè)顏色表示成功消息了。
藍(lán)色是大多數(shù)人最喜歡的顏色。由于藍(lán)色自帶的親和力，它是數(shù)字產(chǎn)品設(shè)計(jì)中最常用的顏色（除了黑色和白色）。
含義： 平靜、和平、安全、寧?kù)o、信任。
適用： 公安，監(jiān)控，交通，政府機(jī)關(guān)。
缺點(diǎn)： 由于其流行性與適用性，作為品牌主色很難脫穎而出。
電力行業(yè)一般以國(guó)家電網(wǎng)的綠色系為主，給人一種安全可靠，綠色環(huán)保的電力行業(yè)。
含義： 安全、可靠、綠色、環(huán)保。
適用： 電力，電網(wǎng)，網(wǎng)絡(luò)安全。
缺點(diǎn)： 當(dāng)綠色作為主色時(shí)，你可能需要再找一個(gè)顏色表示成功消息了。
生態(tài)代表著健康，和諧，自然，綠色是大自然的顏色，人們對(duì)綠色的喜愛(ài)程度僅次于藍(lán)色，綠色具有絕佳的親和力。
含義： 健康、自然、平靜、放松、成長(zhǎng)。
適用： 醫(yī)療康復(fù)、生態(tài)、旅游。
缺點(diǎn)： 當(dāng)綠色作為主色時(shí)，你可能需要再找一個(gè)顏色表示成功消息了。
金融行業(yè)非常注重屬性搭配，暖色系可以增加購(gòu)買欲望，使人有溫暖的感覺(jué)。橙色被認(rèn)為是一種非常有活力和熱情的顏色， 它促進(jìn)活動(dòng)和創(chuàng)造性思維。
含義： 創(chuàng)意、能量、熱情、活躍、煩躁。
適用： 金融，證券，貨幣，黨建。
缺點(diǎn)： 當(dāng)橙色作為主色時(shí)，你可能需要另一種顏色作為警告色。
1、加強(qiáng)對(duì)色彩三要素：色相、明度、飽和度的認(rèn)知；
2、掌握三種配色方法：圖片配色法、插件配色法、色環(huán)配色法，以及了解配色的原理；
3、可視化界面中如何擴(kuò)展顏色（白度，黑度，背景，彈框，裝飾，文字，輔助色等）；
4、配色631原則，主色、輔助色、對(duì)比色應(yīng)用原則；
5、“三不”原則：不選用同一色系、不選用顏色接近、不選用同色透明；
6、“兩多”原則：多選用對(duì)比色、多選用黑白灰；
7、不同行業(yè)配色注意事項(xiàng)，通過(guò)元素搜集以及情緒版，配置不同行業(yè)可視化配色；
8、顏色的含義以及適用的地點(diǎn)；
作者：AYONG_BDR 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司
首先一般講適老化無(wú)障礙設(shè)計(jì)，我們都要提到的就是通用性設(shè)計(jì)和包容性設(shè)計(jì)。
原則：強(qiáng)調(diào)設(shè)計(jì)所有的系統(tǒng)和產(chǎn)品，使每個(gè)人都能使用，無(wú)論他們的年齡或能力。
百度百科將通用設(shè)計(jì)定義為：“能被失能者所使用，就更能被所有的人使用。通用設(shè)計(jì)的核心思想是：把所有人都看成是程度不同的能力障礙者，即人的能力是有限的，人們具有的能力不同，在不同環(huán)境具有的能力也不同。”
通用設(shè)計(jì)中應(yīng)當(dāng)也包含對(duì)于特殊人群的基本考慮，要讓目標(biāo)人群覺(jué)得：魚(yú)和熊掌都可兼得，既照顧了特殊人群的使用，又兼顧所有人。
原則 ：好的設(shè)計(jì)應(yīng)該滿足盡可能多得使用者的需求。
百度百科將包容性設(shè)計(jì)定義為：包容性設(shè)計(jì)著眼于清楚源于使用主體而造成的各種障礙，使每個(gè)個(gè)體都能平等、自信、獨(dú)立的正常使用，為同一適用條件下的互動(dòng)提供了新的視角，也為創(chuàng)造性和問(wèn)題解決導(dǎo)向的設(shè)計(jì)提供了機(jī)會(huì)。
通過(guò)分析客戶的困境，結(jié)合現(xiàn)狀進(jìn)行深入分析，發(fā)掘政府端客戶的普遍性存在的問(wèn)題。
大多數(shù)政府省市級(jí)領(lǐng)導(dǎo)人的年紀(jì)均在60左右，由于年齡普遍較大，對(duì)于設(shè)計(jì)的認(rèn)知會(huì)有偏差，對(duì)于審美的把控以及設(shè)計(jì)本身的價(jià)值理解會(huì)偏弱。
從去年十月上旬開(kāi)始，省級(jí)黨委換屆拉開(kāi)大幕，在至今近8個(gè)月的時(shí)間里，全國(guó)31個(gè)省區(qū)市先后展開(kāi)換屆。經(jīng)過(guò)此次換屆，干部隊(duì)伍的年齡結(jié)構(gòu)得到進(jìn)一步優(yōu)化，初步形成“50后”為主導(dǎo)、“60后”漸成中堅(jiān)的格局。
根據(jù)公開(kāi)資料統(tǒng)計(jì)，31省區(qū)市書(shū)記平均年齡為58.1歲。其中，“40后”書(shū)記有6位，“50后”有22位，“60后”也有3位，某區(qū)黨委書(shū)記胡XX和XX省委書(shū)記孫XX同為63年出生，是最年輕的書(shū)記。
視力：老年人視力的下降，影響眼睛對(duì)空間、顏色、明暗等加工等；
聽(tīng)力：聽(tīng)力弱化造成的聽(tīng)不清楚，尤其是在嘈雜的環(huán)境中，老年人聽(tīng)起聲音來(lái)會(huì)更吃力；
表達(dá)力：專業(yè)化的術(shù)語(yǔ)以及需求，會(huì)使表達(dá)和溝通不便；
互聯(lián)網(wǎng)和人工智能等技術(shù)發(fā)展變化太快導(dǎo)致認(rèn)知力的不足。
絕大多數(shù)的老年人對(duì)現(xiàn)在數(shù)字化的產(chǎn)品很陌生，再加上復(fù)雜的界面操作，需要反復(fù)的學(xué)習(xí)使用才能熟悉掌握。
ToG類型的項(xiàng)目，我們的客戶群體是政府的某個(gè)部門(mén)（G端行業(yè)中，政府部門(mén)因?yàn)闄?quán)限和管轄內(nèi)容的不同，客戶的訴求也會(huì)不一樣，同時(shí)由于決策層是一級(jí)一級(jí)往上的，對(duì)于各個(gè)層級(jí)的領(lǐng)導(dǎo)都需要去進(jìn)行滿足，對(duì)于設(shè)計(jì)的要求也就更高了），因此我們需要對(duì)客戶的心理進(jìn)行重點(diǎn)挖掘。
政府部門(mén)的領(lǐng)導(dǎo)或者員工大多數(shù)都是高知人群，對(duì)于工作的態(tài)度都是非常嚴(yán)謹(jǐn)，喜歡按規(guī)矩辦事，分工明確，力求事情做到一絲不茍，有理有據(jù)，講究嚴(yán)謹(jǐn)做人，務(wù)實(shí)做事。
政府部門(mén)的保密工作需要做的非常到位，尤其是關(guān)于公安等民生問(wèn)題時(shí)。另外政府類客戶一般對(duì)于數(shù)據(jù)的保密做的非常好，基本都是內(nèi)網(wǎng)開(kāi)發(fā)，私有化部署，一切互聯(lián)網(wǎng)的東西連接內(nèi)網(wǎng)都會(huì)報(bào)警。如果是外網(wǎng)開(kāi)發(fā)，則需要做好數(shù)據(jù)存儲(chǔ)，一定要非常注重?cái)?shù)據(jù)安全。
政府類的軟件或者產(chǎn)品，基本都有很強(qiáng)的實(shí)用性，實(shí)用好用才是客戶最關(guān)心的問(wèn)題，因此在系統(tǒng)架構(gòu)上需要做到，簡(jiǎn)單高效，快速觸達(dá)，減少客戶的學(xué)習(xí)成本。
對(duì)于文字大小的需求比較強(qiáng)烈，提及最多的就是字體放大，加粗。
對(duì)于畫(huà)面能夠看清，需要重點(diǎn)表現(xiàn)在前景和背景的色彩對(duì)比度。
對(duì)于畫(huà)面的表現(xiàn)，要更加的酷炫，在客戶眼里，動(dòng)態(tài)圖形效果遠(yuǎn)遠(yuǎn)大于靜態(tài)效果圖。
隨著年齡增長(zhǎng)，人類的晶狀體會(huì)變黃變渾濁，導(dǎo)致選擇性的吸收藍(lán)光。所以藍(lán)色色調(diào)在老年人眼中可能會(huì)出現(xiàn)模糊褪色的視覺(jué)效果，從而降低元素在界面中的對(duì)比度， 因此需要提高色彩的飽和度。
產(chǎn)品整體架構(gòu)以及內(nèi)容邏輯清晰，簡(jiǎn)單高效，上手簡(jiǎn)易。
通過(guò)對(duì)政府類客戶的分析，挖掘客戶最深層的需求，針對(duì)于以上的關(guān)鍵點(diǎn)，提出適合的解決方案，大體在一下6個(gè)方面的全面解析。
對(duì)于系統(tǒng)框架以及布局進(jìn)行一屏式展示，減少系統(tǒng)層級(jí)的遞進(jìn)。
對(duì)于展示形式上可以更清晰準(zhǔn)確， 盡量模塊化展示每個(gè)需求，做到聚焦用戶視角，提升畫(huà)面表現(xiàn)。
整體交互流程簡(jiǎn)化，復(fù)雜以及多層級(jí)彈框盡量少使用。
中文字體類型的使用，在使用數(shù)字屏幕閱讀時(shí)，字體的選擇要選用無(wú)襯線體（比如黑體，微軟雅黑）厚重一點(diǎn)，不可選用襯線體（比如宋體，書(shū)法體）比較單薄。
英文字體類型的使用，英文數(shù)字的字體選擇更明顯的粗體，因?yàn)橐故緮?shù)據(jù)，使得數(shù)據(jù)展示更加直觀，依舊是選用無(wú)襯線體，比較推薦：D-DIN字體。
字體大小的定義。在字體大小的選擇上，參考了頁(yè)面上常規(guī)大小，定義了一套關(guān)于不同尺寸下的標(biāo)準(zhǔn)字號(hào)，正常1080P頁(yè)面，最小字號(hào)不小于16px，具體字體大小還需要參考設(shè)備清晰度，環(huán)境燈光，視距等因素。
界面中的前景與背景的對(duì)比度，是否足以讓政府類客戶清楚識(shí)別；
顏色不應(yīng)該用作傳達(dá)信息的唯一視覺(jué)手段，需要用額外的文字提示；
通過(guò) H（色相）S（飽和度）B（明度）的數(shù)值來(lái)劃分色域，在保持H值不變的前提下，定義了10個(gè)色域。所以在前后景的顏色選擇上，滿足跨度至少為6，才能讓目標(biāo)人群準(zhǔn)確識(shí)別文字信息。
視覺(jué)呈現(xiàn)以及文案圖像對(duì)比度至少要有7:1，大文本至少有4.5:1的對(duì)比度。有很多在線工具可以幫助檢測(cè)顏色對(duì)比度以及是否達(dá)標(biāo)，如Contrast Ratio 在線檢測(cè)工具：
畫(huà)面采用多種飽和度較高的顏色，而不是單色；
顏色的豐富程度決定了畫(huà)面的視覺(jué)表達(dá)，色彩越豐富，畫(huà)面表現(xiàn)越好；
增加圖形的占比大小，提升視覺(jué)上的表現(xiàn)；
盡量采用識(shí)別度較強(qiáng)的圖形和圖標(biāo)，盡可能貼近客戶的認(rèn)知范疇；
圖標(biāo)和圖形盡量搭配文字描述，方便客戶更清晰更快速理解。
觀測(cè)距離的遠(yuǎn)近，也決定著畫(huà)面的展示效果，盡可能的拉近觀測(cè)距離；
正常視距觀測(cè)下，以常規(guī)設(shè)計(jì)規(guī)范去制定即可，如若觀測(cè)距離較近，則可適當(dāng)縮小相應(yīng)的視覺(jué)表現(xiàn)，反而觀測(cè)距離較遠(yuǎn)，則放大視覺(jué)。
設(shè)備的尺寸、精度，分辨率大小都會(huì)影響目標(biāo)人群的體驗(yàn)；
在設(shè)備精度較低，或者說(shuō)點(diǎn)間距過(guò)大時(shí)，應(yīng)當(dāng)適當(dāng)放大視覺(jué)表現(xiàn)，點(diǎn)間距小的則顯示非常清晰，可適當(dāng)縮小視覺(jué)表現(xiàn)。
為了保證適老化的推廣，需要在適老化的基礎(chǔ)上統(tǒng)一標(biāo)準(zhǔn)，在字體，顏色，框架，圖形等內(nèi)容上做出提煉，深入了解目標(biāo)客戶的需求以及客戶心理。
本著嚴(yán)謹(jǐn)務(wù)實(shí)，安全性，實(shí)用性等原則，沉淀出一套符合目標(biāo)人群的設(shè)計(jì)規(guī)范，應(yīng)用并推廣到不同設(shè)計(jì)團(tuán)隊(duì)以及推廣到廣大設(shè)計(jì)師中去。
我們需要不斷踐行適老化設(shè)計(jì)原則，體現(xiàn)設(shè)計(jì)的通用性和包容性，應(yīng)當(dāng)在設(shè)計(jì)表現(xiàn)和產(chǎn)品功能上更加的包容這個(gè)群體。人工智能大數(shù)據(jù)時(shí)代，雖說(shuō)政府類客戶會(huì)比普通人更容易接受，但是受制于某些原因，推動(dòng)解決老年人面對(duì)智能技術(shù)的問(wèn)題解決才是重中之中。
設(shè)計(jì)師也需要運(yùn)用自己的專業(yè)性，來(lái)幫助目標(biāo)人群融入數(shù)字化的生活中去。
因?yàn)樵诓痪玫膶?lái)，我們也會(huì)變成這個(gè)群體，當(dāng)我們面對(duì)這些束手無(wú)策時(shí)，那時(shí)的設(shè)計(jì)又會(huì)是如何適老的呢？適老化設(shè)計(jì)是適合所有人的設(shè)計(jì)，所有的設(shè)計(jì)師都應(yīng)該密切關(guān)注。
1-不要依賴顏色來(lái)傳達(dá)信息（客戶更喜歡文本，有特殊含義除外：四色預(yù)警，國(guó)標(biāo)色）；
2-文字展示要清晰，字號(hào)大小要更加適合目標(biāo)群體；
3-提高顏色對(duì)比度，豐富畫(huà)面色彩，禁止使用單一色系；
4-界面中重要元素應(yīng)盡量避免使用藍(lán)色（特殊行業(yè)除外：公安等其他）；
5-增加圖形以及圖標(biāo)的視覺(jué)表現(xiàn)，盡可能做到一目了然，便于客戶理解；
6-盡可能拉近觀測(cè)距離，提升觀測(cè)體驗(yàn)；
7-選用高性能，高清晰設(shè)備，提升觀感，優(yōu)化客戶體驗(yàn)；
8-針對(duì)政府客戶特點(diǎn)，做到態(tài)度嚴(yán)謹(jǐn)務(wù)實(shí)，安全實(shí)用，簡(jiǎn)單高效；
9-針對(duì)政府客戶的需求，做到畫(huà)面清晰，視覺(jué)酷炫，色彩豐富明亮，邏輯清晰；
10-盲目照搬照抄而不去具體問(wèn)題具體分析，這些無(wú)障礙設(shè)計(jì)在某種程度上就會(huì)成為“障礙”設(shè)計(jì)。
作者：AYONG_BDR 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司
什么是Resdesign
Redesign并不是一個(gè)簡(jiǎn)單的美化過(guò)程，視覺(jué)只是Redesign的一部分而不是全部。如果你做產(chǎn)品重構(gòu)只是為了視覺(jué)更美觀，從各種網(wǎng)站獲取靈感用樣機(jī)包裝，沒(méi)有任何產(chǎn)品架構(gòu)以及交互邏輯，那么你的改版必定不會(huì)很完美。
但同時(shí)也會(huì)有很多人陷入這種誤區(qū)，產(chǎn)品中過(guò)時(shí)的設(shè)計(jì)規(guī)范會(huì)使你的用戶會(huì)流失到設(shè)計(jì)體系更好的競(jìng)品那里。重構(gòu)你的產(chǎn)品設(shè)計(jì)語(yǔ)言，讓他看起來(lái)更美觀，這當(dāng)然很好，但是也不能盲目的跟隨設(shè)計(jì)趨勢(shì)，沒(méi)有任何邏輯做改版，這樣會(huì)導(dǎo)致交互邏輯的紊亂以及產(chǎn)品架構(gòu)不清晰。
今天阿勇就從網(wǎng)上任意摘選了一個(gè)產(chǎn)品功能需求有問(wèn)題的一個(gè)頁(yè)面來(lái)進(jìn)行一個(gè)頁(yè)面改版，一起來(lái)看看吧！
產(chǎn)品邏輯分析
1、產(chǎn)品主視覺(jué)指意不明，貴州省地質(zhì)災(zāi)害防治指揮平臺(tái)，地圖處資源應(yīng)集中于貴州省，且全國(guó)視角下可以下鉆貴州省市區(qū)。
2、地質(zhì)災(zāi)害防治主視覺(jué)應(yīng)該著重展現(xiàn)崩塌、滑坡、泥石流、地裂縫、等地質(zhì)現(xiàn)象的展示，并展示預(yù)警信息，以及現(xiàn)場(chǎng)地質(zhì)現(xiàn)象視頻反饋，以便于指定指揮方針。
3、此平臺(tái)信息展示包含人員調(diào)度，現(xiàn)場(chǎng)指揮，設(shè)備數(shù)量，數(shù)據(jù)資源統(tǒng)計(jì)，覆蓋區(qū)域，預(yù)警告警，各地區(qū)地質(zhì)災(zāi)害排行，綜合防治等信息的內(nèi)容。
4、產(chǎn)品布局不合理，各區(qū)域所占比重需要重新估量，并且主視覺(jué)數(shù)據(jù)資源匱乏，內(nèi)容單一。
5、業(yè)務(wù)邏輯沒(méi)有很好的展現(xiàn)，各區(qū)域所要展現(xiàn)的數(shù)據(jù)信息不明確，業(yè)務(wù)紊亂。
6、畫(huà)面中對(duì)于業(yè)務(wù)的理解不夠深，導(dǎo)致畫(huà)面空洞，數(shù)據(jù)展現(xiàn)量不夠，產(chǎn)品失職。
如何進(jìn)行頁(yè)面分析
根據(jù)顏色：顏色不宜太多，對(duì)于特殊行業(yè)，固定的顏色是有固定的含義的，比如紅橙黃藍(lán)四色預(yù)警。
對(duì)于畫(huà)面不合理的地方需要記錄下來(lái)，對(duì)當(dāng)前板塊的內(nèi)容進(jìn)行正確的導(dǎo)向，比如你發(fā)現(xiàn)這個(gè)字體不合適，你的腦海中一定會(huì)有正確的用在此處的字體；比如間距，換行，字號(hào)等方面也是如此，心中得有一桿秤，去衡量設(shè)計(jì)的美感。
了解功能，分析數(shù)據(jù)之間的關(guān)系：
了解本產(chǎn)品的應(yīng)用領(lǐng)域，以及產(chǎn)品功能，分析畫(huà)面需要展示的數(shù)據(jù)有哪些，合理的通過(guò)設(shè)計(jì)展示數(shù)據(jù)之間的關(guān)系。
構(gòu)思主題，圍繞主題設(shè)計(jì)其他元素：
對(duì)原來(lái)的主題進(jìn)行產(chǎn)品功能重構(gòu)，設(shè)計(jì)新的配色方案，畫(huà)面內(nèi)容布局，標(biāo)題以及主視覺(jué)的重新設(shè)計(jì)，圍繞主題進(jìn)行設(shè)計(jì)元素的制作。
分析數(shù)據(jù)，合理選用不同樣式圖表：
對(duì)各個(gè)數(shù)據(jù)進(jìn)行分析，對(duì)內(nèi)容進(jìn)行編排，選擇合適的圖表去展示數(shù)據(jù)，合理的同時(shí)，又具有美感。
提取共性，結(jié)合需求做產(chǎn)品規(guī)劃：
提取各個(gè)模塊的設(shè)計(jì)形式的共性，并結(jié)合產(chǎn)品需求進(jìn)行合理的規(guī)劃，重構(gòu)頁(yè)面。
加強(qiáng)技法，了解可視化設(shè)計(jì)規(guī)范：
通過(guò)不同的設(shè)計(jì)技巧來(lái)表現(xiàn)畫(huà)面的美感，制定屬于產(chǎn)品的設(shè)計(jì)規(guī)范，并運(yùn)用這些規(guī)范去規(guī)范頁(yè)面布局以及設(shè)計(jì)，這是要在深度了解可視化設(shè)計(jì)的前提下。
優(yōu)化-01
優(yōu)化-02
優(yōu)化-03
新增告警列表，設(shè)備數(shù)量，資源調(diào)度信息，展示歷史告警記錄，合計(jì)設(shè)備數(shù)量，總結(jié)資源調(diào)度數(shù)量，真正掌握自動(dòng)化地質(zhì)防治指揮。
最終修改成品
設(shè)計(jì)師應(yīng)該跳脫出自己狹義的視角重新來(lái)審視“設(shè)計(jì)趨勢(shì)”，為自己帶來(lái)更多的可能性。
視覺(jué)只是表現(xiàn)層，理解業(yè)務(wù)，理解數(shù)據(jù)，合理表述才是核心。道理大家都懂，但真正的理解數(shù)據(jù)卻是很多設(shè)計(jì)師邁不過(guò)去的門(mén)檻。
送給大家一句忠告，永遠(yuǎn)不要迷信產(chǎn)品原型，設(shè)計(jì)也不應(yīng)該被原型所制約，要勇于用自己的設(shè)計(jì)思維去驗(yàn)證產(chǎn)品的合理性，要用商業(yè)眼光去對(duì)產(chǎn)品進(jìn)行查漏補(bǔ)缺，要站在用戶的立場(chǎng)上去試想產(chǎn)品的可能性。
作者：AYONG_BDR 來(lái)源：優(yōu)設(shè)網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司
數(shù)據(jù)大屏的設(shè)計(jì)，并非是傳統(tǒng)意義上的設(shè)計(jì)師或產(chǎn)品經(jīng)理就能完成的。它需要將藝術(shù)家、科學(xué)家與企業(yè)家的能力集于一身，需要擁有對(duì)動(dòng)態(tài)數(shù)據(jù)的把握能力、對(duì)產(chǎn)業(yè)經(jīng)濟(jì)與供應(yīng)鏈的結(jié)構(gòu)方法、對(duì)社會(huì)議題的捕捉與構(gòu)造，以及宏觀的視野和細(xì)致入微的匠人用心?？梢暬尡涞臄?shù)據(jù)產(chǎn)生溫度。
數(shù)據(jù)大屏是一個(gè)凝聚情緒的超級(jí)機(jī)器。
數(shù)據(jù)大屏不講述傳奇，它就是傳奇本身。
在這塊巨幕上，數(shù)據(jù)是公開(kāi)透明的，它的變化在實(shí)時(shí)的體現(xiàn)著每一筆消費(fèi)的數(shù)字。每個(gè)人都能看到，也會(huì)被傳遞到全世界每個(gè)角落。雙11所帶來(lái)的巨大能量與共振，我們需要一塊巨大的屏幕來(lái)承載這份共情——這并不是一則新聞播報(bào)、一條統(tǒng)計(jì)數(shù)據(jù)，抑或一張圖表就可以完成的。在這樣一個(gè)狂歡的日子里，手機(jī)、個(gè)人電腦、電視機(jī)這些面向個(gè)人的設(shè)備，全都需要融入到這個(gè)巨型的超級(jí)情緒機(jī)器之中。
從宣傳與商業(yè)作戰(zhàn)的角度講，數(shù)據(jù)大屏需要兼顧故事性和震撼性兩重特點(diǎn)。通過(guò)故事腳本與內(nèi)容框架的設(shè)計(jì)，讓觀眾層層抽絲撥繭，從表層的情緒，看到內(nèi)核的戰(zhàn)略。
2019數(shù)據(jù)大屏的內(nèi)容框架大致分為三個(gè)層次。
情緒層：GMV的節(jié)節(jié)攀升滿足了媒體不斷推升的情緒高潮。在日益蕭條的國(guó)際環(huán)境中，中國(guó)的經(jīng)濟(jì)仍能屢創(chuàng)新高，每一位在雙11買買買的中國(guó)人背后是一種愛(ài)國(guó)主義與中國(guó)信心的體現(xiàn)。
業(yè)務(wù)層：阿里的自我表達(dá)。阿里經(jīng)濟(jì)體在城市中繼續(xù)深化的服務(wù)我們的消費(fèi)者，數(shù)據(jù)成為城市可持續(xù)發(fā)展的新資源；而商業(yè)操作系統(tǒng)隨著數(shù)字經(jīng)濟(jì)時(shí)代的到來(lái)，開(kāi)始系統(tǒng)的服務(wù)我們的品牌與商家，在新的時(shí)代續(xù)寫(xiě)“讓天下沒(méi)有難做的生意”。
戰(zhàn)略層：企業(yè)與國(guó)家發(fā)展同行。阿里的改變，反射了社會(huì)關(guān)系和社會(huì)結(jié)構(gòu)。點(diǎn)擊購(gòu)物車就能買到全世界的東西，而對(duì)于國(guó)內(nèi)市場(chǎng)，精準(zhǔn)的人群定位、產(chǎn)業(yè)帶的建設(shè)都讓拉動(dòng)內(nèi)需變成一個(gè)大眾都能參與的事情。
依據(jù)數(shù)據(jù)表現(xiàn)，雙11當(dāng)天的情緒高潮會(huì)集中0點(diǎn)和24點(diǎn)前后。24小時(shí)內(nèi)，情緒的跌宕起伏，媒體向世界專遞著這種情緒?，F(xiàn)場(chǎng)，根據(jù)數(shù)據(jù)和情緒的變化，我們開(kāi)始導(dǎo)演數(shù)據(jù)大屏在不同的時(shí)間段出現(xiàn)的鏡頭：GMV的彎道超車緊張窒息，晚飯過(guò)后是觀看城市夜經(jīng)濟(jì)的最佳時(shí)機(jī)，還有“買遍全球的購(gòu)物車”、“小鎮(zhèn)青年”等進(jìn)20個(gè)鏡頭。
為什么是彎道超車？
大航海時(shí)代是貿(mào)易全球化的開(kāi)端，也是當(dāng)代中國(guó)繼續(xù)擴(kuò)大開(kāi)放，用一帶一路、進(jìn)博會(huì)等等新模式，承接人類當(dāng)今世界發(fā)展的新格局所在?；ヂ?lián)網(wǎng)與移動(dòng)互聯(lián)時(shí)代的到來(lái)，讓中國(guó)得以彎道超車占據(jù)世界領(lǐng)先地位，而隨之到來(lái)的數(shù)字經(jīng)濟(jì)時(shí)代正式開(kāi)始了人類歷史上的新商業(yè)文明。馬老師說(shuō)：打造新商業(yè)文明的時(shí)機(jī)已經(jīng)到來(lái)。數(shù)字時(shí)代是我們面臨的最大機(jī)遇，這個(gè)新時(shí)代最大的風(fēng)險(xiǎn)就是錯(cuò)失機(jī)會(huì)。
我們將這個(gè)核心理念融入GMV大屏的設(shè)計(jì)，正如逍遙子所說(shuō)的那樣“消費(fèi)不是商業(yè)的終點(diǎn)，通過(guò)消費(fèi)者來(lái)提升生產(chǎn)端生產(chǎn)契機(jī)，優(yōu)化生產(chǎn)決策。”為此，我們導(dǎo)演了新商業(yè)文明的數(shù)據(jù)大戲：GMV屏中的賽道，3個(gè)鏡頭穿越了大航海時(shí)代、互聯(lián)網(wǎng)時(shí)代，數(shù)字經(jīng)濟(jì)時(shí)代彎道超車的新商業(yè)文明，快進(jìn)了商業(yè)文明的發(fā)展。
11.11當(dāng)天的數(shù)據(jù)也被融入其中，賽道上奔跑著餓了么、盒馬配送線和菜鳥(niǎo)的物流線，空中飄散的氣泡是實(shí)時(shí)產(chǎn)生的交易熱力。
△2019雙11數(shù)據(jù)大屏-GMV彎道超車&3個(gè)視角切換
2019年，即使是在國(guó)際經(jīng)濟(jì)大環(huán)境衰退的今天，阿里的雙11仍舊創(chuàng)造了新的商業(yè)奇跡：2684億人民幣的GMV的背后，是中國(guó)人為了家庭與自己而歡樂(lè)剁手，也是中國(guó)消費(fèi)者面對(duì)全球大環(huán)境下對(duì)中國(guó)的強(qiáng)大信心。從2009年的電商大促，到11年后的全球狂歡節(jié)，阿里伴隨著中國(guó)經(jīng)濟(jì)海洋的形成而不斷掀起巨浪。李克強(qiáng)總理就曾經(jīng)用雙11的銷售數(shù)據(jù)，來(lái)解答那些對(duì)中國(guó)經(jīng)濟(jì)感到不解的人們，讓他們瞬間懂得中國(guó)經(jīng)濟(jì)是汪洋大海。
△2019雙11數(shù)據(jù)大屏-歷年GMV增速
2. 全球化：買遍全球的購(gòu)物車
中國(guó)經(jīng)濟(jì)與中國(guó)消費(fèi)者的貢獻(xiàn)，是對(duì)全球經(jīng)濟(jì)的貢獻(xiàn)。消費(fèi)者購(gòu)物車?yán)锊刂篮蒙畹脑妇?，打開(kāi)了世界消費(fèi)的新空間。天貓國(guó)際把來(lái)自全球78個(gè)國(guó)家和地區(qū)的品牌和商品帶進(jìn)中國(guó)，滿足消費(fèi)者的品質(zhì)消費(fèi)需求。買遍全球的購(gòu)物車，更為世界經(jīng)濟(jì)增長(zhǎng)貢獻(xiàn)拉動(dòng)力。越來(lái)越多國(guó)際品牌青睞中國(guó)市場(chǎng)，通過(guò)天貓國(guó)際滿足中國(guó)消費(fèi)者的需求。
△2019雙11數(shù)據(jù)大屏-全球化
隨著政策的推動(dòng)，全國(guó)經(jīng)濟(jì)進(jìn)入夜生活消費(fèi)時(shí)代，大量的城市開(kāi)始準(zhǔn)備成為一座座不夜城。在這個(gè)新的消費(fèi)增長(zhǎng)領(lǐng)域，新商品、新商機(jī)、新消費(fèi)模式、新空間與新玩法都層出不窮。在未來(lái)，理解夜晚的中國(guó)，或許比理解白天的中國(guó)更為重要。
△2019雙11數(shù)據(jù)大屏-杭州經(jīng)濟(jì)體服務(wù)網(wǎng)絡(luò)
△2019雙11數(shù)據(jù)大屏-天貓商超網(wǎng)絡(luò)
△2019雙11數(shù)據(jù)大屏-杭州城市夜生活
14億的中國(guó)人口、巨大的地域差異與文化差異意味著，每一種類型的消費(fèi)人群都是海量的，都擁有現(xiàn)有經(jīng)濟(jì)理論所無(wú)法囊括的巨大潛力。小鎮(zhèn)青年、銀發(fā)一族、95后作為新消費(fèi)崛起的代表族群，正悄悄改變著社會(huì)的消費(fèi)結(jié)構(gòu)。通過(guò)數(shù)據(jù)我們清晰看到：族群的喜好千差萬(wàn)別，數(shù)字化的新消費(fèi)使得商家能針對(duì)消費(fèi)者需求創(chuàng)造新供給。
△2019雙11數(shù)據(jù)大屏-新人群，新消費(fèi)
天貓創(chuàng)造的價(jià)值是真正支持品牌的數(shù)字化轉(zhuǎn)型，不僅僅贏得今天的業(yè)務(wù)，更在于決勝未來(lái)。國(guó)潮席卷而來(lái)，智能商業(yè)魅力無(wú)限，全球供應(yīng)鏈在動(dòng)蕩與智能化中全面轉(zhuǎn)身。全方位重構(gòu)產(chǎn)品創(chuàng)新、品牌建設(shè)，強(qiáng)化天貓與品牌之間的合作，這便是我們想在雙11這天展現(xiàn)的萬(wàn)里品牌江山畫(huà)卷。
△2019雙11數(shù)據(jù)大屏-品牌榜
當(dāng)GMV越來(lái)越逼近2684億人民幣時(shí)，炸裂感給每個(gè)人的沖擊是：中國(guó)又誕生了一個(gè)新的奇跡！即使在全球經(jīng)濟(jì)放緩的今天，中國(guó)人民對(duì)于天貓雙11全球狂歡節(jié)的熱情絲毫不減。在這背后，是數(shù)字經(jīng)濟(jì)時(shí)代下的阿里巴巴，向新商業(yè)文明邁進(jìn)了一大步。
作者：阿里巴巴設(shè)計(jì)藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司
可視化圖表是提升信息傳遞效率的一種有效方法，特別是在B端平臺(tái)中經(jīng)常遇到對(duì)統(tǒng)計(jì)的數(shù)據(jù)分析總結(jié)的呈現(xiàn)。我們?cè)O(shè)計(jì)師在設(shè)計(jì)圖表的過(guò)程中，如果沒(méi)有系統(tǒng)的可視化知識(shí)，會(huì)出現(xiàn)設(shè)計(jì)的圖表雖然美觀但圖表不能很好的反應(yīng)數(shù)據(jù)的情況。那么，在復(fù)雜的數(shù)據(jù)關(guān)系中如何設(shè)計(jì)和選用圖表，如何在好看的同時(shí)提升信息傳達(dá)效率，看完這篇文章希望對(duì)你的設(shè)計(jì)過(guò)程有所幫助。
// 為什么要數(shù)據(jù)可視化
數(shù)據(jù)可視化就是用圖表來(lái)表示數(shù)據(jù)信息，它所傳達(dá)的信息包括你所拿到的數(shù)據(jù)源和你分析后的結(jié)果，再通過(guò)圖形強(qiáng)化用戶的理解和記憶。能讓用戶簡(jiǎn)潔明了的獲取更多的信息，是我們可視化的最終目的。
舉個(gè)例子，同樣一組數(shù)據(jù)，用表格的形式呈現(xiàn)是很難有所洞察的；如果將各個(gè)地區(qū)維度的數(shù)據(jù)聚合以柱圖形式呈現(xiàn)，很容易就能看出各個(gè)地區(qū)間數(shù)據(jù)的差異，并從中洞察規(guī)律
關(guān)于如何設(shè)計(jì)好數(shù)據(jù)可視化圖表，這邊總結(jié)了三個(gè)步驟：選擇適合的圖表，強(qiáng)化視覺(jué)層次，圖表響應(yīng)式適配。
一、選擇適合的圖表
數(shù)據(jù)可視化的圖表種類繁多，當(dāng)我們真的開(kāi)始作圖，往往會(huì)遇到一個(gè)困境：有這么多類型，要如何選擇正確的圖表呢？首要依據(jù)是考慮所要傳達(dá)的信息意圖，即所要制作的圖表它的任務(wù)是什么，再通過(guò)分析數(shù)據(jù)關(guān)系來(lái)選擇表達(dá)方式；第二層意圖是圖表傳達(dá)內(nèi)容，這時(shí)候我們就需要根據(jù)數(shù)據(jù)的特征去突出和強(qiáng)化。
1. 分析數(shù)據(jù)關(guān)系
根據(jù)數(shù)據(jù)分析的方式來(lái)看，每一種圖表都對(duì)應(yīng)了一種數(shù)據(jù)關(guān)系。從數(shù)據(jù)的維度出發(fā)弄清呈現(xiàn)結(jié)構(gòu)，再結(jié)合數(shù)據(jù)關(guān)系作出選擇。了解圖表的可能知道，一般圖表的數(shù)據(jù)關(guān)系有構(gòu)成、比較、分布，以商業(yè)數(shù)據(jù)為例，常見(jiàn)的還有流轉(zhuǎn)關(guān)系。
構(gòu)成關(guān)系
構(gòu)成關(guān)系的圖表表達(dá)的是部分和整體的關(guān)系，用于分析總體和各部分的占比比例，構(gòu)成關(guān)系一般局部元素加起來(lái)為總數(shù)。如果只是想對(duì)比個(gè)別組成部分的大小，也可以使用比較關(guān)系的圖表。
常用圖表：餅/環(huán)圖、堆疊圖、面積圖等，如涉及到層級(jí)結(jié)構(gòu)，還會(huì)用矩形樹(shù)圖或旭日?qǐng)D等特殊結(jié)構(gòu)圖表。
關(guān)鍵詞：“占比、比例、百分比”
比較關(guān)系
比較關(guān)系是基礎(chǔ)分析中常用的一種圖表類型。在一定的取值范圍內(nèi)，通過(guò)對(duì)兩個(gè)或兩個(gè)以上的指標(biāo)分析，可以直觀的看到變化和差距。對(duì)比分析包括趨勢(shì)對(duì)比和分類對(duì)比兩種形式，趨勢(shì)對(duì)比用于表示一段時(shí)間內(nèi)數(shù)據(jù)的變化，分類對(duì)比用于比較數(shù)據(jù)規(guī)模。
常用圖表：趨勢(shì)對(duì)比常用圖表有折線圖、散點(diǎn)圖等；分類對(duì)比常用條形圖、柱狀圖、氣泡圖等。
關(guān)鍵詞：“增減、升降、漲跌、波動(dòng)”
分布關(guān)系
利用空間分區(qū)來(lái)展示數(shù)據(jù)之間的分布關(guān)系，常用于體現(xiàn)兩個(gè)或以上數(shù)據(jù)的相關(guān)性。
常用圖表：散點(diǎn)圖、熱力圖、雷達(dá)圖等
關(guān)鍵詞：“隨著……而變化、A/B之間的相關(guān)性、交/并集”等
關(guān)聯(lián)與流轉(zhuǎn)
流轉(zhuǎn)關(guān)系是B端數(shù)據(jù)常用的一種關(guān)系，它可以動(dòng)態(tài)的體現(xiàn)相關(guān)路徑下對(duì)象之間的關(guān)系、狀態(tài)、數(shù)據(jù)量的流轉(zhuǎn)變化等，以面積或顏色深淺展示了多個(gè)狀態(tài)或?qū)ο笾g的流動(dòng)量或流動(dòng)強(qiáng)度。
常用圖表：關(guān)系圖、?；鶊D、漏斗圖、進(jìn)度圖等
關(guān)鍵詞：“流程步驟、留存、轉(zhuǎn)化、關(guān)系”
2. 分析數(shù)據(jù)特征
按數(shù)據(jù)關(guān)系和分析目的選擇好圖表類型后，第二步是根據(jù)數(shù)據(jù)特征選擇更加適合的展示方式。從數(shù)據(jù)分析的角度常見(jiàn)數(shù)據(jù)特征有：變量特征、維度特征、層級(jí)特征、流程特征。
變量特征
分辨一個(gè)指標(biāo)通常有兩類特征，按變量值是否連續(xù)可分為連續(xù)數(shù)據(jù)與離散數(shù)據(jù)兩種。連續(xù)數(shù)據(jù)通常會(huì)統(tǒng)計(jì)一組數(shù)據(jù)的變化趨勢(shì)，離散數(shù)據(jù)通常統(tǒng)計(jì)各分類下數(shù)量的變化。
維度特征
多維度分析需要將多個(gè)變量在同一平面上直觀的表示，可以選擇使用極坐標(biāo)系去展示多個(gè)維度變量。如果希望對(duì)比多組數(shù)據(jù)，可使用不同顏色進(jìn)行分類
層級(jí)特征
多層級(jí)數(shù)據(jù)由多個(gè)部分構(gòu)成一個(gè)整體，又稱樹(shù)形結(jié)構(gòu)數(shù)據(jù)。除了用結(jié)構(gòu)樹(shù)圖表表現(xiàn)以外，還可以考慮以下兩種圖表類型：
例如：上圖顯示了市場(chǎng)銷售額的來(lái)源結(jié)構(gòu)。長(zhǎng)方形的大小取決于各國(guó)家的平均銷售額，通過(guò)色調(diào)來(lái)區(qū)分不同類型，顏色的深淺代表分類下的子集，面積體現(xiàn)銷售占比。對(duì)比一般結(jié)構(gòu)樹(shù)圖表，它的優(yōu)勢(shì)在于可以有效利用空間。
流程特征
流轉(zhuǎn)關(guān)系是表達(dá)數(shù)據(jù)轉(zhuǎn)化流程的重要類型，不僅包含統(tǒng)計(jì)意義上的數(shù)據(jù)總和，同時(shí)還表達(dá)了信息流轉(zhuǎn)的路徑；其中桑基圖和漏斗圖都可以表達(dá)路徑中流量的變化，不同的是?；鶊D重點(diǎn)強(qiáng)調(diào)流量的強(qiáng)度和走向，漏斗圖更加注重突出轉(zhuǎn)化率和效果，根據(jù)不同的表達(dá)目的選用。
二、強(qiáng)化視覺(jué)層次
選擇合適的圖表后，在信息傳達(dá)上也需要正確的表達(dá)，展示形式美觀的同時(shí)能夠清晰的體現(xiàn)數(shù)據(jù)特點(diǎn)。
1. 強(qiáng)化數(shù)據(jù)特性
使用圖表正確的表達(dá)信息，需要設(shè)計(jì)師在強(qiáng)化數(shù)據(jù)特性的同時(shí)避免偏差
2. 色彩視覺(jué)傳達(dá)
除了在設(shè)計(jì)構(gòu)圖上優(yōu)化以外，顏色的選擇也是圖表重要的的信息表達(dá)元素。顏色會(huì)影響我們對(duì)數(shù)據(jù)的感知，錯(cuò)誤的取色會(huì)讓信息讀取產(chǎn)生誤解。我們可以通過(guò)不同的分析目的設(shè)置意圖色板，精確傳達(dá)信息同時(shí)后續(xù)的項(xiàng)目在選用時(shí)也可以達(dá)到用色的統(tǒng)一。
我們?cè)谥暗奈恼吕镉薪榻B過(guò)圖表的取色模型，通過(guò)調(diào)整顏色HSL值的區(qū)間，可以得到以下三種意圖色板：
那么我們要怎么樣去使用這些色板呢？下面幾個(gè)案例將帶你了解其中的差異。
定性型：使用色調(diào)來(lái)進(jìn)行分類
數(shù)據(jù)內(nèi)在沒(méi)有順序差別時(shí)，建議使用色調(diào)值（H）進(jìn)行區(qū)分；如定義國(guó)家、行業(yè)等類型。如果希望圖表看起來(lái)更加專業(yè)，以下有幾項(xiàng)分類色板的小建議：
定量型：使用深淺色板強(qiáng)調(diào)內(nèi)在順序
如果在同一個(gè)分類下包含子類別，或者數(shù)據(jù)本身具有排名屬性，那么建議使用連續(xù)色板來(lái)突出他們內(nèi)在的順序，使圖表更加易讀。
三、圖表中的響應(yīng)式設(shè)計(jì)
B端圖表可視化的數(shù)據(jù)一般是在網(wǎng)頁(yè)或移動(dòng)端上動(dòng)態(tài)顯示。不同于平面展示或匯報(bào)，在基礎(chǔ)設(shè)計(jì)完成后還需要考慮到圖表展示的環(huán)境，根據(jù)不同端去適配顯示效果，以適應(yīng)各種復(fù)雜情況。而動(dòng)態(tài)顯示帶來(lái)的交互特性也讓數(shù)據(jù)展示有了更多的可能性。
1. 布局框架適配
在網(wǎng)頁(yè)端顯示時(shí)，有時(shí)候同一個(gè)圖表需要考慮不同容器下的適配方式。根據(jù)數(shù)據(jù)相關(guān)性變化元素的適應(yīng)形態(tài)，將非必要的的元素轉(zhuǎn)化或隱藏，保留重要的圖形元素去適應(yīng)當(dāng)前空間；元素隱藏后使用懸浮交互來(lái)保證信息的展示，保持圖表的可讀性同時(shí)也避免產(chǎn)生元素的重疊。
如案例中的圖表，在不同尺寸下通過(guò)改變和隱藏圖表元素，以達(dá)到適配當(dāng)前空間的效果。
2. 圖表元素適配
要適配移動(dòng)端，網(wǎng)頁(yè)端橫向延展的顯示方式需要適應(yīng)移動(dòng)端縱向空間的顯示。除了呈現(xiàn)角度的改變外，還需要考慮手機(jī)屏幕的尺寸和圖表元素的適配性，去兼容相關(guān)的交互操作。
3. 極值適配
因B端平臺(tái)的特性，我們無(wú)法預(yù)知客戶傳入的數(shù)據(jù)量，可能會(huì)遇到因數(shù)據(jù)量過(guò)多，造成圖表顯示不佳，數(shù)據(jù)讀取困難等問(wèn)題。這種情況下，提前考慮數(shù)據(jù)極限場(chǎng)景，通過(guò)交互的形式變化的方式讓用戶獲取完整信息，提升理解同時(shí)信息展示更靈活。
還有懸浮放大、點(diǎn)擊下鉆、聯(lián)動(dòng)圖表等交互行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以后可獨(dú)立介紹。
// 結(jié)語(yǔ)
數(shù)據(jù)可視化在B端設(shè)計(jì)場(chǎng)景中發(fā)揮著重要作用。設(shè)計(jì)師在表達(dá)數(shù)據(jù)之美的同時(shí)更加準(zhǔn)確，才能更直觀地向用戶傳達(dá)數(shù)據(jù)的價(jià)值。使業(yè)務(wù)人員能夠從復(fù)雜的業(yè)務(wù)數(shù)據(jù)中快速、直接地找到重要數(shù)據(jù)，確保用戶能夠更好的接收信息，才是可視化的關(guān)鍵。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn