數據可視化大屏案例分析

5 評論 27139 瀏覽 142 收藏 10 分鐘

很多UI設計師突然會接到公司數據可視化設計的需求,如果不了解數據可視化設計,肯定是一頭霧水,不知從何入手。我嘗試簡要的把我近期做過的案例進行記錄分享,不足之處歡迎大家隨時交流。

隨著大數據產業的蓬勃發展,很多企業都開始應用數據可視化。所以數據可視化設計,如今絕對是熱門的設計之一。

很多UI設計師突然會接到公司數據可視化設計的需求,如果不了解數據可視化設計,肯定是一頭霧水,不知從何入手。我嘗試簡要的把我近期做過的案例進行記錄分享,不足之處歡迎大家隨時交流。

首先放的是項目改版前的頁面:

數據可視化大屏案例分析

需求介紹

某某應用云,分為五大云平臺模塊:云端綜合調度、數據查詢通道、數據應用處理、數據查詢通道、管理理運行維護。每個大模塊下?面有若干個子系統。

可視化?屏首頁需要展示的內容包括:

(1)全局數據

云平臺的數據總量,以及 4 個重要關注數據項,2 個次要關注數據項。

(2)云平臺的五?大模塊

  1. 云端綜合調度
  2. 數據查詢通道
  3. 數據應用處理理
  4. 數據存儲管理
  5. 管理理運行維護(只有兩個tab切換鏈接)

(3)搜索功能

搜索類型分為 6 個類型,默認選中“綜合”類型進行搜索。

(4)重點關注數據信息按指標分多維度展示

原始圖上的維度包括:指標、地圖、地域排名、部?門、類別。

(5)云導航

需求分析

分析大屏可視化的一些共性:

  1. 屏幕大:大屏一般都是多屏拼接,整體屏幕面積大。
  2. 觀距遠:用戶需要站遠處觀看屏幕,要保證數據文字清晰可見。
  3. 交互弱:通過電腦已經無法滿足大屏交互需求,現在也有部分開始采用ipad、手機、激光筆等方式。
  4. 視覺強:背景色多采用重色,襯托凸顯數據,更好的為觀者傳達數據信息。
  5. 一屏一內容:一屏內容,說明一件主要事,統計好它的相關數據,避免其他的干擾

結合大屏的一些共性特點針對看到的線上舊版本設計,分析存在的問題。

  1. 布局混亂,導致視覺不平衡,看不出頁面層次。
  2. 藍色為主色調 黃色點綴顏色顯得比較單一沒有規則。
  3. 圖表比較單一,不能有效傳達數據信息。

結合這些問題進行視覺改版,首先優化頁面布局,通過分析對頁面重新布局,如下圖:

數據可視化大屏案例分析

采用柵格化對稱布局 讓整體視覺左右平衡。

視覺設計:

了解需求,整合數據,分析出主要數據次要數據、總量數據細分數據、各數據的維度等等,通過了解這些可以先設計出一個布局模版,也可以在紙上畫出來,布局可以在設計過程中隨時調整。

設計的風格,一提到數據可視化大家往往能想到科技、數據、藍色等一些普遍關鍵詞。

跟客戶溝通之后,了解到客戶需求是:想做一個科技感強比較炫酷的視覺效果 。這也貼合以上這些關鍵詞,針對這些關鍵詞的提煉。

另外結合大屏的使用場景,背景色一般會選用暗色調,數據變化一般會選擇高亮色調,讓視覺更好地聚焦數據的變化,也會較省電。

主題風格構思階段:

原圖:中國地圖主圖模塊缺乏層次感,如圖

數據可視化大屏案例分析

數據可視化大屏案例分析

?

改版后:地圖主色調改為科技藍,在原有地圖上增加外發光和多層陰影疊加,使其增加地圖的立體感,地圖上增加科技線條上升的效果代表每個城市數據變化的提升。地圖背景采用比較弱化的轉動線條圓形,襯托地圖主體,時的畫面更加豐富。

數據圖表拆分:

在選定數據圖表之前,首先要確定圖表之間的關系,可以從以下四個維度進行思考分析:

  1. 聯系:數據之間的相關性;
  2. 分布:指標里的數據主要集中在什么范圍、表現出怎樣的規律;
  3. 比較:數據之間存在何種差異、差異主要體現在哪些方面;
  4. 構成:指標里的數據都由哪幾部分組成、每部分占比如何。

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

傳統的圖表比如echarts上圖表在視覺上展示可能不是很美觀好看,可根據選擇的圖表在其基礎之上進行美化設計,總之選定圖表最重要的兩個點就是:易理解、可實現。

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

可實現:主要是跟開發前期溝通好實現方式,一般都采用開源組件庫的居多比如echarts組件庫,我們設計的圖形圖表,要開發能夠實現。

實際工作中,一些可視化效果開發用代碼寫很容易實現,效果也不錯,但這些效果設計師用Ps/Ai/Ae這些工具模擬時會發現比較困難。

同樣的,某些效果設計師用設計工具可以輕易實現,但開發要用代碼落地卻非常困難。所以大屏設計中跟開發常溝通非常重要,我們需要明確哪些地方設計師可以盡情發揮,哪些地方需要謹慎設計!

一個項目總有周期與預算限制,不會無限期的修改迭代,所以設計師在這里需要抓住重點,有取舍,不鉆牛角尖、死磕不放。

數據可視化大屏案例分析

數據可視化大屏案例分析

城市排名影響視覺數據多了,會對地圖展示造成影響,跟客戶溝通需優化城市排名個數,只展示前五個,打破傳統條形圖的展示形式采用電池晶格的展示形式。

數據可視化大屏案例分析

從頁面的整體看一下,已經有三處用到了條形圖,柱狀圖,如果這里還是條形圖。那么頁面看起來會很單調,圖表也沒有表現出多樣性。所以現在設計要體現圖表的多樣性,也能夠有排名的直觀呈現。

以下圖表采用科技圓盤的形式,運用科技線條的上升狀態代表排名的先后順序,所有圖表都采用數據降序來展示排名更加直觀。

最后附上:最終視覺和動態效果圖

數據可視化大屏案例分析

總結

大屏設計的基本步驟:

  1. 需求分析
  2. 優化布局
  3. 定義設計關鍵詞
  4. 確立主圖展示風格

以上是我對數據可視化大屏的案例總結,巴拉巴拉這么多,終于寫完了,希望能幫助到你。

除此之外還有很多地方沒有涉及到,包括具體設計的操作方式、選取圖形元素的具體方法,以及在各種大屏中所需要的相對應的組件等。在龐大的可視化大屏設計系統中,還有很多值得學習參考和優化的知識,歡迎各位大佬指正,大家一起努力。

 

本文由 @小六 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 學習了,請問中國地圖的效果可以分享下么,謝謝。想在axure中使用。

    來自山東 回復
  2. 如果圖表暫無數據應該怎么顯示呢

    來自北京 回復
  3. 謝謝分享,學習啦

    來自江蘇 回復
  4. 設計:請問動效是拿什么軟件做的

    來自山東 回復
    1. ae

      來自北京 回復