對於疫情的決策者與監管者來說，通過數據可視化大屏來掌握疫情發展狀況，能夠更為直觀了解全局信息，有效節省決策時間。
前言2020年的開端異常艱難，新型冠狀病毒肺炎（NCP）疫情的爆發無疑是近些年最讓人心痛的黑天鵝。
此刻，疫情仍然在蔓延，如何利用全面、有效，及時的數據和可視化技術準確感知疫情態勢，為決策者、管理人員提供宏觀數據依據，節省決策時間，讓數據可視化成為管理者和時間賽跑的幫手，是快速打贏這場「戰疫」的關鍵。
在家為祖國做貢獻期間，設計了該NCP疫情數據可視化大屏，並總結了一些關於數據可視化大屏設計的思考。
數據大屏的設計，需要擁有對動態數據的把握、分析和呈現的能力、用宏觀的視野和細緻入微的匠人之心讓冰冷的數據產生溫度。包括科學的運用圖表、運用色彩、把控數據層級以及視覺層級，達到美學形式與功能需求完美融合。
本文主要包含以下內容：
一、用戶研究此次疫情數據大屏為To G方向，主要面向政府領導、管理員、決策者等。
此類用戶人群大部分是中國的高知人群，從學歷、社會地位、經濟收入、家庭背景都佔有相當的優勢。
因為長期在政府工作，要求嚴謹、失誤率低。對設計風格偏好簡約、莊重、大氣，不可過分絢麗。
大屏填充內容要遵循國家相關要求和當下政策環境。
考慮到此類用戶大部分年齡偏大，信息傳達要求易讀，易懂。易懂指的是可視化數據最終考慮的還是用戶，應該一看便明白，不需要過多的理解和思考時間。
選擇圖形時需要理性對待，避免為了視覺效果選擇一些對用戶不太友好的圖形。
二、需求分析需求分析要做到以用戶為中心，場景化思考，要首先清楚數據大屏不同於其他信息管理系統的特點，主要包括以下幾個方面：
面積巨大——用戶站遠才能看全內容；深色背景——緊張感強，讓視覺更好的聚焦，避免過分的視覺刺激；不可操作——大屏主要用來給來用戶看的，一般不會直接操作大屏；空間局限——大屏不像網頁有滾動條，它的長寬都是固定的；單獨主題——每塊大屏都有具體想給用戶表達某個主題；以上特點決定了大屏沒有複雜的業務流程和任務流程，需求分析的重點在範圍定義和信息架構設計及非功能性需求。
關於信息架構設計可以查看另一篇《UX Designers:設計優秀的用戶體驗之前你需要知道的》。
目前已有的疫情數據大屏，主要是對累計和當日的確診、疑似及死亡人數的統計。統計範圍也只是到市級的粒度。這樣的數據並不能支撐高效、精準的決策。數據統計分析和可視化的最終意義是推動決策，幫助管理層提高決策效率。
圖片來源網絡
所以從時間和空間兩個維度著手:
在時間維度加入對歷史病例的追溯和對未來疫情發展的預測。在空間維度上支持下鑽到鄉鎮、街道和社區。基於此分析規劃出數據大屏的信息架構
三、數據分析對需求分析結果中涉及的數據進行分析，可以為後面的設計和開發避開很多坑，需要思考以下八點：
可以公開哪些數據？很多信息很敏感。數據來源有哪些？如果接第三方數據，接口是否穩定？能獲取的數據精度怎樣？精度與數據分析指標息息相關。預先評估數據量的級別多大？如何實時刷新大批量數據？維度會是用戶都想看的嗎應該使用哪種可視化方式展現這些數據，有意義嗎新冠疫情數據目前國內能收集到的，且能持續更新的開放數據如下：表格 1疫情數據來源
序號主要內容提供方1全國新型冠狀病毒肺炎確診病例分布圖中國疾病預防控制中心2實時更新疫情通報中國疾病預防控制中心周報3世衛組織的最新舉措中國疾病預防控制中心4疫情防控進展，疫情新聞報導國家衛生健康委員會統計信息中心5實時更新疫情通報中華人民共和國國家衛生健康委員會6疫情數據、人口遷移地圖、實時新聞播報國家衛健委、各省市區衛健委、各省市區政府四、頁面布局1. 信息層級在策劃布局前，需要先安排好信息的層級，如下圖所示，不可出現重合遮擋。
2. 布局參考實際項目開發中，需要提前和用戶溝通大屏拼接規格尺寸、觀看方式。例如觀看距離較近、較遠、環視或總覽等，幾種常見的信息布局如下：
頁面布局參考一
頁面布局參考二
頁面布局參考三
以上三種常規布局僅供參考，實際項目中遇到的情況通常會以上複雜很多，需要靈活變通。
3. 主、次、輔信息歸納根據需求分析的結果對主要信息、次要信息和輔助信息進行歸納分析。分析結果如下圖所示：
4. 大屏布局分析出主要數據、次要數據、輔助數據，與總分數據，還要剖析圖表運用的合理性和大屏的設計比例尺寸等，最終可以通過分析，對頁面有個合理的布局展示。
5. 數據填充將信息填充布局後的效果如下圖：
至此已經可以看出大屏的骨架了，不過萬裡長徵也才完成了大概五分之二。
五、選定可視化表達元素信息和布局確定了，如何實現直觀、甚至是酷炫的展示效果，需要確立數據指標分析維度和清楚不同類型圖表使用場景及優劣。
常見的圖表類型：
柱狀圖（堆積柱狀圖、百分比堆積柱狀圖）條形圖（堆積條形圖、百分比堆積條形圖）折線圖各種數據地圖餅圖（環圖）雷達圖漏鬥圖詞雲散點圖（氣泡圖）面積圖（堆積面積圖、百分比堆積面積圖）指標卡計量圖瀑布圖桑基圖旭日圖雙軸圖（柱狀+折線、柱狀+柱狀、折線+折線）圖片來源：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疫情分析管控大屏（未經允許，不得引用或轉載）
七、總結數據可視化大屏設計，首先依然是要了解用戶和需求，這是出色的設計的基石。提前對涉及到的所有數據進行分析，可以為後面的開發工作避開很多坑。確立數據指標分析維度和清楚不同類型圖表使用場景及優劣很關鍵。使用高效的工具能夠事半功倍，除了常用的Sketch、Axure、Photoshop、Princilple,也可以藉助Power BI、DataV、Ant V、Mapbox等工具生成圖表再插入設計中即可。大屏終究是要服務於業務，數據和可視化手段都是為業務服務。基於用戶做設計，而不是為領導，為老闆做設計。只有清楚了解了用戶，才能回歸用戶視角去思考問題，去基於他的體驗痛點，給出設計主張，否則設計就很難經得起推敲。平時多積累優秀的設計，注重提升自己的眼界和經驗，這樣在做設計決策時候，才不是理所當然，才能站在巨人的肩膀上思考。
本文由 @桃子狸 原創發布於人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基於CC0協議
收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}