2020 軟工實踐疫情統計可視化（原型設計）

時間 2020-06-09

標籤實踐疫情統計可視化原型設計简体版

原文原文鏈接

這個做業屬於哪一個課程	2020春 W班
結對的學號	221701120 & 221701122
這個做業要求在哪裏	2020軟工實踐結對第一次疫情統計可視化(原型設計)
這個做業的目標	根據客戶描述提取需求，進行原型設計並提供大概的解決方案
做業正文	2020軟工實踐疫情統計可視化（原型設計）
其餘參考文獻	Axure 9全面教程、人人都是產品經理

1、原型模型

ps:發佈成網頁加載可能較慢，以及地圖上的一些交互會有延遲，體驗不如本地項目好。

令附上網頁地址

2、基於 NABCD 模型的解決方案

背景：目前新型冠狀病毒肺炎疫情到了很是關鍵的時期，學校仍然是嚴陣以待。有一家統計網站天天都會提供一個對應的日誌文本，記錄國內各省前一天的感染狀況，但疫情統計結果只是經過文字來顯示，不夠直觀、具體，對用戶不夠友好，但願能夠經過地圖的形式來直觀顯示疫情的大體分佈狀況，還能夠查看具體省份的疫情統計狀況。

當今新冠肺炎疫情嚴重，牽動着每一個人的心，共同抗疫無疑是全中國每一個人的第一要務。咱們的網站致力於提供全國以及各地的疫情狀況，用不一樣顏色表示各地區疫情的程度，以最簡潔、直觀的方式向各位展現疫情狀況。不只如此，咱們還提供了各式的統計圖表，包括柱狀圖、折線圖、餅狀圖等，更爲形象直觀地向您展現全國疫情的各種數據與地方數據。在您關注疫情信息的同時，咱們平臺還提供了疫情相關的新聞供您閱讀，包括實時播報功能與全民熱搜板塊，讓您掌握第一手的新聞資訊。此外，咱們平臺還提供了全平臺口罩放貨監控功能，讓搶不到口罩的用戶在第一時間奔赴網店秒速下單，作好全面防禦。咱們也在此由衷地祝願全國人民早日打敗疫情，可以早日出門在陽光下自由地呼吸。武漢加油！中國加油！

一、N (Need,需求)

基本需求：

① 要有個全國的疫情圖。

② 各個省份根據疫情的程度顯示不一樣的顏色，使用戶可以簡潔直觀地獲取疫情信息。

③ 鼠標移到每一個省份該省份可以高亮顯示，給予用戶一個視覺反饋。

④ 鼠標移動到省份上，點擊鼠標可以顯示該省的主要疫情情況。

⑤ 可以查看具體省份的具體疫情狀況，包括該省份對應的感染患者人數、疑似患者人數、治癒人數、死亡人數。

⑥ 顯示該省份到目前爲止的新增確診趨勢、新增疑似趨勢、治癒趨勢和死亡趨勢

拓展需求：

① 頁首提供新聞滾動框，提供疫情相關的新聞。

② 具備實時播報功能，掌握第一手疫情相關諮詢。

③ 具備全民熱搜板塊，看看一樣關注疫情的他們還在關注着哪些內容。

④ 具備全國遷徙熱門城市板塊，可以查看熱門遷入地與遷出地。

⑤ 提供全平臺口罩放貨監控功能，讓買不到口罩的你搶到口罩。

⑥ 疫情圖不只能提供現有確診狀況，還要能查看累計的確診狀況（包括治癒好的與已死亡的）。

⑦ 對全國疫情數據進行更加具體與直觀形象地展現，包括餅狀圖、折線圖、柱狀圖等圖形展現。

二、A (Approach,作法)

實現語言：HTML+CSS+JavaScript+Java

適用人羣：對這次疫情關注且有條件訪問互聯網的全部人

具體作法：基於WEB平臺進行開發，後端統計提供日誌文件網站的數據，前端經過Echart等組件實現具體圖表的繪製。

三、B(Benefit,好處)

① 界面簡潔明瞭，交互簡單，易於上手，適合各個年齡層的用戶使用。

② 構建在WEB平臺上，用戶無需下載額外APP，受衆面廣。

③ 擁有不一樣的圖表展現不一樣的數據，能從不一樣的視角更加全面且直觀明瞭的角度查看疫情的相關數據。

④ 能提供新聞諮詢和熱搜模塊，提供給用戶更多的選擇，在一個平臺便可實現對疫情的全方位瞭解。

⑤ 提供全網口罩放貨監控功能，讓用戶儘量地購買到所須要的口罩。

四、C(Competitors,競爭)

優點

① 使用web做爲開發平臺，提供了不一樣設備間的兼容性與便捷性。用戶再也不須要下載特定的APP來查看疫情狀況，這樣也容易吸引更多的新用戶。

② 提供了較爲完善的圖表展現功能，包括柱狀圖、折線圖、餅圖等等。讓用戶可以從不一樣的角度更爲全面地瞭解疫情數據。

③ 具備新聞推送、實時播報與熱搜板塊，提供給用戶更多的選擇，讓用戶關注數據的同時也可以最快速地關注到時事新聞。

④ 具備全網口罩監控入口，切中用戶痛點，可以很好地吸引用戶。

⑤ 提供全國城市遷徙率排行，從不同的角度全面提供疫情數據信息。

劣勢

① 從現實因素考慮，當今互聯網上各大廠商均以推出各自的查看疫情信息功能，市場趨於飽和。且起步時間過晚，用戶不會輕易轉換當下正在使用的平臺。

② 當前處理的數據都是基於一個假設的天天提供規定格式日記的網站，若投入現實使用，將沒法處理複雜龐大的海量數據。

五、D(Delivery，推廣)

① 向一些流量較大的網站或應用平臺申請廣告位（如百度搜索前幾條、抖音開屏廣告等）。

② 找一些社交媒體的大V進行推廣，如微博、微信公衆號的一些知名博主。

③ 自行運營一些媒體帳號，發佈抗疫相關短視頻、文章等，並附上平臺網址連接進行推廣。

3、效能分析與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

4、遇到的困難與解決方法

一、遠程溝通的不便

受這次疫情影響至今未能開學，咱們也算是提早試上了最近大火的「遠程辦公」。平時須要交流討論的問題直接面談交流就能解決的問題，如今卻有種「明明你就在眼前卻隔得好遠好遠」的悲情。

由於兩人都是第一次使用Axure來設計原型，還有不少用不來的地方，因而就有了長達幾十頁的QQ聊天記錄和下圖所呈現的錄屏交流。雖然麻煩了一點，但也算是一個不錯的可替代方案。兩人沒選擇語音交流的主要緣由是語音遠沒有文字來得直觀，語音環境的影響反而會致使信息的丟失而下降效率。沒怎麼使用通話是怕兩我的說着說着聊起來忘了正事。

二、對於原型設計該呈現到哪一步的疑惑

這是咱們第一次接觸原型設計，對此並無什麼概念。一開始一直在糾結原型設計該呈現出什麼內容，該作到哪一步纔算結束。是展現一個靜態界面再加上一些頁面之間的跳轉邏輯就算達到目的了？仍是要呈現一些更加具體的操做與邏輯，儘量地逼近最終成品？

經過學習《構建之法》、上網查看其餘優秀的原型設計以及助教的解惑下，算是有了比較明確的答案。原型設計更可能是給客戶看的，要能體現你所但願展示的功能，若只是靜態頁面的跳轉那和PPT無異，用不着大費周章換個軟件寫PPT。故要實現必定的動態操做功能才能儘量地展現產品，讓客戶更直觀地看出是否是本身想要的。

三、對地圖部分怎樣實現高亮的不解

一開始咱們使用的原型設計工具是墨刀，但當嘗試着實現鼠標在地圖上移動會高亮這一功能時卡殼了。一開始的想法是擁有足夠多的各省份的地圖，底色爲白色的一個，底色爲藍色的一個，而後經過添加交互監聽鼠標進入範圍就換成另外一個顏色的地圖。結果被「找不到各省市的地圖圖片」所戰勝。絕望之時甚至想要用PS來一個個扣出各省份的地圖。（好在人懶沒去作，真扣了如今我會罵本身無數遍傻X）

也有了解到其餘同窗經過echart組件直接編寫html代碼嵌入實現相關功能，但心存疑慮，這還屬於原型設計範圍嗎，認爲這應該歸屬於具體實現階段，故沒有采用此方法。後來經過搜索引擎瞭解到Axure會更好實現一點，便轉戰Axure，利用SVG圖片的特性導入Axure中轉圖片爲圖形，就可以比較符合邏輯地實現外觀的變化。但也存在着問題，SVG圖片的邊界是方形，而省份地圖邊界是不規律的，所以對於鼠標進入的斷定範圍會更大一點（以下圖）。對於這一點咱們也討論了好久，嘗試了好久，但最終沒能很完美地實現。最後恍然大悟，如今只是原型模型設計階段，儘可能體現所但願呈現的功能是重點，而去扣這些細節實現的必要性和重要性並非那麼大，就彷彿你在糾結原型中放的數據是不是正確的同樣。能完美地貼合最終的產品的操做當然很好，但更重要的是體現產品的操做邏輯給客戶，萬萬不可本末倒置。

四、對Panel組件內鼠標座標的誤解

在實現點擊地圖出現各地區感染狀況的小氣泡的功能時，採用的是斷定單擊事件後設置氣泡爲可見並移動到鼠標所在座標來實現。一開始可以很好地實現，但在地圖上添加Panel組件實現頁面移動後，鼠標點擊卻不能出現預期功能。

一開始覺得是Panel會覆蓋其下的組件，鼠標點擊事件斷定到Panel上了。但鼠標進入地圖區域卻能正常變色，這點使人疑惑。兩人商討許久未果，只好新建項目進行試驗，才發現Panel並不會隱藏其內部組件，而是Panel的鼠標絕對座標發生變化，再也不是以前相對整個頁面的絕對座標，而是以Panel左上角爲起點。故問題獲得解決。