最近接到一個需求,需要給公司的競賽平台面對省/校/競賽進行大屏的可視化話數據展示,閑暇之余對自己最近的工作進行一些總結;
一.數據可視化的定義
數據可視化主要是關於數據_視覺表現形式的科學技術研究 --百度百科
用通俗的解釋進行描述就是通過 圖表,圖像,視頻等可視化的手段將原有存在於數據庫中的進行屬性歸類,數據變化規律在某一載體上進行展示的過程稱之為數據可視化;
例如:
二.實現數據可視化的幾個關鍵步驟
1.明確需求,和需求方明確業務場景
在進行第一次接收到數據可視化需求時,我們一定需要明確是將什么進行可視化,以及我們展示的對象是誰;舉個實際的例子,我們之前的高校MOOC平台數據可視化,到底是展示教學進度可視化還是課程匯總的可視化,我們展示對象是教育廳?教務處?還是只是我們平台內部的數據監控?展示對象的不同往往也決定了我們在大屏設計時重點展現的信息不同;
2.進行數據可視化的維度確認,開發需加入
在明確了業務場景后,我們接下來需要進行開始考慮可視化展示的維度,這里我建議用xmind進行維度梳理,梳理后我們一定要和開發進行交流確認,因為我們所有維度的數據源是來自於開發的數據庫查詢,如果某類維度的統計和增長變化根本無法在現階段進行技術實現,則我們需要在設計時進行一定程度的調整;
3.確定載體和載體的具體尺寸
確認完基礎維度之后,需要進行確定大屏的載體,其實主要是確定大屏展示時的分辨率和長寬比,因為一般需要進行大屏展示時都有一個特定顯示器,如果是定制顯示器,我們就需要在規划階段避免掉因分辨率,長寬比圖像顯示不全.甚至在特殊情況下我們需要進行多套分辨率的UI的設計,去適配不同的顯示器;
4.根據維度進行產品原型圖設計,選定可視化控件
在進行可視化控件的時候比較依賴個人審美和技術能力;可視化控件有很多,現在很多前端比較懶,只知道用輪子,連改造輪子都不願意,不知道是懶還是不會.所以產品在設計時,如果為了更高效率的出圖,使用技術人員常用的EChart進行控件描繪;或者使用成熟的商業模板進行,這里推薦百度數據可視化 Suga,方便又實用,基本上滿足百分之九十以上的需求;
在進行原型圖設計時,我們要遵從一些設計原則,就是最重要的模塊一定要放在最顯眼的位置,並且通過頁面模塊之間的關聯讓整個屏幕層次分明;如果你不太擅長這些,可以用文字標記出哪些是最要,哪些是次要,排版就交給設計師吧,讓專業的人做專業的事;
5.進行UI配色動效確認-設計師
接下來就是針對大屏進行模塊配色和區域調整,達到視覺最佳,重點突出,層次分明,在某些展示模塊,如果公司技術人員有實力的話,可以進行動效展示,沒實力當我沒說;
6.開發后進行實際展示微調
任何產品開發后一定需要進行調試,有條件的話最好實用實際的載體進行調試,因為不到最后一步,開發在自己的電腦上模擬永遠會有小瑕疵
7.交付確認
三.注意事項
1.以用戶為中心設計
我們千萬不能想當然的進行業務場景的模擬,一定要讓終端用戶參與進來,在原型圖出來后,一定要和需求提出方進行交流確認;做好交互和展示設計;
2.選擇正確數據進行展示;
同一套系統中,我們衡量某一指標的變化和統計一定要明確,不要出現可視化一套數據,后台系統一套數據;
設計師方面我這里推薦一個好文鏈接 他講的更多是細節確認,比如設計圖要切幾倍率,設計師如何排版;文章鏈接如下:[http://www.woshipm.com/pd/1782868.html]