结对第一次-某次疫情统计可视化（原型设计）
| 这个作业属于哪个课程 | 2020春S班（福州大学） |
|---|---|
| 这个作业要求在哪里 | 结对第一次—疫情统计可视化（原型设计） |
| 结对学号 | 221701406、221701407 |
| 这个作业的目标 | 某次疫情统计可视化（原型设计） |
| 作业正文 | 结对第一次-某次疫情统计可视化（原型设计） |
| 其他参考文献 |
一、疫情统计可视化原型
- 导航栏部分
<img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228145026%E5%AF%BC%E8%88%AA%E6%A0%8F%E9%83%A8%E5%88%86.PNG" width=20%/> * 全国数据统计 <img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228145213%E7%BB%9F%E8%AE%A1%E6%95%B0%E6%8D%AE.PNG" width=50%/> * 疫情地图 <img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228145302%E7%96%AB%E6%83%85%E5%9C%B0%E5%9B%BE.png" width=60%/> * 省份详细信息页面 <img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228145426%E7%9C%81%E4%BB%BD%E5%85%B7%E4%BD%93%E4%BF%A1%E6%81%AF%E9%A1%B5%E9%9D%A2.PNG" width=40%/> * 患者求助专区 <img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228145639%E6%82%A3%E8%80%85%E6%B1%82%E5%8A%A9%E4%B8%93%E5%8C%BA.PNG" width=30%/> * 疫情实时资讯 <img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228145716%E7%96%AB%E6%83%85%E5%AE%9E%E6%97%B6%E8%B5%84%E8%AE%AF.PNG" width=30%/> * 全国疫情趋势图 <img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228145742%E5%85%A8%E5%9B%BD%E7%96%AB%E6%83%85%E8%B6%8B%E5%8A%BF%E5%9B%BE.PNG" width=40%/> * 表格数据统计 <img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228145810%E8%A1%A8%E6%A0%BC%E6%95%B0%E6%8D%AE%E7%BB%9F%E8%AE%A1.PNG" width=40%/>
二、NABCD模型
N（Need，需求）
1、客户基本需求
- 总体需求
将疫情数据可视化。给定国内各省前一天的感染情况的日志文本，将其不够直观的文字形式的数据，转化为直观、具体且用户友好的地图形式，来直观显示疫情的大致分布情况，并且可以查看具体省份的疫情统计情况。
- 需求细则
- 在全国地图上使用不同的颜色代表大概确诊人数区间
- 颜色的深浅表示疫情的严重程度，可以直观了解高危区域；
- 鼠标移到每个省份会高亮显示；
- 点击鼠标会显示该省具体疫情情况。
- 点击某个省份显示该省疫情的具体情况
- 显示该省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数；
- 该省份到目前为止的新增确诊趋势、新增疑似趋势、治愈趋势和死亡趋势。
2、需求拓展
- 患者求助专区，收集无法得到收治患者的相关信息，向相关部门报告。确保患者能够及时隔离救治。
- 疫情实时资讯，在页面提供疫情相关报告，使广大群众能更及时更系统地了解疫情相关信息。
A（Approach，做法）
| 功能模块 | 详细功能 |
|---|---|
| 全国疫情数据统计 | 1.统计全国疫情总体数据，包括现存确诊、确诊重症、疑似，累计确诊、死亡、治愈病例的数据化展示。<br/>2.各部分数据每日根据给定的日志文本进行更新，且各部分数据相应展示相对前一天的数据变化情况。 |
| 疫情可视化地图 | 将不够直观的疫情数据通过直观友好的地图形式直观展现。<br/>1.对各省份根据确诊人数的数量用颜色去区分开来，可直观了解疫情高危区域。<br/>2.鼠标移到每个省能够高亮显示并展示省份疫情简略信息。<br/>3.点击每个省份进入到省份详细疫情情况页面。该页面展示对应省的具体疫情信息，并将疫情变化数据以曲线图形式展示。 |
| 全国疫情趋势图 | 1.将全国疫情数据以曲线图的形式展示出来。<br/>2.通过点击曲线图下的按钮，能够观察不同类别病例数据的曲线趋势图。 |
| 各省疫情数据表 | 将全国各省的数据以表格的形式展现，每日更新并根据确诊病例数进行排序。 |
| 患者求助专区 | 为无法得到及时收治的患者提供信息反映渠道，使病患能够得到及时救治。 |
| 疫情实时资讯 | 提供疫情信息相关报告，使用户能够及时系统地了解到疫情最新消息。 |
B（Benifit，好处）
- 我们的网站集全国疫情感染分布图、全国疫情感染趋势图、疫情实时新闻、疫情实时数据和疫情信息申报这五个主要功能于一体，用户无需登录、无需注册、更加无需来回切换许多单一功能的软件来获取信息，省去了许多麻烦。
- 我们的界面清晰明了，按钮功能明确，并且加入了导航栏的功能，可以一键定位到用户想要了解的信息。
- 我们通过绘制不同颜色的深浅来反应各个省份关于疫情的严重性，最大程度向用户直观地展示数据，我们还包含了趋势图和数据表格，不同方面展示信息。
C（Competitors，竞争）
- 我们和竞争者同样都实现的功能如下
- 全国疫情情况分布图
- 全国疫情情况趋势图
- 各省疫情情况详细趋势图
- 各省疫情汇总数据
- 疫情实时新闻
- 优势在于
- 界面简单、能够直观地反应数据
- 数据有不同的展示方式，多层次地反应数据
- 功能集合于一体，减少了不同产品之间带来信息重叠的可能
- 用户操作便捷，能够实现一键获取主要信息
- 提供用户反馈信息的渠道，适当地给予帮助
- 劣势在于
- 市面上功能类似的产品不止一个，存在一定的竞争
- 由于需要获取并汇总信息，所以存在一定的数据滞后，没有新闻报纸更新快
- 产品针对性强，热度会随着疫情的逐渐结束而消失
D（Delivery，推广）
- 通过各种社交软件（例如QQ、微信、微博）进行转发，增加浏览量
- 大学生群体传播信息速度快，要把握住校园这一特殊的平台来推广产品
- 加快软件开发的成熟度，上架各大应用商城APP进行推广
三、困难解决
1、困难描述
- 困难一：刚开始我们选择的原型制作工具是墨刀，原因很简单，墨刀简单易上手。然而，第一步就被打垮了。百度了一下墨刀怎么实现地图高亮，发现要“对每个省份复制一层，在上边的那层钢笔抠图，按各个地区的边界线抠出来单独调颜色亮度。”工作量庞大······
- 困难二：后来我们改道Axure，又被工作模式束缚了手脚。本打算使用Axure中的团队项目，实现同步设计提高效率。初步尝试时发现Axure是外国软件，团队模式设计时进行签入、签出、获取云端变更登操作时会耗费大量时间。
- 困难三：Axure中热区形状固定，而每个省份的形状大小各异，导致热区很难完全覆盖整个省份。
- 困难四：中国省份多，每个省份的热区都需添加对应的交互，并且交互包含链接到省份详细信息页面、实现高亮和显示省份确诊信息数据等，工作量大。
2、解决尝试
- 解决一：由于墨刀对实现地图高亮的操作难度相对较大，所以我们最终选择了Axure。因为从来没接触过Axure，所以各自花费了2~3个小时对Axure里面的各个功能进行了学习和实验，方便后续的操作。我们下载了svg地图添加到项目中，再给每个省份添加热区和对应的交互，终于解决了高亮的问题。
<img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228130917%E5%9C%B0%E5%9B%BE.png" width=50%/> * 解决二：团队项目的模式并没有像预期般实用，后来转念一想，可以创建个人项目，利用QQ进行传输反而效率更高。由于不能一起对项目进行实时操作，所以我们在原型的设计上进行了分工，一个人负责对地图热区和各种交互的添加，另一个人负责趋势图、数据表和整体状态的部署，解决了问题。 * 解决三：Axure中，热区的形状只能是矩形，所以只能通过添加很多个不同形状的矩形热区来尽可能地覆盖每个省的位置。由于矩形形状的限制，没办法非常完美地契合各个省份的分界线，但是我们尽可能地把图片放大，实现热区的覆盖。 <img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_200228130743%E7%83%AD%E5%8C%BA.PNG" width=50%/> * 解决四：这个困难的唯一解决办法就是老老实实坐在电脑前一波操作，然后腰酸背痛一整天~
3、是否解决
<input name="checkbox" type="checkbox" value="checkbox" checked="checked" />地图高亮的解决 <input name="checkbox" type="checkbox" value="checkbox" checked="checked" />合作时的工作模式 <input name="checkbox" type="checkbox" value="checkbox" checked="checked" />热区不能完全覆盖的问题 <input name="checkbox" type="checkbox" value="checkbox" checked="checked" />工作量大
4、有何收获
- 张钰婷：之前没有接触过原型设计，一开始看到题目的时候是很懵逼的，以为又要代码实现什么东西。后来着手研究Axure时，发现还挺有意思。接触到新的事物，感觉学习都有了动力。和队友研究出作业里的一个个原型设计要求时，还有些兴奋hhhh。由于队友就是舍友，在之前也有过一起结对做大作业，所以在本次作业完成的过程中，都无比地默契和愉悦~
- 吕宇昕：首先最大的收获当然是多get了一个软件技能啦！没有尝试前以为原型设计很难，和结对舍友唉声叹气不想面对，结果一步步地学习之后发现原来是这么有趣。从刚开始的一块白板到实现丰富多彩的功能，成就感爆棚~除此之外，还了解了NABCD模型，对产品分析提供了很大的帮助~如果下次还有原型设计我一定能够得心应手啦！另外最重要的是，感谢队友（也就是舍友），合作非常愉快，沟通毫无障碍~
四、合作
1、结对过程
神仙舍友出征 <img src="https://images.cnblogs.com/cnblogs_com/lyxblogaxi/1638320/o_2002281515581.jpg" width=20%/>
2、快乐学习
话太多了，随便截一点嘿嘿嘿！合作愉快！
<div> <img src="https://images.cnblogs.com/cnblogs_com/zytblog/1657391/o_2002281408353.jpg" width=20%/><img src="https://images.cnblogs.com/cnblogs_com/zytblog/1657391/o_2002281408444.jpg" width=20%/><img src="https://images.cnblogs.com/cnblogs_com/zytblog/1657391/o_2002281408525.jpg" width=20%/><img src="https://images.cnblogs.com/cnblogs_com/zytblog/1657391/o_2002281409006.jpg" width=20%/><img src="https://images.cnblogs.com/cnblogs_com/zytblog/1657391/o_2002281409097.jpg" width=20%/> </div> ## 五、原型工具 Axure RP Axure RP是一款专业的快速原型设计工具。Axure RP是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。
六、PSP表格
| PSP2.1 | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 30 | 30 |
| Estimate | 估计这个任务需要多少时间 | 30 | 30 |
| Development | 开发 | 1975 | 1740 |
| Analysis | 需求分析 (包括学习新技术) | 240 | 200 |
| Design Spec | 生成设计文档 | 120 | 60 |
| Design Review | 设计复审 | 30 | 40 |
| Coding Standard | 代码规范 (为目前的开发制定合适的规范) | 45 | 40 |
| Design | 具体设计 | 240 | 200 |
| Coding | 具体编码 | 1000 | 960 |
| Code Review | 代码复审 | 180 | 120 |
| Test | 测试（自我测试，修改代码，提交修改） | 120 | 120 |
| Reporting | 报告 | 130 | 160 |
| Test Report | 测试报告 | 90 | 120 |
| Size Measurement | 计算工作量 | 10 | 5 |
| Postmortem & Process Improvement Plan | 事后总结, 并提出过程改进计划 | 30 | 35 |
| 合计 | 2135 | 1930 |
七、博客内容PDF
八、写在最后
2020年，不止有点难。新型肺炎的爆发，使得本该阖家欢乐的春节，变得人人自危。疫情爆发后，相信很多人都和你我一样，每天不停，被动或主动地刷着咨询。在冷冰冰的上升的确诊字数里，在一则又一则让人寒心的坏消息里，我们总能看到暖心的新闻。“请再等等。等春天的到来，等地铁里的人多到来不及上这一班，等大排档里吵到必须扯着嗓子说话，等去武大看樱花的人比花还多······” 最后，分享一句话：待凛冬散去，雪融草原，相信一定有新的相逢将温暖延续！
原文出处：https://www.cnblogs.com/lyxblogaxi/p/12380761.html
来源：oschina
链接：https://my.oschina.net/u/4282139/blog/3239803