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

这个作业属于哪个课程	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版：疫情统计.zip