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