| 2020春W班 (福州大學) | |
|---|---|
| 這個作業要求在哪里 | 結對第一次—疫情統計可視化（原型設計） |
| 結對學號 | 091700403 021700915 |
| 這個作業的目標 | 結對合作，完成疫情統計可視化，向客戶推銷 |
| 作業正文 | 結對第一次—某次疫情統計可視化（原型設計) |
| 其他參考文獻 | 墨刀教程 |
一、遇到的困難
1.困難及解決嘗試
-
困難
在接到此次作業的時候，我們是比較迷茫的。主要是對原型設計這一塊比較陌生，因為之前要做一個軟件或者系統通常都是直接在心里構想，各種界面應該是怎么樣的，然后直接動手開始做。而這次作業就是進行原型設計，所以一時間不知道該如何入手，因為不知道原型設計具體是什么，該設計成什么樣，應該如何設計。
經過查閱質料以及參考網絡上面的原型設計資料之后，我們初步了解了原型設計是什么。我們得出了本次原型設計任務的主要難點在於：
-
如何導入地圖至原型
-
如何實現鼠標懸浮地圖高亮
-
如何實現鼠標旋風折線統計圖顯示具體情況
尤其是第二點，如何實現鼠標懸浮地圖高亮。在閱讀墨刀教程之后，我們對地圖的導入有了初步的了解。知道如何導入地圖。我們導入了使用了騰訊位置服務導入了地圖。
然而新的問題又出現了，該如何使某個省份高亮顯示呢？如何在對應位置上建立事件監聽器？我們又嘗試的尋找很多資料。然而，我們並沒有找到想要的答案，所以我們只能放棄這條路，使用其他方法來完成此次疫情統計的原型設計。最主要的就是省份是規則的，如何才能把每個省份分開，然后高亮顯示？
-
-
解決嘗試
在設計的過程中，正如上面所提到的，一開始是想用墨刀中的組件直接上手地圖的繪制，結果找了半天，查了許多資料，並沒有合適的組件，並且我們還嘗試把真正的地圖導進去，但發現並不符合需求。所以我們直接使用圖片，湖北地區高亮的圖片和沒有高亮圖片來制作兩個頁面。在湖北省上面添加事件監聽器來獲取鼠標是否懸浮先湖北省上方。因為是原型設計，主要是讓客戶知道你明白他的需求，所以只設計了湖北省懸浮高亮顯示，其他省份也是一樣的。這樣就實現了高亮效果。至於折線統計圖的懸浮顯示詳細數據，則采用動態組件來完成。
2.收獲
-
091700403
通過此次的結對協作，我更加懂得了如何去如何去與隊友合作去解決問題，對團隊合作有了更一步的理解，能更好地與隊友進行溝通，學會了如何將自己的想法分享給隊友一起討論解決。 通過此次得作業，我覺得一個人的自學能力很重要。要學會去如何解決問題，而不是去逃避。 此次另我最為感慨的是折線圖的數據體現部分。本來我想的是用頁面的轉狀態變化去做，可是如果就此而做，工作量就會劇增。隊友想到的是用組件變化去實現，極大地減少了工作量。所以說團隊合作很重要。因為別人總會想到自己想不到的點子。
-
021700915
通過此次編程實踐，我收獲了很多。 首先是要注重團隊合作。現在一個軟件或者系統，其工程量不是一個人能夠完成的，往往需要數十人甚至幾百人來完成。因此在團隊開發的項目中要養成良好的編程風格，注重溝通以及任務的分配。良好的編程風格有利於提升效率。溝通可以使得項目進展更快，減少誤解。合理的分配任務可以使得每個成員從事自己擅長的工作，也能夠提升開發效率。 其次是善於利用互聯網學習。即使一個人水平再高，也總會有知識盲區。就比如說這次作業中的博客原型制作就是我從未接觸過的。但是通過互聯網搜索教程使我了解了如何簡單的制作博客原型。 最后是要善於思考，尋找好的解題方法。本次作業中我我認為一個最大的難點就是地圖。但是我們團隊到目前為止還沒有找到更合適的方法來解決這個問題。所以引入了圖片，導致工作量大幅增加。所以要善於思考，尋找好的解題方法，會使工作量大幅下降。
二、NABCD模型
1. N(NEED、需求)
有一家統計網站每天都會提供一個對應的日志文本，記錄國內各省前一天的感染情況，希望可以通過地圖的形式來直觀顯示疫情的大致分布情況，還可以查看具體省份的疫情統計情況。
-
在全國地圖上使用不同的顏色代表大概確診人數區間 顏色的深淺表示疫情的嚴重程度，可以直觀了解高危區域； 鼠標移到每個省份會高亮顯示； 點擊鼠標會顯示該省具體疫情情況
-
點擊某個省份顯示該省疫情的具體情況 顯示該省份對應的感染患者人數、疑似患者人數、治愈人數、死亡人數； 該省份到目前為止的新增確診趨勢、累計確診趨勢、治愈趨勢和死亡趨勢
2. A(Approach、做法)
設計一個基於Web平台的疫情地圖可視化程序。
-
查看現有確診或累計確診情況 平台根據數據，以地圖顏色的深淺來顯示各個地區的不同疫情情況
-
查看某個具體省份的疫情 用戶點擊某個具體省份，平台依據后台數據，將對應省份的感染患者人數、疑似患者人數、治愈人數、死亡人數以文字的形式顯示，將該省份到目前為止的新增確診趨勢、累計確診趨勢、治愈趨勢和死亡趨勢以折線圖的方式顯示。
3.B(Benefit、好處）
-
精准定位人們日前需求 目前疫情日趨嚴重，人們每日宅在家中，卻無時無刻不在關心着疫情的進展。該程序可讓用戶在眾多繁雜的信息中清晰得知全國疫情的狀況。
-
采用Web端，簡易輕便 用戶不用花費時間去下載App，直接打開網頁即可一覽全國疫情狀況
-
界面簡潔易用 按鈕清晰，操作方便
4.C(Competitors、競爭）
在獲取疫情信息方面我們凸顯的優勢：
-
用戶獲取疫情的信息主要通過上網、電視來得知，可是這些信息都過於繁雜，用戶得到得僅僅是一連串死板的數據，對用戶不夠友好。這個程序能夠讓用戶直觀、清晰明了地獲取疫情信息，相信用戶只要用過一次，以后每天都會打開這個程序實時獲取最新的疫情發展。
劣勢：
-
該程序不具備持久性，因為相信疫情不久過后就會消失，隨着疫情的消失，用戶也就不會使用了。
5.D(Delivery、推廣）
主要采用線上推廣。
-
利用各類App、微信公眾號的廣告體系進行推廣
-
通過班級群、校友群、各大校內論壇進行宣傳
三、原型設計
1.采用的工具： 墨刀
2.展示：
https://free.modao.cc/app/c17c117d15f130add4fa269b0c5fe7f15f2f337a?simulator_type=device&sticky
-
顏色的深淺表示疫情的嚴重程度 現有確診頁面
累計確診頁面 
-
鼠標移到省份會高亮顯示
-
點擊鼠標會顯示該省具體疫情情況
-
鼠標移至曲線圖上顯示具體數據
-
點擊全國數據回到首頁
四、結對合作
1.討論過程
我們主要是采用QQ線上交流的方式進行。
-
首先，我們在線明確了需求
-
接着明確了要使用的原型設計的工具。各自去學習墨刀的用法。
-
原型設計討論期間，我們通過QQ電話在線明確如何設計地圖的顯示效果，明確要分為幾個頁面以及如何設計每個頁面的多種狀態，盡可能讓原型清楚明了。
-
最后，根據討論結構，明確各自任務分配，使用墨刀企業版的在線協作共同完成。
2.使用工具過程
點擊鼠標跳轉的實現 通過在區域添加點擊事件 
通過在現有確診頁面添加矩形顯示具體內容 
移動鼠標實現曲線圖上的數據的實現 
通過動態組件實現，狀態一中的連接區域添加鼠標移入事件 
通過在狀態二在動態組件中添加直線和矩形區域添加文字 
全國數據跳轉的實現 通過添加鏈接區域實現單擊事件 
五、效能分析
-
本次需求很明了，花費時間最多的就是原型設計這一模塊。因為墨刀中沒有現成的組件，先是嘗試了網頁嵌入地圖的形式，發現並不符合所需的模型，后來幾經周折，想到了用狀態變換的方式去實現。
六、PSP
| PSP2.1 | Personal Software Process Stages | 預估耗時（分鍾） | 實際耗時（分鍾） |
|---|---|---|---|
| Planning | 計划 | 20 | 30 |
| Estimate | 估計這個任務需要多少時間 | 15 | 15 |
| Development | 開發 | 0 | 0 |
| Analysis | 需求分析 (包括學習新技術) | 90 | 70 |
| Design Spec | 生成設計文檔 | 30 | 20 |
| Design Review | 設計復審 | 10 | 15 |
| Coding Standard | 代碼規范 (為目前的開發制定合適的規范) | 0 | 0 |
| Design | 具體設計 | 300 | 240 |
| Coding | 具體編碼 | 0 | 0 |
| Code Review | 代碼復審 | 0 | 0 |
| Test | 測試（自我測試，修改代碼，提交修改） | 0 | 0 |
| Reporting | 報告 | 90 | 80 |
| Test Report | 測試報告 | 20 | 10 |
| Size Measurement | 計算工作量 | 0 | 0 |
| Postmortem & Process Improvement Plan | 事后總結, 並提出過程改進計划 | 30 | 20 |
| 合計 | 605 | 500 |
七、附件
疫情統計博客PDF版：