| 這個作業屬於哪個課程 | 2020春 W班 |
|---|---|
| 結對的學號 | 221701120 & 221701122 |
| 這個作業要求在哪里 | 2020軟工實踐 結對第一次 疫情統計可視化(原型設計) |
| 這個作業的目標 | 根據客戶描述提取需求，進行原型設計並提供大概的解決方案 |
| 作業正文 | 2020軟工實踐 疫情統計可視化（原型設計） |
| 其他參考文獻 | Axure 9全面教程、人人都是產品經理 |
一、原型模型
ps:發布成網頁加載可能較慢，以及地圖上的一些交互會有延遲，體驗不如本地項目好。
令附上網頁地址
二、基於 NABCD 模型的解決方案
背景：目前新型冠狀病毒肺炎疫情到了非常關鍵的時期，學校仍然是嚴陣以待。有一家統計網站每天都會提供一個對應的日志文本，記錄國內各省前一天的感染情況，但疫情統計結果只是通過文字來顯示，不夠直觀、具體，對用戶不夠友好，希望可以通過地圖的形式來直觀顯示疫情的大致分布情況，還可以查看具體省份的疫情統計情況。
當今新冠肺炎疫情嚴重，牽動着每個人的心，共同抗疫無疑是全中國每個人的第一要務。我們的網站致力於提供全國以及各地的疫情情況，用不同顏色表示各地區疫情的程度，以最簡潔、直觀的方式向各位展示疫情情況。不僅如此，我們還提供了各式的統計圖表，包括柱狀圖、折線圖、餅狀圖等，更為形象直觀地向您展示全國疫情的各類數據與地方數據。在您關注疫情信息的同時，我們平台還提供了疫情相關的新聞供您閱讀，包括實時播報功能與全民熱搜板塊，讓您掌握第一手的新聞資訊。此外，我們平台還提供了全平台口罩放貨監控功能，讓搶不到口罩的用戶在第一時間奔赴網店秒速下單，做好全面防護。我們也在此由衷地祝願全國人民早日戰勝疫情，能夠早日出門在陽光下自由地呼吸。武漢加油！中國加油！
1、N (Need,需求)
基本需求：
① 要有個全國的疫情圖。
② 各個省份根據疫情的程度顯示不同的顏色，使用戶能夠簡潔直觀地獲取疫情信息。
③ 鼠標移到每個省份該省份能夠高亮顯示，給予用戶一個視覺反饋。
④ 鼠標移動到省份上，點擊鼠標能夠顯示該省的主要疫情狀況。
⑤ 能夠查看具體省份的具體疫情情況，包括該省份對應的感染患者人數、疑似患者人數、治愈人數、死亡人數。
⑥ 顯示該省份到目前為止的新增確診趨勢、新增疑似趨勢、治愈趨勢和死亡趨勢
拓展需求：
① 頁首提供新聞滾動框，提供疫情相關的新聞。
② 具有實時播報功能，掌握第一手疫情相關咨詢。
③ 具有全民熱搜板塊，看看同樣關注疫情的他們還在關注着哪些內容。
④ 具有全國遷徙熱門城市板塊，能夠查看熱門遷入地與遷出地。
⑤ 提供全平台口罩放貨監控功能，讓買不到口罩的你搶到口罩。
⑥ 疫情圖不僅能提供現有確診情況，還要能查看累計的確診情況（包括治愈好的與已死亡的）。
⑦ 對全國疫情數據進行更加具體與直觀形象地展示，包括餅狀圖、折線圖、柱狀圖等圖形展示。
2、A (Approach,做法)
實現語言：HTML+CSS+JavaScript+Java
適用人群：對此次疫情關注且有條件訪問互聯網的所有人
具體做法：基於WEB平台進行開發，后端統計提供日志文件網站的數據，前端通過Echart等組件實現具體圖表的繪制。
3、B(Benefit,好處)
① 界面簡潔明了，交互簡單，易於上手，適合各個年齡層的用戶使用。
② 構建在WEB平台上，用戶無需下載額外APP，受眾面廣。
③ 擁有不同的圖表展示不同的數據，能從不同的視角更加全面且直觀明了的角度查看疫情的相關數據。
④ 能提供新聞咨詢和熱搜模塊，提供給用戶更多的選擇，在一個平台即可實現對疫情的全方位了解。
⑤ 提供全網口罩放貨監控功能，讓用戶盡可能地購買到所需要的口罩。
4、C(Competitors,競爭)
優勢
① 使用web作為開發平台，提供了不同設備間的兼容性與便捷性。用戶不再需要下載特定的APP來查看疫情情況，這樣也容易吸引更多的新用戶。
② 提供了較為完善的圖表展示功能，包括柱狀圖、折線圖、餅圖等等。讓用戶能夠從不同的角度更為全面地了解疫情數據。
③ 具有新聞推送、實時播報與熱搜板塊，提供給用戶更多的選擇，讓用戶關注數據的同時也能夠最快速地關注到時事新聞。
④ 具有全網口罩監控入口，切中用戶痛點，能夠很好地吸引用戶。
⑤ 提供全國城市遷徙率排行，從不一樣的角度全面提供疫情數據信息。
劣勢
① 從現實因素考慮，當今互聯網上各大廠商均以推出各自的查看疫情信息功能，市場趨於飽和。且起步時間過晚，用戶不會輕易轉換當下正在使用的平台。
② 當前處理的數據都是基於一個假設的每天提供規定格式日記的網站，若投入現實使用，將無法處理復雜龐大的海量數據。
5、D(Delivery，推廣)
① 向一些流量較大的網站或應用平台申請廣告位（如百度搜索前幾條、抖音開屏廣告等）。
② 找一些社交媒體的大V進行推廣，如微博、微信公眾號的一些知名博主。
③ 自行運營一些媒體賬號，發布抗疫相關短視頻、文章等，並附上平台網址鏈接進行推廣。
三、效能分析與PSP表格
效能分析：尚未進入具體編碼階段，無法評估效能
PSP表格
完成原型設計只進行到前期分析階段，故PSP表格后半部分實際耗時暫無。
| PSP2.1 | Personal Software Process Stages | 預估耗時（分鍾） | 實際耗時（分鍾） |
|---|---|---|---|
| Planning | 計划 | 30 | 40 |
| Estimate | 估計這個任務需要多少時間 | 30 | 40 |
| Development | 開發 | 1370 | |
| Analysis | 需求分析 (包括學習新技術) | 300 | 260 |
| Design Spec | 生成設計文檔 | 30 | 30 |
| Design Review | 設計復審 | 30 | 20 |
| Coding Standard | 代碼規范 (為目前的開發制定合適的規范) | 20 | 15 |
| Design | 具體設計 | 240 | 480 |
| Coding | 具體編碼 | 480 | |
| Code Review | 代碼復審 | 30 | |
| Test | 測試（自我測試，修改代碼，提交修改） | 240 | |
| Reporting | 報告 | 240 | |
| Test Report | 測試報告 | 180 | |
| Size Measurement | 計算工作量 | 30 | |
| Postmortem & Process Improvement Plan | 事后總結, 並提出過程改進計划 | 30 | |
| 合計 | 1640 |
四、遇到的困難與解決方法
1、遠程溝通的不便
受此次疫情影響至今未能開學，我們也算是提前試上了最近大火的“遠程辦公”。平時需要交流討論的問題直接面談交流就能解決的問題，現在卻有種“明明你就在眼前卻隔得好遠好遠”的悲情。
因為兩人都是第一次使用Axure來設計原型，還有很多用不來的地方，於是就有了長達幾十頁的QQ聊天記錄和下圖所呈現的錄屏交流。雖然麻煩了一點，但也算是一個不錯的可替代方案。兩人沒選擇語音交流的主要原因是語音遠沒有文字來得直觀，語音環境的影響反而會導致信息的丟失而降低效率。沒怎么使用通話是怕兩個人說着說着聊起來忘了正事。
2、對於原型設計該呈現到哪一步的疑惑
這是我們第一次接觸原型設計，對此並沒有什么概念。一開始一直在糾結原型設計該呈現出什么內容，該做到哪一步才算結束。是展示一個靜態界面再加上一些頁面之間的跳轉邏輯就算達到目的了？還是要呈現一些更加具體的操作與邏輯，盡可能地逼近最終成品？
通過學習《構建之法》、上網查看其他優秀的原型設計以及助教的解惑下，算是有了比較明確的答案。原型設計更多是給客戶看的，要能體現你所希望展現的功能，若只是靜態頁面的跳轉那和PPT無異，用不着大費周章換個軟件寫PPT。故要實現一定的動態操作功能才能盡可能地展示產品，讓客戶更直觀地看出是不是自己想要的。
3、對地圖部分怎樣實現高亮的不解
一開始我們使用的原型設計工具是墨刀，但當嘗試着實現鼠標在地圖上移動會高亮這一功能時卡殼了。一開始的想法是擁有足夠多的各省份的地圖，底色為白色的一個，底色為藍色的一個，然后通過添加交互監聽鼠標進入范圍就換成另一個顏色的地圖。結果被“找不到各省市的地圖圖片”所打敗。絕望之時甚至想要用PS來一個個扣出各省份的地圖。（好在人懶沒去做，真扣了現在我會罵自己無數遍傻X）
也有了解到其他同學通過echart組件直接編寫html代碼嵌入實現相關功能，但心存疑慮，這還屬於原型設計范圍嗎，認為這應該歸屬於具體實現階段，故沒有采用此方法。后來通過搜索引擎了解到Axure會更好實現一點，便轉戰Axure，利用SVG圖片的特性導入Axure中轉圖片為圖形，就能夠比較符合邏輯地實現外觀的變化。但也存在着問題，SVG圖片的邊界是方形，而省份地圖邊界是不規律的，因此對於鼠標進入的判定范圍會更大一點（如下圖）。對於這一點我們也討論了很久，嘗試了很久，但最終沒能很完美地實現。最后恍然大悟，現在只是原型模型設計階段，盡量體現所希望呈現的功能是重點，而去扣這些細節實現的必要性和重要性並不是那么大，就仿佛你在糾結原型中放的數據是否是正確的一樣。能完美地貼合最終的產品的操作固然很好，但更重要的是體現產品的操作邏輯給客戶，萬萬不可本末倒置。
4、對Panel組件內鼠標坐標的誤解
在實現點擊地圖出現各地區感染情況的小氣泡的功能時，采用的是判定單擊事件后設置氣泡為可見並移動到鼠標所在坐標來實現。一開始能夠很好地實現，但在地圖上添加Panel組件實現頁面移動后，鼠標點擊卻不能出現預期功能。
一開始以為是Panel會覆蓋其下的組件，鼠標點擊事件判定到Panel上了。但鼠標進入地圖區域卻能正常變色，這點令人疑惑。兩人商討許久未果，只好新建項目進行試驗，才發現Panel並不會隱藏其內部組件，而是Panel的鼠標絕對坐標發生變化，不再是之前相對整個頁面的絕對坐標，而是以Panel左上角為起點。故問題得到解決。
五、結對的過程
由於都沒有大佬願意帶我們兩只咸魚，只好咸魚抱團取暖。因為兩人比較熟，因此也不存在什么配合的磨合，交流的障礙等等因素，還算是比較順利和愉快地完成了此次作業。
從頭到尾兩個人都挺認真積極地完成作業的，雖然不會的東西很多，也共同被困難卡住，但都在共同探討，共同克服。
由於疫情各自都在家里蹲，想擺拍也擺拍不了，以下為部分聊天記錄與視頻截圖：
