结对第一次—疫情统计可视化（原型设计）

这个做业属于哪一个课程	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文件下载