| 这个作业属于哪个课程 | 2020春|S班(福州大学) |
|---|---|
| 这个作业的要求在哪里 | 结对第一次-某次疫情统计可视化（原型设计） |
| 结对学号 | 021700531、131700127 |
| 这个作业的目标 | 合作设计原型，从而实现某次疫情统计可视化 |
| 作业正文 | 正文 |
| 其他参考文献 | AxureRP教程、CSDN博客、《构建之法》，echarts教程等 Axure 教程：中国地图和世界地图 AxureRP9教程 |
一、原型展示
原型
二、NABCD模型使用详细说明
N（Need，需求）
希望可以通过地图的形式来直观显示疫情的大致分布情况，还可以查看具体省份的疫情统计情况。
- 在全国地图上使用不同的颜色代表大概确诊人数区间
- 颜色的深浅表示疫情的严重程度，可以直观了解高危区域；
- 鼠标移到每个省份会高亮显示；
- 点击鼠标会显示该省具体疫情情况；
- 点击某个省份显示该省疫情的具体情况
- 显示该省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数；
- 该省份到目前为止的新增确诊趋势、新增疑似趋势、治愈趋势和死亡趋势；
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文件下载