结对第一次-某次疫情统计可视化（原型设计）
| 这个作业属于哪个课程 | 班级链接 |
|---|---|
| 结对学号 | 221701111,221701130 |
| 这个作业要求在哪里 | 结对第一次—某次疫情统计可视化（原型设计） |
| 这个作业的目标 | <设计某次疫情统计可视化的原型> |
| 作业正文 | 作业正文 |
| 其他参考文献 | GitHub，markdown教程 |
一.设计
- 最终产品展示：原型链接
效果展示：
- 首页效果：
由于时间和能力的关系，并未将本产品做得十分美观，并且也未能在打开页面是就显示所有省份的名字，需要将光标移动到某个省份，在该省份版块显示高亮效果的同时才会显示省名，这些不足还需要在之后继续完善
- 以新疆为例，点开某个省份之后可以查看该省份的新增、累计、治愈/死亡人数的统计折线图（默认为新增人数的统计折线图）：
点击右上角的按钮可以显示累计确诊人数的统计折线图：
点击右上角的按钮可以显示治愈/死亡人数的统计折线图：
- 遇到的困难：
- 选取哪款原型开发工具。
- 如何使用原型开发工具。
- 如何是地图实现高亮效果。
- 该如何实现交互。
- 如何将做好的原型以网页形式发布。
- 尝试过的解决途径：
- 分别尝试了几款作业要求页面老师提供的原型开发工具后发现Axure RP最适合做本次作业所要求的原型设计。
- 在Axure中文网查看了一些Axure的使用教程，但由于时间关系，并未系统地学习Axure的使用。
- 我们尝试通过改变地图形状选中状态时的填充颜色来实现光标移动到某个省份时显示的高亮效果，并且经学习发现需要完成这一效果需要使用svg格式的图片，而我们所需的中国地图的svg图片可以从Axure官网下载。
- 尝试改变热区与形状的状态来实现交互，点击之后会改变所选省份的状态，并跳转至该省份疫情状况的详细页面。
- 经学习后发现可以通过AXURE自带的云发布，生成一个链接来实现将原型转换为网页这一需求。
- 解决的效果：
- 基本解决，目前来看Axure确实比较适合来做原型开发，但由于能力和时间关系未能将本产品做得十分美观，下次会尝试使用echats与Axure相结合的方式来实现更好地效果。
- 基本解决，在Axure中文网上学习了大部分本次作业所需的工具，基本上实现了所需的功能，但细节部分还做得不够好，需要继续学习。
- 基本解决，地图确实达到了预想的鼠标移到的省份会显示高亮的效果。
- 基本解决，点击需要查看详情的省份后确实能够跳转至统计该省份疫情状况的详细页面。
- 基本解决，已经生成了可以查看本原型设计的网页，但现实的效果还有点不理想。
- 收获：
- 通过本次作业学习了原型设计的相关知识，知道了如何在软件开发之前判断自己对项目需求的理解是否与客户一致。
- 体会到了原型设计的不易，并不是想象中的那样把人家已经做好的模型直接来过来稍作改动就好，需要自己重新构思如何实现交互等效果。
- 学会了墨刀、Axure RP等工具的使用，虽然最终选择的是Axure RP,但其他几款原型设计也学习了一下基本的使用方式。
- 学习了该怎样去尝试一个未接触过的事物，虽然万事开头难，但人总是要勇于迈出第一步才有可能在某一领域有所成就。好在在不断地百度和尝试中慢慢摸索出了解决问题的思路，虽然效率不高，但好在最终大概完成了所给的任务，剩下不足的部分会利用之后的时间继续完善。
- 结对的过程中学习了该如何和自己的队友沟通对项目的理解以及如何合理分配任务。
二.NABCD原型
N:需求
目前新型冠状病毒肺炎疫情到了非常关键的时期，学校仍然是严阵以待。有一家统计网站每天都会提供一个对应的日志文本，记录国内各省前一天的感染情况，上次的疫情统计结果只是通过文字来显示，不够直观、具体，对用户不够友好，我们希望可以通过地图的形式来直观显示疫情的大致分布情况，还可以查看具体省份的疫情统计情况。
具体需求：
- 在全国地图上使用不同的颜色代表大概确诊人数区间:
- 颜色的深浅表示疫情的严重程度，可以直观了解高危区域；
- 鼠标移到每个省份会高亮显示；
- 点击鼠标会显示该省具体疫情情况
- 点击某个省份显示该省疫情的具体情况
- 显示该省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数；
- 该省份到目前为止的新增确诊趋势、新增疑似趋势、治愈趋势和死亡趋势
A:做法
- 先从官网下载好中国地图的SVG图片，通过改变地图选中状态时的填充色来实现高亮效果。
- 用热区与形状的状态改变来实现交互功能，在新的状态下制作各省份的详细疫情状况统计图。
- 把从官方渠道拿到的疫情数据导入开发好的中继器之中，将各省确诊人数不同以颜色深浅不同的方式表示，这一做法可以将已有的数据直观地展现出来.
- 在各省的详细疫情状况页面把近日统计的数据已折线图的方式表现出来，这一做法能让客户更加容易了解最近几天某省份的状况。
- 最后用Axure RP自带的云发布功能将做好的原型以网页形式发布。
B:好处
- 操作便捷。可以非常便捷地检索想要查找数据。
- 交互方式友好。只需点击想要查看的省份就能显示该新省份的详细信息。
- 表现直观。以地图的形式将数据可视化使人更加容易读懂数据。
- 使用方便。无需下载电脑应用或手机app，打开浏览器就能查看。
C:竞争
- 优势：使用简单；操作方便；表现直观；开发成本低；开发时间短。
- 劣势：同质化严重，大家都能做得出来，并没有什么可以拉开差距的地方；美观性差，由于第一次尝试原型设计，在目前水平有限的情况下制作出的产品并不美观。产品寿命短，疫情过去后该产品就没用了。
D:推广
- 即时通讯平台上推广，比如可以在QQ和微信上向右需要的好友推广我们的产品。
- 与新闻类软件合作，比如可以在今日头条的首页上嵌入我们的产品，让大众能够在第一时间查询到疫情相关的信息。
三.结对过程
聊天记录截图:
本次任务开始时我们打算两人一起完成原型设计，但分别尝试后发现原型设计貌似并不适合共同开发，因此我们最后决定将任务分配改为一人完成原型设计（221701111），一人完成博客部分（221701130）。
四.能效分析和PSP
-
能效分析：程序的效能分析需等具体编码完成后，才能提供。
-
PSP表格：
| PSP | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 30 | 35 |
| Estimate | 估计这个任务需要多少时间 | 25 | 20 |
| Development | 开发 | 360 | 400 |
| Analysis | 需求分析 (包括学习新技术) | 120 | 150 |
| Design Spec | 生成设计文档 | 40 | 40 |
| Design Review | 设计复审 | 20 | 30 |
| Coding Standard | 代码规范 (为目前的开发制定合适的规范) | ||
| Design | 具体设计 | 70 | 130 |
| Coding | 具体编码 | ||
| Code Review | 代码复审 | ||
| Test | 测试（自我测试，修改代码，提交修改） | ||
| Reporting | 报告 | 120 | 90 |
| Test Report | 测试报告 | 90 | 90 |
| Size Measurement | 计算工作量 | 40 | 25 |
| Postmortem & Process Improvement Plan | 事后总结, 并提出过程改进计划 | 30 | 30 |
| 合计 | 945 | 1040 |
