數(shù)據(jù)可視化大屏設計實戰(zhàn)分享

14 評論 23520 瀏覽 314 收藏 12 分鐘

本文作者從實際工作出發(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é)議

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 請問下數(shù)字翻拍器怎么做呀

    來自四川 回復
  2. 這是什么工具設計的頁面呢?望回復

    來自江蘇 回復
    1. 設計工具sketch

      來自江蘇 回復
  3. 來自江蘇 回復
  4. U

    回復
  5. 請問數(shù)字翻排器一般用在什么情況 我個人的感覺是數(shù)字翻拍器看起來并沒有普通的數(shù)字顯示那么直觀 清晰, 除了擬物的效果好像并沒有什么明顯的作用

    回復
  6. 希望就視覺風格做更深層面的探討思考與總結(jié)

    回復
  7. 請問,用的是什么工具?或是自己開發(fā)的?我也即將做大屏數(shù)據(jù)展示,求賜教。

    回復
  8. 請問,用的是什么工具?或是自己開發(fā)的?我也即將做大屏數(shù)據(jù)展示,求賜教。

    來自福建 回復
  9. 咨詢一下,你這個用的是哪個工具

    回復
  10. 謝謝啦

    回復
  11. 不直接用echart?

    回復
  12. ??

    來自福建 回復
  13. 6666666666666

    來自北京 回復