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