結對做業（1）--疫情統計可視化（原型設計）

這個做業屬於哪一個課程	2020春|S班(福州大學)
這個做業要求在哪裏	做業要求
結對學號	221701419 & 221701410
這個做業的目標	《構建之法》3~8章學習；鍛鍊與同伴合做的能力；掌握產品原型的製做
做業正文	做業正文
其餘參考文獻	Axhub Charts

<br />

1. 原型模型地址

https://axhub.im/ax9/4b15b5eb7cf6b474

<br />

2. NABCD模型分析

2.1 N（Need，需求）

① 用戶提供需求

有一家統計網站天天都會提供一個對應的日誌文本，記錄國內各省前一天的感染狀況，上次的疫情統計結果只是經過文字來顯示，不夠直觀、具體，對用戶不夠友好，本次咱們但願能夠經過地圖的形式來直觀顯示疫情的大體分佈狀況，還能夠查看具體省份的疫情統計狀況。地圖需知足如下需求： 在全國地圖上使用不一樣的顏色表明大概確診人數區間

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

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

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

② 基礎需求整理

1. 首頁展現全國感染患者人數、疑似患者人數、治癒人數、死亡人數和全國疫情地圖。
2. 疫情地圖用顏色深淺表示人數多少，可選擇顯示現存確診或累計確診。
3. 鼠標移至省份能高亮顯示，且在旁邊展現該省確診人數；點擊省份可進入省份詳情頁。
4. 省份詳情頁展現：該省份對應的感染患者人數、疑似患者人數、治癒人數、死亡人數；該省份到目前爲止的新增確診趨勢、新增疑似趨勢、治癒趨勢和死亡趨勢。

③ 拓展需求

1. 首頁展現全國新增確診趨勢、新增疑似趨勢、治癒趨勢、死亡趨勢、治癒率趨勢和死亡率趨勢，多種趨勢讓用戶全面瞭解疫情。
2. 首頁展現全國各省疫情數據表格，相比圖表更快得到具體數值。
3. 快捷分享，可分享全國數據或省份數據，方便用戶分享信息。
4. 所在地數據查詢，獲取用戶定位，方便查詢所在地信息。

2.2 A（Approach，作法）

• 實現方法：Web做爲前端展現，先後端分離的架構。後端程序處理數據，前端調用後端接口實現數據可視化展現。

2.3 B（Benefit，好處）

• 採用Web網頁發佈的形式，訪問更加輕快，可多平臺訪問
• 相比於其餘內嵌在app中的疫情統計程序，網頁形式更易於分享和傳播
• 既提供數據可視化的疫情地圖，也提供各省份的具體數據表格，多方位知足用戶需求
• 提供多樣式多種類的折線圖，可直觀感覺數據變化；多種數據（如治癒率、死亡率等）爲用戶提供更多信息。
• 頁面清爽，觀感優秀

2.4 C（Competition，競爭）

① 優勢

• 採用Web網頁發佈的形式，訪問更加輕快，相比於其餘內嵌在app中的疫情統計產品，更易於分享和傳播
• 功能直觀，與其餘產品相比避免了其餘冗餘信息（如各類推廣）
• 可獲取用戶定位，從而爲用戶推送更須要的數據信息

② 缺點

• 市場上同類產品繁多，且多集成在各大App中，具備天生用戶優點，本產品宣傳渠道不廣，難以宣傳
• 市場上產品大多依附原有app從而集成多種功能，本項目功能略顯單薄

2.5 D（Delivery，推廣）

① 推廣平臺

• 微信、QQ：做爲最經常使用的兩個通信工具，均具備操做簡便、易於分享的特色，可經過公衆號、朋友圈、羣聊、空間進行宣傳
• 抖音等短視頻平臺：做爲目前最火的新媒體營銷手段之一，抖音等短視頻平臺有着大量用戶，且具備視頻宣傳更生動的特色

② 推廣策略

• 當下中國疫情牽動人心，經過切實反映疫情數據、直觀瞭解疫情狀況等宣傳點進行宣傳

<br />

3. 困難解決

3.1 困難描述

1.疫情地圖的造成與高亮 初次使用原型模型工具，對於如何生成可交互的全國地圖和高亮不瞭解。 2.獲取用戶所在位置的實現 此前未寫過相關功能，不知道如何實現，所以對是否加入原型產生問題。

3.2 困難解決

1.疫情地圖的造成與高亮 在查詢相關資料與實踐後，發現能夠用導入svg圖片並對各省份圖片添加交互實現可交互的疫情地圖。 2.獲取用戶所在位置的實現 在初步進行了解後，發現能夠調用瀏覽器地理位置(Geolocation)API來實現。具體實現過程將在後期開發中進行研究。

3.3 體會與收穫

在初次使用原型設計工具的過程當中遇到了不少困難，但最後都經過查詢相關資料和動手實踐後克服了，在這個過程當中，我也逐漸熟悉了Axure rp9的使用。不少Axure中沒有的功能，其實能夠經過引入第三方元件來解決，善用第三方元件也能大大加快用Axure進行原型模型設計的速度。在需求分析中，由於同時承擔需求分析和具體開發雙重責任，因此不少時候會考慮具體實現的難度，好比獲取用戶位置這一以前未接觸過的功能。但事實上，大多數的需求都有其解決方法，在需求分析時既要兼顧後期開發需求，也要大膽提出合理需求，從而實現更好的產品。

<br />

4. 原型設計

4.1 原型地址

https://axhub.im/ax9/4b15b5eb7cf6b474

4.2 原型開發工具

Axure rp9

4.3 原型展現

• 顏色的深淺表示疫情的嚴重程度，能夠直觀瞭解高危區域

• 鼠標移到每一個省份高亮顯示

鼠標懸停在省份上方時，該省份將以橘色高亮顯示，有現存確診人數提示，添加陰影體現懸浮效果，同時適當放大省份名稱

• 點擊鼠標會顯示該省具體疫情狀況

點擊某個省份跳轉到該省份詳細數據的頁面，可以查看該省的感染人數、疑似人數、累計治癒、累計死亡、新增確診/新增疑似、累計治癒/累計死亡

• 可以展現現有的狀況以及累計的狀況

鼠標點擊下方現存確診/累計確診，切換顯示相應的可視化地圖

• 顯示某省份對應的感染患者人數、疑似患者人數、治癒人數、死亡人數

• 該省份到目前爲止的新增確診趨勢、新增疑似趨勢、治癒趨勢和死亡趨勢

點擊某條曲線的名稱來顯示/隱藏相應曲線

• 全國範圍的折線圖

點擊趨勢圖下的三個按鈕切換顯示不一樣的折線圖

• 全國疫情數據表格

• 首頁導航

• 頁面跳轉

• 快捷分享，可分享全國數據或省份數據，方便用戶分享信息

<br />

5. 效能分析與PSP表格

5.1 效能分析

在本次結對合做中，咱們採用了分工製做不一樣板塊的方法合做，各自開發時的效率較高；但因爲分開製做，在項目進行合併時的效率較低，從此能夠考慮使用在線項目平臺來實現分工合做。具體編碼還沒有實現，代碼的效能分析暫沒法提供。

5.2 PSP表格

PSP2.1	Personal Software Process Stages	預估耗時（min）	實際耗時（min）
Planning	計劃	30	30
Estimate	估計這個任務須要多少時間	30	30
Development	開發	410	385
Analysis	需求分析 (包括學習新技術)	90	70
Design Spec	生成設計文檔	30	30
Design Review	設計複審	10	5
Coding Standard	代碼規範	-	-
Design	具體設計	60	50
Coding	具體編碼（原型製做）	180	210
Code Review	代碼複審	20	10
Test	測試（自我測試，修改原型，提交修改）	20	10
Reporting	報告	110	140
Test Report	測試報告	10	10
Size Measurement	計算工做量	10	10
Postmortem & Process Improvement Plan	過後總結, 並提出過程改進計劃	90	120
total	合計	550	555

<br />

6. 結對過程

6.1 結對過程

6.2 分工明細

學號	NABCD需求分析	原型製做	文案編寫
221701419	30％	70％	50％
221701410	70％	30％	50％

隊友博文：https://www.cnblogs.com/hhhqqq/p/12367720.html

6.2 合做印記

<img src="https://images.cnblogs.com/cnblogs_com/hhhqqq/1654796/o_2002251545295.png" width="70%" /><br />

<img src="https://images.cnblogs.com/cnblogs_com/hhhqqq/1654796/o_2002251545387.png" width="70%" /><br />

<br />

7. 博客PDF

結對做業（1）--疫情統計可視化（原型設計）.zip

<br />