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

這個做業屬於哪一個課程	2020春S班 (福州大學)
這個做業要求在哪裏	結對第一次—疫情統計可視化（原型設計）
結對學號	041701320、221701117
這個做業的目標	1.NABCD模型<br/>2.疫情統計可視化（原型設計）<br/>
做業正文	結對第一次—疫情統計可視化（原型設計）
其餘參考文獻	CSDN、百度、b站Axure教程、highchart

1.疫情統計可視化原型

原型地址：疫情統計可視化原型

2.困難與解決

文字準確、樣式清晰、設計思路清晰、圖文並茂，並描述遇到的困難及解決方法（包括：困難描述、解決嘗試、是否解決、有何收穫），字數在1000字左右。

困難描述

1. 使用什麼原型開發工具
2. 全國疫情地圖的實現
3. 鼠標移入高亮等的交互
4. 鼠標移入顯示簡略信息
5. 趨勢折線圖的引入

解決嘗試

1. 其實技能都是通用的，你會了axure，mockplus和墨刀只要習慣一下操做就行了，不須要學。會mockplus和墨刀不必定會axure，RP裏有和flash或dreamweaver比較類似的思惟和使用方式，有原件，母版，css樣式等。可是我不推薦mockplus和墨刀，除非你是業餘作作的或者是很是簡單的軟件產品，好比20頁之內的，且不是高保真原型。若是你作一個200頁的原型，每一頁上有60個數據項，有40個交互，你去用墨刀作作看。。。由於mockplus和墨刀是雲端版本的，開發技術很是不穩定，稍微複雜一點就崩，功能也不多。最最最最最不可取的是，這些軟件商都不提供源文件，你只能導出圖片或者生成原型，但沒有原型源文件。要知道，若是真正作產品設計的人，應該懂得在開發設計時，是一版版分別保存的，有時候甚至天天保存一個版本，由於需求在不斷變化。本地作的好處是，當你想回退到某個版本去找曾經設計過的某個模塊時，你能夠直接找到當時的文件。若是你用雲端版本就不可能了，你每次編輯只會覆蓋以前的版本。mockplus和墨刀比axure便利的地方在於，他們比較適合移動端設計。因爲歷史緣由，axure在移動端的控件操做不是那麼方便。因此最終咱們選擇的Axure。

2. 咱們花了許多時間尋找全國地圖的組件，最後在產品大牛裏找到了全國地圖的組件庫。

<div align=center ><img src="https://images.cnblogs.com/cnblogs_com/fzu-yxj/1656776/o_2002271509281.PNG"/></div>

1. 在每一個省分內部署多個熱區成功實現了全國省份高亮顯示。每一個熱區設置該省份的值爲真，在省份的熱區中添加交互選中時填充顏色。

<div align=center ><img src="https://images.cnblogs.com/cnblogs_com/fzu-yxj/1656776/o_2002271509352.PNG"/></div>

1. 咱們利用中繼器，在中繼器中存放感染患者人數、疑似患者人數的數據。

<div align=center ><img src="https://images.cnblogs.com/cnblogs_com/fzu-yxj/1656776/o_2002271509403.PNG"/></div> <div align=center ><img src="https://images.cnblogs.com/cnblogs_com/fzu-yxj/1656776/o_2002271509514.PNG"/></div>

1. 趨勢折線圖咱們採用highchart實現，在axure中用內聯框架引入。

<div align=center ><img src="https://images.cnblogs.com/cnblogs_com/fzu-yxj/1656776/o_2002271521175.PNG"/></div>

是否解決

1. 解決√
2. 解決√
3. 解決√
4. 解決√
5. 解決√

有何收穫   此次做業咱們收穫頗多。

餘嘉宸：   說說此次做業的心得體會吧。所謂大浪淘金，必不可少的就是在完成任務的過程當中堅持不懈。剛剛拿到這個題目的時候，咱們都大眼瞪小眼，「什麼是原型模型？」，「這些工具我都沒用過啊？」，「原型工具選哪一個好啊？好糾結」，...諸如雲雲。困難是必不可少的，不然也不會有如今完成任務的成就感。在這個疫情期間，你們都迎難而上，不怕困難，相信很快打敗疫情，於此道理一致，面對難題迎難而上，多花時間，多花精力，總能克服。
  首先咱們很快的分配好了各自的工做，誰畫圖，誰編碼，誰碼字等等。工做井井有理的進行着。
  咱們瞭解了什麼是原型模型：原型方法被定義爲軟件開發模型，其中構建原型，測試，而後在須要時從新加工，直到實現可接受的原型。 它還建立了生成最終系統的基礎。軟件原型模型在項目要求未知的狀況下效果最佳。 它是一種在開發人員和客戶端之間進行的迭代，試驗和錯誤方法。原型模型優勢全面。包括能快速建造一個能夠運行的軟件原型 ，以便理解和澄清問題，使開發人員與用戶達成共識，最終在肯定的客戶需求基礎上開發客戶滿意。咱們在瞭解衆多原型軟件後，最終選擇了Axure，Axure全稱是叫Axure RP。Axure是一個專業的快速原型設計工具,多用於網頁原型設計,是產品經理經常使用的原型設計工具之一。
  在使用Axure的過程當中，咱們遇到了很多困難，咱們經過博客尋找解決辦法，同時詢問老師同窗，一樣的，也在一些學習軟件上學習了Axure的使用。
  文檔編輯也是個重要的環節，首先要解決的是本身的任務，以及本身有關任務的文檔書寫，其次是兩人的文檔內容結合，以及任務的結合，這過程當中很容易產生你改了我改好的代碼，分歧也同時存在。合理的組織也是必不可少的內容。
  合做的重要性人盡皆知。易卜生曾經說過，偉大的事業，須要決心，能力，組織和責任感。這句話語雖然很短，但令我浮想聯翩。 所謂團結，關鍵是團結完成項目。貝多芬說過一句富有哲理的話，卓越的人一大優勢是：在不利與艱難的遭遇裏百折不饒。這啓發了我， 每一個人都不得不面對這些問題。 在面對這種問題時， 團結因何而發生？這樣看來，西班牙曾經提到過，自知之明是最可貴的知識，認識本身，認清本身，同時團結也能很好的取長補短，共同彌補本身在項目過程當中的不足。所以，只有團結一致，面對共同的項目，共同的目標，才能更好的完成任務，這也是結對編程的意義所在。

楊鑫傑：   此次做業收穫頗多。一開始咱們面對一個本身之前歷來沒有接觸過了領域——「原型」，遇到過不少困難。「原型是什麼？」「用啥工具作？」「這麼多工具選哪一個好？」等等。困難不少，可是辦法總比困難多，咱們結對合做，最終仍是成功完成了任務。   首先，咱們在各自理解了什麼是原型和製做原型工具的基礎上，第一次討論肯定了咱們小組製做原型的工具。咱們在Axure和墨刀兩個工具中糾結了一下，墨刀適合新手，使用簡單，學起來快，可是它是雲端版本，開發技術不穩定，不適合複雜的產品。Axure雖然操做複雜一點，可是功能齊全，可以作出複雜產品的高保真原型。由於技能都是相通的，但會墨刀的不必定會Axure，因此咱們最終決定用Axure。   Axure全稱是叫Axure RP。Axure是一個專業的快速原型設計工具,多用於網頁原型設計,是產品經理經常使用的原型設計工具之一。這是咱們此次做業收穫最大的地方，那就是學會Axure的使用，會用Axure作出產品原型，會用Axure的熱區實現交互功能，會用中繼器實現數據存儲與顯示，會用動態面板實現不一樣狀態下的顯示......對Axure也算是大體的掌握了，又get了一個新技能。   後面咱們就很快分配好工做，咱們將工做分爲疫情地圖原型的製做、基礎交互功能的實現、頁面的美化、拓展功能的實現、博客的編輯。咱們兩我的各自分配好任務後，就開始執行。此次做業的收穫之二，也就是團隊合做共同完成任務了。好的團隊合做，就應當是效率1+1>2。咱們此次結對合做完成任務，從分配任務、到共同討論、到完成任務，過程當中都發揮出告終對合做的優點，比一我的摸索更快、更好地完成了這次的任務。固然在合做中也會有些問題，那就是進度的整合。咱們經過QQ傳送文件的形式來傳遞每一個人製做的成果，就有些麻煩。通過此次任務的合做，我更加有了合做的經驗，知道怎樣能更好的分工、討論，去融合不一樣的意見。   在原型製做過程當中，還有一個收穫就是對svg圖標資源的搜索，知道了經過Iconfont阿里巴巴搜索svg圖標的方法，也學會了將下載的資源導入到Axure中。在將原型製做完成後，又一個收穫是學會了怎麼將原型發佈在互聯網上讓別人也能夠訪問。咱們選擇的是發佈在「產品大牛」上，經過「產品大牛」公共庫託管。   接下來的一個收穫，就是閱讀《構建之法》第八章，理解了NABCD模型，並將NABCD模型應用於這次做業的產品原型設計中。從需求、作法、好處、競爭、推廣，我學會了競爭性需求分析的過程。   總的來講，此次結對合做收穫頗多，意義非凡，很感謝此次做業。

3.NABCD模型描述

NABCD模型使用的詳細說明。

N：（Need需求）
  個人創意解決了用戶什麼需求，需求能夠是明確的/公開的，也多是說不清道不明。充分了解用戶的痛苦，他們對已有軟件/服務不滿意的地方，但用戶每每也不瞭解顛覆型的創新。

• 目前新型冠狀病毒肺炎疫情到了很是關鍵的時期,但願能夠經過地圖的形式來直觀顯示疫情的大體分佈狀況，還能夠查看具體省份的疫情統計狀況。

• 基本需求：

  • 在全國地圖上使用不一樣的顏色表明大概確診人數區間
    • 不一樣的顏色表明大概確診人數區間
    • 鼠標移到某個省份會高亮顯示

    <div align=center ><img width="60%" src="https://images.cnblogs.com/cnblogs_com/yjchen/1645851/o_200228082000%E9%AB%98%E4%BA%AE.png"/></div> - 顏色的深淺表示疫情的嚴重程度，能夠直觀瞭解高危區域

  <div align=center ><img width="80%" src=" https://images.cnblogs.com/cnblogs_com/yjchen/1645851/o_200227163711%E9%A6%96%E9%A1%B5.png"/></div> - 點擊鼠標會顯示該省具體疫情狀況 - 點擊某個省份顯示該省疫情的具體狀況，也可點擊右上角下拉框選擇具體省市（本產品目前完成了全國、福建、湖北三個地區） <div align=center ><img width="40%" src="https://images.cnblogs.com/cnblogs_com/yjchen/1645851/o_200228082016%E4%B8%8B%E6%8B%89%E6%A1%86.png"/></div> - 顯示該省份對應的感染患者人數、疑似患者人數、治癒人數、死亡人數 - 該省份到目前爲止的新增確診趨勢、新增疑似趨勢、治癒趨勢和死亡趨勢 <div align=center ><img width="80%" src=" https://images.cnblogs.com/cnblogs_com/yjchen/1645851/o_200227163722%E7%A6%8F%E5%BB%BA.png"/></div>

• 拓展需求：

  • 新聞快訊

  <div align=center ><img width="80%" src=" https://images.cnblogs.com/cnblogs_com/yjchen/1645851/o_200227162949%E6%96%B0%E9%97%BB%E8%B5%84%E8%AE%AF.png"/></div>

  • 熱點諮詢

  <div align=center ><img width="80%" src=" https://images.cnblogs.com/cnblogs_com/yjchen/1645851/o_200227162956%E7%83%AD%E7%82%B9%E5%92%A8%E8%AF%A2.png"/></div>

  • 增加率分析

  <div align=center ><img width="80%" src=" https://images.cnblogs.com/cnblogs_com/yjchen/1645851/o_200227163001%E5%A2%9E%E9%95%BF%E7%8E%87.png"/></div>

  • 防疫指南

  <div align=center ><img width="80%" src=" https://images.cnblogs.com/cnblogs_com/fzu-yxj/1656776/o_200228040538%E6%8D%95%E8%8E%B7.PNG"/></div>

  • 最新進展

  <div align=center ><img width="80%" src=" https://images.cnblogs.com/cnblogs_com/fzu-yxj/1656776/o_2002280407487.PNG"/></div>

A：（Approach，作法）   獨特的辦法來解決，來寫好這個軟件。例如人臉識別來實現大規模數據處理，地域熟悉實現公交路線。

• 方案：經過Web實現疫情數據的可視化，經過地圖圖表等方式能夠更直觀的體現疫情的狀況，讓用戶可以更好的得到疫情信息。
• 全國：
  • 根據各地確診人數，以不一樣深度的紅色爲色調（無確診爲白色），顏色由淺到深，表示所在省份疫情越嚴重。
  • 捕捉鼠標，鼠標移動到任意省上時，該省高亮顯示爲青藍色同時顯示簡略的該省份的疫情信息。
  • 鼠標點擊省份，跳轉到另外一個網頁，顯示該省的具體詳情。
• 省內：
  • 顯示該省份對應的新增感染患者人數、新增疑似患者人數、治癒人數、死亡人數。
  • 將該省份到目前爲止的新增確診趨勢、新增疑似患者人數趨勢、治癒趨勢和死亡趨勢以折線圖的方式顯示。

B：（Benefit，好處）   產品給客戶能夠帶來什麼好處，遷移成本。

• 採用Web端，簡易輕便 用戶不用花費時間去下載App，直接打開網頁便可一覽全國疫情情況
• 知足信息需求 該程序可以讓用戶在衆多繁雜的信息中清晰得知全國疫情的情況。整合了多方面的信息。防疫指南，可讓用戶學習防疫小技巧，能夠合理在線問醫生。新聞快訊，能讓用戶瞭解最火熱的疫情資訊。

C：（Competitors，競爭）   先進入市場的產品，有所謂的先發優點（FirstMover Advantage，FMA），固然也有劣勢。後面進入市場的產品，有種種不利的因素，可是也有後發優點（Second Mover Advantage，SMA）。

【競爭產品分析】

<div align=center ><img width="30%" src=" https://images.cnblogs.com/cnblogs_com/yjchen/1645851/o_200227101041%E7%AB%9E%E4%BA%89%E4%BA%A7%E5%93%81%E5%88%86%E6%9E%90.jpg"/></div>

D：（Delivery，推廣）   主要採用線上推廣。

• 利用各種App進行推廣
  • QQ推廣
  • 微信推廣：公衆號
  • 微博推廣
• 經過班級羣、校友羣、各大校內論壇進行宣傳

4.原型模型設計工具

原型模型必須採用專用的原型模型設計工具實現：如Axure Rp、墨刀、Balsamiq Mockup、Prototype Composer、GUI Design Studio、Adobe設計組件等等。在博文中說明你所採用的原型開發工具。

  使用原型模型設計工具：Axure RP

  Axure RP是一款專業的快速原型設計工具。Axure（發音：Ack-sure），表明美國Axure公司；RP則是Rapid Prototyping（快速原型）的縮寫。   Axure RP是美國Axure Software Solution公司旗艦產品，是一個專業的快速原型設計工具，讓負責定義需求和規格、設計功能和界面的專家可以快速建立應用軟件或Web網站的線框圖、流程圖、原型和規格說明文檔。做爲專業的原型設計工具，它能快速、高效的建立原型，同時支持多人協做設計和版本控制管理。

5.結對過程

描述結對的過程，提供兩人在討論、細化和使用專用原型模型工具時的非擺拍結對照片。

<div align=center ><img src="https://images.cnblogs.com/cnblogs_com/yjchen/1645851/o_200228085436%E7%BB%93%E5%AF%B9%E8%BF%87%E7%A8%8B.png"/></div>

6.PSP表格

提供這次結對做業的效能分析和PSP。

  談到效能分析。組主要體如今能力、效率、質量和效益四個方面。咱們在結對過程當中，充分利用各自的優點，例如文檔寫得好，AXURE學習的快，互幫互助。體現了能力的各自優點，提早安排好每一個人的工做量，效率也比較高，完成質量也很棒。經過BSC模型搭建效能分析架構，從財務角度，共同完成做業是主要目標。從客戶角度，分析客戶想要的效果，以及分析客戶的實際要求，設計完美，簡介，高效的可視化系統，同時在結對過程當中學習，獲取新知識。

  PSP是卡耐基梅隆大學（CMU）的專家們針對軟件工程師所提出的一套模型：Personal Software Process (PSP， 我的開發流程，或稱個體軟件過程)。

PSP2.1	Personal Software Process Stages	預估耗時（分鐘）	實際耗時（分鐘）
Planning	計劃	30min	30min
Estimate	估計這個任務須要多少時間	30min	30min
Development	開發	15h	23h
Analysis	需求分析 (包括學習新技術)	2h	3.5h
Design Spec	生成設計文檔	1h	4h
Design Review	設計複審	30min	2h
Coding Standard	代碼規範 (爲目前的開發制定合適的規範)	1h	30min
Design	具體設計	3h	5h
Coding	具體編碼	4h	2h
Code Review	代碼複審	1.5h	1h
Test	測試（自我測試，修改代碼，提交修改）	2h	5h
Reporting	報告	3h	6h
Test Repor	測試報告	2h	2.5h
Size Measurement	計算工做量	30min	30min
Postmortem & Process Improvement Plan	過後總結, 並提出過程改進計劃	30min	3h
合計		18.5h	29.5h

7.PDF附件

將博客內容生成一份PDF做爲隨筆的附件。

• 博客的PDF文件下載