| 这个作业属于哪个课程 | 2020春S班(福州大学) |
|---|---|
| 这个作业要求在哪里 | 结对第一次—疫情统计可视化（原型设计） |
| 结对学号 | 221701430 & 221701405 |
| 这个作业的目标 | 疫情统计可视化 |
| 作业正文 | 作业链接 |
| 其他参考文献 | axure教程 |
一、NABCD模型
N（Need，需求）
目前新型冠状病毒肺炎疫情到了非常关键的时期，全社会仍然是严阵以待，疫情统计结果只是通过文字来显示，不够直观、具体，对用户不够友好。因此推出疫情可视化地图,希望可以通过地图配合上小标签的形式直观显示疫情的情况，并通过图表显示数据的大小以及变化程度。
-
在全国地图上使用不同的颜色代表大概确诊人数区间
- 颜色的深浅表示疫情的严重程度，可以直观了解高危区域；
- 鼠标移到每个省份会高亮显示；
- 点击鼠标会显示该省具体疫情情况
-
点击某个省份显示该省疫情的具体情况
- 显示该省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数；
- 该省份到目前为止的新增确诊趋势、新增疑似趋势、治愈趋势和死亡趋势
A（Approach，做法）
通过web实现疫情数据的可视化，用地图的方式直观显示疫情情况。使用Axure rp 9进行原型设计，鼠标悬停于某省显示标签，标签显示某省简单数据，鼠标单击某省跳至另一页面，另一页面用于显示某省的具体数据，并在相应页面增加一些其他内容给予用户疫情的额外扩展信息。
B（Benefit，好处)
- 数据直观易懂。疫情数据图帮助群众更加直观了解疫情的状况。
- 实时了解疫情的实时状况，判断严重程度和未来的走向。
- 易于操作。只需简单的点击就能得到所有数据。
- 可以通过网站随时随地查看疫情状况
C（Competitors，竞争）
- 优势
- 面向用户人群广。
- 数据使用可视化地图和折线图表示 ，直观显示趋势变化。
- 无需下载app,可以直接通过网页链接查看
- 劣势
- 目前疫情可视化产品已经逐渐趋于完善，同类产品提供的功能甚至更加完善，而且用户众多。
D（Delivery，推广）
- 在校园内部推广。
- 通过微信、微博、QQ等平台进行线上推广。
二、原型设计
原型展示
原型截图
设计过程
- 首先将整个原型分为两个页面，一个用于全国信息的展示，一个用于某省具体数据的展示。
- 全国数据：分为三个模块，总数据统计，疫情地图，疫情统计图。重点为疫情地图与统计图:
- 疫情地图使用中继器记录数据，利用svg中国地图，使用大量热区对某一省份进行填充，直到这些热区覆盖住整个省份的轮廓内部分，将这些热区加上交互事件，鼠标移入时将省份图设为真，移出设为假，在对应省份设置交互事件，此次利用动态面板实现地图高亮，将每个省分为两个状态，一个为原色一个为白色高亮状态，对应热区增加移入移出改变动态面板状态的交互事件即可实现高亮，在省份加入选中事件，从中继器进行数据筛选获取对应数据用于设置地图标签文本并将地图标签显示于鼠标附近位置
- 疫情统计图同样使用中继器保存数据，并在中继器中添加矩形作为横坐标的显示以及条形图的长条，使用一个隐藏的方框存取数值的最大值，中继器中加入每项载入交互事件，设置长条矩形的高度尺寸为原长条矩形高度*数据/最大值，这样最大值那一项的长条就会和原高度一致，其他项就会按比例缩小长度以实现动态的变化，这样即使改变中继器中的数值，统计图中的长条依然会根据比例改变大小
- 某省具体数据：同样分为三个模块，折线统计图，总数据展示以及谣言粉碎机。重点为折线统计图：
- 以同样原理实现条形统计图，隐藏长条矩形，按同样原理在长条顶端增加散点形成可随中继器数据改变位置的动态散点图，再增加一条直线，为中继器的每项载入交互事件增加原件移动和原件尺寸修改的动作，将直线改变成应有长度和角度并移动到正确位置即可实现折线图
-
此次由于只是原型，省份的具体数值页面跳转只有上海市实现，图例的交互只显示了前两个图例的悬停对应省份高亮显示
原型开发工具
Axure RP
三、结对过程与总结
结对过程
由于疫情原因无法在线下进行讨论，因此主要通过QQ聊天及语音通话沟通，由此分工合作
遇到的困难及解决方法
困难：
- 1.热区形状为矩形，而每个省份形状不一且不规则
- 2.如何实现图例对应身份的集体高亮显示
- 3.统计图不知如何实现根据数据的变化而改变
解决：
- 1.使用多个热区对省份轮廓内区域的全覆盖
- 2.利用动态面板的状态切换，在图例标志上增加鼠标移入移出事件并添加动态面板状态切换动作，移入切换为高亮的状态2，移出切换为普通的状态1即可
- 3.使用中继器存储数据，使用一个矩形存放最大值，在中继器每项加载时进行条形统计图中长条的尺寸变动，具体公式为高度=原长度*该项数值/最大数值用以实现条形长度的动态变化，折线图同理
总结
在本次作业中，通过学习使用Axure RP，掌握了地图原型的构建，还有柱状图、折线图的绘制。还有最重要的收获应该就是学会了团队合作，包括如何和队友进行分工合作，遇到了困难及意见不一时又该如何有效的进行沟通，最终达成一致，更快更高效的达到共同的目标。
四、效能分析和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 |
