數(shù)據(jù)可視化實戰(zhàn)案例分享

作者：一時無兩?（轉(zhuǎn)載已取得作者授權(quán)）

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

重點概覽：

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

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

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

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

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

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

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

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

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

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

下面來舉些栗子～

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

硬件尺寸：

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

字體：

配色：

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

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

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

圖標(biāo)：

2. 展示和交互

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

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

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

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

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

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

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

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

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

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

五、總結(jié)

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

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

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

最后也歡迎有問題的小伙伴加微信：chanpin628?溝通交流。

此外我們的官方網(wǎng)站也上線了，每日分享高質(zhì)量的文章、原型素材和行業(yè)報告，小伙伴可自行前往索取，支持搜索，需要的小伙伴可點擊底部的閱讀原文直接查看，或者復(fù)制網(wǎng)址：www.dadaghp.com?打開。

更多干貨可關(guān)注微信公眾號：產(chǎn)品劉

想學(xué)習(xí)更多關(guān)于產(chǎn)品、職場、心理、認(rèn)知等干貨，可長按右邊二維碼，關(guān)注我們。

··················END··················

RECOMMEND

推薦閱讀

希望這些建議對你有幫助

說服背后的技巧

手把手教你做產(chǎn)品經(jīng)理1.0

手把手教你寫B(tài)端產(chǎn)品PRD

點擊“閱讀原文”

查看更多干貨