前言

隨著大數據產業的蓬勃發展，很多企業都開始應用數據可視化。智慧城市、智慧交通、智慧醫療等等越來越多的行業都有了可視化的需求，可視化行業也迎來了迅速發展的成長期。

往期回顧：

數據可視化釋義

數據可視化就是把一些相對復雜、抽象的、我們看不懂的數據數據通過“可視化”的方式，運用圖形化的手段清晰有效地將數據信息進行解讀和傳達，幫助我們發現其中的規律和特征，挖掘數據背后的價值。

可視化大屏

可視化大屏是以 大屏 為主要展示載體的數據可視化設計。它的應用場景非廣泛如 ToC、ToB、ToG 等都會存在。一般應用在會議展廳、園區管理、城市交通調度中心、公安指揮中心、企業生產監控等重要場所。

可視化用戶群體相對比較明確，主要是單位領導及一些一線人員。通過交互式實時數據監測，洞悉運營增長，助力智能高效決策。

伴隨行業的發展，行業內也對可視化進行了一些行業細分。常見的一些類別：行業可視化（如交通、醫療、金融、軍警部隊、農業、工廠、化工等）、智能終端系統類（定制化終端產品）、演示 demo（數據演示、展覽展示、數據看板 ）、可視化分析系統（通過對數據的分析監控輔助決策，如交通預警平臺、天氣監控平臺等）。

市場現狀

1. 平臺化

由于近幾年可視化的需求越來越大，一般的公司都會有一些可視化的需求，各大廠商也逐漸整合可視化資源，實現平臺化、低代碼化。滿足了大多數公司的可視化需求。國內比較知名的可視化廠商：光啟元（Ray design）、Data V、優諾科技（森工廠）、袋鼠云（Easy V)、數字冰雹、圖撲、等等。他們將一些可視化效果組件化集成在平臺，拖拖拽拽就能實現一些不錯的效果，滿足了一些公司的展示需求。

2. 實現方式

目前可視化框架是大多數都是基于 Web 端的（基于 web 開發或者 web 封裝）而非 PC 端。常見的可視化實現方式是二維加三維相結合，比如大屏兩側的可視化圖表可以用 Echarts 這種第三方的輕量化圖表控件或者 Vue 去實現。

主視覺部分會基于 Unity3D、虛幻引擎（UE4）、Ventuz、threejs 等工具去實現。滿足三維炫酷的效果需求。使整個可視化大屏效果有了質的提升。這些三維工具的優勢是三維粒子效果能很好的支持，且效果非常炫酷。多平臺支持，可通過 webgl 封裝在瀏覽器里打開使用。缺點就是維護成本較高，需要相關的專業人員去開發維護，有一定的使用門檻。一般公司如果不是專門做可視化相關業務不會配備相關專業人員。

說下幾種工具的優缺點：

Ventuz 國內用的相對較少，相關專業人員也較少。虛幻引擎效果上是比較好的，但是對 WebGL 參數支持的較少。Threejs 雖然支持三維但是沒有 Unity 那么強大的編輯器，一些復雜的效果實現不了。相對于前者 Unity 相對成熟一些，也是目前市場上用的比較多的，不過 three 對于前端開發同學更友好一些，容易上手，學習成本相對低一些。

可視化設計師應了解的知識

可視化設計是相對新興的行業，就目前市場來看也是當今比較火的行業。作為一名設計師，不僅僅是只做完效果圖就能行的，是一個結合 硬件設備、UI 設計、三維建模、三維渲染、動態設計、數據可視化、圖形技術、GIS 數據、渲染引擎、交互技術等等綜合類的交叉學科。

1. 硬件設備

硬件設備信息是做大屏一切的開始，我們首先要了解它的尺寸、比例、屏幕種類（拼接屏、LED 屏）投影方式 等等 一系列的信息，方便后續的設計工作。

上圖為一些常見的屏幕拼接方式，確認好屏幕的拼接方式就可以計算出整個大屏的物理分辨率。舉個例子：上圖中最后一個的拼接方式為橫向3塊屏，豎向2塊屏幕。他們每塊的屏幕分辨率為 寬1920px 高1080px，那么這塊2x3的拼接屏幕的尺寸就應該是：寬度 1920乘以3（橫向3塊屏）高度1080乘以2（豎向2塊屏）得出 整個屏幕的物理分辨率為：5760x2160。

物理分辨率 VS 輸出分辨率

大屏的投射方式大致分為三種：1、電腦屏幕 1 比 1 等比例投屏。2、通過主機直接輸出給拼接屏（這種大多都是一些自定義比例屏幕和分辨率超大的情況會應用到）。3、投影儀投射。

一般大屏的物理屏幕分辨率大小都有不同，有的是極大的，幾萬像素，如果我們按照物理分辨率來去做設計的話會很卡，所以這里設計尺寸建議按照輸出分辨率設計。輸出分辨率會受到硬件的限制（超大情況下需等比縮放），我們一般會采用輸出分辨率作為最終 的設計尺寸。針對硬件設備設計時要關注以下幾點：屏幕拼接方式、單屏幕像素及拼接后像素、輸出像素等這些決定了設計尺寸、內容排布、拼接縫的規避等問題。

2. GIS 數據

通常應用于參數化建模，主要是通過一些地理位置高程數據進行模型的生成。屬于智慧城市可視化設計的基礎設施。

常見的一些格式：Openstreetmap（多用于生成模型）、Shapefile（多用于生成模型）、Geojson（主要用于基于 Web 的映射）、TIFF（多用于貼圖處理）。

一些常用的工具：Qgis、Arcgis、Google mapper。

3. 三維建模

在可視化設計中，一般我們會結合生成 參數化模型 加 定制化手工模型 的方式處理整體效果。這么處理的目的：一是設計上能突出主體，增加畫面的層次感。二是在性能上能很好地優化，提高整體性能。

下圖為設計側到開發側對接流程：

4. 動效設計

常見的一些動效對接格式：GIF、MP4、APNG、Lottie、序列幀。感興趣的小伙伴可看這篇：

5. 圖形技術

了解圖形成像原理，是由一個個的粒子點生成的畫面。

下圖是由一個 50x100 的粒子組成的平面，每個粒子都會對應的 xy 軸的坐標位置，我們通過控制的粒子透明度、大小、顏色、位置、旋轉等參數呈現不同的視覺效果。

世界地圖的是通過一個一個粒子成像形成的畫面，其中黑色=0、白色=1。比如粒子大小是 1，它對應的位置是黑色，黑色是 0，1x0 就=0 顯示為黑色。

我們常做的粒子世界地圖就是通過控制粒子黑白 x 粒子大小疊加出來的。

比如我們做粒子地球的時候是通過一張貼圖來去控制黑白度 海洋是黑色所以就不顯示粒子，陸地為白色顯示 為白色粒子，最終呈現了一個粒子地球的效果。

6. 渲染引擎的技術架構

前面實現方式里講到市面上可視化落地基本都是基于于 Unity3D、虛幻引擎（UE4）、Ventuz、threejs 等工具實現的。它們的底層是由 BS（Browser-Server）架構和 CS（Client-Server）架構兩大架構組成的。

BS 架構與 CS 架構特點

BS:（Browser-Server）瀏覽器/服務器模式，web 應用可以實現跨平臺，客戶端零維護，但是個性化能力低，響應速度較慢。WebGL 就屬于 BS 架構的一種。優點就是使用便捷、數據實時更新、跨平臺。缺點是渲染效果較差，大場景支持差。

CS:（Client Server,客戶端/服務器模式），桌面級應用響應速度快，安全性強，個性化能力強，響應數據較快。Unreal Engine、Unity3D、Ventuz 屬于 CS 框架。優勢就是整體渲染視覺效果棒，大場景支持好，缺點是必須安裝客戶端、電腦性能要求高、不同平臺需要不同文件。

可視化大屏 UI

可視化設計是一個綜合類交叉學科，同樣在大屏 UI 設計中也是一個相對復雜的流程，我們需要對大屏的布局、風格、主視覺、信息圖表、字體、規范、動效等方面綜合考慮，推導設計方案。

設計前：一定要對用戶需求充分分析和理解，要知道大屏的展示場景及設計分辨率，大屏的拼接方法都要有一定的了解，最后是跟開發溝通下實現的工具與方法。

設計中：構思布局，可以在紙上簡單畫一下。根據業務需求定義設計關鍵詞進行設計的提煉與分析，方便自己找參考。顏色上背景深色為主，為了更好地聚焦，數據可以采用亮色，有一定的對比關系，便于業務信息傳達。字體上可以采用系統默認字體 數字采用特殊字體包的形式（這塊根據實際需求，切記不要照搬）。圖表選擇恰當的展示形式，同時保證視覺上的統一（分清頁面的主次關系，圖表的展示切莫設計過度，容易造成搶主體）

設計后：再次校驗信息層級、文字大小、圖表等各層級間的對比關系是否傳達準確，與技術同步溝通下技術的實現性。最后開發完成后，要拿演示 demo 去現場測試，看下整體展示效果，測試輸出是否有問題，有無拉伸問題，拼接縫與內容有無穿插，及時與開發進行頁面的校驗工作，最終才算是設計完成。

下面針對可視化設計中 布局、風格、主視覺、信息圖表、字體、規范、動效等 7 個方向細節點的拆解

1. 布局

通過硬件設備信息可以得到可視化的設計尺寸，基于尺寸新建設計畫布后，第一件事就需考慮頁面的整體布局。可視化大屏設計從信息布局到數據表達，都需要設計師對業務深入了解后才能用數據助力業務決策。

常見的大屏布局：居中結構、左右結構兩種種常見的布局形式以常規的 16：9 模板為例，下面列舉的一些常見的布局形式，供大家參考。

居中結構

異形超寬拼接屏幕

左右結構

布局的原則一定要主次分明，根據業務需求抽取關鍵性的指標，提取主要信息?？梢栽诩埳洗蟾女嬕幌?，然后在軟件里具體細化布局。避免次要信息的面積過大，喧賓奪主，影響整體的視覺效果。

2. 風格

提起可視化大屏，大家都會聯想到：科技感、FUI、HUD 這些關鍵詞，可以說可視化大屏跟科技、數據這兩詞是強關聯的，風格上也基本是這一類方向。

定義設計風格：一般會基于業務需求場景去定義幾個設計關鍵詞，根據關鍵詞去找一些參考圖，推導出貼合業務的設計風格。

我們可以通過調整顏色、裝飾細節、主視覺、字體等一些細節點控制區分不同的設計風。下面拿圖表舉例，我們在做設的時候，只需調整卡片和標題的裝飾，就能夠展現出不同的設計風格。

3. 主視覺

主視覺部分大致分為：地球、地圖、智慧城市、行業類業務展示等。目前比較容易出效果的都會采用三維模型的處理方式。地球：粒子地球、地圖貼圖、地球模型。

地圖：第三方在線地圖（百度、高德、騰訊、谷歌）基于 地圖開放平臺進行個性化配置?；蛘咄ㄟ^地理位置數據建模：如全國和各個省份的輪廓模型。

智慧城市：GIS 參數化生成簡模和重點樓宇定制化建模。

行業類：多數為定制化建模。如工業類、醫療類、能源類、園區、學校、港口、工廠、倉儲庫房、零售、工程、安防、國防軍工等。

以上圖片源于 DAT

主視覺是可視化設計中的一大難點，不光是設計落地的時候也會有需要注意的點，這里建議大家在做之前一定要充分跟開發溝通，確認好技術選型，方便后期輸出跟開發更加高效的對接。

4. 信息圖表

圖表的設計原則是易理解、可實現，能夠準確表達數據意圖，給用戶傳達明確信息。

以上圖片源于網絡，如侵刪

上圖通過通過使用場景可分為比較、聯系、構成、分布四個維度解釋圖表的不同屬性類別。在做可視化大屏設計的時候可以參照上圖，選擇對應的數據圖表。

比較

兩個及以上變量數據，一是基于分類不同的對比，二是基于時間維度的對比。常見的圖表：條形圖、柱狀圖、雷達圖、玫瑰圖、?；鶊D等

聯系

兩個及以上數據之間的相關性，隨時間變化比較關聯。常見的圖表：散點圖、氣泡圖、多級餅圖、熱力圖、力導向圖等。

構成

指標里的數據都由哪幾部分組成、每部分占比如何。常見的圖表：餅圖、環形圖、堆積面積圖、堆積柱狀圖、瀑布圖等。

分布

指標里的數據主要集中在什么范圍、表現出怎樣的規律，想表達兩個數據點之間數量的演變過程。常見的圖表：階梯折線圖、面積圖、直方圖等。

基于圖表的類型可分為：餅圖、線形圖、柱狀圖、混合圖、面積圖、散點圖、極坐標圖、關系圖、樹圖、?；鶊D、漏斗圖、熱力圖、還有其他圖表類型等。

餅圖

適合展示分類的占比情況，不適合展示分類過多（超過 9 條數據）或者差別不明顯的場景。

線形圖

折線圖用于顯示數據在一個連續的時間間隔或者時間跨度上的變化，它的特點是反映事物隨時間或有序類別而變化的趨勢。

當水平軸的數據類型為無序的分類或者垂直軸的數據類型為連續時間時，不適合使用折線圖。同樣，當折線的條數過多時不建議將多條線繪制在一張圖上。

柱狀圖

柱狀圖提供了分類數據的可視化展示，基于不同的數據類型有以上幾種不同的形式。分類數據是將數據分組成離散的組，例如月份、年齡組、鞋碼和動物。這些類別通常是定性的。圖表上的條形圖可以按任何順序排列。

混合圖

折線圖和堆疊柱狀圖的組合圖表。同時顯示兩個坐標軸，用于展示兩種不同類型的數據。 適用于帶有細分分類的累計數據大小以及與之相關的趨勢數據，例如在過去十年全國三大產業的具體產值，以及 GDP 增長率。

面積圖

面積圖強調數量隨時間而變化的程度，也可用于引起人們對總值趨勢的注意。適合于比較多個變量隨時間間隔變化趨勢。

散點圖

散點圖是一種使用直角坐標來顯示一組數據的兩個變量值的圖表。數據顯示為一個點的集合，每個點都有一個變量的值決定水平軸上的位置，另一個變量的值決定垂直軸上的位置。

通常用于顯示和比較數值，不光可以顯示趨勢，還能顯示數據集群的形狀，以及在數據云團中各數據點的關系。

極坐標圖

基于直角坐標系的徑向變形（相當于把直角坐標卷起來）。適用于顯示三個或更多的維度的變量對比或者部分與整體的趨勢。

關系圖

可以展示數據的占比情況，還能厘清多級數據之間的關系。 通常用于可視化大量元素之間的復雜關系

樹圖

樹圖是一種流行的利用包含關系表達層次化數據的可視化方法，是研究多元目標問題的一般工具。 適合展示數據之間的層級關系，適合 6 條以上數據。

?；鶊D

一種特定類型的流程圖，用于描述一組值到另一組值的流向，圖中延伸的分支的寬度對應數據流量的大小。用以展示數據的層級關系。常用于可視化能源或成本轉移，也幫助我們確定各部分流量在總體中的大概占比情況。

漏斗圖

一種直觀表現業務流程中轉化情況的分析工具，總是開始于一個 100%的數量，結束于一個較小的數量。通過漏斗各環節業務數據的比較能夠直觀地發現和說明問題所在的環節，進而做出決策。 適用于業務流程比較規范、周期長、環節多的流程分析，比如流程流量分析、轉化率分析。

熱力圖

將數值大小通過色塊有序且緊湊地在坐標系中呈現。 適合呈現多組數據連續的數值分布，適合做數據的預測統計，可以在圖片上直接展示熱度。例如展示城市在不同時間段打車熱度情況。

其他圖表

詞云圖適用于對比大量文本或繪制特定形狀的詞云。水球圖適用于多個百分百數據呈現。子彈圖用于表達多項同類數據的對比，可以表達一項數據與不同目標的校對結果。 維諾圖適用于層級數據比較大小，同時能看到各層級之間的情況。金字塔圖適合展示分類的占比情況，不適合展示分類過多或者差別不明顯的場景。

5. 字體

文字是可視化展示中最重要的構成要素之一，可視化大屏設計中字體的運用其實原理跟網頁 app 的 邏輯基本一致。在字體選擇上會基于業務需求選擇對應的字體，一會會與設計風格相結合。這里要注意的是字體有無襯線、字重、字距等。

大屏設計中，中文字體一般會采用瀏覽器默認字體（微軟雅黑、思源黑體、蘋方等）頁面中標題會采用特殊字體處理，常用的字體有：優設標題黑、旁門正道標題體、時尚中黑簡體、方正正中黑體等。英文數字字體推薦：Din、Ds-Digtal、Bebas、Acens、DS-DIGIB、Roboto 等。

6. 規范

建立規范的主要目的是：保證設計的一致性、提高開發效率和還原度、方便迭代 ，輔助設計和開發更好地完成設計的協作?？梢暬O計中規范一般會分為：色彩、文字、圖表、標題控件等，跟網頁端規范同理，這里就不一一贅述了。

7. 動效

大數據可視化大屏設計少不了動效，動效是可視化重要的組成部分，動效能增加觀感體驗，凸顯關鍵產品內容、強調功能信息關聯，幫助用戶理解產品、情感化互動。但過分的動效極其容易喧賓奪主，影響用戶閱讀，反而弱化了數據的展示。

動效的設計原則

動效應優先滿足核心內容、故事線。常見的大屏動效 - 展示類，用于突出產品核心功能和特點。界面信息按照一定的規律呈現，引導用戶的視覺流向。

好的大屏設計應該是數據展示模塊最好動效不易過多，要有一定的主次關系變化，例如一個動畫表現的視覺強，另一個就表現稍弱化，有強有弱、有主有次節奏才會舒服，同時動效要結合數據變化，考慮極端情況的展示效果，最終輸出一套完整的動效方案。

最后

以上是我對可視化參差不齊的一些認知，主要是給大家普及可視化設計的一些流程以及相關的專業知識,希望能夠幫助你快速進入大屏設計及避免一些坑。由于篇幅原因字體、規范、動效沒有詳細拆解說明，后面會陸續更新相關文章，感謝大家支持?？梢暬w驗遠遠不止這些。歡迎大家提出更多意見和建議，我們一起前行。