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

---

这个做业属于哪一个课程	2020春S班(福州大学)
这个做业要求在哪里	结对第一次—疫情统计可视化（原型设计）
结对学号	221701430 & 221701405
这个做业的目标	疫情统计可视化
做业正文	做业连接
其余参考文献	axure教程

1、NABCD模型

N（Need，需求）

目前新型冠状病毒肺炎疫情到了很是关键的时期，全社会仍然是严阵以待，疫情统计结果只是经过文字来显示，不够直观、具体，对用户不够友好。所以推出疫情可视化地图,但愿能够经过地图配合上小标签的形式直观显示疫情的状况，并经过图表显示数据的大小以及变化程度。

• 在全国地图上使用不一样的颜色表明大概确诊人数区间

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

• 点击某个省份显示该省疫情的具体状况

  • 显示该省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数；
  • 该省份到目前为止的新增确诊趋势、新增疑似趋势、治愈趋势和死亡趋势

A（Approach，作法）

经过web实现疫情数据的可视化，用地图的方式直观显示疫情状况。使用Axure rp 9进行原型设计，鼠标悬停于某省显示标签，标签显示某省简单数据，鼠标单击某省跳至另外一页面，另外一页面用于显示某省的具体数据，并在相应页面增长一些其余内容给予用户疫情的额外扩展信息。

B（Benefit，好处)

• 数据直观易懂。疫情数据图帮助群众更加直观了解疫情的情况。
• 实时了解疫情的实时情况，判断严重程度和将来的走向。
• 易于操做。只需简单的点击就能获得全部数据。
• 能够经过网站随时随地查看疫情情况

C（Competitors，竞争）

• 优点

  • 面向用户人群广。
  • 数据使用可视化地图和折线图表示 ，直观显示趋势变化。
  • 无需下载app,能够直接经过网页连接查看

• 劣势

  • 目前疫情可视化产品已经逐渐趋于完善，同类产品提供的功能甚至更加完善，并且用户众多。

D（Delivery，推广）

1. 在校园内部推广。
2. 经过微信、微博、QQ等平台进行线上推广。

2、原型设计

原型展现

原型展现

原型截图

设计过程

• 首先将整个原型分为两个页面，一个用于全国信息的展现，一个用于某省具体数据的展现。
• 全国数据：分为三个模块，总数据统计，疫情地图，疫情统计图。重点为疫情地图与统计图:
• 疫情地图使用中继器记录数据，利用svg中国地图，使用大量热区对某一省份进行填充，直到这些热区覆盖住整个省份的轮廓内部分，将这些热区加上交互事件，鼠标移入时将省份图设为真，移出设为假，在对应省份设置交互事件，这次利用动态面板实现地图高亮，将每一个省分为两个状态，一个为原色一个为白色高亮状态，对应热区增长移入移出改变更态面板状态的交互事件便可实现高亮，在省份加入选中事件，从中继器进行数据筛选获取对应数据用于设置地图标签文本并将地图标签显示于鼠标附近位置
• 疫情统计图一样使用中继器保存数据，并在中继器中添加矩形做为横坐标的显示以及条形图的长条，使用一个隐藏的方框存取数值的最大值，中继器中加入每项载入交互事件，设置长条矩形的高度尺寸为原长条矩形高度*数据/最大值，这样最大值那一项的长条就会和原高度一致，其余项就会按比例缩小长度以实现动态的变化，这样即便改变中继器中的数值，统计图中的长条依然会根据比例改变大小
• 某省具体数据：一样分为三个模块，折线统计图，总数据展现以及谣言粉碎机。重点为折线统计图：
• 以一样原理实现条形统计图，隐藏长条矩形，按一样原理在长条顶端增长散点造成可随中继器数据改变位置的动态散点图，再增长一条直线，为中继器的每项载入交互事件增长原件移动和原件尺寸修改的动做，将直线改变成应有长度和角度并移动到正确位置便可实现折线图
• 这次因为只是原型，省份的具体数值页面跳转只有上海市实现，图例的交互只显示了前两个图例的悬停对应省份高亮显示

原型开发工具

Axure RP

3、结对过程与总结

结对过程

因为疫情缘由没法在线下进行讨论，所以主要经过QQ聊天及语音通话沟通，由此分工合做

遇到的困难及解决方法

困难：

• 1.热区形状为矩形，而每一个省份形状不一且不规则
• 2.如何实现图例对应身份的集体高亮显示
• 3.统计图不知如何实现根据数据的变化而改变 解决：
• 1.使用多个热区对省份轮廓内区域的全覆盖
• 2.利用动态面板的状态切换，在图例标志上增长鼠标移入移出事件并添加动态面板状态切换动做，移入切换为高亮的状态2，移出切换为普通的状态1便可
• 3.使用中继器存储数据，使用一个矩形存放最大值，在中继器每项加载时进行条形统计图中长条的尺寸变更，具体公式为高度=原长度*该项数值/最大数值用以实现条形长度的动态变化，折线图同理

总结

在本次做业中，经过学习使用Axure RP，掌握了地图原型的构建，还有柱状图、折线图的绘制。还有最重要的收获应该就是学会了团队合做，包括如何和队友进行分工合做，遇到了困难及意见不一时又该如何有效的进行沟通，最终达成一致，更快更高效的达到共同的目标。

4、效能分析和PSP

• 效能分析 因为本次做业没有代码，所以无效能分析
• PSP表

PSP2.1	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	100	120
Estimate	估计这个任务须要多少时间	30	40
Development	开发	200	180
Analysis	需求分析 (包括学习新技术)	500	540
Design Spec	生成设计文档	60	90
Design Review	设计复审	30	20
Design	具体设计	300	350
Reporting	报告	120	100
Test Repor	测试报告	20	20
Size Measurement	计算工做量	10	10
Postmortem & Process Improvement Plan	过后总结, 并提出过程改进计划	60	50
合计		1430	1520

5、博客内容PDF

博客PDF