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

这个作业属于哪个课程	2020春|S班(福州大学)
这个作业的要求在哪里	结对第一次-某次疫情统计可视化（原型设计）
结对学号	021700531、131700127
这个作业的目标	合作设计原型，从而实现某次疫情统计可视化
作业正文	正文
其他参考文献	AxureRP教程、CSDN博客、《构建之法》，echarts教程等 Axure 教程：中国地图和世界地图 AxureRP9教程

一、原型展示

原型

二、NABCD模型使用详细说明

N（Need，需求）

希望可以通过地图的形式来直观显示疫情的大致分布情况，还可以查看具体省份的疫情统计情况。

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

A（Approach，做法）

1.Axure RP：（设计原型）
作为前端开发的工具，设计美化前端页面。
设计中国疫情地图，设计交互。显示各个省份的疫情数据。

2.Echarts： （设计图表）
设计显示折线图。反应疫情变化趋势。

B （Benefit，好处）

1.数据显示直观，从地图上直接读出疫情的数据。

2.操作方便，从地图上直接交互各省的折线图。

C （Competitors，竞争）

优势 ：
1.页面节俭美观。
2.操作方便，用户体验好。

劣势 ：
1.同类产品已经非常成熟了，没有突出的优点。
2.交互使用了frame，使用过程中有卡顿。

D （Delivery，推广）

• 微博推广
• 微信、QQ等社交平台
• 校园平台

三、遇到的困难及解决方法

1.Axure的使用入门：

困难：第一次使用原型设计工具，不知道从何下手。
解决方法：看了教程以后没咋懂，自己实践了一下发现也就热区，交互，标签，中继器啥的，还是比较简单的。

2.地图的生成与交互：

困难：不知道疫情地图如何生成，如何点击地图与折线图如何交互。
解决办法：
首先是想使用echarts来实现，因为echarts上有现成的地图

后来在做交互的时候发现，热区放在echarts上会挡住原来echarts的交互。就放弃了这一办法。

后来改用办法，导入SVG地图，在地图上放很多热区来做交互，花了很长时间，效果比echarts要好一些。

3.疫情谣言和防疫知识的切换交互

困难：看到丁香园的页面点击按钮网页的内容会切换，自己不知道如何实现。
解决办法：

使用内敛框架，感觉使用的时候有点卡，应该不是正确方法，可能设置热区点击的时候让折线图显示更好。

4.页面外观

困难：两个直男审美的人，很难做出来好看的页面。
解决办法：

模仿丁香园的前端设计。

四、原型开发工具

Axure RP

Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。

Echarts

ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。

五、结对过程

六、PSP表格

PSP各个阶段	Personal Software Proces Stages	预计耗时（分钟）	实践耗时
Planning	计划	30	30
Estimate	估计这个任务需要多少时间	30	30
Development	开发	630	765
Analysis	需求分析（包括学习新技术）	300	450
Design Spec	生成设计文档	30	40
Design Review	设计复审	20	15
Coding Standard	代码规范（为目前的开发制定合适的规范）	10	20
Design	具体设计	100	80
Coding	具体编码	60	80
Code Review	代码复审	80	60
Test	测试（自我测试，修改代码，提交修改）	30	20
Reporting	报告	90	75
Test Report	测试报告	25	10
Size Measurement	计算工作量	30	25
Postmortem & Process Improvement Plan	事后总结，并提出过程改进计划	35	40
合计		750	870

七、心得体会

温杰：
      这次作业比起上次要轻松不少，首先是对于前端的知识比较熟悉，毕竟上学期刚学过，echarts也都能够熟练地使用。虽然刚开始有点找不到方向，看完作业要求以后，知道了要使用axure，就大概有个方向了。也熟悉了原型设计的过程，原来做博客之类的网页都是做一点打开看看什么效果，以前就很好奇难道没有很方便的像C#的图形界面的工具吗？axure使用起来还是比较简单的，汉化以后基本上不用看教程也能用个七七八八。和队友合作起来也是非常愉快，没花多长时间就做完了这次作业。期待下次作业。
吴章权：
      通过这次结对作业，我学会了很多。例如Axure RP的使用还有如何和搭档合作完成工作等，又是收获满满的一次作业。

八、随笔附件

博客内容PDF文件下载