第一次结对作业——疫情统计
| 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版：
