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

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

---

這個做業屬於哪一個課程	2020春S班（福州大學）
這個做業要求在哪裏	結對第一次—疫情統計可視化（原型設計）
結對學號	22170140六、221701407
這個做業的目標	某次疫情統計可視化（原型設計）
做業正文	結對第一次-某次疫情統計可視化（原型設計）
其餘參考文獻

1、疫情統計可視化原型

疫情統計可視化原型

• 導航欄部分

<img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228145026%E5%AF%BC%E8%88%AA%E6%A0%8F%E9%83%A8%E5%88%86.PNG" width=20%/> * 全國數據統計 <img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228145213%E7%BB%9F%E8%AE%A1%E6%95%B0%E6%8D%AE.PNG" width=50%/> * 疫情地圖 <img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228145302%E7%96%AB%E6%83%85%E5%9C%B0%E5%9B%BE.png" width=60%/> * 省份詳細信息頁面 <img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228145426%E7%9C%81%E4%BB%BD%E5%85%B7%E4%BD%93%E4%BF%A1%E6%81%AF%E9%A1%B5%E9%9D%A2.PNG" width=40%/> * 患者求助專區 <img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228145639%E6%82%A3%E8%80%85%E6%B1%82%E5%8A%A9%E4%B8%93%E5%8C%BA.PNG" width=30%/> * 疫情實時資訊 <img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228145716%E7%96%AB%E6%83%85%E5%AE%9E%E6%97%B6%E8%B5%84%E8%AE%AF.PNG" width=30%/> * 全國疫情趨勢圖 <img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228145742%E5%85%A8%E5%9B%BD%E7%96%AB%E6%83%85%E8%B6%8B%E5%8A%BF%E5%9B%BE.PNG" width=40%/> * 表格數據統計 <img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228145810%E8%A1%A8%E6%A0%BC%E6%95%B0%E6%8D%AE%E7%BB%9F%E8%AE%A1.PNG" width=40%/>

2、NABCD模型

N（Need，需求）

一、客戶基本需求

• 整體需求

將疫情數據可視化。給定國內各省前一天的感染狀況的日誌文本，將其不夠直觀的文字形式的數據，轉化爲直觀、具體且用戶友好的地圖形式，來直觀顯示疫情的大體分佈狀況，而且能夠查看具體省份的疫情統計狀況。

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

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

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

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

二、需求拓展

• 患者求助專區，收集沒法獲得收治患者的相關信息，向相關部門報告。確保患者可以及時隔離救治。
• 疫情實時資訊，在頁面提供疫情相關報告，使廣大羣衆能更及時更系統地瞭解疫情相關信息。

A（Approach，作法）

功能模塊	詳細功能
全國疫情數據統計	1.統計全國疫情整體數據，包括現存確診、確診重症、疑似，累計確診、死亡、治癒病例的數據化展現。<br/>2.各部分數據每日根據給定的日誌文本進行更新，且各部分數據相應展現相對前一天的數據變化狀況。
疫情可視化地圖	將不夠直觀的疫情數據經過直觀友好的地圖形式直觀展示。<br/>1.對各省份根據確診人數的數量用顏色去區分開來，可直觀瞭解疫情高危區域。<br/>2.鼠標移到每一個省可以高亮顯示並展現省份疫情簡略信息。<br/>3.點擊每一個省份進入到省份詳細疫情狀況頁面。該頁面展現對應省的具體疫情信息，並將疫情變化數據以曲線圖形式展現。
全國疫情趨勢圖	1.將全國疫情數據以曲線圖的形式展現出來。<br/>2.經過點擊曲線圖下的按鈕，可以觀察不一樣類別病例數據的曲線趨勢圖。
各省疫情數據表	將全國各省的數據以表格的形式展示，每日更新並根據確診病例數進行排序。
患者求助專區	爲沒法獲得及時收治的患者提供信息反映渠道，使病患可以獲得及時救治。
疫情實時資訊	提供疫情信息相關報告，使用戶可以及時系統地瞭解到疫情最新消息。

B（Benifit，好處）

• 咱們的網站集全國疫情感染分佈圖、全國疫情感染趨勢圖、疫情實時新聞、疫情實時數據和疫情信息申報這五個主要功能於一體，用戶無需登陸、無需註冊、更加無需來回切換許多單一功能的軟件來獲取信息，省去了許多麻煩。
• 咱們的界面清晰明瞭，按鈕功能明確，而且加入了導航欄的功能，能夠一鍵定位到用戶想要了解的信息。
• 咱們經過繪製不一樣顏色的深淺來反應各個省份關於疫情的嚴重性，最大程度向用戶直觀地展現數據，咱們還包含了趨勢圖和數據表格，不一樣方面展現信息。

C（Competitors，競爭）

• 咱們和競爭者一樣都實現的功能以下

• 全國疫情狀況分佈圖
• 全國疫情狀況趨勢圖
• 各省疫情狀況詳細趨勢圖
• 各省疫情彙總數據
• 疫情實時新聞

• 優點在於

• 界面簡單、可以直觀地反應數據
• 數據有不一樣的展現方式，多層次地反應數據
• 功能集合於一體，減小了不一樣產品之間帶來信息重疊的可能
• 用戶操做便捷，可以實現一鍵獲取主要信息
• 提供用戶反饋信息的渠道，適當地給予幫助

• 劣勢在於

• 市面上功能相似的產品不止一個，存在必定的競爭
• 因爲須要獲取並彙總信息，因此存在必定的數據滯後，沒有新聞報紙更新快
• 產品針對性強，熱度會隨着疫情的逐漸結束而消失

D（Delivery，推廣）

• 經過各類社交軟件（例如QQ、微信、微博）進行轉發，增長瀏覽量
• 大學生羣體傳播信息速度快，要把握住校園這一特殊的平臺來推廣產品
• 加快軟件開發的成熟度，上架各大應用商城APP進行推廣

3、困難解決

一、困難描述

• 困難一：剛開始咱們選擇的原型製做工具是墨刀，緣由很簡單，墨刀簡單易上手。然而，第一步就被打垮了。百度了一下墨刀怎麼實現地圖高亮，發現要「對每一個省份複製一層，在上邊的那層鋼筆摳圖，按各個地區的邊界線摳出來單獨調顏色亮度。」工做量龐大······
• 困難二：後來咱們改道Axure，又被工做模式束縛了手腳。本打算使用Axure中的團隊項目，實現同步設計提升效率。初步嘗試時發現Axure是外國軟件，團隊模式設計時進行簽入、簽出、獲取雲端變動登操做時會耗費大量時間。
• 困難三：Axure中熱區形狀固定，而每一個省份的形狀大小各異，致使熱區很難徹底覆蓋整個省份。
• 困難四：中國省份多，每一個省份的熱區都需添加對應的交互，而且交互包含連接到省份詳細信息頁面、實現高亮和顯示省份確診信息數據等，工做量大。

二、解決嘗試

• 解決一：因爲墨刀對實現地圖高亮的操做難度相對較大，因此咱們最終選擇了Axure。由於歷來沒接觸過Axure，因此各自花費了2~3個小時對Axure裏面的各個功能進行了學習和實驗，方便後續的操做。咱們下載了svg地圖添加到項目中，再給每一個省份添加熱區和對應的交互，終於解決了高亮的問題。

<img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228130917%E5%9C%B0%E5%9B%BE.png" width=50%/> * 解決二：團隊項目的模式並無像預期般實用，後來轉念一想，能夠建立我的項目，利用QQ進行傳輸反而效率更高。因爲不能一塊兒對項目進行實時操做，因此咱們在原型的設計上進行了分工，一我的負責對地圖熱區和各類交互的添加，另外一我的負責趨勢圖、數據表和總體狀態的部署，解決了問題。 * 解決三：Axure中，熱區的形狀只能是矩形，因此只能經過添加不少個不一樣形狀的矩形熱區來儘量地覆蓋每一個省的位置。因爲矩形形狀的限制，沒辦法很是完美地契合各個省份的分界線，可是咱們儘量地把圖片放大，實現熱區的覆蓋。 <img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228130743%E7%83%AD%E5%8C%BA.PNG" width=50%/> * 解決四：這個困難的惟一解決辦法就是老老實實坐在電腦前一波操做，而後腰痠背痛一成天~

三、是否解決

<input name="checkbox" type="checkbox" value="checkbox" checked="checked" />地圖高亮的解決 <input name="checkbox" type="checkbox" value="checkbox" checked="checked" />合做時的工做模式 <input name="checkbox" type="checkbox" value="checkbox" checked="checked" />熱區不能徹底覆蓋的問題 <input name="checkbox" type="checkbox" value="checkbox" checked="checked" />工做量大

四、有何收穫

• 張鈺婷：以前沒有接觸過原型設計，一開始看到題目的時候是很懵逼的，覺得又要代碼實現什麼東西。後來着手研究Axure時，發現還挺有意思。接觸到新的事物，感受學習都有了動力。和隊友研究出做業裏的一個個原型設計要求時，還有些興奮hhhh。因爲隊友就是舍友，在以前也有過一塊兒結對作大做業，因此在本次做業完成的過程當中，都無比地默契和愉悅~
• 呂宇昕：首先最大的收穫固然是多get了一個軟件技能啦！沒有嘗試前覺得原型設計很難，和結對舍友長吁短嘆不想面對，結果一步步地學習以後發現原來是這麼有趣。從剛開始的一塊白板到實現豐富多彩的功能，成就感爆棚~除此以外，還了解了NABCD模型，對產品分析提供了很大的幫助~若是下次還有原型設計我必定可以駕輕就熟啦！另外最重要的是，感謝隊友（也就是舍友），合做很是愉快，溝通毫無障礙~

4、合做

一、結對過程

神仙舍友出征 <img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_2002281515581.jpg" width=20%/>

二、快樂學習

話太多了，隨便截一點嘿嘿嘿！合做愉快！

<div> <img src="https://images.cnblogs.com/cnblogs_com/zytblog/1657391/o_2002281408353.jpg" width=20%/><img src="https://images.cnblogs.com/cnblogs_com/zytblog/1657391/o_2002281408444.jpg" width=20%/><img src="https://images.cnblogs.com/cnblogs_com/zytblog/1657391/o_2002281408525.jpg" width=20%/><img src="https://images.cnblogs.com/cnblogs_com/zytblog/1657391/o_2002281409006.jpg" width=20%/><img src="https://images.cnblogs.com/cnblogs_com/zytblog/1657391/o_2002281409097.jpg" width=20%/> </div> ## 5、原型工具 Axure RP Axure RP是一款專業的快速原型設計工具。Axure RP是一個專業的快速原型設計工具，讓負責定義需求和規格、設計功能和界面的專家可以快速建立應用軟件或Web網站的線框圖、流程圖、原型和規格說明文檔。做爲專業的原型設計工具，它能快速、高效的建立原型，同時支持多人協做設計和版本控制管理。

6、PSP表格

PSP2.1	Personal Software Process Stages	預估耗時（分鐘）	實際耗時（分鐘）
Planning	計劃	30	30
Estimate	估計這個任務須要多少時間	30	30
Development	開發	1975	1740
Analysis	需求分析 (包括學習新技術)	240	200
Design Spec	生成設計文檔	120	60
Design Review	設計複審	30	40
Coding Standard	代碼規範 (爲目前的開發制定合適的規範)	45	40
Design	具體設計	240	200
Coding	具體編碼	1000	960
Code Review	代碼複審	180	120
Test	測試（自我測試，修改代碼，提交修改）	120	120
Reporting	報告	130	160
Test Report	測試報告	90	120
Size Measurement	計算工做量	10	5
Postmortem & Process Improvement Plan	過後總結, 並提出過程改進計劃	30	35
合計		2135	1930

7、博客內容PDF

博客內容PDF

8、寫在最後

2020年，不止有點難。新型肺炎的爆發，使得本該闔家歡樂的春節，變得人人自危。疫情爆發後，相信不少人都和你我同樣，天天不停，被動或主動地刷着諮詢。在冷冰冰的上升的確診字數裏，在一則又一則讓人寒心的壞消息裏，咱們總能看到暖心的新聞。「請再等等。等春天的到來，等地鐵裏的人多到來不及上這一班，等大排檔裏吵到必須扯着嗓子說話，等去武大看櫻花的人比花還多······」 最後，分享一句話：待凜冬散去，雪融草原，相信必定有新的相逢將溫暖延續！

原文出處：https://www.cnblogs.com/lyxblogaxi/p/12380761.html