對(duì)于疫情的決策者與監(jiān)管者來說，通過數(shù)據(jù)可視化大屏來掌握疫情發(fā)展?fàn)顩r，能夠更為直觀了解全局信息，有效節(jié)省決策時(shí)間。

前言

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

此刻，疫情仍然在蔓延，如何利用全面、有效，及時(shí)的數(shù)據(jù)和可視化技術(shù)準(zhǔn)確感知疫情態(tài)勢(shì)，為決策者、管理人員提供宏觀數(shù)據(jù)依據(jù)，節(jié)省決策時(shí)間，讓數(shù)據(jù)可視化成為管理者和時(shí)間賽跑的幫手，是快速打贏這場(chǎng)“戰(zhàn)疫”的關(guān)鍵。

在家為祖國做貢獻(xiàn)期間，設(shè)計(jì)了該NCP疫情數(shù)據(jù)可視化大屏，并總結(jié)了一些關(guān)于數(shù)據(jù)可視化大屏設(shè)計(jì)的思考。

數(shù)據(jù)大屏的設(shè)計(jì)，需要擁有對(duì)動(dòng)態(tài)數(shù)據(jù)的把握、分析和呈現(xiàn)的能力、用宏觀的視野和細(xì)致入微的匠人之心讓冰冷的數(shù)據(jù)產(chǎn)生溫度。包括科學(xué)的運(yùn)用圖表、運(yùn)用色彩、把控?cái)?shù)據(jù)層級(jí)以及視覺層級(jí)，達(dá)到美學(xué)形式與功能需求完美融合。

本文主要包含以下內(nèi)容：

一、用戶研究

此次疫情數(shù)據(jù)大屏為To G方向，主要面向政府領(lǐng)導(dǎo)、管理員、決策者等。

此類用戶人群大部分是中國的高知人群，從學(xué)歷、社會(huì)地位、經(jīng)濟(jì)收入、家庭背景都占有相當(dāng)?shù)膬?yōu)勢(shì)。

因?yàn)殚L(zhǎng)期在政府工作，要求嚴(yán)謹(jǐn)、失誤率低。對(duì)設(shè)計(jì)風(fēng)格偏好簡(jiǎn)約、莊重、大氣，不可過分絢麗。

大屏填充內(nèi)容要遵循國家相關(guān)要求和當(dāng)下政策環(huán)境。

考慮到此類用戶大部分年齡偏大，信息傳達(dá)要求易讀，易懂。易懂指的是可視化數(shù)據(jù)最終考慮的還是用戶，應(yīng)該一看便明白，不需要過多的理解和思考時(shí)間。

選擇圖形時(shí)需要理性對(duì)待，避免為了視覺效果選擇一些對(duì)用戶不太友好的圖形。

二、需求分析

需求分析要做到以用戶為中心，場(chǎng)景化思考，要首先清楚數(shù)據(jù)大屏不同于其他信息管理系統(tǒng)的特點(diǎn)，主要包括以下幾個(gè)方面：

1. 面積巨大——用戶站遠(yuǎn)才能看全內(nèi)容；
2. 深色背景——緊張感強(qiáng)，讓視覺更好的聚焦，避免過分的視覺刺激；
3. 不可操作——大屏主要用來給來用戶看的，一般不會(huì)直接操作大屏；
4. 空間局限——大屏不像網(wǎng)頁有滾動(dòng)條，它的長(zhǎng)寬都是固定的；
5. 單獨(dú)主題——每塊大屏都有具體想給用戶表達(dá)某個(gè)主題；

以上特點(diǎn)決定了大屏沒有復(fù)雜的業(yè)務(wù)流程和任務(wù)流程，需求分析的重點(diǎn)在范圍定義和信息架構(gòu)設(shè)計(jì)及非功能性需求。

關(guān)于信息架構(gòu)設(shè)計(jì)可以查看另一篇《UX Designers:設(shè)計(jì)優(yōu)秀的用戶體驗(yàn)之前你需要知道的》。

目前已有的疫情數(shù)據(jù)大屏，主要是對(duì)累計(jì)和當(dāng)日的確診、疑似及死亡人數(shù)的統(tǒng)計(jì)。統(tǒng)計(jì)范圍也只是到市級(jí)的粒度。這樣的數(shù)據(jù)并不能支撐高效、精準(zhǔn)的決策。數(shù)據(jù)統(tǒng)計(jì)分析和可視化的最終意義是推動(dòng)決策，幫助管理層提高決策效率。

圖片來源網(wǎng)絡(luò)

所以從時(shí)間和空間兩個(gè)維度著手:

• 在時(shí)間維度加入對(duì)歷史病例的追溯和對(duì)未來疫情發(fā)展的預(yù)測(cè)。
• 在空間維度上支持下鉆到鄉(xiāng)鎮(zhèn)、街道和社區(qū)。

基于此分析規(guī)劃出數(shù)據(jù)大屏的信息架構(gòu)

三、數(shù)據(jù)分析

對(duì)需求分析結(jié)果中涉及的數(shù)據(jù)進(jìn)行分析，可以為后面的設(shè)計(jì)和開發(fā)避開很多坑，需要思考以下八點(diǎn)：

1. 可以公開哪些數(shù)據(jù)？很多信息很敏感。
2. 數(shù)據(jù)來源有哪些？如果接第三方數(shù)據(jù)，接口是否穩(wěn)定？
3. 能獲取的數(shù)據(jù)精度怎樣？精度與數(shù)據(jù)分析指標(biāo)息息相關(guān)。
4. 預(yù)先評(píng)估數(shù)據(jù)量的級(jí)別多大？
5. 如何實(shí)時(shí)刷新大批量數(shù)據(jù)？
6. 維度會(huì)是用戶都想看的嗎
7. 應(yīng)該使用哪種可視化方式
8. 展現(xiàn)這些數(shù)據(jù)，有意義嗎新冠疫情數(shù)據(jù)目前國內(nèi)能收集到的，且能持續(xù)更新的開放數(shù)據(jù)如下：

   表格 1疫情數(shù)據(jù)來源

   序號(hào)	主要內(nèi)容	提供方
   1	全國新型冠狀病毒肺炎確診病例分布圖	中國疾病預(yù)防控制中心
   2	實(shí)時(shí)更新疫情通報(bào)	中國疾病預(yù)防控制中心周報(bào)
   3	世衛(wèi)組織的最新舉措	中國疾病預(yù)防控制中心
   4	疫情防控進(jìn)展，疫情新聞報(bào)道	國家衛(wèi)生健康委員會(huì)統(tǒng)計(jì)信息中心
   5	實(shí)時(shí)更新疫情通報(bào)	中華人民共和國國家衛(wèi)生健康委員會(huì)
   6	疫情數(shù)據(jù)、人口遷移地圖、實(shí)時(shí)新聞播報(bào)	國家衛(wèi)健委、各省市區(qū)衛(wèi)健委、各省市區(qū)政府

四、頁面布局

1. 信息層級(jí)

在策劃布局前，需要先安排好信息的層級(jí)，如下圖所示，不可出現(xiàn)重合遮擋。

2. 布局參考

實(shí)際項(xiàng)目開發(fā)中，需要提前和用戶溝通大屏拼接規(guī)格尺寸、觀看方式。例如觀看距離較近、較遠(yuǎn)、環(huán)視或總覽等，幾種常見的信息布局如下：

頁面布局參考一

頁面布局參考二

頁面布局參考三

以上三種常規(guī)布局僅供參考，實(shí)際項(xiàng)目中遇到的情況通常會(huì)以上復(fù)雜很多，需要靈活變通。

3. 主、次、輔信息歸納

根據(jù)需求分析的結(jié)果對(duì)主要信息、次要信息和輔助信息進(jìn)行歸納分析。分析結(jié)果如下圖所示：

4. 大屏布局

分析出主要數(shù)據(jù)、次要數(shù)據(jù)、輔助數(shù)據(jù)，與總分?jǐn)?shù)據(jù)，還要剖析圖表運(yùn)用的合理性和大屏的設(shè)計(jì)比例尺寸等，最終可以通過分析，對(duì)頁面有個(gè)合理的布局展示。

5. 數(shù)據(jù)填充

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

至此已經(jīng)可以看出大屏的骨架了，不過萬里長(zhǎng)征也才完成了大概五分之二。

五、選定可視化表達(dá)元素

信息和布局確定了，如何實(shí)現(xiàn)直觀、甚至是酷炫的展示效果，需要確立數(shù)據(jù)指標(biāo)分析維度和清楚不同類型圖表使用場(chǎng)景及優(yōu)劣。

常見的圖表類型：

• 柱狀圖（堆積柱狀圖、百分比堆積柱狀圖）
• 條形圖（堆積條形圖、百分比堆積條形圖）
• 折線圖
• 各種數(shù)據(jù)地圖
• 餅圖（環(huán)圖）
• 雷達(dá)圖
• 漏斗圖
• 詞云
• 散點(diǎn)圖（氣泡圖）
• 面積圖（堆積面積圖、百分比堆積面積圖）
• 指標(biāo)卡
• 計(jì)量圖
• 瀑布圖
• 桑基圖
• 旭日?qǐng)D
• 雙軸圖（柱狀+折線、柱狀+柱狀、折線+折線）

圖片來源：RAWGraphs

圖片來源：Viser

確定數(shù)據(jù)指標(biāo)分析維度，從需要展示的信息出發(fā)，分別從“聯(lián)系、比較、分布和構(gòu)成”四個(gè)方面考慮。

例如“構(gòu)成”需要考慮數(shù)據(jù)是隨時(shí)間動(dòng)態(tài)變化還是靜態(tài)數(shù)據(jù)，動(dòng)態(tài)數(shù)據(jù)通常涉及到時(shí)間的變化，可以用折線圖展示從而對(duì)數(shù)據(jù)變化趨勢(shì)一目了然。

本次大屏設(shè)計(jì)需要展示的數(shù)據(jù)中例如疫情的變化，進(jìn)京人數(shù)變化等都可以采用折線圖。

圖片：數(shù)據(jù)指標(biāo)分析維度

六、可視化設(shè)計(jì)

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

此次大屏設(shè)計(jì)涉及大量地理信息數(shù)據(jù)的展示，地理信息類一般可視化效果酷炫，空間感、三維立體效果強(qiáng)，有豐富的粒子、流光等動(dòng)效、高精度的模型和材質(zhì)等特點(diǎn)。

地圖數(shù)據(jù)可視化工具：Mapbox、Echarts（echarts.baidu.com）、AntV (antv.alipay.com) 、HighCharts (www.hcharts.cn)

接下來確定視覺風(fēng)格，需要綜合當(dāng)前的設(shè)計(jì)趨勢(shì)、目標(biāo)用戶的特征和審美情趣?？紤]主要背景、配色、點(diǎn)綴和動(dòng)效等的應(yīng)用。

色彩學(xué)涉及生理學(xué)、心理學(xué)、美學(xué)與藝術(shù)理論的綜合學(xué)科，不展開贅述。

但需要注意保持色彩的一致性，最好使用深色調(diào)，避免過分的視覺刺激。通過適當(dāng)給元素、標(biāo)題、數(shù)字等添加一些諸如邊框、圖畫等在內(nèi)的點(diǎn)綴效果，能幫助提升整體美觀度。適當(dāng)?shù)奶砑觿?dòng)效可以吸引用戶的注意力同時(shí)提升感官體驗(yàn)。

然后就是溝通確認(rèn)迭代設(shè)計(jì)，接下來的每版設(shè)計(jì)會(huì)在與業(yè)務(wù)、開發(fā)和用戶的溝通下逐步完善和精致起來，避免一下子走到終點(diǎn)，然后返回進(jìn)行大的修改。

題外話，這個(gè)過程中注意不可一味取悅所有用戶，同時(shí)也應(yīng)考慮時(shí)間、資金和團(tuán)隊(duì)管理等。

在測(cè)試修改環(huán)節(jié)由于大屏比較特殊，有自己的特點(diǎn)、屬性、分辨率、色彩顯示、運(yùn)行和展示環(huán)境，往往只有投入真實(shí)的測(cè)試環(huán)境才可以找到問題。

圖片：NCP疫情分析管控大屏（未經(jīng)允許，不得引用或轉(zhuǎn)載）

七、總結(jié)

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

本文由 @桃子貍 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議