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

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

風格篇主要包含：常用風格 > 風格解析 > 風格選擇 > 風格應用。

本篇文章將會從風格分類入手，進行風格解析，總結可視化設計的風格，選擇風格并應用到場景，教大家如何選擇合適的風格應用到商業可視化項目中。

畫面中的動效 GIF 圖會比較大，請大家耐心等候加載～

總結了商業項目中遇到的一些可視化案例以及科幻可視化風格，大體的將其分為三個大類：傳統風格、HUD 風格、FUI 風格。

傳統酷炫風格

傳統狹義上的數據可視化, 更多是純圖形去代表數據，通過圖形去展示數據，直觀的展示所需要表現的指標。數據可視化也有很多分類, 不過也許你也懶得了解了。

比如，網站后臺分析，可以說是可視化分析報表類的，例如百度統計，谷歌統計等等；比如，面對 B 端后臺的數據可視化，國內做的最好的無非就是 antdesign，element；我們此處說的是基于 G 端的數據可視化大屏，G 端數據可視化從本質上來說是注重直接解決問題，通過直觀的展示數據圖表去了解各個指標的詳細數值；

也有甚者比較注重視覺效果，要酷炫，心理學家說, 人腦 70%的神經信號來自視覺, 我們的視覺系統最完善, 而不同的感官之間, 多少是可以轉化的, 而且是每個人的天性。國內傳統可視化對于此處的接受程度確實不一樣。B 端和 G 端的用戶，對于可視化風格的接受程度確實是不太一樣的，B 端對于前沿技術以及可視化表現會有一定的接受能力，但是 G 端更多注重于界面酷炫，功能反而不是很重要了，這多少有點本末倒置的感覺。

在傳統可視化面前，頁面的雜糅程度較強，彷佛是由一塊塊圖表堆砌而成，比較注重色彩的運用，多色搭配，色彩一般具有特質。一般大多數可視化可以看到共同的點就是：配色/布局/構圖，機械而又重復，彷佛一個流水線生產出來的。當然，現如今新基建乃是主流，人群對可視化大屏的認知和審美也在逐漸提升，設計師在以后的工作中還需要取長補短，多吸收一些好的東西去豐富我們具有中國特色的數據可視化大屏設計。

HUD 風格

平視顯示器(Head Up Display)，以下簡稱 HUD，是運用在航空器的飛行輔助儀器。平視的意思是指飛行員不需要低頭就能夠看到他需要要的重要資訊。平視顯示器最早出現在軍用飛機上，降低飛行員需要低頭查看儀表的頻率，避免注意力中斷以及喪失對狀態意識(Situation Awareness)的掌握。

因為 HUD 的方便性以及能夠提高飛行安全，民航機也紛紛跟進安裝，汽車也開始安裝，在一些游戲用戶界面，很多地方都會采用 HUD 的風格，比如射擊類，格斗類，動作類游戲等等（賽博朋克，堡壘之夜，絕地求生）。

在設計的細節當中使用大量的圖形元素，并輔以一定的裝飾元素，主要以點線為主裝飾，排版版式參考價值較強。HUD 相比較于傳統和 FUI 來說，更貼合我們的日常設計，對于圖形的展示也更加的有意義，所以透析 HUD 風格，對于提升可視化設計水平有很大的幫助。

FUI 風格

相對于當前流行的扁平化設計，FUI 可謂是在 Ul 設計中獨樹一幟，設計風格十分鮮明，極具未來感和科技感。

FUI 是一個非常有趣的 Ul 設計領域，是我們在日?，F實生活之中天法探索的用戶界面設計方式。在我們的日常工作中，通常日常設計很難有機會為宇宙飛船、時間旅行設備，或者感知型人工智能和外星人使用的用戶界面做設計。FUI 使設計師有機會去突破現有的用戶體驗和用戶界面的限制，探索一個新的領域。通過虛幻界面設計我們可以大膽的設想以及尋找新的解決方案。例如我們可以大膽的設想 AR 技術的應用，地圖可以采用全息投影技術、人與智能硬件的環境交互等等。

虛幻界面設計甚至可以是新的發明，它們可以作為一種概念的驗證它們可以啟發我們，提出問題，探索什么可行，什么不可行。正如科幻小說可以激勵人們登上月球或建造自動駕駛汽車一樣，虛幻用戶界面可以激勵人們為未來創造技術。

FUI 的圖形裝飾元素可以說是極其豐富，形式感很強。在設計的細節當中使用大量的“異形”的圖形元素，并輔以一定的裝飾元素，但是一定程度上對于設計中繁瑣的需求，需求層次上尋找設計靈感沒有太多幫助。常用在科幻電影以及概念游戲等領域，落地較難。

升華：如何培養出自己的可視化設計風格

如何培養和完善自己的可視化設計風格呢？其實這個問題有點狹隘，不同客戶不同使用場景我們可能風格都會不太一樣，但是唯一我們不會變的是我們對于組件圖表的理解，圖表圖形的展示形式。

• 傳統風格：多種色彩
• FUI 風格：科技圖形
• HUD 風格：版式排版

一個合格的可視化設計師，對于任何可以參考的頁面，都可以迅速領略到可以應用的部分頁面和展示形式，多吸收知識，提升自己，這就是取其精華，去其糟粕的正確解答吧！所以要將現有風格結合，完善設計理念，提升視覺技法，這才是當下比較重要的。

最近由于工作中的一個項目，對自己充滿了懷疑，究竟什么叫科技感？不同的應用場景，科技感是否還依舊有效？同展示條件下不同應用場景，又會有什么樣的差異？究竟是什么樣子的設計，才能被“甲方爸爸”認定為科技感十足，并且很酷炫呢？從酷炫科技感出發，總結了以下四個方面去解析科技感風格。

• 科技感的界面有哪些特征？
• 同展示條件下不同應用場景，又會有什么樣的差異？
• 三維的表現形式，是否真的跟科技感成正比？
• 面對段落文本需求，列表需求等如何把頁面做出科技感？

1. 科技感的界面有哪些特征？

相信很多可視化設計師聽到最多的一句話：要酷炫，要科技感！每每聽到這句話我都會變得非常暴躁。究竟是酷炫科技感代表可視化？還是數據可視才是可視化的內核？每每遇到這種令人糟心的問題，我想的是如何通過自己的專業知識去解釋，可是我發現根本解釋不清楚，也無法令甲方客戶信服，甚至和同為乙方的總包也無法達成統一戰線。那么我們應該如何去做呢，又應該如何去解釋科技感這個抽象的概念呢？

配色

提到科技感色系一般我們想到的就是藍色系（科技藍），但是很多人可能走進了一個誤區，科技感的專屬色彩并不是只有藍色，而且一些藍色確實讓我們有審美疲勞的感覺。如圖，就是我們比較常見的傳統可視化設計，一眼看去滿屏都是藍色，具有中國特色的藍色科技感。正如所有人都公認的黨建題材為紅色加黃色，那么科技感真的只有藍色專屬嗎？黨建題材都是紅色專屬嗎？

由此可見，紅色并不是黨建題材的專屬色彩，存在即合理，也并沒有說黨建可視化一定要做成紅色的。制約的因素有很多：項目背景，項目需求，設計提案，專業認知等等，可視化大屏歸根結底還是做的是服務設計，因此服務好客戶，得到客戶的認可，就能體現設計的價值。但是在設計稿中可以發現，界面運用到了一些黨建色彩的元素，也是通過這種方式去展示，這也是設計師需要注意的一點。

• 傳統科技藍風格可視化

• 其他科技藍風格可視化

• 橘色科技感風格可視化

由此我們可以推斷，配色是塑造科技感界面的一個比較重要的因素。色彩的選擇需要根據實際所運用到的場景，比如安全行業，藍綠色會比較好一點；比如公安行業，傳統藍色就比較合適；比如衛星地圖，用藍色就不合適；根據不同的業務范疇以及不同的應用場景去確定配色，這才是我們要做的。

藍色并不是科技感的專有屬性，任何一種顏色都是可以塑造科技感的感覺的。比如適合用綠色的場景做的界面，沒有做好看，那只能怪自己學藝不精，跟配色無關。不排斥藍色，但是討厭到處都是用藍色，上來就是用藍色。

背景

說到背景這是一個影響科技感非常重要的因素，一張超神比比皆是，一張超鬼也是隨處可見，究竟什么樣的背景才是一個優秀的可視化界面所具備的？不是畫面發光，有閃光點，宇宙或者銀河那種圖；也不是科技點線，帶漸變的線條（混合工具做出來的那種）看起來就特別復雜；也不是那種亮度超過畫面任何一個元素的圖。

科技感的背景所起到的作用應該是襯托畫面，而不是在畫面中比較跳，搶視覺，一大坨發光或者復雜的圖形，只會起到反作用。

一個好的背景一定是不影響視覺的同時，襯托畫面和主視覺，如果整個頁面分黑白灰三層，那么背景一定是黑的那一層，這樣的畫面效果才會好。

圖形

圖形應該是以上指標中，最令人可以接受對科技感風格詮釋的一種，科技感的圖形到底有哪些特征，我們又該如何去做呢？

通過以上案例我們可以發現，所謂圖形表現科技感，最大的特征就是點線面應用的多元化，通過一種或者多種規律將點線面組合起來，線條粗細長短不一，點大小不等。在使用圖形進行點綴搭配時，切不可過于花哨，從而搶了主要內容的風頭。

不規則圖形，點線裝飾，色彩，外發光，都是圖形詮釋科技感的方式。

此處可能會出現一些三維樣式的圖形，特殊的視角以及不常見的設計都會增加科技感的元素，但是也不是所有的三維都可以比二維更有科技感的。我最近做的就是甲方客戶一直覺得：三維元素太少了，科技感不夠。我就納悶了，到底什么才是科技感？難道科技感只能用三維的來表示了？只能說一定條件下，三維是優于二維展示的，但這也不是絕對的。如果你的場景主視覺本身就是二維范疇的，何必要要求組件三維展示。

下圖的二維科技感表現上肯定是超過三維地球的，至少我是這么認為的。

動效

動效應該是最能體現科技感的方式了，通過動態演示組件，通過動效展示界面，遠遠比靜態頁面要合理的多。動效主要是通過：位移、旋轉、透明度（閃爍）、縮放等方式去制作，形成獨特的動畫節奏。

最常用的科技動畫：粒子動畫，線條動畫，輝光，剪切路徑，偏移字符等等。

可以發現科技感動效一般都伴隨著極快的閃爍動畫，動畫的節奏也是比較偏快，再通過出現動畫，字符偏移，剪切路徑等演示組件的形成過程。

2. 同展示條件下不同應用場景，會有怎樣的差異？

可能大家沒有遇到過這種情況，比如在三維建筑可視化中，科技感本身就依賴于場景的表現，但是不知道大家有沒有試過，將三維建筑可視化換成二維 GIS 之后，我們如何去使畫面表現的更具科技感呢？

圖一，圖二，圖三分別就是替換不同的場景，那么我們來看看這些場景為什么不適合原本的之前的科技感風格呢，我們一起思考一下~

以上三張圖可以看出，圖一的飛機可視化是畫面的原稿，后兩張是在同一種設計面板，替換了不用的主視覺場景，由此可以看出不同主視覺場景可能對應不同的風格 UI 組件，沒有通用的組件，如果想完美表達一些面板組件，那么需要取設計不同風格的主視覺場景才可以。

大家可能會覺得科技感只針對于一些特殊的場景，或者說是深色場景，比如一些實景地圖和衛星地圖又該如何去表現科技感的元素呢？那么如果是淺色可視化我們又該如何去做科技感呢？

科技感風格應用于不同的場景，那么表現科技感的方式也是有很大的不同的。

3. 三維的表現形式，是否真的跟科技感提升成正比？

其實這本身就是一個偽命題，三維表現對畫面的沖擊力是非常強的，對于畫面視覺效果的提升有很大的幫助。不過是否所有的三維就是最合適的呢，這個也確實有待商榷。不過能肯定的是，一定程度上，三維一定會比二維更加具有沖擊，更加具有科技感。

首先必須要確定的是，此處三維一定是科技感點線組成或者說是線描類型的三維主體，而不是實景以及仿真的主體，當然并不是絕對的，此處針對大多數場景下。

可以通過以上圖片看出，科技感一定伴隨的是大量的點線裝飾，畫面主體一定是最突出的地方。而不是有時候遇到的是：GIS 地圖就是很普通的樣式，可編輯性不是很強，樣式也比較老舊，對設計就會造成大量的困擾。在主視覺沒有完美表現的時候，就不要強求說把兩邊去做好看，主視覺不好看，那么圖表做的特別華麗也只是讓主視覺更掉分。

其實最正確的表現就是二維表現加上三維場景展示，兩者相輔相成，對于畫面的展示才是最好的。通過下面這組案例可以發現，二維表現加上三維場景才是最優解。

4. 面對段落文本列表需求時如何把頁面做出科技感？

很多同學對于文字需求如何制作科技感有很多的疑問，通過最近的作圖，總結出四種關于文字排版科技感的展示，總結起來其實就那么幾點：裝飾，圖形，字體，版式，表現形式…

其實對于數據可視化設計科技感的研究，不僅需要了解表現層，更需要上升到業務層。一些特定的圖形或者裝飾，對于畫面的豐富程度一定是有幫助的。

講了這么多，不知道對大家理解科技感是否有幫助，如何提升畫面科技感，是我們做為數據可視化設計必定會面臨的一大難題。希望大家在以后的工作或者項目中，多多酷炫，多多科技感?。。?

1. 根據場景-了解展示需求

場景是什么？是人物、時間、地點三要素所組成的特定關系。在某某時間（when），某某地點（where），特定類型的用戶（who），干了某某事情（what）。

因此我們要確定的是，根據這四個“W”去確定整體業務框架的基礎構成，這對于設計風格的初步意向確認有著很積極的意義。

• who：王局長
• when：領導人會議時
• where：公安局
• what：新基建建設 數字化轉型事項

在領導人會試上，公安局王局長提議通過了關于新基建，數字化轉型的各種措施。面對這一場景，有以下幾個問題。受眾是誰？需要干什么事情？誰去干？數字化轉型怎么做？怎么實現？需要用到的技術？展示風格？重功能？還是重展示？

在有了這些的前提下，對于我們設計風格的選擇就有了很強的指導意義，比如王局長比較喜歡多色搭配，科技感強的風格，主要為了配合展示匯報，那么就可以通過這一些需求，初步制定風格為效果酷炫的展示類大屏，但是主視覺的展示形式還是要根據其他的具體情況去進一步確認。

2. 根據含義-確立設計方向

在面對一些特有的項目時，一般客戶會給出一些參考術語：“3 個一帶”，“2 個方針”，“八大成果”“三山，兩水，百林，千田”……

面對這種問題，能做的就是理解其包含的真實意義，究竟需要展示哪方面的，了解清楚項目的背景需求，結合客戶所說的一些關鍵字段，剖析以上的內容可以發現，客戶通過一些方針和方法，對“山水林田”進行治理，取得了一些階段性成果。

因此展示的內容可以確定為智慧治理，或者智慧生態方向的，然后就可以根據項目背景的內容去選擇可以應用的具體的一些方案了。

3. 根據需求-明確設計內容

因在到了需求分析的階段，可以根據客戶提供的大量的資料和業務需求，去明確的設計方向，究竟是需要展示哪些內容？可以提供的數據有哪些？展示條件（硬件設施）是否具備？想要的效果有哪些？

比如客戶需要查看到山水林田的各個改進措施的效果，以及改進前后的效果對比。說到這單純的二維 GIS 和影像已經不太好滿足了，那么可以將場景風格定位到三維展示，需要實際 1:1 建模，至于是通過 WEBGL，UE，UNITY 就看各自的團隊擅長的方向了。

場景大體風格確定，那么展示面板需求根據場景去搭建就可以了，這樣一個完整的風格選擇過程就算初步走通了，具體的驗證環節，可以在一次次會議中再去進行交流和修改即可。

二維 GIS（深淺）、衛星影像

• 優點

展示容易，風格切換皮膚多，可編輯性高，開發難度低，地圖資源較多，適合快速搭建可視化大屏模版，開 源內容較多，前端開發直接調用樣式即可。

• 缺點

展示形式較普通，地圖風格樣式不出彩，設計效果也會打很多折扣，很難與同行拉開差距。

• 難點

開發過程中可能需要基于高德 API 以及一些平臺，對封裝地圖進行二次開發，沒有 GIS 開發經驗的前端，會比較困難。

• 網址

https://lbs.amap.com/product/mapstyle#/ Mapbox，高德 API，百度 API，超圖，天地圖等等。

以高德 API 為例

矢量地圖、省市區塊

• 優點

展示靈活，可下載 svg 矢量區塊，并可下載 json 文件直接交付開發，可下鉆到縣級，可編輯性高，一般會結合二維 GIS 來展示，有插件可以直接繪制全國地圖。

• 缺點

不夠立體，可選樣式比較少，畫面主視覺容易空洞導致畫面效果不強。

• 難點

開發對于設計圖的一些效果還原比較困難，例如發光，漸變等等。只能做一些比較基礎屬性的修改，對于效果還原可能達不到 80%以上。

• 網址

http://datav.aliyun.com/tools/atlas/

以 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）；

如何培養自己的數據可視化設計風格（色彩+圖形+板式）；

影響科技感風格的四大影響因素（配色，圖形，背景，動效）；

設計風格的選擇以及確定思路（根據場景、含義、需求）；

可視化風格的應用以及拓展（各種主視覺的應用優缺難點）。

講了這么多，不知道對大家理解科技感是否有幫助，如何提升畫面科技感，是我們做為數據可視化設計必定會面臨的一大難題。希望大家在以后的工作或者項目中，多多酷炫，多多科技感?。。〔恢来蠹矣袥]有一種錯覺，突然有一段時間，某個時候發現自己突然不會做設計了，啥也想不明白了，莫名的有點浮躁，做什么都不能專心。其實很簡單，總的來說就是，你即將突破現有的設計水準，如果能想明白，解決掉問題，你的審美以及設計水平都會有很大的進步。這就是別人口中的，突然就會了，知道怎么做了，其實無非就是積累夠了，需要升入下一個等級了~

作者：生活因你而火熱

轉載請注明：優設網

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

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

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

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設

ui設計,界

計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

更多精彩文章：

大數據可視化界面設計之一：可視化大屏設計快速入門指南

大數據可視化界面設計之二：可能是最詳細的大屏數據可視化設計指南

大數據可視化界面設計之三：可視化大屏不會做？這篇 UI 設計指南總結了7個重要知識點！

大數據可視化界面設計之四：可視化大屏設計快速入門指南，看這篇就夠了！

大數據可視化界面設計之五：想做好數據可視化？先掌握常見 5 類圖表的特點和設計細節

大數據可視化界面設計之六：超全面的數據可視化設計指南：字體篇

大數據可視化界面設計之七：想把數據可視化做好？這 20 個超實用的經驗總結一定要先看過！

大數據可視化界面設計之八：B端產品如何做好數據可視化？收下這篇7000+的干貨！

大數據可視化界面設計之九：超全面的數據可視化設計指南：設備篇

大數據可視化界面設計之十：數據可視化必修課：表格篇

@UX-BOY ：可能是大屏數據可視化設計介紹最詳盡的一篇文章，幫你盡量躲開大屏數據可視化路上那些坑。

文章目錄

1. 基礎概念
2. 大屏數據可視化設計原則
3. 大屏可視化設計流程
4. 大屏設計的注意事項
5. Q&A
6. 總結

基礎概念

1. 什么是數據可視化

把相對復雜、抽象的數據通過可視的方式以人們更易理解的形式展示出來的一系列手段叫做數據可視化，數據可視化是為了更形象地表達數據內在的信息和規律，促進數據信息的傳播和應用。

在當前新技術支持下，數據可視化除了「可視」，還有可交流、可互動的特點。數據可視化的本質是數據空間到圖形空間的映射，是抽象數據的具象表達。

△ 數據可視化作品《 launchit 》，作者：Shane Mielke

作者寫了本書，地圖上顯示了世界各地讀者的分布情況及對應人數。

△ 數據可視化作品《 world-drawn-by-travelers 》，作者：TripHappy

國家之間相互連通的旅游路線，顏色越相近的國家，表明兩個國家的人們互動越頻繁。

2. 什么是大屏數據可視化

大屏數據可視化是以大屏為主要展示載體的數據可視化設計。

「大面積、炫酷動效、豐富色彩」，大屏易在觀感上給人留下震撼印象，便于營造某些獨特氛圍、打造儀式感。電商雙11時大屏利用此特點打造了熱烈、狂歡的節日氛圍，原本看不見的數據可視化后，便能調動人的情緒、引發人的共鳴，傳遞企業文化和價值。

利用面積大、可展示信息多的特點，通過關鍵信息大屏共享的方式可方便團隊討論和決策，故大屏也常用來做數據分析監測使用。大屏數據可視化目前主要有信息展示、數據分析及監控預警三大類。

數據分析類：

△ 圖片來源：必應，圖片作者：帆軟軟件有限公司

大屏數據可視化設計原則

大屏數據可視化設計原則：設計服務需求、先總覽后細節。

1. 設計服務需求

大屏設計要避免為了展示而展示，排版布局、圖表選用等應服務于業務，所以大屏設計是在充分了解業務需求的基礎上進行的。那什么是業務需求呢？業務需求就是要解決的問題或達成的目標。設計師通過設計的手段幫助相關人員達成這個目標，是大屏數據可視化的價值所在。

2. 先總覽后細節

大屏因為大，承載數據多，為了避免觀者迷失，大屏信息呈現要有焦點、有主次?？梢酝ㄟ^對比，先把核心數據拋給用戶，待用戶理解大屏主要內容與展示邏輯后，再逐級瀏覽二三級內容。部分細節數據可暫時隱藏，用戶需要時可通過鼠標點擊等交互方式喚起。

大屏可視化設計流程

規范的流程是好結果的保證。找到一個可參考的流程，然后步步為營，就能避免很多不必要的返工，保證設計質量和項目進度。

1. 根據業務場景抽取關鍵指標

關鍵指標是一些概括性詞語，是對一組或者一系列數據的統稱。一般情況下，一個指標在大屏上獨占一塊區域，所以通過關鍵指標定義，我們就知道大屏上大概會顯示哪些內容以及大屏會被分為幾塊。以共享單車電子圍欄監控系統為例，這里的關鍵指標有：企業停車時長、企業違停量、熱點違停區域、車輛入欄率等。

確定關鍵指標后，根據業務需求擬定各個指標展示的優先級（主、次、輔）。

2. 確立指標分析維度

「橫看成嶺側成峰」。同一個指標的數據，從不同維度分析就有不同結果。很多小伙伴做完可視化設計，發現可視化圖形并沒有準確表達自己的意圖，也沒能向觀者傳達出應有的信息，可視化圖形讓人困惑或看不懂。出現這種情況很大程度就是因為分析的維度沒有找準或定義的比較混亂。

上圖向大家展示了數據分析常用的4個維度，我們在選定指標后，就需要跟項目組其他小伙伴討論：我們的各個指標主要想給大家展示什么，更進一步的講，是我們想通過可視化表達什么樣的規律和信息。而上圖，可以引導我們從「聯系、分布、比較、構成」四個維度更有邏輯的思考這個問題。

• 聯系：數據之間的相關性。
• 分布：指標里的數據主要集中在什么范圍、表現出怎樣的規律。
• 比較：數據之間存在何種差異、差異主要體現在哪些方面。
• 構成：指標里的數據都由哪幾部分組成、每部分占比如何。

當然，上圖例舉的示例圖表都比較傳統，在大屏數據可視化中常還有另一類地理信息（常以2/3D地圖、地球呈現）出現。上圖雖未包含這類圖形，但它提供給我們的確定數據分析維度的思路和方法是相通的，可借鑒。

3. 選定可視化圖表類型

當確定好分析維度后，事實上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數幾個圖表里篩選出最能體現我們設計意圖的那個就好了。

選定圖表注意事項：易理解、可實現。

易理解

可視化設計要考慮大屏最終用戶，可視化結果應該是一看就懂，不需要思考和過度理解，因而選定圖表時要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。

可實現

我們需要了解現有數據的信息、規模、特征、聯系等，然后評估數據是否能夠支撐相應的可視化表現。

我們設計的圖形圖表，要開發能夠實現。實際工作中，一些可視化效果開發用代碼寫很容易實現，效果也不錯，但這些效果設計師用 Ps / Ai / Ae 這些工具模擬時會發現比較困難；同樣的，某些效果設計師用設計工具可以輕易實現，但開發要用代碼落地卻非常困難，所以大屏設計中跟開發常溝通非常重要，我們需要明確哪些地方設計師可以盡情發揮，哪些地方需要謹慎設計。一個項目總有周期與預算限制，不會無限期的修改迭代，所以設計師在這里需要抓住重點，有取舍，不鉆牛角尖、不死磕不放。

4. 了解物理大屏，確定設計稿尺寸

多數情況下設計稿分辨率即被投大屏的信號源電腦屏幕的分辨率。有多個信號源時，就會有多個設計稿，此時每個設計稿的尺寸即對應信號源電腦屏幕的分辨率。

一般情況下設計稿的分辨率就是電腦的分辨率，當有多個信號源時，有時會通過顯卡自定義電腦屏幕分辨率，從而使電腦顯示分辨率不等于其物理分辨率，此時，對應設計稿的分辨率也就變成了設置后的分辨率。此外，當被投電腦分辨率長寬比與大屏物理長寬比不一致時（單信號源），也會對被投電腦屏幕分辨率做自定義調整，這種情況設計稿分辨率也會發生變化。所以設計開始前了解物理大屏長寬比很重要。

5. 頁面布局、劃分

尺寸確立后，接下來要對設計稿進行布局和頁面的劃分。這里的劃分，主要根據我們之前定好的業務指標進行，核心業務指標安排在中間位置、占較大面積；其余的指標按優先級依次在核心指標周圍展開。一般把有關聯的指標讓其相鄰或靠近，把圖表類型相近的指標放一起，這樣能減少觀者認知上的負擔并提高信息傳遞的效率。

6. 定義設計風格

很多小伙伴也許沒接觸過大屏設計工作，但大多數人都應該有 APP 或者 Web 風格定義的經驗。我們在定義一款 APP 或者 Web 頁面設計風格時常用的方法是什么呢？情緒板。

大屏雖酷炫，但實際上也是運行在瀏覽器里的 Web 頁面，所以大屏設計風格定義方法也同樣可以用情緒板來做，這種方法也是目前比較科學高效的風格定義手段。

上圖提供了情緒板應用的腦圖，具體操作細節不做介紹，不太了解的小伙伴可以自己找找資料。

編者按：一篇好文幫你掃盲，運用情緒板搞定設計→《該怎么運用情緒板，才能讓設計作品更有說服力？》

情緒板的一套流程下來，我們定義的風格基本是科學準確的，可以指導我們執行設計。如果是給甲方做大屏，這個流程也可以讓我們提出的方案更有說服力。

7. 可視化設計

根據定義好的設計風格與選定的圖表類型進行合理的可視化設計。目前來說大屏可視化主要有指標類信息點和地理類信息點兩大可視化數據。指標類信息點可視化效果相對簡單易實現，而地理類信息點一般可視化效果酷炫，但是開發相對困難，需要設計師跟開發多溝通。地理類信息一般具有很強的空間感、豐富的粒子、流光等動效、高精度的模型和材質以及可交互實時演算等特點，所以對于被投電腦、大屏拼接器等硬件設備的性能會有要求，硬件配置不夠的情況下可能出現卡頓甚至崩潰的情況，所以這點也是需要提前溝通評估的。

8. 樣圖溝通確認

這里的溝通分三個層面：設計師對內溝通、設計師對外溝通、設計師與大屏的「溝通」。

樣圖溝通環節，最初的樣圖不需要十分精致，我們可以把它理解為一個「低保真」原型，然后通過不斷溝通修改，讓它逐步完善精致起來，也就是小步快跑，避免那種一下子走到終點，然后又大修大改的情況。

因為我們在前幾步已經分別確定了頁面布局、圖表類型、頁面風格特點，所以這一步我們需要用盡可能簡單的方法 ，把之前幾步的成果在頁面上快速體現出來，然后根據樣圖效果嘗試確定五方面內容：

• 之前確立的布局在放入設計內容后是否依然合適；
• 確立的圖表類型帶入數據后是否仍然客觀準確；
• 根據關鍵元素、色彩、結構、質感打造出的頁面風格是否基本傳達出了預期的氛圍和感受；
• 已有的樣式、數據內容、動效等在開發實現方面是否存在問題；
• 大屏是否存在色差、文字內容是否清晰可見、頁面是否存在變形拉伸等現象。

跟大屏「溝通」是比較重要也是個特殊的環節，這也是我覺得大屏設計跟其它設計不一樣的地方，大屏有它自己獨特的分辨率、屏幕組成、色彩顯示以及運行、展示環境，這里的很多問題只有設計稿投到大屏上才能夠被發現，所以這一步在樣圖溝通確認環節非常重要，有時候需要開發出 demo，反復測試多次。

9. 頁面定稿、開發

事實上頁面開發階段并不是到了這一步才進行，這里說的頁面開發僅指前端樣式的實現，實際上后臺數據準備工作在定義好分析指標后就已經開始進行了，而我們當前的工作是把數據接入到前端，然后用設計的樣式呈現出來。

切圖與標注

由于大屏實際就是一個 web 頁面，所以開發階段的切圖與標注是少不了的。

切圖：哪些元素需要切圖，怎么切？

一般開發用代碼寫不出的樣式或動效，都需要設計師切圖作支持：比如數據容器的邊框、小的動效、頁面整體大背景、部分圖標等。切圖按正常網頁設計標準切就可以了。

標注：Web頁面用什么插件做標注這個大家都很熟悉，我就不多說了。需要注意的是，如果大屏頁面需要在不同比例的終端展示，那么此時的標注與開發可以使用 rem 作為基本單位來實現，這樣實現的大屏頁面在后期會有更好的擴展性與適應性。

10. 整體細節調優與測試

這部分是指頁面開發完成后，將真實頁面投放到大屏進行的測試與優化。這里主要有兩部分工作。

視覺方面的測試（有點像 APP 的 UI走查）：關鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預期顯示、有無變形、錯位等情況。

性能與數據方面的測試：圖形圖表動畫是否流暢、數據加載、刷新有無異常；頁面長時間展示是否存在崩潰、卡死等情況；后臺控制系統能否正常切換前端頁面顯示。

大屏設計的注意事項

1. 字體使用

字體優先使用系統默認字體，需要嵌入字體時考慮字體的可識別性、與當前設計風格是否融合、是否可免費商用。

如果頁面是云端部署，需要嵌入字體包時，我們可以使用 FontCreator 這類的軟件把那些用不到的字符從字體包中刪掉，然后重新打包上傳，減小字體包大小，可以優化頁面加載體驗，避免在替換默認字體的過程中出現頁面文字跳動等現象。（一般來講一套字體文件包含了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音、注音符號等多種字符，對于大屏這個明確的場景，我們可以刪掉其它使用不到的字符，僅保留中文、拼音和數字）

2. 顏色搭配

色彩明度與飽和度差異顯著、對比鮮明， 盡量避免使用鄰近色配色。

使用深色暗色背景：深色暗色背景可減少拼縫帶來的不適感。由于背景面積大，使用暗色背景還能夠減少屏幕色差對整體表現的影響；同時暗色背景更能聚焦視覺，也方便突出內容，做出一些流光、粒子等酷炫的效果。

漸變色慎重使用：大屏普遍色域有偏差，顯示偏色，因而使用漸變色需要根據大屏反饋確定是否調整，純色最佳。

3. 頁面布局

主次分明、條理清晰、注意留白，合理利用大屏上各個小的顯示單元，并盡量避免關鍵數據被拼縫分割。

Q&A

1. 設計稿投到大屏上顯示效果不佳怎么辦？

大屏的分辨率、比例、使用環境、投射方式等均會對設計造成影響。理想情況下，我們應該在設計開始前，就能打開大屏系統做一些簡單測試。我們可以從網上收集不同設計師不同風格的大屏設計作品，然后投上去查看實際效果。因為大多數時候大屏都會存在色彩偏差，這時通過測試我們就能發現漸變色、鄰近色等不同類型的色彩搭配是否可以在目標大屏上良好呈現，如果不可以，那我們設計進行時就不要使用顯示效果不佳的色彩搭配。另一方面，樣圖溝通環節及時測試也很重要。

2. 大屏設計定稿后，切圖切幾倍圖？

由于是將我們電腦屏幕投射到了大屏，大屏上的內容是運行在我們電腦瀏覽器上的頁面。所以切圖根據我們電腦的分辨率，正常切1倍圖就可以了。

3. 1920*1080的設計稿，投到9000*4320的屏幕上，文字圖片會虛么？

看情況，視大屏系統硬件規格與觀看距離來定。這塊有四個概念需要跟大家交流一下。

大屏邏輯分辨率（設計稿尺寸）、顯卡輸出分辨率、視頻矩陣切換器（ DVI ）支持分辨率、大屏實際物理分辨率。

一般后兩個是沒問題的，大屏跟矩陣切換器是由大屏廠商提供，一般剛好配套大屏。容易出問題的是顯卡輸出分辨率，我們電腦屏幕分辨率并不是最終顯卡傳遞到 DVI 接口的分辨率，傳遞到 DVI 接口的分辨率是電腦顯卡所能輸出的最大分辨率（部分電腦可設置或自定義輸出分辨率）。輸出分辨率等于 DVI 支持分辨率時顯示效果最佳。輸出分辨率低于 DVI 支持分辨率，DVI 會將信號放大后傳遞到大屏，放大的過程中就有圖像信息丟失，雖然此過程中有各種算法支持去保證圖像盡可能清晰，但算法再好，跟真實圖形還是有差距的。此外，多信號源投射效果優于單個信號源投射。對于現場直播數據大屏，一般至少有兩個信號源，一個投屏，另一個也投屏但是處于備用狀態。

離大屏的距離也影響觀感，一般離得近，顆粒感明顯，距離稍遠，會顯的較為清晰。

4. 設計稿完成開發后，發現在大屏上頁面有被拉伸或者壓縮的情況，怎么補救？

一般來講，開發只需要對設計圖做還原即可。但特殊情況下，比如顯示器擴展不正確導致頁面被拉伸或壓縮，這時就需做處理：我們可以先得到被拉伸/壓縮的比例，然后對整體視圖做壓縮/拉伸處理，再由其拉伸/壓縮，這樣被拉伸/壓縮的瑕疵就可以得到一定程度上的矯正。另外，了解被投電腦硬件特點，有的電腦可以通過自定義分辨率解決這部分問題。

5. 除自行開發可視化大屏外，還可以通過哪些第三方服務來快速實現？

阿里云 DataV、騰訊云圖、百度 Sugar 等。

6. 數據可視化的圖表樣式可以在哪些地方找到參考？

圖表部分的二個庫是我們設計師可以打開瀏覽查看的，這里面所有的圖表樣式都是基于代碼實現的，可以作為我們設計圖表的參考，也可以讓開發拿代碼去用，或者在這些圖表的基礎上修改。

工具類的需要有一定的代碼基礎，里面同樣有豐富的圖表，所以跟開發的溝通也很重要，因為他們可能會了解多一些更新的前沿的圖表形式，是我們設計師不知道的，所以彼此多溝通交流實在太重要了。

總結

數據可視化是一門龐大系統的科學，本文所有討論僅針對大屏數據可視化這一特定領域，管中窺豹，如有遺漏或不足之處歡迎大家討論交流。

作者：UXBoy

轉載請注明：優設網

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

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

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

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

更多精彩文章：

大數據可視化界面設計之一：可視化大屏設計快速入門指南

大數據可視化界面設計之二：可能是最詳細的大屏數據可視化設計指南

大數據可視化界面設計之三：可視化大屏不會做？這篇 UI 設計指南總結了7個重要知識點！

大數據可視化界面設計之四：可視化大屏設計快速入門指南，看這篇就夠了！

大數據可視化界面設計之五：想做好數據可視化？先掌握常見 5 類圖表的特點和設計細節

大數據可視化界面設計之六：超全面的數據可視化設計指南：字體篇

大數據可視化界面設計之七：想把數據可視化做好？這 20 個超實用的經驗總結一定要先看過！

大數據可視化界面設計之八：B端產品如何做好數據可視化？收下這篇7000+的干貨！

大數據可視化界面設計之九：超全面的數據可視化設計指南：設備篇

 

大數據可視化界面設計之十：數據可視化必修課：表格篇

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

可視化大屏 UI

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

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

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

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

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

1. 布局

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

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

居中結構

異形超寬拼接屏幕。

左右結構

布局的原則一定要主次分明，根據業務需求抽取關鍵性的指標，提取主要信息?？梢栽诩埳洗蟾女嬕幌拢缓笤谲浖锞唧w細化布局。避免次要信息的面積過大，喧賓奪主，影響整體的視覺效果。

2. 風格

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

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

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

3. 主視覺

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

地球：粒子地球、地圖貼圖、地球模型。

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

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

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

以下圖片源于 DATAV

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

4. 信息圖表

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

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

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

比較

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

聯系

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

構成

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

分布

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

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

餅圖

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

線形圖

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

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

柱狀圖

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

混合圖

折線圖和堆疊柱狀圖的組合圖表。同時顯示兩個坐標軸，用于展示兩種不同類型的數據。

適用于帶有細分分類的累計數據大小以及與之相關的趨勢數據，例如在過去十年全國三大產業的具體產值，以及 GDP 增長率。

面積圖

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

散點圖

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

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

極坐標圖

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

關系圖

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

樹圖

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

?；鶊D

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

漏斗圖

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

熱力圖

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

其他圖表

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

5. 字體

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

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

6. 規范

建立規范的主要目的是：保證設計的一致性、提高開發效率和還原度、方便迭代 ，輔助設計和開發更好地完成設計的協作。

可視化設計中規范一般會分為：色彩、文字、圖表、標題控件等，跟網頁端規范同理，這里就不一一贅述了。

7. 動效

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

動效的設計原則

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

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

結語

以上通過布局、風格、主視覺、信息圖表、字體、規范、動效等 7 個方向總結的基本知識和事項，能幫助我們快速進入大屏設計及避免一些坑。由于篇幅原因字體、規范、動效沒有詳細拆解說明，后面會陸續更新相關文章，感謝大家支持。可視化體驗遠遠不止這些。歡迎大家提出更多意見和建議，我們一起前行。

作者：Mr.小六

轉載請注明：優設網

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

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

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

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

更多精彩文章：

大數據可視化界面設計之一：可視化大屏設計快速入門指南

大數據可視化界面設計之二：可能是最詳細的大屏數據可視化設計指南

大數據可視化界面設計之三：可視化大屏不會做？這篇 UI 設計指南總結了7個重要知識點！

大數據可視化界面設計之四：可視化大屏設計快速入門指南，看這篇就夠了！

大數據可視化界面設計之五：想做好數據可視化？先掌握常見 5 類圖表的特點和設計細節

大數據可視化界面設計之六：超全面的數據可視化設計指南：字體篇

大數據可視化界面設計之七：想把數據可視化做好？這 20 個超實用的經驗總結一定要先看過！

大數據可視化界面設計之八：B端產品如何做好數據可視化？收下這篇7000+的干貨！

大數據可視化界面設計之九：超全面的數據可視化設計指南：設備篇

大數據可視化界面設計之十：數據可視化必修課：表格篇

前言

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

數據可視化釋義

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

可視化大屏

可視化大屏是以大屏為主要展示載體的數據可視化設計。它的應用場景非廣泛如 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咨詢、用戶體驗公司、軟件界面設計公司