結對第一次—疫情統計可視化（原型設計）

---

這個做業屬於哪一個課程	2020春S班(福州大學)
這個做業要求在哪裏	結對第一次—疫情統計可視化（原型設計）
結對學號	221701430 & 221701405
這個做業的目標	疫情統計可視化
做業正文	做業連接
其餘參考文獻	axure教程

1、NABCD模型

N（Need，需求）

目前新型冠狀病毒肺炎疫情到了很是關鍵的時期，全社會仍然是嚴陣以待，疫情統計結果只是經過文字來顯示，不夠直觀、具體，對用戶不夠友好。所以推出疫情可視化地圖,但願能夠經過地圖配合上小標籤的形式直觀顯示疫情的狀況，並經過圖表顯示數據的大小以及變化程度。

• 在全國地圖上使用不一樣的顏色表明大概確診人數區間

  • 顏色的深淺表示疫情的嚴重程度，能夠直觀瞭解高危區域；
  • 鼠標移到每一個省份會高亮顯示；
  • 點擊鼠標會顯示該省具體疫情狀況

• 點擊某個省份顯示該省疫情的具體狀況

  • 顯示該省份對應的感染患者人數、疑似患者人數、治癒人數、死亡人數；
  • 該省份到目前爲止的新增確診趨勢、新增疑似趨勢、治癒趨勢和死亡趨勢

A（Approach，作法）

經過web實現疫情數據的可視化，用地圖的方式直觀顯示疫情狀況。使用Axure rp 9進行原型設計，鼠標懸停於某省顯示標籤，標籤顯示某省簡單數據，鼠標單擊某省跳至另外一頁面，另外一頁面用於顯示某省的具體數據，並在相應頁面增長一些其餘內容給予用戶疫情的額外擴展信息。

B（Benefit，好處)

• 數據直觀易懂。疫情數據圖幫助羣衆更加直觀瞭解疫情的情況。
• 實時瞭解疫情的實時情況，判斷嚴重程度和將來的走向。
• 易於操做。只需簡單的點擊就能獲得全部數據。
• 能夠經過網站隨時隨地查看疫情情況

C（Competitors，競爭）

• 優點

  • 面向用戶人羣廣。
  • 數據使用可視化地圖和折線圖表示 ，直觀顯示趨勢變化。
  • 無需下載app,能夠直接經過網頁連接查看

• 劣勢

  • 目前疫情可視化產品已經逐漸趨於完善，同類產品提供的功能甚至更加完善，並且用戶衆多。

D（Delivery，推廣）

1. 在校園內部推廣。
2. 經過微信、微博、QQ等平臺進行線上推廣。

2、原型設計

原型展現

原型展現

原型截圖

設計過程

• 首先將整個原型分爲兩個頁面，一個用於全國信息的展現，一個用於某省具體數據的展現。
• 全國數據：分爲三個模塊，總數據統計，疫情地圖，疫情統計圖。重點爲疫情地圖與統計圖:
• 疫情地圖使用中繼器記錄數據，利用svg中國地圖，使用大量熱區對某一省份進行填充，直到這些熱區覆蓋住整個省份的輪廓內部分，將這些熱區加上交互事件，鼠標移入時將省份圖設爲真，移出設爲假，在對應省份設置交互事件，這次利用動態面板實現地圖高亮，將每一個省分爲兩個狀態，一個爲原色一個爲白色高亮狀態，對應熱區增長移入移出改變更態面板狀態的交互事件便可實現高亮，在省份加入選中事件，從中繼器進行數據篩選獲取對應數據用於設置地圖標籤文本並將地圖標籤顯示於鼠標附近位置
• 疫情統計圖一樣使用中繼器保存數據，並在中繼器中添加矩形做爲橫座標的顯示以及條形圖的長條，使用一個隱藏的方框存取數值的最大值，中繼器中加入每項載入交互事件，設置長條矩形的高度尺寸爲原長條矩形高度*數據/最大值，這樣最大值那一項的長條就會和原高度一致，其餘項就會按比例縮小長度以實現動態的變化，這樣即便改變中繼器中的數值，統計圖中的長條依然會根據比例改變大小
• 某省具體數據：一樣分爲三個模塊，折線統計圖，總數據展現以及謠言粉碎機。重點爲折線統計圖：
• 以一樣原理實現條形統計圖，隱藏長條矩形，按一樣原理在長條頂端增長散點造成可隨中繼器數據改變位置的動態散點圖，再增長一條直線，爲中繼器的每項載入交互事件增長原件移動和原件尺寸修改的動做，將直線改變成應有長度和角度並移動到正確位置便可實現折線圖
• 這次因爲只是原型，省份的具體數值頁面跳轉只有上海市實現，圖例的交互只顯示了前兩個圖例的懸停對應省份高亮顯示

原型開發工具

Axure RP

3、結對過程與總結

結對過程

因爲疫情緣由沒法在線下進行討論，所以主要經過QQ聊天及語音通話溝通，由此分工合做

遇到的困難及解決方法

困難：

• 1.熱區形狀爲矩形，而每一個省份形狀不一且不規則
• 2.如何實現圖例對應身份的集體高亮顯示
• 3.統計圖不知如何實現根據數據的變化而改變 解決：
• 1.使用多個熱區對省份輪廓內區域的全覆蓋
• 2.利用動態面板的狀態切換，在圖例標誌上增長鼠標移入移出事件並添加動態面板狀態切換動做，移入切換爲高亮的狀態2，移出切換爲普通的狀態1便可
• 3.使用中繼器存儲數據，使用一個矩形存放最大值，在中繼器每項加載時進行條形統計圖中長條的尺寸變更，具體公式爲高度=原長度*該項數值/最大數值用以實現條形長度的動態變化，折線圖同理

總結

在本次做業中，經過學習使用Axure RP，掌握了地圖原型的構建，還有柱狀圖、折線圖的繪製。還有最重要的收穫應該就是學會了團隊合做，包括如何和隊友進行分工合做，遇到了困難及意見不一時又該如何有效的進行溝通，最終達成一致，更快更高效的達到共同的目標。

4、效能分析和PSP

• 效能分析 因爲本次做業沒有代碼，所以無效能分析
• PSP表

PSP2.1	Personal Software Process Stages	預估耗時（分鐘）	實際耗時（分鐘）
Planning	計劃	100	120
Estimate	估計這個任務須要多少時間	30	40
Development	開發	200	180
Analysis	需求分析 (包括學習新技術)	500	540
Design Spec	生成設計文檔	60	90
Design Review	設計複審	30	20
Design	具體設計	300	350
Reporting	報告	120	100
Test Repor	測試報告	20	20
Size Measurement	計算工做量	10	10
Postmortem & Process Improvement Plan	過後總結, 並提出過程改進計劃	60	50
合計		1430	1520

5、博客內容PDF

博客PDF