本文作者從實際工作出發(fā)，結(jié)合案例分享了大屏可視化設計過程中的一些問題以及設計思路，供大家一起參考與學習。

年底完成了一些數(shù)據(jù)可視化網(wǎng)頁版UI改造及大屏可視化設計的方案，最近空出一些時間來整理遇到的問題及設計思路，本文分享一下想法和感悟。

重點概覽：

1. 了解數(shù)據(jù)可視化
2. 圖表設計指南；
3. 具體設計思路；
4. 大屏優(yōu)化設計
5. 總結(jié)

一、了解數(shù)據(jù)可視化

可視化是為了幫助用戶更好的分析數(shù)據(jù)，信息的質(zhì)量很大程度上依賴于其表達方式。

數(shù)據(jù)本身是冰冷的數(shù)字，通過選擇合適的圖形或者圖表來進行展示表達，使得傳遞給使用者的感受更加直觀、更容易獲得其中的價值。

數(shù)據(jù)可視化將技術與藝術完美結(jié)合，借助圖形化的手段，清晰有效地傳達與溝通信息。一方面，數(shù)據(jù)賦予可視化以價值;另一方面，可視化增加數(shù)據(jù)的靈性，兩者相輔相成，幫助企業(yè)從信息中提取有價值的信息。

二、圖表設計指南

在數(shù)據(jù)可視化設計中，首先面臨的問題是如何將各種繁多的數(shù)據(jù)指標進行展示，需要根據(jù)數(shù)據(jù)的特點，以及數(shù)據(jù)之間的關系，決定選擇什么樣的圖表類型，然后梳理數(shù)據(jù)包含的維度，最終突出關鍵信息。

如下圖，通過對數(shù)據(jù)展示需求進行歸類整理，并調(diào)研行業(yè)內(nèi)的主流解決方案，將數(shù)據(jù)展示需求分為以下幾種類型：

三、具體設計思路

數(shù)據(jù)可視化的目的是讓數(shù)據(jù)說話，讓復雜抽象的數(shù)據(jù)以視覺的形式更準確的傳達。簡單的來說就是既要選擇合適的圖表，又要展示其中的數(shù)據(jù)關系，通過視覺元素有序組合體現(xiàn)數(shù)據(jù)特征。

下面來舉些栗子～

1. 數(shù)量的圖表展示對于數(shù)量展示，主要包含以下幾種使用場景

• 純數(shù)字應用于具體的總數(shù)展示場景，例如XXX個數(shù)為1000臺，XXX個數(shù)為99條等，這里把純數(shù)字置于視覺控件中，能讓觀者直觀了解到個數(shù)多少臺、條數(shù)有多少條；
• 數(shù)字翻牌器應用于地圖中個各個指標總數(shù)顯示的展示場景，例如XXX個數(shù)為88個等；
• 折線圖表示一段時間內(nèi)數(shù)據(jù)的變化，例如XXX在1-7月中每個月的數(shù)量增減情況、XXX在最近一周內(nèi)數(shù)量增減情況等；
• 橫向柱狀圖是主要是通過水平方向不同顏色的柱子來展示數(shù)值，此類數(shù)值一般有正負關系，一般展示資源總量與已使用量、未使用量對比的場景中，例如XXX的總量800pb、已分配量500pb、未分配量300pb三者之間的資源數(shù)量的對比等；

2. 趨勢的圖表展示主要使用場景

折線圖是指定一個分析軸進行數(shù)據(jù)大小的比較，主要是展示數(shù)據(jù)隨著時間推移的趨勢或變化，兩點連接。例如展示最近6個小時的兩種數(shù)值變化趨勢等。

3. 占比類數(shù)值的圖表展示主要使用場景

環(huán)形圖應用于部分占比情況展示，主要是通過展示不同類別數(shù)值相對于總數(shù)的占比情況，反應部分與整體的關系。每個區(qū)域弧長表示類別大小，總和為100%。

例如在環(huán)形圖中，某資源占整個資源的30%。

4. TOP類數(shù)據(jù)的圖表展示主要指各種指標的TOPN展示

比如TOP5的數(shù)值大小排行。

5. 區(qū)域類的數(shù)據(jù)

區(qū)域類的數(shù)據(jù)展示在一張地圖圖上展示各區(qū)域資源數(shù)量情況，有利于使用者觀察全局以及各個區(qū)域的情況。

6. 網(wǎng)頁版數(shù)據(jù)可視化設計樣例

四、大屏優(yōu)化設計

本次可視化大屏主要是為了實時展示相關數(shù)據(jù)監(jiān)控情況，不同于網(wǎng)頁版可視化設計的展示，大屏展示需要做到重點突出，要求較強的數(shù)據(jù)展示能力，而不是面面俱到。

網(wǎng)頁版偏向展示一段時間內(nèi)的數(shù)據(jù)，甚至是通過日期篩選查詢到某一時間段的數(shù)據(jù)。大屏更多起到的是監(jiān)測職能，反饋的是實時信息，顯示的是當下的數(shù)據(jù)。以下是大屏設計和網(wǎng)頁版設計的一些不同：

1. 布局和配色：設計尺寸

硬件尺寸：

6384*1216px，分辨率：72dpi設計布局了解需求的基礎上，辨別數(shù)據(jù)的優(yōu)先級，做到重點突出，細分資源類型及指標，布局出大致的設計模版，如下圖。

字體：

配色：

相比較網(wǎng)頁版設計展示，大屏更傾向于選用深色調(diào)背景，不僅為了讓視覺更好聚焦，而且長時間觀看之后眼睛也不會出現(xiàn)視覺刺刺痛感。

基于此，所有圖表的配色皆以深色系為背景，保證數(shù)據(jù)明度與色調(diào)的和諧統(tǒng)一。

數(shù)據(jù)元素：

圖標：

2. 展示和交互

在大屏展示中，有多種資源類型及數(shù)據(jù)展示。通過構(gòu)圖突出重點，在主要信息和次要信息的布局和所占面積上進行調(diào)整，明確層級關系和流向，使觀者獲取信息時也能獲得視覺平衡感。

以地圖的方式展示出資源分布信息，左右兩側(cè)排布詳細類別的資源信息展示，在構(gòu)圖上突出主次。并在全國地圖中省份位置添加鉆取的動態(tài)效果，進一步增強視覺導流線和信息層級的引導作用。

不同于網(wǎng)頁版可視化內(nèi)容展示可以做到面面俱到，大屏界面空間有限，必須突出重點，將重要的指標放在最顯眼的位置，盡量集中放置，吸引視覺焦點。

交互方面，網(wǎng)頁版可視化內(nèi)容展示的交互復雜相對多樣化。而可視化大屏，交互樣式單一，更多是側(cè)重于數(shù)據(jù)多維度鉆取。

3. 優(yōu)化細節(jié)

在完成大屏設計初稿后，為了進一步優(yōu)化維度和展現(xiàn)的方式，對大屏中的細節(jié)進行優(yōu)化。例如對背景、裝飾線框、圖表線條等細節(jié)進行審查。

比如視覺上顯得線條太多，頁面整體不夠清晰，重要信息凸顯不出來。對應裝飾元素能避免則避免。

對于層次感不明顯的問題，進行了豐富信息以及加大背景色對比度的調(diào)整；對于圖表中柱狀圖的數(shù)量過密和過疏，進行長寬高、面積進行調(diào)整；對于表格排列進行優(yōu)化序號突出重點的調(diào)整……

最后一步，按照產(chǎn)品經(jīng)理收集到需求方的要求，考慮到是否達到預期，是否有色差等。最后也要讓需求方審核是否能夠理解，數(shù)據(jù)是否是想要的樣子。

優(yōu)化后的最終版：

五、總結(jié)

數(shù)據(jù)可視化設計的著力點就是要把握好圖表的主次關系，突出主要圖表的重點數(shù)據(jù)。

本次設計實戰(zhàn)，在網(wǎng)頁版UI設計基礎上，提煉重點數(shù)據(jù)信息進行大屏設計，最終目的是能夠讓觀者洞悉各個資源的使用情況。

在本次設計實戰(zhàn)需要在短時間內(nèi)實現(xiàn)復雜繁多的指標數(shù)據(jù)可視化，網(wǎng)頁版要做到面面俱到，大屏版要做到重點突出，整體設計難免有不完美的地方，后續(xù)會繼續(xù)改進完善。

本文由@一時無兩 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash， 基于CC0協(xié)議