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

這個做業屬於哪一個課程	<center>https://edu.cnblogs.com/campus/fzu/2020SpringW/</center>
這個做業要求在哪裏	<center>https://edu.cnblogs.com/campus/fzu/2020SpringW/homework/10400</center>
結對學號	<center>221701429 221701438</center>
這個做業的目標	<center>疫情統計可視化的原型</center>
做業正文	<center>....</center>
其餘參考文獻	<center>....</center>

#NABCD模型 N（Need，需求）：

目前新型冠狀病毒肺炎疫情到了很是關鍵的時期，你們很是關注疫情，由此咱們作了疫情統計程序，將各省的疫情收集而後集中顯示，可是上次的疫情統計結果只是經過文字來顯示，不夠直觀、具體，對用戶不夠友好，故新的可視化的疫情統計程序有很大的需求，值得一作。

A（Approach，作法）：

經過地圖的形式來直觀顯示疫情的大體分佈狀況，還能夠查看具體省份的疫情統計狀況。 在地圖上方顯示全國數據，在各指標下方小字顯示對比昨日新增人數。

• 在全國地圖上使用不一樣的顏色表明大概確診人數區間 * 顏色的深淺表示疫情的嚴重程度，能夠直觀瞭解高危區域； * 提供現有確診和累計確診的兩份地圖； * 鼠標移到每一個省份會高亮顯示； * 點擊鼠標會顯示該省具體疫情狀況。

• 點擊某個省份顯示該省疫情的具體狀況 * 顯示該省份對應的感染患者人數、疑似患者人數、治癒人數、死亡人數,在各指標下面小字顯示對比昨日新增的人數； * 該省份到目前爲止的新增確診趨勢、新增疑似趨勢、治癒趨勢和死亡趨勢。

B(Benefit，好處)：

• 以地圖的方式體現全國疫情，更加直觀；
• 用顏色深淺的方式表示各省份的疫情嚴重程度，一眼就能對全國的疫情有個大概的瞭解；
• 用戶通常比較關心所在省份的疫情，該程序能夠選擇想要的省份查看具體狀況，符合用戶需求；
• 提供對比昨日的數據，能夠清楚的瞭解疫情的走向，也是用戶關心的問題；
• 若是單看昨日數據還不夠清晰，咱們提供了具體省份的各指標人數的曲線圖，很是直觀；

C（Competitors，競爭）：

優點：後發優點的「免費搭乘」效應，能夠站在前人的肩膀上看問題：   1.對現有的疫情程序的使用狀況進行分析，吸收前人的優勢，摒棄用戶體驗很差的部分，能夠節約大量時間成本，這是咱們的優點之一；   2.在位者慣性：因爲沉沒成本的存在，組織僵化，不肯引進新產品或改進產品，不肯改革，然後動者做爲一個追趕者，時刻都想抓住機遇從而取代先動者的地位，於是能夠進行大量的革新，從而在與先動者的競爭中佔有優點。 劣勢：   另外一方面，同期也有不少涌入的競爭者（同窗），因爲兩人少有團隊合做的經驗，在技術水平、兩人組隊的配合等方面咱們可能不佔優點。

D（Delivery，推廣）：

身爲大學生有自然的推廣優點：能夠推薦給身邊的同窗使用，若是好用讓他們再推薦給其餘人，作到免費宣傳；若有必要，還能夠當街推廣的形式宣傳咱們的程序；當今是互聯網時代，更能夠經過QQ空間、微信朋友圈、微博等等形式推廣，好友多則閱讀量大，更容易產生用戶，且該方法成本低、收益高。

##採用的原型開發工具

原型工具：Axure RP

原型項目地址

(加載可能須要點時間...)

##結隊過程 首先咱們閱讀了《構建之法》的第三章和第八章，經過NABCD模型進行研究設計。 以後，咱們選定了原型設計工具。 開始設計時咱們有着許多的疑惑，在接下來的學習中慢慢解開， 經歷了幾版的原型設計，最終得出告終果。 <img src="https://images.cnblogs.com/cnblogs_com/hxd1017/1655208/o_200226022821%E7%BB%93%E5%AF%B9%E8%BF%87%E7%A8%8B.png" width="600" height="500"/> <img src="https://images.cnblogs.com/cnblogs_com/hxd1017/1655208/o_200226022949%E7%BB%93%E5%AF%B9%E8%BF%87%E7%A8%8B2.png" width="600" height="500"/>

#設計過程

##困難和解決

####困難描述 看完題目咱們就有了疑惑:

1.如何在原型中顯示選定省份高亮？

2.如何讓顏色深度對應感染的人數？

3.曲線圖要如何實現？

4.原型要作到什麼程度？

5.原型要如何在博客中展現？

####解決嘗試 1&2.找到了阿里雲的接口獲取全國各省份的svg，而後部署多個熱區實現了全國省份高亮顯示。 <img src="https://images.cnblogs.com/cnblogs_com/hxd1017/1655208/o_200226033212%E7%96%AB%E6%83%85%E5%9C%B0%E5%9B%BE.png" width="800" height="550"/> 查看原圖

3.最後是之外部作好而後導入axure的形式來完成折線圖的設計，效果沒有那麼好但勉強能用。 <img src="https://images.cnblogs.com/cnblogs_com/hxd1017/1655208/o_200226033221%E7%96%AB%E6%83%85%E6%8A%98%E7%BA%BF%E5%9B%BE.png" width="800" height="450"/> 查看原圖

4.考慮到下次做業應該要實現此次的原型，鑑於咱們的能力有限，因此把一些比較難實現的（對於咱們的實力來講）功能都砍掉了，目標就是精簡，快速實現原型。 因爲時間限制，經過這幾天裏的學習仍然對Axure RP這軟件的使用不夠熟練，錯誤估計了作原型所須要的時間，致使有些有始無終。 基礎需求基本在原型中體現出來了，趨勢圖因爲使用的是外部的JSure，因此沒法在原型中實現要求的鼠標移到對應日期上顯示當天的確診人數（這個在下次做業儘可能實現），以及爲圖方便在原型的地圖中的確診數據都是以***來代替確切數據。上頭的數據部分用的是寫原型完成時當天的數據，如圖： <img src="https://images.cnblogs.com/cnblogs_com/hxd1017/1655208/o_200226033203%E7%96%AB%E6%83%85%E6%95%B0%E6%8D%AE%E9%83%A8%E5%88%86.png" width="700" height="350"/> 查看原圖 可能我倆的審美都不太行，因此可能有些不那麼美觀，請見諒。

5.思來想去，只能以發佈到雲端而後貼連接的方式來展現原型最爲方便...

####是否解決

• 1&2.解決

• 3.解決

• 4.解決

• 5.解決

####有何收穫  首先，是對原型模型設計工具（Axure RP，墨刀）的使用逐漸熟練，基礎功能大體會用。剛開始用Axure的時候不太會，在與隊友的不斷討論中作了又刪，刪了又作，後來經過同窗的得知，用了一個模板，在它的基礎上改，在這過程當中不知不覺就學會了，組建也都熟悉了，在討論中慢慢把原型作了出來。

 其次，是對原型開發從無到有，有了必定的瞭解。

 最後，是從此次原型設計過程當中的體會，俗話說萬事開頭難，剛開始作這個做業的時候因爲沒有使用過相關的工具和參加過相似的項目，得邊學邊作，顯得有些手足無措。

##效能分析與PSP表格

**效能分析：**因爲此次是原型設計，沒有代碼部分，因此效能分析暫沒法估計......

PSP表格：

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

##心得體會

 體會很深的一點是NABCD模型，學習了NABCD的分析原則，這是一個很成熟的商業軟件分析模式，Need考慮到用戶的需求，Approach從用戶的需求出發提出咱們的解決方案，Benefit也是從用戶的角度出發看看到底解決了用戶的什麼痛點，Competitors分析了軟件的競爭力所在，Delivery要求考慮後期的推廣；NABCD模式即考慮到了用戶的需求，又考慮到了軟件自己的競爭力以及市場推廣，把這五項進行透徹的分析後很容易看出咱們所設計的軟件優點在哪，劣勢在哪，有助於咱們進行完善軟件的設計。

 固然，最深入的體會就是：此次做業雖然不涉及編碼，但依舊很累，要是再多幾天就行了...

##附件： PDF下載連接