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

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

這個做業屬於哪一個課程	2020春|S班(福州大學)
這個做業要求在哪裏	做業要求
結對學號	221701424 & 221701427
這個做業的目標	《構建之法》3~8章學習；學習結對合做；製做軟件原型
做業正文	做業正文
其餘參考文獻	墨刀官方教程

 

 

---

1. 原型地址

　　疫情地圖

---

 

2. NABCD模型分析

2.1 N(Need 需求）

• 用戶需求

　　　　可以讀取統計網站所提供的國內各省感染狀況的日誌文本的數據，並將數據作可視化處理，經過地圖的形式來直觀顯示疫情的大體分佈狀況，經過顏色的深淺來表示疫情的嚴重程度，還能夠查看具體省份的疫情統計狀況。

• 需求細分

1. 　　　　首頁展現全國現有確診、現有疑似、現有重症、累計確診、累計治癒、累計死亡等數據和全國疫情地圖；
2. 　　　　顏色深淺能夠表示疫情的嚴重程度；
3. 　　　　鼠標移到每一個省份會高亮顯示；
4. 　　　　點擊某個省份能夠顯示該省疫情的具體狀況，包括該省份對應的現有確診、累計確診、累計治癒、累計死亡等數據；
5. 　　　　點擊某個省份能夠顯示該省疫情新增確診趨勢、累計確診趨勢、累計治癒/死亡趨勢

• 擴展需求

1. 　　首頁疫情防控宣傳圖展現功能，傳遞團結抗疫，同舟共濟的正能量；
2. 　　左側導航欄，方便用戶快速上手，獲取信息；
3. 　　疫情新聞，獲取有關疫情的一手資訊；
4. 　　國內當前疫情統計報告功能，對國內當前疫情狀況有進一步的分析認識；

2.2 A（Approach 作法）

　　使用web做爲前端，先後端分離。前端調用後端數據接口進行數據可視化展現，後端負責數據處理，對web作手機端頁面自適應處理，方便用戶在手機上實時查看。

2.3 B（benefit 好處）

• 　　採用web網頁進行發佈，並可對多平臺進行自適應，輕量便捷，易於使用與分享；
• 　　提供疫情地圖，數據可視化，直觀形象，方便用戶瞭解全國疫情狀況，獲取相關信息；
• 　　提供多種趨勢統計圖，直觀體現各省份當前疫情變化趨勢；
• 　　界面清晰整潔，一目瞭然；

2.4 C（Competition，競爭）

　　相比其它同類產品，優點在於：

• 　　使用web網頁發佈，相比其它同類功能app疫情統計產品，輕量便捷，訪問方便，易於使用和分享；
• 　　界面簡潔，基本功能齊全，相比其它產品沒有冗餘的功能信息，針對用戶基本需求而設計；
• 　　各種數據信息、功能操做直觀展現，一目瞭然，提供良好的人機交互體驗；

　　劣勢在於：

• 　　市場上相同定位產品繁多，競爭較激烈，一些產品依託於門戶網站、手機APP等，擁有自然的用戶基礎，相比之下本產品做爲一個新生產品，推廣反而存在自然劣勢；
• 　　因爲數據依託於統計網站的日誌文本，信息獲取和更新存在必定的滯後性；
• 　　本產品針對疫情開發，相比之下產品生命週期較短，功能較單薄；

 

2.5 D（Delivery 推廣）

• 　　經過各種流行社交軟件（QQ、微信、微博）進行轉發推廣；
• 　　經過同窗圈、朋友圈這類易於接觸和傳播的圈子逐漸向圈內外傳播；
• 　　經過製做視頻，上傳到各種視頻門戶網站來爭取更大的曝光度；

---

 

三、原型設計說明

3.1 原型開發工具

　　墨刀

　　墨刀是一款在線原型設計與協同工具，藉助墨刀，產品經理、設計師、開發、銷售、運營及創業者等用戶羣體，可以搭建爲產品原型，演示項目效果。墨刀同時也是協做平臺，項目成員能夠協做編輯、審閱 ，不論是產品想法展現，仍是向客戶收集產品反饋，向投資人進行Demo展現，或是在團隊內部協做溝通、項目管理 。

　　優勢：1.在線服務2.雲存儲3.雲共享4.足夠輕量5.現成的素材庫

　　缺點：1.沒法回滾2.製做大型高保真原型吃力3.組件少4.功能少5.易崩潰

3.2 原型功能展現 

　　疫情防控宣傳圖展現欄

　　

 

 

　　全國疫情數據展現

　　

　　省內各縣市詳細疫情統計數據

　　

　　地圖顏色深淺表示各省份疫情嚴重狀況

　　

　　現有確診和累計確診統計

　　

 

 

 　　省份高亮與詳情頁面跳轉

　　

　　各種趨勢折線統計圖

　　

　　導航欄

　　

　　疫情日報

　　

　　疫情新聞

　　

 

 

---

4. PSP表格

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

 

　

---

 

5. 遇到的困難與收穫

1困難描述：

a.不知道什麼是原型，不熟悉原型設計工具

b.不知道選擇哪種原型設計工具

c.剛上手設計工具時，不知如何添加交互效果，如何切換狀態

d.如何添加地圖，如何設置地圖部分區域高亮

2.解決方法

a.知乎、博客蒐集資料

b.聽大佬推薦新手使用墨刀好一點，就選擇了墨刀

c.上b站學習墨刀速成

d.學習墨刀的使用時，越學越以爲墨刀是有極限的，好比沒有axure那麼多的開源組件和更多的功能選項，致使如何整出一個地圖，以及設置地圖高亮就成了一個很麻煩問題。因此我不用墨刀了！纔怪，學都學了叫我放棄？果斷打開ps，扣就完事了，本身扣完本身上色，還挺好看的。因爲過於繁瑣，最終只作了一個省的，意思傳達到了就行。這就是超越極限的感受嗎？

3.是否解決

a√

b√

c√

d√

4.有何收穫

棗子：首次接觸了原型設計，瞭解了產品原型的概念是一種較爲立體有效的溝通方式，其最終呈現效果分爲「草圖」、「低保真」、「高保真」已經更加複雜的交互原型，所以原型設計一般無需用到後端數據。掌握了墨刀的使用方法，可高效製做產品原型。體驗告終對合做的效率。

不吃：認真學習了構建之法，對NABCD模型有了必定的瞭解。之前打代碼的時候常常都是一我的作，思路想法有限。此次結對合做，經過兩我的的溝通交流，大大擴展了思路，雙方都有對方所沒有想到的獨特想法，充滿驚喜，有了一種1+1>2的感受。

---

 

6.結對過程

 

 

 

 

 

 

---

 7. 博客pdf

 pdf下載