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

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

重點(diǎn)概覽：

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

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

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

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

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

二、圖表設(shè)計(jì)指南

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

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

三、具體設(shè)計(jì)思路

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

下面來舉些栗子～

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

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

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

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

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

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

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

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

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

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

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

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

四、大屏優(yōu)化設(shè)計(jì)

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

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

1. 布局和配色：設(shè)計(jì)尺寸

硬件尺寸：

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

字體：

配色：

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

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

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

圖標(biāo)：

2. 展示和交互

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

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

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

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

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

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

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

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

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

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

五、總結(jié)

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

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

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

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

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