產品如何進行大屏數據可視化.md

最近接到一個需求,須要給公司的競賽平臺面對省/校/競賽進行大屏的可視化話數據展現,閒暇之餘對本身最近的工做進行一些總結;

一.數據可視化的定義

數據可視化主要是關於數據_視覺表現形式的科學技術研究 --百度百科

用通俗的解釋進行描述就是經過 圖表,圖像,視頻等可視化的手段將原有存在於數據庫中的進行屬性歸類,數據變化規律在某一載體上進行展現的過程稱之爲數據可視化;
例如:

二.實現數據可視化的幾個關鍵步驟

1.明確需求,和需求方明確業務場景

在進行第一次接收到數據可視化需求時,咱們必定須要明確是將什麼進行可視化,以及咱們展現的對象是誰;舉個實際的例子,咱們以前的高校MOOC平臺數據可視化,究竟是展現教學進度可視化仍是課程彙總的可視化,咱們展現對象是教育廳?教務處?仍是隻是咱們平臺內部的數據監控?展現對象的不一樣每每也決定了咱們在大屏設計時重點展示的信息不一樣;

2.進行數據可視化的維度確認,開發需加入

在明確了業務場景後,咱們接下來須要進行開始考慮可視化展現的維度,這裏我建議用xmind進行維度梳理,梳理後咱們必定要和開發進行交流確認,由於咱們全部維度的數據源是來自於開發的數據庫查詢,若是某類維度的統計和增加變化根本沒法在現階段進行技術實現,則咱們須要在設計時進行必定程度的調整;

3.肯定載體和載體的具體尺寸

確認完基礎維度以後,須要進行肯定大屏的載體,其實主要是肯定大屏展現時的分辨率和長寬比,由於通常須要進行大屏展現時都有一個特定顯示器,若是是定製顯示器,咱們就須要在規劃階段避免掉因分辨率,長寬比圖像顯示不全.甚至在特殊狀況下咱們須要進行多套分辨率的UI的設計,去適配不一樣的顯示器;

4.根據維度進行產品原型圖設計,選定可視化控件

在進行可視化控件的時候比較依賴我的審美和技術能力;可視化控件有不少,如今不少前端比較懶,只知道用輪子,連改造輪子都不肯意,不知道是懶仍是不會.因此產品在設計時,若是爲了更高效率的出圖,使用技術人員經常使用的EChart進行控件描繪;或者使用成熟的商業模板進行,這裏推薦百度數據可視化 Suga,方便又實用,基本上知足百分之九十以上的需求;
在進行原型圖設計時,咱們要聽從一些設計原則,就是最重要的模塊必定要放在最顯眼的位置,而且經過頁面模塊之間的關聯讓整個屏幕井井有條;若是你不太擅長這些,能夠用文字標記出哪些是最要,哪些是次要,排版就交給設計師吧,讓專業的人作專業的事;

5.進行UI配色動效確認-設計師

接下來就是針對大屏進行模塊配色和區域調整,達到視覺最佳,重點突出,井井有條,在某些展現模塊,若是公司技術人員有實力的話,能夠進行動效展現,沒實力當我沒說;

6.開發後進行實際展現微調

任何產品開發後必定須要進行調試,有條件的話最好實用實際的載體進行調試,由於不到最後一步,開發在本身的電腦上模擬永遠會有小瑕疵

7.交付確認

三.注意事項

1.以用戶爲中心設計
咱們千萬不能想固然的進行業務場景的模擬,必定要讓終端用戶參與進來,在原型圖出來後,必定要和需求提出方進行交流確認;作好交互和展現設計;
2.選擇正確數據進行展現;
同一套系統中,咱們衡量某一指標的變化和統計必定要明確,不要出現可視化一套數據,後臺系統一套數據;

設計師方面我這裏推薦一個好文連接 他講的更可能是細節確認,好比設計圖要切幾倍率,設計師如何排版;文章連接以下:[http://www.woshipm.com/pd/1782868.html]