一、什么是數據可視化

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

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

二、什么是大屏數據可視化

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

“大面積、炫酷動效、豐富色彩”，大屏易在觀感上給人留下震撼印象，便于營造某些獨特氛圍、打造儀式感。原本看不見的數據可視化后，便能調動人的情緒、引發人的共鳴，傳遞企業文化和價值。

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

三、大屏數據可視化設計原則

設計服務需求

大屏設計要避免為了展示而展示，排版布局、圖表選用等應服務于業務，所以大屏設計是在充分了解業務需求的基礎上進行的。

那什么是業務需求呢？

業務需求就是要解決的問題或達成的目標。設計師通過設計的手段幫助相關人員達成這個目標，是大屏數據可視化的價值所在。

先總覽后細節

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

四、大屏可視化設計流程

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

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

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

2. 確立指標分析維度

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

我們在選定指標后，就需要跟項目組其他小伙伴討論：我們的各個指標主要想給大家展示什么，更進一步的講，是我們想通過可視化表達什么樣的規律和信息。

我們可以從“聯系、分布、比較、構成”四個維度更有邏輯的思考這個問題。

1.聯系：數據之間的相關性

2.分布：指標里的數據主要集中在什么范圍、表現出怎樣的規律

3.比較：數據之間存在何種差異、差異主要體現在哪些方面

4.構成：指標里的數據都由哪幾部分組成、每部分占比如何

3. 選定可視化圖表類型

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

易理解：

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

可實現：

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

（2）我們設計的圖形圖表，要開發能夠實現。實際工作中，一些可視化效果開發用代碼寫很容易實現，效果也不錯，但這些效果設計師用Ps/Ai/Ae這些工具模擬時會發現比較困難。同樣的，某些效果設計師用設計工具可以輕易實現，但開發要用代碼落地卻非常困難。

所以大屏設計中跟開發常溝通非常重要，我們需要明確哪些地方設計師可以盡情發揮，哪些地方需要謹慎設計！一個項目總有周期與預算限制，不會無限期的修改迭代，所以設計師在這里需要抓住重點，有取舍，不鉆牛角尖、死磕不放。

4. 制作圖表

當確定了要使用哪些圖表做圖后，開始進入制作流程，影響最終圖表展現效果的元素一般分為兩個層面：

非數據層：

不受數據影響樣式的元素，比如說背景、網格線、外邊框等等。這類元素起到的是輔助閱讀作用，但如果不加處理全部放出，視覺上會顯得雜亂和不夠簡潔，干擾到你真正想展示的信息。對于這類元素，應該盡量隱藏和弱化。

隱藏

·去除不必要的背景填充

·去掉無意義的顏色變化

·去掉不必要的外框

弱化

·坐標軸淡色或隱藏

·網格線淡色或隱藏

數據層：

受數據影響樣式的元素，比如說柱狀圖的柱條長度，柱條顏色，柱條展示個數，氣泡圖氣泡大小等等，這類元素的展示效果和圖表本身的數據息息相關，一旦圖表本身的數據比較極端，有可能會使得最終視覺展現不盡如人意，我們無法改變具體的數據，是否就完全無法操控這些元素了呢？

精簡數據項

在做數據報告時，不管有多少數據項，為了完整和精確性，所有的內容都會顯示出來，但在大屏中，如此滿的數據展示，不但忽略了視覺體驗，還會讓用戶抓不住重點，對于餅圖來說，建議扇區個數不要超過5個，例如保留占比前5的扇區，剩下的非重點數據全部歸到“其他”。

保留前五或后五

如果柱狀圖的數據項過多，展示時會過于密集，建議先把數據項按照數值大小排序，只保留前五或后五的數據項。

5. 頁面布局、劃分

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

6.可視化設計

根據選定的圖表類型進行合理的可視化設計。目前來講大屏可視化主要有：指標類信息點和地理類信息點兩大可視化數據。

指標類信息點可視化效果相對簡單易實現，而地理類信息點一般可視化效果酷炫，但是開發相對困難，需要設計師跟開發多溝通的。

地理類信息一般具有很強的空間感、豐富的粒子、流光等動效、高精度的模型和材質以及可交互實時演算等特點，所以對于被投電腦、大屏拼接器等硬件設備的性能會有要求，硬件配置不夠的情況下可能出現卡頓甚至崩潰的情況，所以這點也是需要提前溝通評估的。

數據可視化大屏設計少不了動效，動效是可視化重要的組成部分，動效的增加能讓大屏看上去是活的，增加觀感體驗。但過分的動效極其容易喧賓奪主，讓觀看者的眼球不知道往哪里聚焦，反而弱化了數據的展示。

7.樣圖溝通確認

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

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

1.之前確立的布局在放入設計內容后是否依然合適；

2.確立的圖表類型帶入數據后是否仍然客觀準確；

3.根據關鍵元素、色彩、結構、質感打造出的頁面風格是否基本傳達出了預期的氛圍和感受；

4.已有的樣式、數據內容、動效等在開發實現方面是否存在問題；

5.大屏是否存在色差、文字內容是否清晰可見、頁面是否存在變形拉伸等現象。

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

8.頁面定稿、開發

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

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

9.整體細節調優與測試

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

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

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

五、大屏設計的注意事項

1. 字體使用

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

如果頁面是云端部署，需要嵌入字體包時，我們可以使用FontCreator這類的軟件把那些用不到的字符從字體包中刪掉，然后重新打包上傳，減小字體包大小，可以優化頁面加載體驗，避免在替換默認字體的過程中出現頁面文字跳動等現象。

一般來講一套字體文件包含了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音、注音符號等多種字符，對于大屏這個明確的場景，我們可以刪掉其它使用不到的字符，僅保留中文、拼音和數字

2. 顏色搭配

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

3. 頁面布局

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

六、問題

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

大屏的分辨率、比例、使用環境、投射方式等均會對設計造成影響。理想情況下，我們應該在設計開始前，就能打開大屏系統做一些簡單測試。我們可以從網上收集不同設計師不同風格的大屏設計作品，然后投上去查看實際效果。

因為大多數時候大屏都會存在色彩偏差，這時通過測試我們就能發現漸變色、鄰近色等不同類型的色彩搭配是否可以在目標大屏上良好呈現。如果不可以，那我們設計進行時就不要使用顯示效果不佳的色彩搭配。另一方面，樣圖溝通環節及時測試也很重要。

文章來源：優設  作者：Captain相 

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