前言

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

數據可視化釋義

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

可視化大屏

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

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

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

市場現狀

平臺化

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

實現方式

目前可視化框架是大多數都是基于 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，那么這塊2×3的拼接屏幕的尺寸就應該是：寬度 1920乘以3（橫向3塊屏）高度1080乘以2（豎向2塊屏）得出整個屏幕的物理分辨率為：5760×2160。

物理分辨率 VS 輸出分辨率

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

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

2. GIS 數據

通常應用于參數化建模，之前寫的 0-1 帶你制作智慧城市地圖（二）就屬于參數化建模的一種，主要是通過一些地理位置高程數據進行模型的生成。屬于智慧城市可視化設計的基礎設施。

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

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

3. 三維建模

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

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

4. 動效設計

常見的一些動效對接格式：GIF、MP4、APNG、Lottie、序列幀。

5. 圖形技術

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

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

世界地圖的是通過一個一個粒子成像形成的畫面，其中黑色=0、白色=1。比如粒子大小是 1，它對應的位置是黑色，黑色是 0，1×0 就=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 框架。優勢就是整體渲染視覺效果棒，大場景支持好，缺點是必須安裝客戶端、電腦性能要求高、不同平臺需要不同文件。

最后

本期給主要是給大家普及可視化設計的一些流程以及相關的專業知識，歡迎后臺添加小六微信溝通交流。

作者：Mr.小六

轉載請注明：優設網

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

上次整理了一些大廠的可視化服務平臺，平臺的優勢顯而易見，組件化的操作，快速搭建的方式節省了很多的開發和時間成本。有興趣的戳這里：數據可視化大屏設計工具整理（上）。

對于上期的一些更正：8月28日百度Suger更新了收費標準，也就是說現在百度Suger也收費了！目前是分版本收費，但是對新老用戶還是提供了30天的全功能試用的。

本次整理的是下半部分的內容：

一、數據大屏與數據可視化

二、大廠的可視化服務

三、技術開源庫

四、設計輔助工具

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

三、技術開源庫

了解一些技術開源庫，一方面可以參照其圖表案例，了解各類不同圖表的展示方式；另一方面是為了保證自己設計的可實現度，不然再炫酷的設計效果最終如果因為技術開發能力無法實現也是徒勞的。

△來源Amchats官網

D3.js - 數據驅動的文檔

https://d3js.org/

D3js 是一個基于數據來操作文檔的JavaScript 庫，適宜用來建造各類可視化圖表。支持大型數據集和交互與動畫的動態行為。

△來源D3js官網

billboard.js - 簡易界面的可交互圖表庫

https://naver.github.io/billboard.js/

這是一個基于D3 V4+的JavaScript的圖表庫?？梢詫祿M行視圖縮放、展示細節等交互操作。

△來源billboard官網

FusionCharts

https://www.fusioncharts.com/

FusionCharts提供了100多個交互式圖表和2,000多個數據驅動的地圖，對不同平臺都可兼容。同時提供了前端和后端各類框架及代碼語言的插件來方便開發快速入門。不過這款是收費的，根據不同的使用環境定價不同。

△來源FusionCharts官網

四、設計輔助工具

Kitchen - 螞蟻金服官方插件

http://kitchen.alipay.com/

這是一個sketch的插件工具。主要功能如下圖。

△來源Kitchen官網

Iconfont 圖標庫我比較常用，可以直接在sketch中搜索拖拽，不用再去打開網頁查找了。其次數據填充也比較常用，自動填充時間地址城市等挺方便的。sketch也有自帶的功能，但畢竟自帶的填充都是英文，想要中文的需要自己編寫填充文檔，相對還是比較麻煩。其他是像智能排版、色板等功能，我用的不多，還是以sketch自帶功能為主。

另外，與可視化設計相關的就是里面的圖表生成器了。不過Kitchen當前只有一些常規的圖表，不過勝在簡潔明了，很適合在此基礎上進行二次設計。該插件還是螞蟻Ant系列的官方插件，可以自動配置符合Ant Design 規范的組件，配合公司采用的Ant系列的框架，會方便不少。

△來源Kitchen插件界面

FusionCool - 阿里Fusion Design開源中后臺UI解決方案輔助工具

https://fusion.design/tool

這也是一個sketch的插件工具。分為圖標、圖表、組件、模塊和模板五大功能區。

Fusion Design作為一個開源中后臺解決方案，和Ant Design有一定類似，但也有所差別。Ant Design 是一套組件庫, Fusion Design 更像是一個組件庫生成工廠。

直接下載安裝FusionCool的話，打開sketch看到的將是一個默認組件庫，圖表部分的種類樣式比Kitchen多了不少。而更厲害的是，你可以在Fusion Design上基于官方庫編輯改造成屬于你自己的設計系統，發布主題后獲得新的主題包，此時你在FusionCool中就可以看到專屬于你的主題包了，在sketch中完成設計后，開發使用Iceworks安裝你的主題庫就可以直接編碼實現你的設計。

△來源FusionCool插件界面

Map Generator - 快速地圖生成填充

https://github.com/eddiesigner/sketch-map-generator

這是一款基于谷歌地圖的自動填充的Sketch插件，輸入地址后就可以自動生成不同風格樣式的地圖，個人比較喜歡第三款灰色的。

△圖為Map Gnerator生成效果

Amcharts - 矢量地圖定制下載

http://pixelmap.amcharts.com/#

這個網站上面提過，但其實設計師用來獲取矢量地圖也很好用，選擇地圖樣式和地區之后，右下方即可以下載SVG、HTML、Image格式的圖，十分方便。點擊“Generate Ppxel Map”還可以轉化為像素圓點形式的地圖。

如果需要省份的地圖，網站上無法直接下載，但可以要先下載中國svg地圖，然后再打開svg選擇自己需要的省份模塊就可以了。

另外，在使用地圖的時候，要注意正確用圖，規范用圖。要有國家版圖意識，符合測繪法。

標準地圖可以參考國家自然資源局提供的標準地圖服務，服務網址：http://bzdt.ch.mnr.gov.cn/index.html

Chart - 圖表插件

https://github.com/pavelkuligin/chart

這個插件是收費的，每年10美元，但是你可以去找那啥啥的（我知道你懂）。優勢在于可以在Sketch中創建包含隨機、表格或者JSON數據的圖表。圖表樣式也是非常的豐富了。

△來源Chart官網

-END--

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

數據可視化是目前對數據展示最常用的方式。數據的可視化設計有助于將復雜的數據用最易理解的方式展示在用戶的面前。

數據可視化在中后臺的設計中很常見，通常主要用于分析和決策，對實時性要求不高，從一部分功能上講，其實也有著報告數據的作用。設計以2D平面展示為主，幾乎不會有3D設計出現，視覺設計重點更注重簡單直接，一目了然。

△來源 dribbble  作者wuze，侵刪

數據大屏在上面的基礎上，對實時性要求較高，會更強調數據展示的效果，這也是會流行FUI未來主義科幻風格設計的原因，追求視覺上的酷炫效果。設計上2D、3D皆有，還可以伴隨著動效搭配一些可交互的設計，來展示數據之間聯動。 

△來源 dribbble  作者William Chen，侵刪 

關于制作數據大屏的一點小建議：

△來源Suger編輯平臺

△2018天貓雙11大屏 

△DataV平臺創建編輯界面

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

致數據可視化設計師-設備篇詳解

各位數據可視化設計師們大家好，鑒于平時有很多同學對我們的可視化大屏的設計知識點有很多不理解的地方，阿勇決定花一些時間去詳細剖析一下關于這方面的知識，全部都是多年工作經驗所得，絕對有料。

整個合輯一共有10篇文章，分別涉及到設備篇、風格篇、字體篇、色彩篇、組件篇、布局篇、版式篇、視覺篇、團隊篇、技能篇十篇文章，具體的詳細的展開來講一講可視化大屏設計的知識點。（我命名為可視化設計十要素）

同時也會包含一些工作中的同學們問我的一些問題以及我搜集的一些問題，將會以問答的形式去給大家講一講，如有不對的地方，還請大家指出，我們一起探討進步！

文章較長，請廣大讀者仔細閱讀，基本涵蓋：設備信息，分辨率尺寸，大屏適配，投屏事項，掌握本文可應對日?？梢暬O計設備方面的知識。

LED屏幕

政府大屏主要以點間距去區分屏幕的精細度，點間距越小，造價約昂貴；面積越大越整體，造價越高。離屏幕越近顆粒感越強，設計效果也就越不清晰，LED顯示屏表面不平整是導致LED顯示屏圖像失真的主要原因。LED顯示屏表面粗糙度的好壞主要取決于生產工藝。

屏幕介紹：按照不同點間距進行分類，P1.25、P2.5、P3、P4、P5、P6、P8、P10、P12、P20（間距越小，圖像越清晰，價格也越高，一般政府led屏基本都在P1.25-P6之間)。

最佳視距=像素間距/（0.3~0.8），這是一個近似范圍。如LED顯示屏P16mm，最佳視距為20~54米。

液晶拼接屏

拼接屏相比于點間距比較小的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網頁端的展示方式，通過在web開發，有需要時會投屏到大屏上去展示。設備比例一定不能差距過大，比如16:9的投屏到32:9的大屏就不是合適，解決方案可以是外接一塊1920的顯示器即可。

此處要注意web端演示時，記得全屏顯示，瀏覽器邊框滑動條等可以不考慮，前端會做相應的瀏覽器細節考慮，設計按正常分辨率走即可。

觸摸屏

觸摸屏（Touch Panel）又稱為“觸控屏”、“觸控面板”、“觸控臺“，是一種可接收觸頭等輸入訊號的感應式液晶顯示裝置。

當接觸了屏幕上的圖形按鈕時，屏幕上的觸覺反饋系統可根據預先編程的程式驅動各種連結裝置可用作控制端操作大屏，原理等同于ipad控制，只是載體不同。

設計規范以及按鍵反饋等交互體驗與ipad類似。

滑軌屏

滑軌互動屏系統——又稱為滑軌電視、滑軌播放等，通過特殊設計的機械滑軌控制裝置，結合高清液晶拼接幕墻，實現對屏幕內容的互動控制?；瑒拥讲煌恢闷聊徽故鞠嚓P信息，包括圖片、文字、視頻等，是一種全新的互動展示形式，可與觸摸同時使用。

虛擬沙盤

虛擬沙盤/數字沙盤就是用計算機通過投影儀或者LED大屏顯示屏動態/靜態三維顯示：智慧交通、智慧市政、智慧農業、智慧物流、智慧停車、智慧公交、智慧公安、智慧交運等模型，這是一種高科技的模型操作員通過程序，可以隨意調整沙盤的尺寸、規劃區域、區域布置，快速展示多種全新的創意。

具有三維顯示效果，并可以從不同角度觀察創意模型，篩選創意方案。注意虛擬沙盤和實體沙盤的聯動效果，實體沙盤為底，虛擬沙盤做效果疊加。

分辨率：物理實際分辨率

Q：原本設計尺寸是1920*1080，使用場景是PC端，同時在大屏中展示，尺寸為3840*1080，該如何適配？

A：首先我們需要了解適配最主要的痛點就是：靈活，復用性高，可延展。

圍繞這幾個點我們可以通過模塊化開發去做，將每個模塊單獨開發。我們設計師做這種需求之前，就需要提前去構思，在設計各模塊時，盡量使用可擴展和可自適應的圖形，這樣面對適配的時候我們可以通過移動，縮放這些模塊，來完成適配。盡量避免二次設計以及開發，提升時間成本。

圖形放大適配

圖形位移適配

Q：如果是16:9適配非32:9是否也是這么去適配的？如果是特殊的形狀或比例該怎么適配？

A：我們適配一定要記住靈活，減少工作量這些原則，如果不遵循這些原則，那么我們做適配的初衷就錯誤了。這樣我們還不如直接就重新開發一套了。就好比我們通過控制端去控制大屏，如何用開發一套的時間去適配兩個甚至是多個終端，這是我們需要注意的。當然考慮到一些實際情況，會有一定程度上的修改，但是一定是要從節省工作量去出發的。

場景一：拼接屏分辨率計算，已知某項目設備分辨率為寬高4*2拼接屏，設計稿我們該如何去定義分辨率？分辨率又是多大？

從命題我們可以看到4*2的拼接屏，我們可以通過一塊屏幕為1920*1080去計算，那么通過計算分辨率應該是1920*4 &1080*2，也就是7680*2160，這樣就計算出我們的分辨率了。

場景二：LED屏分辨率計算，已知某項目LED屏幕物理尺寸為寬15米，高4米，設備分辨率未知（可以支持4K或者2K輸出），那么如何去制定分辨率？

工作中相信不少同學都遇到過這種只知物理尺寸而不知道分辨率的項目，那么我們只能通過計算大概的設計分辨率來出初期的設計稿件。

可能一：屏幕支持4K輸出，既然支持4K輸出，保證畫面輸出的清晰我們可以將設備的高度設定為2160

此場景下公式為：15/4=X/2160     X=8100    那么可以大概得出寬度大概為8100像素（只是我們通過計算大概得出來的）

可能二：屏幕支持2K輸出

此場景下公式為：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就可以了）。

不同比例投屏及解決方案

Q：如果遇到一個設備是16:9，投屏到一個20:3比例的大屏幕， 那我設計尺寸以16:9，還是20:3？

A：我們要記住，如果面對的是正常比例投屏到非等比的大屏，我們需要遵守的規范一定是：一切以大屏展示為主。所以我們設計尺寸一定是按照20:3來設計的，大屏展示正常才是我們的唯一標準，投屏電腦可能會出現的問題，我們只能妥協（投屏電腦可能只能展示很小的一部分，但也是沒有辦法的）

那么我們遇到這種是否就沒有辦法了呢？在這阿勇給大家提供了三種解決辦法，在實際工作中，我也遇到過這種問題，所以在這給大家分享一下。

方案一：外接顯示器（外接多個顯示器，一般主機可以另外外接四個顯示器，這樣就可以解決投屏電腦顯示不全的問題了）

方案二：采用拼控系統，而不是用純粹的設備投屏（拼控系統完美解決了尺寸不一致的難點）

方案三：設計兩稿，16:9，20:3我們都去做設計（做兩套系統，相當于做的適配）

Q：請教大家一個問題，電腦的分辨率是3840*2160，單個大屏的分辨率是1920*1080，拼9*6的大屏，設計尺寸該設置多少??？這樣設計尺寸會不會太大了，如何優化這個設計稿尺寸？

A：前面的文章我們已經介紹過拼接屏的尺寸的問題，這個問題的解答：1920*9/1080*6 ，這個就是設計分辨率，通過計算得出，最終設計稿尺寸為17280*6480?？梢钥闯鲈O計分辨率確實太大了，設計的時候如何去優化設計尺寸呢？

通過命題我們可以看出電腦分辨率是支持4K的，就是說輸出分辨率和顯示分辨率我們都是可以上4K的，而4K的分辨率一般會做3840*2160，再結合設計稿尺寸17280*6480，可以將整個效果圖尺寸縮小三倍，也就5760*2160。設計可以按照這個分辨率去出圖，最終交付給開發的就是切三倍圖，并提示開發是縮小三倍做的。

總結：不管在面對什么尺寸的設計，都要記住，萬變不離其中，一切以大屏完美展示為準則，所有的一切都是要在大屏上觀看，為了完美展示，投屏電腦，設備控制等頁面可以適當的讓步。

全篇知識點

通過以上的知識點總結，不知道大家對于數據可視化大屏設計是否有了新的認識，數據可視化對于設備的尺寸，設備的信息，以及投屏注意事項，都要有更多的了解才可以。下圖就是總結本篇文章的知識點。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

一、圖表的分類介紹以及應用范圍

一提到圖表，大家腦海里浮現的，通常是柱狀圖、餅圖、趨勢圖等等。這是按照圖形等維度對圖表進行分類，經常會導致圖表的誤用。

圖表的作用，是幫助我們更好地看懂數據。選擇什么圖表，需要回答的首要問題是『我有什么數據，需要用圖表做什么』，而不是 『圖表長成什么樣』 。因此我們從數據出發，從功能角度對圖表進行分類。

二、畫面布局在實戰中的應用

在畫面中我們經常會遇到各式各樣的屏幕分辨率，有大屏的LED屏，有平面顯示屏，數字拼接屏等等。那么具體的項目中我們如何去定義這些不同尺寸的屏幕來進行畫面布局呢？

如若有其他分辨率下的屏幕，按照這個規律的基本布局，盡量使組件呈現16：9比例排布是最好的；超長分辨率下的大屏設計或者拼接很多塊顯示器的大屏可以通過具體業務內容來展示，按模塊去劃分，功能點明確即可。

此處布局只是我個人覺得比較合適的展示方式，并不代表一定是需要這么排布，還可以有很多的形式去布局。也可能因為業務不同，版式也會有調整，不過萬變不離其中，掌握基礎要素，其他分辨率下照樣可以有很多編排形式！

三、硬件常用尺寸以及設備

Led屏幕

1、點間距不同

p3點與點之間的距離是3毫米，p4點與點之間的距離是4毫米。

2、清晰度不同

P后面那個數字越小，代表兩個燈珠之間的距離越小，清晰度越高，相對應，價格也會高，因為每平方的像素點P3比P4多很多，成像效果好。

3、最佳可視距離不同

點間距P3（3mm）的顯示屏，它的最佳可視距離是3.5~10米，點間距P4（4mm）的顯示屏，它的最佳可視距離是5~13.5米?？梢愿鶕约旱膶嶋H情況，選擇最適合的型號。

拼接屏

拼接的每塊小屏一般是16:9的高清屏，設計尺寸可以把上下高度設定為1080px，長度按照拼接屏的數量比例得出長度的設計尺寸。例如3乘5的一塊大屏幕，高度3塊屏設為1080，每塊高就是360，360除9乘16等640，640就是一塊屏幕的長度，640乘5塊屏＝3200最后得出設計稿尺寸就是：高1080px乘寬3200px（在這里感謝我的數學老師）

現在企業常用的有無縫隙、1.7mm縫隙、3.5mm縫隙、三種拼接大屏，縫隙越小越貴。

另外大屏設計還有一個比較重要的問題就是注意拼接屏之間的縫隙，設計時千萬不能跨屏設計，不然很影響美觀。

控制端

目前企業用的最多的控制端為ipad控制，需要在ipad上制作出控制端頁面，一般尺寸為2048*1536，控制端大多數為按鈕操作，頁面盡量簡單明了。

四、字體字號以及畫面配色631

字體字號

在數據可視化設計中,一般選中的字體有如下幾種:

1. 中文字體:蘋方,思源黑體

2. 英文字體:DIN,DIN-PRO

3. 數字字體:Exo

正常1080P情況下，由于甲方大多數為政府機構，文字要求會比一般的要求大一點，一般都是選擇最小16px。字號不是固定的，人是活的，規范是由人制定的，切勿迷信規范。

配色法則以及顏色選用

運用配色631法則，將配色定義為主色60%，輔助色30%，對比色10%去貫穿整套界面文字的顏色通過重要、普通、次要去分配，是帶有色彩傾向豐富頁面視覺。

在數據可視化設計中，由于大屏是偏暗的，所以需要選擇高飽和度的色彩，并且需要選擇統一的顏色，保持畫面協調。

有時候會遇到客戶需要高飽和度的顏色并且多個顏色的時候，在選用時盡量選用飽和度不要太高的顏色，不然畫面會很不協調，也就是所說的晃眼。

在設計過程中盡量選用深色背景作為畫面主背景，這個可以解決大屏因為色差問題，對整體頁面的影響，用戶也比較容易忽略拼縫中的存在的跨屏感。同時深色背景時更容易突出主體,畫面效果更好，更能體現流光、粒子、發光等酷炫效果。

同時，大屏由于有色差，盡量不要使用漸變色，如若需要使用需要到達現場，根據大屏反饋的色差，現場調整，但還是推薦盡量使用純色。

五、畫面飽滿以及頁面裝飾點線面

畫面如何飽滿

方式一：字體的飽滿

將字體處理后，空白面積減少，整體更飽滿了些

方式二：文字的飽滿

正常情況下為使閱讀更方便，標題間距給-10%~20%為佳。

通常數字會比漢字小，為使基線對齊，數字與漢字需分開設置字號。

主副標題字號比例過大過小會導致界面不平衡，建議主標題是副標題的1.5倍。

方式三：關系的飽滿

當A=B時，圖標和文字的關系會混淆，這種情況下要滿足B>A，用間距分層次

采用黃金分割0.618值。也就是橫向21個小方塊，豎向13個小方塊。此時，最優雅的板式是A＞B的間距，1＞2＞3的間距。

方式四：圖標的飽滿

頁面如何裝飾會更豐富(如何運用點線面三大構成)

我們在設計的過程中，經常會因為畫面不夠飽滿頁面太空，收到客戶的吐槽，下面就講講如何通過點線面來豐富畫面，使畫面更豐富更有層次感。

1.原畫面設計完成

2.添加裝飾線(點線面構成)

3.調整位置,豐富畫面

在畫面添加裝飾的情況下需要給畫面留足位置，數據可視化大屏本身面積就比較大，合理運用畫面以及拼接屏縫隙添加裝飾線,可以更好的減輕拼縫所帶來的影響。裝飾線的添加還可以在后期豐富畫面動效，科技感十足，在頁面中添加裝飾線在我看來，非常的有意義，既可以豐富畫面，又可以完善動效，一舉兩得。

在裝飾線添加這一塊，推薦大家多去看看國外的可視化設計，哪些幾乎將點線面構成發揮到了極致。

六、畫面動效以及素材靈感收集

動效制作

C4D+AE

在很多設計項目中會用到很多酷炫的科技模型，比如汽車、人物、地球模型等等，我們可以運用C4D來進行主視覺建模，再通過AE進行動效輸出。

有的人可能會問在導入數據之后可能由于數據量不大的原因，動態效果不是很明顯，在這種情況下，咱們可以把不變的數據量，做成AE動效，可以把動效導成json文件直接發給前端，能很大程度上保障畫面動態效果。

素材靈感收集

Behance

在behance上有很多國外的設計師，他們的數據可視化設計做的都非常漂亮，極具代表性風格，我們可以通過behance搜索HUD 即可搜出來一大堆精美的高清原尺寸設計圖，同時可以把這些作品保存到自己情緒版中，非常的方便。

pinterest

從“書簽”這個角度出發，我們可以發現其實Pinterest的本質就是一張張精美絕倫的圖片書簽。每一個在Pinterest上的圖片其實都是一個個網頁上所提取濃縮而成的書簽。pinterest對圖片的關注是最用心的，去除了其他的各種干擾，Pinterest只注重圖片的呈現。

而且Pinterest有個非常獨特的功能,就是他能夠自動篩選同類型圖片，并且精準度非常高。

Videohive

這是一個專注視頻模板和素材的網站(收費)，在此可以搜索出很多的HUD動效視頻以及高清圖片。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

為什么說是撕開 B 端封印呢？沒接觸過 B 端的同學，很大一部分都認為 B 端不就是簡單的列表和圖形嗎？拿開源組件拼拼湊湊就可以了，有什么可設計的？

其實這個想法完全錯了，你如果接觸后就會發現，B 端所需要的掌握的產品知識、思維邏輯、規范意識等等太多了。

而且近幾年 B 端這個詞出現的頻率越來越高了，因為前幾年大家都在爭 C 端市場，純 C 端的流量爭奪已經進入了尾聲，B 端產品反而帶來了新的機會點，同時也被慢慢的重視起來，比起以往 B 端設計師，現在需要掌握的技能也越來越多。你可以查閱一下一些招聘網站，現在 B 端可視化方面的崗位是非?；鸨?，與 C 端相比，人才缺口更大，未來幾年 B 端也會更加火爆，有機會接觸 B 端的話就不要錯過機會。我們團隊平均招聘一個合適的設計師基本要兩個月的時間。

說了這么多，我們開始今天的主題吧！

首先在座的可能有部分設計師沒有接觸過數據可視化的設計，那么第一個問題來了，什么是可視化？大家想一想。給大家三秒鐘~

通過可視的表達來增強用戶處理數據的效率。

接下來我會從三個方面來講解如何構建可視化：

    · 靈感需要迸發，更需要積累

    · 從零到一設計驅動

    · 設計度量

一、靈感需要迸發，更需要積累

1.1  數字時代下，99%的問題都是舊問題

數字時代下仍有信息不對稱的情況，尤其是關鍵技術和設計上的問題，但是如果你用心尋找，就會發現你的新問題則是別人很久之前的舊問題了。所以要做個有心人。

但是問題又來了，有時候真的不知道該怎么找、去哪找？這是個很常見的問題。因為可視化不比插畫、平面等這些成熟的領域，他是比較小眾的，所以靈感以及素材的搜尋是一個令新手設計師頭疼的事情，再加上對關鍵詞的熟悉程度不夠，導致很多設計師只停留在【可視化】這個關鍵詞里，最后感覺搜來搜去都是見過的圖，沒有新意。

1.2  明確目標，知道自己想要找什么

互聯網信息太多了，漫無目的的找靈感，只會浪費時間，一會看到這張圖好看，一會看到那張圖好看。不知不覺幾個小時就過去了。

1.3  建立關鍵詞詞庫

確定目標后，就要細化關鍵詞了。怎么建立關鍵詞詞庫呢？

關鍵詞詞庫由3部分組成：終端、設計類型、業務類型。

    · 終端：大屏、移動端、web 等等。

    · 設計類型：每個細分的數據可視化類別都是有一些專有名詞的，比如最近比較熱門的車載HMI系統，那他的類型關鍵詞就是 HMI。通過這些關鍵詞，你會搜到更精準的結果。設計類型關鍵詞比如：AR/VR、HUD、HMI、FUI等等，你要了解你們公司相關類型的關鍵詞，記錄下來。以及跟你們有關聯的，都記下來，補充自己的詞庫。

    · 業務類型：智慧城市、生物醫療、監控部署等等。

這三類單獨或組合進行搜索，就會看到更多可視化產品了。把關鍵詞詞庫建立起來后，就可以去常用的網站上搜索了，最好用的還是 behance 和 Pinterest。

1.4  除了常用的設計網站，還有哪里可以看？

企業官網：很多做數據可視化的公司，會在官網展示一些能體現自己業務特點、業務實力的案例，而這些案例就是這些企業最好的數據可視化設計作品了， 所以但凡有案例展示的官網，案列基本都是最典型最好的設計，所以從這些案例中找靈感，也是一個有意思且有效的方法和途徑。

1.5  你看到了別人看不到的，設計才能有所不同

總結一句話：你看到了別人看不到的，設計才能有所不同。如果你和別人看到的是一樣的，你怎么比別人做的更優秀？

1.6  興趣推送

經常刷短視頻/新聞網站的應該知道，系統會根據你的點贊、收藏、瀏覽等數據來給你安排后面的內容推送，以保證給你推送更精準的內容。設計網站亦是如此，behance 等網站上也都是千人千面，它會根據你的點贊收藏等來讀取你的喜好，進而推送更精準的作品。所以假設你是一個B端數據可視化方向的，你就經常搜、點贊收藏相關作品，之后你的首頁出現相關內容的幾率也會變大。

1.7  定期清理，更新迭代

最后一點，這個也是好多設計師的通病，收藏即學到。

靈感庫要求精而不是多，每隔一段時間，回來翻一翻自己之前收藏的作品，會發現有些作品自己已經看不上了，因為在做靈感收集的過程中，我們的審美會自然有所提高，當輸入的作品樣本越來越多，我們對作品評價的維度也會更多，之前那些覺得好的作品，現在看來也就會有缺陷和不滿，這是一個很正向的結果，成長就是一個不斷剔除的過程。刪掉那些自己覺得不滿意的作品，添加更符合自己當前審美的作品到靈感庫里。

這樣慢慢完善你的地基，才能更高的向上走。

二、從零到一  設計驅動

講完第一部分，我們開始搭建產品。

我負責從零到一的項目大大小小的得有10來個了，我認為在產品整個產品周期中設計師的話語權最高的時候就是項目初期，是可以做到設計驅動的。既然設計可以有足夠的的話語權，你就得規劃好未來的設計走向。

產品初期，經常會有幾個爭議比較大的問題，我們來聊一下。

2.1  設計先行還是調研先行？

這是新項目必須要做的選擇題，再講之前你先想一下，如果是你，你會如何選擇？

我的觀點是設計先行。（當然設計先行是建立在你至少對這個項目的行業有個簡單的了解之后，先設計再用戶調研），為什么呢？因為如果用戶調研先行的話，用戶只會反饋當下最想要的東西，從而有可能給你帶來誤導。就比如我們經常舉的一個例子：汽車出來之前，人們只想要一匹更快的馬。

我們要解決的不是用戶當下想要的東西，而是痛點背后用戶真正需要的東西是什么。在 0-1 的這種創造性的項目，往往設計者才是當下最懂產品的人，你把決策權交給一些不懂產品的人，做到最后只能是迷失了方向，鍋還是設計來背。所以一開始設計師要把決策權拿在手中，掌握航向。

2.2  設計先行還是規范先行？

這個問題在現在看來相對比較統一，但有的同學還是有疑惑，所以我拿出來再跟大家聊一下。

首先我的觀點是設計先行，在設計之前就定好規范的基本都是自己YY的，返工率極高。等你在做具體設計的時候就知道之前做的規范都是白費力氣了。一般都會選用在項目完成之后或者主風格及主要頁面完成后再輸出規范，這樣既可以減少規范的改動，也可以保證后面功能延用規范，一舉兩得。

當然了，設計規范不是所有項目都要有的，它是為了減少工作而不是增加工作，如果是一次性項目，就不需要再額外花費精力去輸出規范了，浪費資源~

2.3  完成和完美那個更重要？

現在都是爭分奪秒的時代，任務是無止境的，沒有做完的時候。造成這個局面的無非就是一個問題：時間不夠用。通常的做法就是先完成再迭代，做產品久了你就會發現，完成比完美更重要，不完美你還可以再迭代，完不成就有可能錯過一個風口，從而失去了變完美的可能~

聊完這三個問題，我們在設計的時候也要有一些注意項，真正的做到設計驅動。

2.4  把復雜變得清晰簡單而且美

對于設計師來說，我們的任務就是把復雜問題變得清晰簡單而且美，所以我們應該成為企業和客戶之間溝通的“架橋人”。通過設計的方法，把無形的、復雜的技術，通過有形的、可視化的方式展示出來，讓客戶更直觀、清晰的感受到產品的功能，看得懂其在業務場景中產生的價值。

2.5  轉換視角，建立共鳴

站在客戶視角，聚焦客戶關注的核心問題，通過情景把內容有序組織起來，快速與客戶建立共鳴，有效降低內容理解難度。

2.6  產品架構可以不那么復雜

把復雜的業務/功能簡單化、傻瓜化，最大的降低學習成本，能幫用戶操作的絕不讓用戶親自去操作。你要讓用戶在1分鐘之內了解你的產品是做什么的、有什么功能，你就成功了。

2.7  大膽隱藏冗余內容

B 端項目中內容量是巨大的，面對龐雜的信息，去粗取精，提煉各場景的核心內容，避免冗余信息阻礙內容有效傳達。話術語言不單要簡單易懂，還要嚴格控制文字長度，保證內容可以被快速掃描和理解。

2.8  尊重用戶習慣

不要妄想改變用戶養成的慣性思維，你要記住慣性思維大于設計思維，他的閱讀習慣、操作習慣都是不易改變的，不要為了個性化而嘗試去改變，大部分情況下結果不會是那么的理想，除非你有極大的把握。

2.9  選用合適的圖表

這個是常提到的，我就在這里簡單給大家提個醒。比如做數據對比，柱狀圖更能清晰表達出用戶想要的結果，你卻非要放個酷炫的雷達圖，他的本質目的都沒達到，要美觀有何用？

每個圖表都適合哪些場景使用，像 antv、hicharts 等都有介紹，我就不一一贅述了，我之前也寫過一篇關于如何合理利用圖表的文章，大家有興趣的可以去看一下。

三、設計度量

產品設計的好與壞我們需要去驗證、去度量。我們怎么去驗證可視化的好與壞呢？

美與丑也是主觀的，沒有絕對的美，也沒有絕對的丑。一個產品，總會有人喜歡有人不喜歡，但是我們要迎合大多數人的審美。

所以就需要一個方法論來驗證產品的好與壞，現在各大廠都在做自己的一套產品驗證的方法論，阿里在這方便算是國內做的不錯的，我舉幾個常用的度量模型。

    · 阿里云：UES

    · 螞蟻金服：PTECH與易用度

    · 1688：五度模型

    · 優酷：DES

UES 目前是國內最好的，在 5 月份的阿里設計周上也正式對外講解了 UES 模型。我拿阿里云的 UES 簡單講一下吧，這么多度量模型，無論他的方法、維度有所不同，但他們的目的是相同的：通過模型來度量設計成果。

    · 易用性：易操作性、易學性、易見性 ...

    · 一致性：整體樣式、通用框架、常用場景及組件 ...

    · 任務效率：任務完成率、任務完成時間、功能使用率 ...

    · 性能：首屏渲染時間、API 請求響應時間、頁面請求響應時間 ...

    · 滿意度：產品滿意度 ...

UES 分為 5 個模塊，這 5 項是整個產品生命周期需要驗證的。

關于 UES 我就介紹到這里吧，UES 模型要是展開講的話，半天都講不完，感興趣的話可以去阿里云官方發布的 UES 模型的相關資料中深度研究一下，看看適不適合自己的產品。

上面是度量產品的模型，接下來針對我們 B 端設計師，我們也要有一些指標來度量自己是否合格。

3.1  設計效率

現在內卷盛行的時代，各大廠都在講人效，畢竟時間才是最珍貴的，所以現在都在想方設法的提高人效。而且 B 端相對 C 端來說，可以有更多自動化的工具。

舉個我公司的例子，我剛去的時候基本沒有自動化工具，每個設計師每天也都在忙碌，誰也沒偷懶閑著。但是我發現有很多重復性的體力勞動是不需要多少思考就能完成的，但是卻耗費了將近 1/3 的時間。所以我就在想如何提高人效，把一些體力勞動用一些工具來代替，這樣就能釋放設計資產，去做更重要的事情。

當時就做了第一個自動化的工具：設計系統，現在大家對這個詞應該不陌生，但是我們剛開始做的時候比較早，還沒有一些比較完善的設計系統供我們參考，所以我們也算是前幾批摸索設計系統的團隊。設計系統做好后是可以把這1/3 的設計時間節省了下來，而且團隊的規范性更加統一。

后面的話我們也是做了一些其他的自動化工具，比如結合一些插件做到 icon、組件等發布的自動化，并且與研發同學打通，有相應的自動化提醒工具，這樣也節省了與研發的溝通成本。

在工作中，流程上能減少一步就是成功，慢慢來，萬里長征就是一步一步走出來的。

3.2  增長設計

增長這個詞來源于【增長黑客】這本書，顧名思義這個詞的就是通過設計來促進產品增長。

這個詞用在 C 端上比較多，因為 C 端可驗證的方法比較多，見效快，所以我們常見的一些增長設計的案例都是關于 C 端的，而 B 端的話，受限制的因素較多，設計只是影響增長的一部分，而且見效慢。

但是雖說影響因素多、見效慢，我們還是可以抓住機會、多去嘗試一些方法來做到設計增長。我這個方法不行，我就換一種嘗試。大家都是在摸索中過河~

3.3  為業務賦能

所有的設計都是要為業務賦能、為商業買單。我們設計的本質就是為用戶解決問題，讓用戶以最直觀的方式理解產品。不要為了所謂“我認為很美”而與業務背道而馳。

3.4  體驗創新

用戶體驗設計師會越來越重要，近兩年逐步被重視，而且未來幾年會越來越重視。行業內需要更多動腦的人而不是僅僅會動手的人。

現在到了互聯網下半場，拼的不僅是功能，用戶體驗的重視程度已經被提升了上來，在工作中的占比也越來越重。

再加上現在這個超級內卷的時代，你不提升，你的競爭對手就把你干掉了。而且你如果只是一成不變的維護老版本，你去下家面試的時候都沒有拿得出手的產品。

3.5  善用工具

現在各種辦公類工具、軟件層出不窮，而且很多工具是比較類似的，有的設計師再選工具的時候就很糾結，我認為完全沒必要糾結，首先你要明確我想要達到什么目的，只要某個軟件滿足著你的需求就可以用。

工具是為人服務的，我們的設計軟件從 PS – Sketch – Figma，無論怎么變化總要圍繞一個目的：更高效的完成工作。

尤其是一些自動化工具，現在人工智能升級很快，要多關注設計自動化方面的工具，讓他來解放我們的雙手。

總結

最后送給大家一句話：

這時代唯一不變的，就是變化。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷    作者：胖kuan 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

我們毫無疑問已經處在一個大數據的時代。各行各業都在快速產生和積累數據。 本文結合 UED 團隊過去所參與 B 端數據可視化項目分享一些經驗及思考。

• 背景
• 什么是數據可視化
• 數據可視化的應用價值
• 如何做好數據可視化設計
• 數據可視化發展趨勢
• 結語

背景

“得益于計算機技術和海量數據庫的發展，個人在真實世界的活動得到了前所未有的記錄……社會科學將脫下‘準科學’的外衣， 在21世紀全面邁進科學的殿堂?！? 雅虎首席科學家Duncan J. Watts

“大數據的影響，就像四個世紀前人類發明的顯微鏡一樣……而大數據，將成為我們下一個觀察人類自身社會行為的‘顯微鏡’?！?– 麻省理工教授Erik Brynjolfsson

從數據，到海量數據，再到大數據，對人類的做事和思維方式都有很大的影響。在《大數據時代：生活、工作與思維的大變革》一書中，作者歸納了大數據的三個特點:

• 更多：不是隨機樣本，而是所有的數據;
• 更雜：不是精確性，而是混雜性;
• 更好：不是因果關系，而是相關關系。 [1]

當前對大數據的研究涉及計算機科學、數學、生物學等多個領域。大數據尤其是對數據存儲、數據挖掘等提出了重大挑戰。而數據可視化也將在大數據時代扮演一個重要的角色。數據可視化可以將紛繁復雜的大數據集、晦澀難懂的數據報告變得直觀易讀、易于理解，通過圖表將雜亂的數據進行科學有序的呈現，使用戶找到數據的變化規律以及潛在價值，幫助用戶作出決策。就數據可視化的應用來看，應用范圍極其廣泛，如政府應用、商業決策、公共服務等等。

什么是數據可視化

顧名思義，數據可視化就是將數據轉換成圖或表等形式，以一種更直觀的方式呈現數據。通過可視化的方式，我們可以將大量復雜的數據通過圖形化的手段進行有效地表達，幫助用戶發現規律和特征，發掘數據背后的價值。

圖 1 @Marco Zemolin Siresia Bagnoli

數據可視化的應用價值

1. 易于理解，有利于發現信息特征

使用可視化的方式來表達復雜的數據，可以確保對關系的理解要比那些混亂的報告或電子表格更快。通過圖形化的表現方式，我們可以以清晰和連貫的方式解釋大量的數據，從而讓我們理解數據，得出結論。

案例：流媒體平臺節目數量的變化

以下圖為例，當用戶希望了解 2011 至 2020 下圖四大流媒體平臺節目的數量變化情況時，以表格方式呈現效果如下圖：

未經可視化設計的表格數據圖

如果通過可視化設計處理后效果如下圖：

經可視化設計后的數據圖

在這個案例中，我們可以看到，通過文字信息表達的方式，所有的數據在文字信息的表達中都只是零散的個體，我們很難在短時間內對列舉數據有一個大致的了解，更不用說發現特征得到結論了；而在可視化表達中則不同，所有的元數據通過圖表形成一個整體，數字信息被轉化為視覺信息，通過可視化圖表，通過觀察點的位置和顏色即可感知到數據的差異，原本需要通過計算數字大小完成的對比，變成了肉眼可見的點的顏色與間距對比，我們可以迅速了解到近十年四大流媒體平臺每年節目數量、每年不同平臺節目數量的對比以及各個流媒體平臺節目數量的增長趨勢等。

2. 將數據轉化為更具吸引力的故事

據研究發現：人腦處理圖片信息的速度顯著快于處理文字信息，例如一篇 300 字的小故事，看一遍需要數十秒，而轉化成圖片后則只需要一眼即可記在腦海里。

這表明，在信息的類型中，人腦對圖片信息的接收和處理效率遠高于文字信息。而數據可視化則可以將數據通過可視化的方式轉化一個以圖片形式展示的故事，幫助用戶快速接收、處理信息，激發用戶聯想并產生情感共鳴。

案例一：新冠病毒如何通過空氣傳播

隨著新冠疫情在全球各個地區的蔓延，如何做好疫情防控已經成為了每個民眾的頭等大事 。Mariano 和 Javier 用可視化的方式生動形象地傳達了新冠病毒是如何通過空氣傳播的以及可以通過哪些措施來降低傳染風險。

圖 2 @Mariano & Javier

案例二：在敘利亞，誰和誰戰斗？

許多不同的團體之間的關系可能很難理解 – 尤其是當有11個這樣的團體存在的時候，這些團體之間有的結盟，有的敵對，這讓人難以理解。但是，Joshua Keating 和Chris Kirk通過表格的形式和熟悉的視覺效果和色彩，將這些數據簡化為一種簡單的、易于理解和可互動的形式，讓人們可以輕松了解這些團體之間的關系和故事

圖 3 @Joshua Keating and Chris Kirk

3. 幫助人們作出決策，加快決策過程

現實生活中大部分的人是視覺學習者，他們傾向于在與視覺元素相關聯的情況下進行學習并與信息互動。[2] 人類大腦識別并理解一張圖像最快僅需 13 毫秒。[3] 因此，相比起閱讀和理解文本，大部分人更容易通過圖表或其他可視化形式來理解數據，合理的數據可視化設計可以提高他們作出決策的速度。

圖 4 @Bea Vaquero

如何做好 B 端數據可視化設計

1. 明確客戶需求

設計師在設計數據可視化項目的開始階段應該盡量與客戶進行深入溝通，確定他們的業務訴求，也可以理解為確定客戶的初衷與目的，從企業客戶對數據可視化的需求看來，通常會有兩種類型：

• 側重于匯報展示，主要用途是為了對外宣傳、對內展示等，對于這類需求，設計時可強化視覺效果的呈現，對數據進行場景化設計，嘗試讓數據以一種新的載體，有趣的互動等形式結合展現。
• 側重于數據分析和協助決策，對于這類需求，一定要清晰了解需求方的業務內容和重點指標，重點關注數據的維度、種類、數量等信息，視效設計上應該優先滿足業務訴求。

明確客戶訴求，通過設計手段幫助客戶達成目標，這才是 B 端數據可視化設計的關鍵所在。只有當我們了解客戶的需要，我們才能快速推導產品結構、關鍵數據、視效風格等信息。

圖 5 @Daria

2. 確定關鍵指標與優先級

關鍵指標是對一組或者一系列數據的統稱。一般情況下，一個指標在屏幕上獨占一塊區域，所以通過關鍵指標定義，我們就知道數據大屏上大概會顯示哪些內容以及數據大屏會被分為幾塊。

那么關鍵指標的選取依據是什么呢？我個人認為主要還是依據客戶訴求，數據可視化的最終目的就是幫助客戶達成業務目標。需要思考的是，哪些數據通過何種呈現方式能夠幫助客戶解決問題、達到目的、滿足他們的期望，選擇出一系列關鍵指標。

對于這些選取出來的關鍵指標，我們需要對其進行優先級的排列，一般來說，主要指標能夠呈現業務的主要邏輯，一般放在顯眼位置，用重點元素標識；次要指標圍繞主要信息進一步闡述；輔助指標是對主要信息的補充，一般放在非核心區域，或者二級結構中。

通過合理優化關鍵指標并進行優先級排列，能夠保證數據可視化的核心設計的重點，避免數據空洞散亂。

3. 合理使用數據圖表

在選擇圖表展示相關數據指標時我們要思考各個指標的主要呈現，更進一步的講，是我們想通過可視化表達怎樣的信息。下面這張圖就清晰告知了我們如何從數據的展示目的出發，選擇合適的可視化方式來呈現數據。

圖 6 翻譯自@Stephen Few

4. 合理進行頁面布局

數據可視化頁面布局的設計是相對靈活的，為了保證數據呈現最佳效果需要結合實際需求來合理規劃。關注核心數據的比例和位置，橫向布局最為常見（人眼的水平運動比垂直運動快，會先注意水平方向的事物），核心數據場景劃分在中心位置，占較大面積；其余的指標按優先級遵循人們的瀏覽習慣在核心指標周圍依次展開。將類型相近的指標放一起，這樣能減少觀者認知上的負擔并提高信息傳遞的效率。

@布局設計案例

5. 制定設計方向

在定義設計風格的階段，從項目背景出發，綜合行業類型、產品定位、品牌傳播等因素，提取關鍵信息，構建設計框架。

數據可視化的設計風格主要根據客戶要求、行業特性、數據指標等因素決定。通常我們很容易看到的可視化設計以深色為主，是因為相比于淺色基調，深色背景設計能夠有效緩解視覺疲勞，其次深色設計能夠更好地營造對比差異以及數據層級，再者深色設計更容易呈現豐富的動態效果，營造出強烈的空間感等。配色的設計使用應該充分考慮項目背景以及項目屬性，例如黨政機關類項目會慎重考慮用色，應當確保設計嚴肅，莊重。

數據可視化的設計除了對數據進行合理設計，還需要注重場景感的塑造，例如，我們通過場景化設計可以讓某大數據平臺成為大型“圖書館”，查看數據的過程就跟圖書館看書一致，場景化設計的優勢是能夠讓用戶能夠以一種具象的互動方式來理解十分抽象的業務數據，當然合理的構建動態數據效果能夠讓數據具備“生命力”。

圖 7 @Gan Gryc

6. 設計對比

除了尺寸和位置，我們還可以通過配色來突出數據。

無論是通過顏色或形狀對比設計，容易產生強烈的視覺沖擊力。

圖 8 @Bureau Oberhaeuser

利用明度的對比，我們可以用深色烘托鮮明的色彩，或者用鮮明的色彩襯托某一塊暗沉的色彩，亮色靠附近的暗色襯托顯得更加鮮明，其色彩特征表現得更加充分；

圖 9 @Zoey Shen

正確的對數據進行配色，讓數據傳遞出的信息更清楚、更明白，例如國內 A 股，紅色代表漲，綠色代表跌（美股綠漲紅跌）如果給國內的股票、金融等相關客戶做數據可視化設計時，需要避免不同地區文化所產生的差異。

圖 10 @Dima Groshev

7. 選擇 2D or 3D?

隨著數字孿生概念的火熱，越來越多的企業熱衷于打造自己的 3D 數據可視化產品，那么 3D 可視化就一定比 2D 強嗎？

數據可視化設計本身就是為了高效傳達數據信息而服務的，相比平面呈現，3D 最大的優勢在于多了空間維度，適合那些需要跟空間結合的數據呈現，例如地理信息、建筑樓宇、工業生產等場景。那么 3D 數據可視化相比 2D 就一定能夠展示更多的信息嗎，顯然不是絕對的；需要根據實際業務需求出發。

通常我們所說的數據 3D 可視化，就是把大量復雜抽象的數據信息，通過 3D 模型以視覺方式呈現出來，幫助人們理解和分析數據。相比于數據 2d 可視化，數據 3d 可視化具有以下的優勢：

• 展示空間相關的數據，因為空間數據具有三個維度，如果想要將其以視覺方式直觀呈現出來，就必須要借助 3d 模型。例如顯示一棟大樓不同樓層的人員分布情況，此時只有 3D 數據可視化能夠幫助我們達到目標；
• 視覺沖擊力更強，相比于 3D 可視化從視覺上表現力更強；
• 場景/對象仿真，在一些需要高度仿真的項目，例如與軍事、地理勘測相關的項目中，數據 3D 可視化就不可或缺了，無論宏觀態勢還是細微結構的精密運行，數據 3d 可視化都可以將相關信息清晰呈現給使用者，將真實的環境、對象搬到屏幕上，降低使用者的認知成本。

在一個實際的數據可視化產品項目中，有必要應用 3D 數據可視化的情形；

• 需要展示多維空間數據
• 需要通過對場景/對象進行仿真，減少使用者的認知成本和學習成本
• 需要依靠 3D 效果來提升視覺沖擊力

相比 2D，3D 的設計與開發成本相對較高；其次 3D 場景會容易產生視角遮擋以及操作成本等問題，那么從實際項目出發合理選擇才是最重要的。

亞信數字樓宇@PRD MO UED

8. 設計還原

設計稿完成了并不代表設計師在這個項目中的工作就結束了，在后續的開發工作中，設計師還要與開發人員合作，減少上線產品與設計稿的差異。

這個階段的工作也并非聽上去那么容易，尤其是 3D 可視化設計，我們會使用相關 3D 工具制作設計效果，但 3D 設計工具與最終開發引擎存在著色、渲染等差異；在這個時候我們需要靈活運用開發引擎特性，提供對應的美術資源。作為設計師同樣需要了解相關引擎著色器知識，幫助設計效果實現同時也提升對接效率。

亞信數字樓宇@PRD MO UED

9. 調優與測試

測試客戶終端上線是否正常，有無適配所造成的兼容性問題；排查有無視效及體驗問題，同時也要考慮極端場景下所產生的問題及應對方案。

對于大型 3D 可視化場景會存在性能卡頓，加載緩慢等問題，在保證視效基礎上盡可能壓縮相關美術資源，減少不必要的效果計算和內存占用量，根據實時效果需要不斷優化性能提升產品體驗度。

數據可視化發展趨勢

趨勢一：數據可視化 ╳ AI人工智能

隨著企業發展數據量日益龐大，通過人腦分析復雜數據變得越來越困難，我們需要借助 AI 人工智能的幫助。AI 人工智能可以通過強大的算法快速識別分析數據，為企業節省了寶貴的時間和資源，目前人工智能已經被廣泛應用于醫療保健服務、銷售、供應鏈、客戶分析和欺詐預防的數據可視化項目中。

IBM 數據可視化專家 Mauro Martino 創建的儀表板，允許用戶可視化新聞中出現的主題

趨勢二：數據可視化 ╳ XR

AR 和 VR 技術的應用可以增強數據在空間上的感知，從而幫助人們更好地使用數據。通過結合 VR、AR 技術，用戶能夠更好，更快地理解、分析數據。最近進行的許多研究表明，VR 和 AR 具有較強的感官體驗，可以促進更快的學習和理解。幫助用戶對業務問題進行多維度的分析，并更快速地找到解決方案。

圖 11 LM9000@5puj47980xk

趨勢三：數據可視化 ╳ 實時數據

在數字時代，事物變化很快，企業需要對數據告訴他們的信息做出快速反應——正因為如此，實時可視化數據比以往任何時候都更重要。

在 COVID-19 大流行期間，企業能夠迅速作出反應更加重要。各國政府和衛生當局已經使用實時數據可視化來跟蹤感染情況并據此進行調整。越來越多的公司正在將實時數據集成到他們的產品中。

實時數據可視化可以采取一些簡單的形式，如實時更新的折線圖或使用新信息(如銷售)快速更新的交互式地圖。

圖 13 @Esri & The Science of Where Podcast

趨勢四：數據可視化 ╳ 全面體驗設計

以用戶體驗為核心的數據可視化設計是一種重要趨勢，將用戶放在第一位，然后是數據。無論處在哪個行業，設計師都應該遵循類似的思考過程，從思考用戶需求及其痛點開始, 用戶正在嘗試解決哪些問題，以及他們面臨哪些可能的困難？他們需要什么信息和功能來解決這些問題？我們如何以最佳方式為他們打造數據可視化？

最新的趨勢之一是將用戶的工作流與可行的見解、建議、預測以及針對當前任務或決策的最佳后續操作合并，幫助用戶進一步鉆研數據并發現模式、趨勢和相關性。

結語

數據可視化是一門同時結合了科學和藝術的復雜學科，其核心意義在于清晰的敘述和藝術化的呈現，這些需要依靠數據工程師和設計師的精心策劃而不是僅僅考慮如何實現炫酷的效果 ，只有最終達到幫助用戶理解數據和做出決策的目標，才能發揮它巨大的價值和無限的潛力。

文章來源：優設 作者：AsiaInfo Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務