“新冠疫情分析管控數據可視化”大屏設計總結

4 評論 32239 瀏覽 173 收藏 15 分鐘

對于疫情的決策者與監管者來說,通過數據可視化大屏來掌握疫情發展狀況,能夠更為直觀了解全局信息,有效節省決策時間。

前言

2020年的開端異常艱難,新型冠狀病毒肺炎(NCP)疫情的爆發無疑是近些年最讓人心痛的黑天鵝。

此刻,疫情仍然在蔓延,如何利用全面、有效,及時的數據和可視化技術準確感知疫情態勢,為決策者、管理人員提供宏觀數據依據,節省決策時間,讓數據可視化成為管理者和時間賽跑的幫手,是快速打贏這場“戰疫”的關鍵。

在家為祖國做貢獻期間,設計了該NCP疫情數據可視化大屏,并總結了一些關于數據可視化大屏設計的思考。

數據大屏的設計,需要擁有對動態數據的把握、分析和呈現的能力、用宏觀的視野和細致入微的匠人之心讓冰冷的數據產生溫度。包括科學的運用圖表、運用色彩、把控數據層級以及視覺層級,達到美學形式與功能需求完美融合。

本文主要包含以下內容:

一、用戶研究

此次疫情數據大屏為To G方向,主要面向政府領導、管理員、決策者等。

此類用戶人群大部分是中國的高知人群,從學歷、社會地位、經濟收入、家庭背景都占有相當的優勢。

因為長期在政府工作,要求嚴謹、失誤率低。對設計風格偏好簡約、莊重、大氣,不可過分絢麗。

大屏填充內容要遵循國家相關要求和當下政策環境。

考慮到此類用戶大部分年齡偏大,信息傳達要求易讀,易懂。易懂指的是可視化數據最終考慮的還是用戶,應該一看便明白,不需要過多的理解和思考時間。

選擇圖形時需要理性對待,避免為了視覺效果選擇一些對用戶不太友好的圖形。

二、需求分析

需求分析要做到以用戶為中心,場景化思考,要首先清楚數據大屏不同于其他信息管理系統的特點,主要包括以下幾個方面:

  1. 面積巨大——用戶站遠才能看全內容;
  2. 深色背景——緊張感強,讓視覺更好的聚焦,避免過分的視覺刺激;
  3. 不可操作——大屏主要用來給來用戶看的,一般不會直接操作大屏;
  4. 空間局限——大屏不像網頁有滾動條,它的長寬都是固定的;
  5. 單獨主題——每塊大屏都有具體想給用戶表達某個主題;

以上特點決定了大屏沒有復雜的業務流程和任務流程,需求分析的重點在范圍定義和信息架構設計及非功能性需求。

關于信息架構設計可以查看另一篇《UX Designers:設計優秀的用戶體驗之前你需要知道的》。

目前已有的疫情數據大屏,主要是對累計和當日的確診、疑似及死亡人數的統計。統計范圍也只是到市級的粒度。這樣的數據并不能支撐高效、精準的決策。數據統計分析和可視化的最終意義是推動決策,幫助管理層提高決策效率。

圖片來源網絡

所以從時間和空間兩個維度著手:

  • 在時間維度加入對歷史病例的追溯和對未來疫情發展的預測。
  • 在空間維度上支持下鉆到鄉鎮、街道和社區。

基于此分析規劃出數據大屏的信息架構

三、數據分析

對需求分析結果中涉及的數據進行分析,可以為后面的設計和開發避開很多坑,需要思考以下八點:

  1. 可以公開哪些數據?很多信息很敏感。
  2. 數據來源有哪些?如果接第三方數據,接口是否穩定?
  3. 能獲取的數據精度怎樣?精度與數據分析指標息息相關。
  4. 預先評估數據量的級別多大?
  5. 如何實時刷新大批量數據?
  6. 維度會是用戶都想看的嗎
  7. 應該使用哪種可視化方式
  8. 展現這些數據,有意義嗎新冠疫情數據目前國內能收集到的,且能持續更新的開放數據如下:

    表格 1疫情數據來源

    序號 主要內容 提供方
    1 全國新型冠狀病毒肺炎確診病例分布圖 中國疾病預防控制中心
    2 實時更新疫情通報 中國疾病預防控制中心周報
    3 世衛組織的最新舉措 中國疾病預防控制中心
    4 疫情防控進展,疫情新聞報道 國家衛生健康委員會統計信息中心
    5 實時更新疫情通報 中華人民共和國國家衛生健康委員會
    6 疫情數據、人口遷移地圖、實時新聞播報 國家衛健委、各省市區衛健委、各省市區政府

四、頁面布局

1. 信息層級

在策劃布局前,需要先安排好信息的層級,如下圖所示,不可出現重合遮擋。

2. 布局參考

實際項目開發中,需要提前和用戶溝通大屏拼接規格尺寸、觀看方式。例如觀看距離較近、較遠、環視或總覽等,幾種常見的信息布局如下:

頁面布局參考一

頁面布局參考一

頁面布局參考二

頁面布局參考二

頁面布局參考三

頁面布局參考三

以上三種常規布局僅供參考,實際項目中遇到的情況通常會以上復雜很多,需要靈活變通。

3. 主、次、輔信息歸納

根據需求分析的結果對主要信息、次要信息和輔助信息進行歸納分析。分析結果如下圖所示:

4. 大屏布局

分析出主要數據、次要數據、輔助數據,與總分數據,還要剖析圖表運用的合理性和大屏的設計比例尺寸等,最終可以通過分析,對頁面有個合理的布局展示。

5. 數據填充

將信息填充布局后的效果如下圖:

至此已經可以看出大屏的骨架了,不過萬里長征也才完成了大概五分之二。

五、選定可視化表達元素

信息和布局確定了,如何實現直觀、甚至是酷炫的展示效果,需要確立數據指標分析維度和清楚不同類型圖表使用場景及優劣。

常見的圖表類型:

  • 柱狀圖(堆積柱狀圖、百分比堆積柱狀圖)
  • 條形圖(堆積條形圖、百分比堆積條形圖)
  • 折線圖
  • 各種數據地圖
  • 餅圖(環圖)
  • 雷達圖
  • 漏斗圖
  • 詞云
  • 散點圖(氣泡圖)
  • 面積圖(堆積面積圖、百分比堆積面積圖)
  • 指標卡
  • 計量圖
  • 瀑布圖
  • ?;鶊D
  • 旭日圖
  • 雙軸圖(柱狀+折線、柱狀+柱狀、折線+折線)

圖片來源:RAWGraphs

圖片來源:Viser

確定數據指標分析維度,從需要展示的信息出發,分別從“聯系、比較、分布和構成”四個方面考慮。

例如“構成”需要考慮數據是隨時間動態變化還是靜態數據,動態數據通常涉及到時間的變化,可以用折線圖展示從而對數據變化趨勢一目了然。

本次大屏設計需要展示的數據中例如疫情的變化,進京人數變化等都可以采用折線圖。

圖片:數據指標分析維度

六、可視化設計

根據之前確定的大屏的數據骨架,此次大屏可視化主要純可視化圖表及和位置密切相關地理信息類數據。在此推薦一些值得學習的可視化工具:AntV(antv.alipay.com)、Viser RawGraphs、Infogram、Power BI 、ChartBlocks、ECharts(echarts.baidu.com)、Highcharts(www.hcharts.cn)、Visualize Free、iCharts、FusionCharts、ZingChart、Flot。

此次大屏設計涉及大量地理信息數據的展示,地理信息類一般可視化效果酷炫,空間感、三維立體效果強,有豐富的粒子、流光等動效、高精度的模型和材質等特點。

地圖數據可視化工具:Mapbox、Echarts(echarts.baidu.com)、AntV (antv.alipay.com) 、HighCharts (www.hcharts.cn)

接下來確定視覺風格,需要綜合當前的設計趨勢、目標用戶的特征和審美情趣。考慮主要背景、配色、點綴和動效等的應用。

色彩學涉及生理學、心理學、美學與藝術理論的綜合學科,不展開贅述。

但需要注意保持色彩的一致性,最好使用深色調,避免過分的視覺刺激。通過適當給元素、標題、數字等添加一些諸如邊框、圖畫等在內的點綴效果,能幫助提升整體美觀度。適當的添加動效可以吸引用戶的注意力同時提升感官體驗。

然后就是溝通確認迭代設計,接下來的每版設計會在與業務、開發和用戶的溝通下逐步完善和精致起來,避免一下子走到終點,然后返回進行大的修改。

題外話,這個過程中注意不可一味取悅所有用戶,同時也應考慮時間、資金和團隊管理等。

在測試修改環節由于大屏比較特殊,有自己的特點、屬性、分辨率、色彩顯示、運行和展示環境,往往只有投入真實的測試環境才可以找到問題。

圖片:NCP疫情分析管控大屏(未經允許,不得引用或轉載)

七、總結

  1. 數據可視化大屏設計,首先依然是要了解用戶和需求,這是出色的設計的基石。
  2. 提前對涉及到的所有數據進行分析,可以為后面的開發工作避開很多坑。
  3. 確立數據指標分析維度和清楚不同類型圖表使用場景及優劣很關鍵。
  4. 使用高效的工具能夠事半功倍,除了常用的Sketch、Axure、Photoshop、Princilple,也可以借助Power BI、DataV、Ant V、Mapbox等工具生成圖表再插入設計中即可。
  5. 大屏終究是要服務于業務,數據和可視化手段都是為業務服務。
  6. 基于用戶做設計,而不是為領導,為老板做設計。只有清楚了解了用戶,才能回歸用戶視角去思考問題,去基于他的體驗痛點,給出設計主張,否則設計就很難經得起推敲。
  7. 平時多積累優秀的設計,注重提升自己的眼界和經驗,這樣在做設計決策時候,才不是理所當然,才能站在巨人的肩膀上思考。

 

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

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 醫療大數據公司,正在招UED團隊負責人。求聯系方式

    來自北京 回復
    1. 您好,可以加我微信哦:TaoZiMiaooo7

      來自北京 回復
  2. 請問可以轉載到公眾號嗎

    回復
  3. 分析很全面,思路清晰??????

    回復