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

这个作业属于哪个课程	2020春-s班
这个作业要求在哪里	作业要求链接
结对学号	221701305&221701316
这个作业的目标	结对合作完成作业；设计产品原型
作业正文	作业正文
其他参考文献	csdn、百度

1、原型地址

原型地址

2、困难&解决过程

问题一：地图高亮展示
解决：采用Axure rp的交互功能，对鼠标悬浮新建一个交互，改变地图的颜色以及设置阴影等等
问题二：悬浮文字
解决：采用动态面板，对想要进行悬浮的部件创建交互Mouse Move和Mouse Exit事件，再将动态面板进行隐藏
问题三：Axure rp自带的功能无法满足我们想要的折线图的设计
解决：使用highcharts绘画折线图代替原来用点和线画成的折线图,最后得到的折线图既美观又准确

3、原型模型设计

3.1 分工部分

221701305 林琳:

• 地图颜色的深浅表示疫情的严重程度，直观了解高危区域
• 鼠标移到每个省份会高亮显示；
• 点击鼠标会显示该省具体疫情情况
• 博客撰写

221701316 刘成华：

• 显示每个省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数；
• 显示每个省份到目前为止的新增确诊趋势、新增疑似趋势、治愈趋势和死亡趋势;
• 全国疫情折线图

3.2 原型展示

3.2.1 静态展示原型的样式

3.2.2 展示高亮显示省份

3.2.3 展示全国疫情数据

3.2.4 展示某省份疫情数据

3.3 总结与收获

221701305 林琳：
收获：
1.学习了Axure rp软件的一些基本功能，包括导入SVG文件、为元件添加交互事件、修改样式、将原型发布成网页等等；
2.学习了如何导入Echarts；
3.阅读了《构建之法》3-8章，重点学习了NABCD模型。
总结：
  通过这次作业，我明白了制作原型的过程，原来并没有我想象的那么困难，一开始我以为中国地图需要自己绘制，为此苦恼了许久，后来查阅了资料后发现可以直接使用SVG图片导入，方便又准确。在制作原型的过程中我收获了很多，也学习了一些页面布局方面的知识，希望将来对前端的开发能有所帮助。这次通过和同学共同完成作业，我收获了团队协作的技巧，明白了团队协作的重要性，碰到问题及时沟通，和队友一起合作远比一个人效率来得高。

221701316 刘成华
收获
1、这次作业不仅让我知道了hightcharts这么一个东西，可以十分方便的制作出我想要的图片；
2、由于一开始搜集资料并不充分，所以一开始浪费了许多时间动画那个折线图，这次也是一次小小的教训，让我明白动手之前去搜集信息的重要性，包括信息、模板等等；
3、和队友相互交流沟通也是让我受益匪浅，我知道了一个产品的顺利开发是需要团队的一起努力的结果，我的队友也是十分的棒，一有问题就及时沟通，节省了许许多多的时间，提高了开发的效率。
总结：
  一开始拿到这次作业的时候，感觉虽然没有要编码的部分，但是呢，这是我们软件工程课程的第一次结对作业。而且考虑的疫情的影响，我和队友交流起来也是十分的不方便。但是呢，我们还是利用网络互相交流，最终顺利地完成了作业。其中，令我印象最深刻的部分就是折线图制作部分。我用的方法是使用手画折线图，就是用点和线一笔一笔画出来的，就这样花了各个省和全国的情况。后来和队友搭档讨论了一下，知道了highcharts这个东西，知道了可以使用可视化编辑来绘画折线图，于是我就使用了这么一个highchart，方便又准确地画出了漂亮的的折线图。

3.4 原型模型设计工具

• Axure rp 9.0
• Visual Studio code

4、NABCD模型

N-NEED（需求）

用户需求

有一家统计网站每天都会提供一个对应的日志文本，记录国内各省前一天的感染情况，上次的疫情统计结果只是通过文字来显示，不够直观、具体，对用户不够友好，在本次作业里，我们希望可以通过地图的形式来直观显示疫情的大致分布情况，还可以查看具体省份的疫情统计情况。具体需求如下： 在全国地图上使用不同的颜色代表大概确诊人数区间

• 颜色的深浅表示疫情的严重程度，可以直观了解高危区域；
• 鼠标移到每个省份会高亮显示；
• 点击鼠标会显示该省具体疫情情况
• 显示该省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数；
• 该省份到目前为止的新增确诊趋势、新增疑似趋势、治愈趋势和死亡趋势;

基本需求整理

• 使用由浅至深的颜色来绘制全国地图，以便直观展示疫情的严重程度
• 鼠标移动到省份上时高亮显示
• 鼠标点击某个省份时会展示这个省份疫情的具体情况，以及最近发展的趋势

拓展需求

• 在地图界面，当鼠标悬浮在某个具体的省份时，会浮现该省份的具体感染数据
• 在折线统计图上，当鼠标指向某个具体的点时，会浮现该数值
• 新增全国数据，既有文本形式，又有折线图形式直观展现疫情发展趋势，支持感染、疑似、治愈、死亡人数以各种组合方式放在一起对比，还可以高亮具体的数据的折线图
• 待拓展······

A-Approach（做法）

原型采用web网页形式发布，前后端分离

• 原型使用Axure Rp制作
• 图表使用JavaScript制作
• 数据调用后端接口，后端程序处理从日志文本中读取的内容

B-Benefit（好处）

• 采用颜色深浅来表示疫情的严重程度，直观清晰
• 采用折线图来展示数据，更加直观
• 提供了疫情发展趋势统计图，采用折线图来展示，简洁明了
• 将原型发布成网页形式，访问更加快捷、方便
• 网页形式便于传播分享
• 页面简洁，所有功能设计都很直观，节约用户时间

C-Competitors（竞争）

优势

• 将产品发布成网页，用户访问方便快捷，不占内存空间
• 专注于疫情统计功能设计，采用地图、折线图来展示疫情数据，清晰直观，节约用户时间
• 没有多余的广告，页面简洁

劣势

• 产品发布于疫情爆发一个多月后，失去先发优势，市面上已经有许多成熟的同类型产品可以代替，并且在用户已经使用一段时间后，想要替换更加困难
• 由于学生的身份，宣传困难
• 产品功能不够完善

D-Delivery（推广）

• 利用学生的身份，可以在校内平台进行推广
• 可以在微信、QQ、微博等大众使用的app上进行推广,由于产品是网页形式，可以分享至朋友圈、QQ空间、微博等，请亲朋好友帮忙推广
• 可以利用疫情的主题，抓住我们的产品特点进行推广

5、讨论过程照片展示

6、效能分析与PSP表格

PSP2.1	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	40	45
Estimate	估计这个任务需要多少时间	10	10
Development	开发	490	550
Analysis	需求分析 (包括学习新技术)	40	35
Design Spec	生成设计文档	30	35
Design Review	设计复审	20	25
Coding Standard	代码规范 (为目前的开发制定合适的规范)	--	--
Design	具体设计	120	150
Coding	具体编码	240	260
Code Review	代码复审	40	45
Test	测试（自我测试，修改代码，提交修改）	100	90
Reporting	报告	90	75
Test Repor	测试报告	10	15
Size Measurement	计算工作量	20	15
Postmortem & Process Improvement Plan	事后总结, 并提出过程改进计划	30	30
合计		790	830

7、随笔附件

随笔附件