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

这个作业属于哪个课程	2020春|S班 (福州大学)
这个作业要求在哪里	结对第一次—疫情统计可视化（原型设计）
结对学号	221701106 221701129
这个作业的目标	1.学习专用的原型模型设计工具并设计可视化疫情统计 2.学习NABCD模型 3.体会结对完成一项任务所需要的交流与合作
作业正文	结对第一次—疫情统计可视化（原型设计）
其他参考文献	百度、CSDN、《构建之法》

原型成果展示

原型链接:https://www.wulihub.com.cn/gc/QLbgpq/start.html#id=w0zyq4&p=地图

gif使用了简单便捷的GifCam软件制作，由于软件的限制，gif图片无法捕捉到鼠标。 **1.在全国地图上使用不同的颜色代表大概确诊人数区间。** + 颜色的深浅表示疫情的严重程度; + 可以直观了解高危区域; + 鼠标移到每个省份会高亮显示; + 点击鼠标会显示该省具体疫情情况。

2.可以显示全国的累计确诊人数、新增确诊人数、累计治愈人数、确认死亡人数。

3.点击某个省份显示该省疫情的具体情况。

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

设计思路、困难及解决方法以及收获

1.设计思路

• 首先根据NABCD模型对需求、做法、好处、竞争、推广做了简单的分析。主要明确了本次作业的需求以及做法;
• 随后根据需求和计划采用的做法进行了大致的分工并形成了PSP表格;
• 根据分工同步完成了数据的收集以及原型模型的制作;
• 最后发布成网页。

2.困难及解决方法

• 问题1:作业中提到原型模型必须采用专用的原型模型设计工具实现，并提供了许多可供使用的软件。我们第一次使用原型模型设计工具，对这种工具一无所知，该选择哪个软件呢？
  是否解决:是
  解决措施:百度查了很多资料决定使用Axure RP 9，这种工具操作比较简单，容易上手，对于新手比较友好。

• 问题2:怎么在Axure RP 9中创建一个中国地图？
  是否解决:是
  解决措施:这个地图是找了网上的一个资料，网站是https://www.pmdaniu.com/rp/detail/98975，但是这个地图是存在一些问题的，所以我们对地图进行了一些改正，切割，解决了部分边界交互问题。

• 问题3:怎么实现累计确诊人数、新增确诊人数、累计治愈人数、确认死亡人数等折线图？
  是否解决:是
  解决措施:动态折线图，我们最开始是要打算用Axure RP 9直接来自动生成的，但是经过百度过后发现要用到很多函数，比如Math.atan2，以及求角度等。后来发现上学期Web实践使用的echarts代码可以生成折线图，因此我们决定采用echarts来完成该功能。我们发现网上有一个折线图的模板代码，直接copy下来，随后自己“魔改”代码形成了适用于本次作业原型模型的折线图。

• 问题4:如何在点击省份时，显示说明信息？
  是否解决:是
  解决措施:这个功能应用到了Axure RP 9的动态面板。最开始我们对这个功能也很陌生，也是通过百度逐渐熟悉的。随后我们写了34个面板对应34个省份，对应省份显示相应的说明信息。

• 问题5:点击福建和四川时，怎么跳转另一个界面，即如何点击某个省份显示该省疫情的具体情况？
  是否解决:是
  解决措施:经过百度，我们发现应该使用内联框架解决这个问题。刚开始使点击预览一直无法实现这个功能，后来问了已经完成了该作业的同学之后才知道需要生成.html后才可以在网页中看到折线图。

• 问题6:地图还有一点瑕疵，即边界交互问题，如何精确的实现边界交互？
  是否解决:否
  解决措施:由于中国各个省份的边界是不规则曲线，但是我们找到的中国地图模板各个省份是一个个矩形图片组合而成的。因此在鼠标在边界交互（显示高亮和实现跳转）会存在一部分偏差。我们尝试了挺多方法但是依旧无法达到完全精确的程度，但是经过我们的努力现在已经不太影响用户体验，因此决定采用现在的原型模型即可。

• 问题7:交互指令不熟悉，原型模型制作速度慢。
  是否解决:是
  解决措施:这个没有很好的解决方案，不过在我们原型模型制作到后期阶段，进行了大量的测试，自然而然的熟悉了起来，因此顺其自然的搞懂了很多交互事件的书写方式，也提高了制作效率。

• 问题8:如何将原型需要发布成网页？
  是否解决:是
  解决措施:最开始我们以为是要申请一个域名之类的，但是觉得肯定有别的方法。经过百度和询问同学发现有两个解决方法，第一个是直接在Axure RP 9上共享，可以自动生成一个链接，即发布成网页过后的网页链接。我们尝试过后发现我们的图表都没有显示，以为是只能共享rp文件导致的。因此采用了另外一个方法，在https://www.wulihub.com.cn/网站上上传整个压缩文件，随后可以发布成网页。但是发布成网页过后我们发现还是无法显示我们的图表，经过问题排查过后，发现打开我们的html,发现我们的js链接都是在线的，而js链接必须要本地的，因此发布过后无法显示出来。解决过后我们直接采用第二种方法重新发布了一个，最终取得了成功。

3.收获

• 刘星雨：通过本次作业，我们初步学习了如何使用专用的原型模型设计工具Axure RP 9进行原型模型设计，并实现了一个简单的疫情统计可视化。同时，通过结对完成作业体会了如何合作和分工，加强了沟通协作能力。当然，面对一个陌生的软件和技术，必不可少的就是查阅资料和询问同学以达到自学的效果，增强了自学和资料查阅的能力。通过阅读《构建之法》，理论上更加理解了如何进行两人合作，明白了需要通过代码规范、代码风格规范、代码设计规范等手段来提高查看对方代码的效率。通知也了解了一些两人合作的不同阶段和技巧。此外，《构建之法》第八章中的NABCD模型通过阅读和实践，我们更加深刻的意识到设计一个软件或者网页不仅仅只有代码的工作，需求分析等也相当的重要。
• 龚俊鹏：通过本次作业，我们学了挺多东西的，首先第一次这种形式的合作是有些小问题的，但是我们不断沟通，不断磨合，解决了很多问题。我们学习了专用的原型模型设计工具Axure RP 9进行原型模型设计，并实现了一个简单的疫情统计可视化。其实这个软件看似很简单，但是一些交互事件的处理书写顺序其实挺难得，问了很多人，才弄懂了一些技巧，但是这个软件也是很友好的，挺容易上手。至于《构建之法》阅读，前面明白了代码规范、代码风格规范、代码设计规范等手段来提高查看对方代码的效率。后面这几章看了NABCD模型，了解了一些两人合作的不同阶段和技巧，意识到分工合作的重要性。

NABCD模型使用

1. N(Need,需求)

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

2. A（Approach,做法）
使用原型模型设计工具Axure RP 9并发布成网页。

• 学习Axure RP 9的基本操作;
• 统计并处理数据，我们使用了操作较为简单快捷的Excel表格对数据进行处理;
• 使用Axure RP 9设计相关功能，即中国地图、地图中省份与鼠标的交互事件以及图表等;
• 将最终完成的原型模型发布成网页。

3. B（Benefit,好处）
经过我们的商讨和分析，总结的好处有以下几种：

• 用户能直观的查看全国以及各省份的感染患者人数、疑似患者人数、治愈人数、死亡人数的情况;
• 用户能通过折线图清晰的了解全国以及各个省份每天的感染患者人数、疑似患者人数、治愈人数、死亡人数的变化情况，由此直观的看到疫情是否变严重或是有所好转;
• 界面较美观，用户操作简便，并不需要通过查看手册等方法即可上手，因此用户体验良好。

4. C（Competitors,竞争）

• 优势:
  • 折线图和地图统计的数据直观明了;
  • 用户操作简单，容易上手，体验良好。
• 劣势:
  • 同样的可视化平台众多，且各平台成熟度较高;
  • 功能较为单一。
    

5. D（Delivery,推广）
作为学生，拥有的资金和社交渠道比较有限，因此没有特别好的推广方式，经过讨论我们总结了以下2个比较可行的方法:

• 最好的方法是在校园和亲朋之间推广，可以通过编写文案并在QQ空间或微信朋友圈附上链接让自己的亲朋好友接触到我们设计的可视化平台的同时通过转发实现人传人，即可实现较大规模的推广;
• 通过编写博客，能几率能被使用博客园或者百度搜索的人检索到，从而让这些人群接触到我们设计的可视化平台;
  

采用的原型模型设计工具

Axure Rp 9

结对的过程

一开始，我们通过语音通话，明确了此次作业的需求并完成了任务的分工

随后我们便通过QQ进行沟通，跟进相互的进度以及实现文件的传输

完成并发布到网上后，通过使用和测试，发现了一些小问题

在问题修改之前初步完成了博客

效能分析和PSP

1. 效能分析
由于本次未进行实际编码，因此没有进行效能分析。

2. PSP

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

附件:博客PDF

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