结对第一次—疫情统计可视化(原型设计)
结对第一次—疫情统计可视化(原型设计)
这个作业属于哪个课程 | 2020春W班(福州大学) |
---|---|
这个作业要求在哪里 | 结对第一次—疫情统计可视化(原型设计) |
结对学号 | 221701132、111700516 |
这个作业的目标 | 疫情统计可视化(原型设计) |
作业正文 | .... |
其他参考文献 | ... |
01.原型展示
02.遇到的困难以及解决方法
困难:
- 在理解客户需求的基础上如何进行与其相关的拓展;
- 设计时如何使页面清晰,简洁,方便用户使用;
- 初次使用原型设计工具,不熟练。
- 一开始制作时使用的墨刀无法绘制可交互的地图
解决:
- 在微博以及论坛里收集网友们在疫情下的需求的信息,总结出几个最迫切的需求构成产品的设计模块;
- 为了完成网站各部分的设计,我们比对了很多相关网站,在完成客户需求的前提下尽可能使网站界面简洁大方,易于使用。
- 不断查找网络教程,了解到百度的echarts框架可供绘制地图和折线图,就下载了echarts框架并在官网对照着文档不断尝试使用功能部件完成地图和折线图的交互,成功实现了客户所要求的交互后,我们将编写完成的html文件上传到这里,最后将地图网页内联置入墨刀。
03.NABCD模型
N—— Need 需求
用户提出的需求:在全国地图上使用不同的颜色代表大概确诊人数区间。其中,颜色的深浅表示疫情的严重程度,可以直观了解高危区域;鼠标移到每个省份会高亮显示;点击鼠标会显示该省具体疫情情况。
点击某个省份显示该省疫情的具体情况,显示该省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数;该省份到目前为止的新增确诊趋势、新增疑似趋势、治愈趋势和死亡趋势。
扩充需求:
- 防疫知识:大家几乎都是第一次经历如此大规模的肺炎病毒传播,对于如何预防,出现了症状该如何判断是否为新冠肺炎我们所知甚少,所以我们建立了一个专门的科普板块扩充用户的防疫知识。
- 防疫定点医院:由于医疗资源等各方面的原因,许多医院并不诊治和收容新冠肺炎患者,所以我们为出现了疑似新冠肺炎的症状的用户建立了一个可以查找居住地附近的疫情定点医院的板块。
- 疫情新闻:正处于疫情特殊时期,各地为疫情防控出台了许多政策,我们开通了一个专门的板块用于播报疫情新闻,让用户了解最新的疫情政策和新闻,网页会根据用户的居住地优先为浏览者推送本地疫情新闻。
A—— Approach 做法
在开始原型设计工作之前,我们绘制了一张思维导图来简单记录思考的过程。(各方面原因最后没有实现登录功能)。
平台实现:我们决定在web端实现这个平台。通过web来实现,用户访问只需要有一个可以识别网址的浏览器,随时随地就能打开进来浏览。
设计过程:主界面共分为三个模块,分别为疫情地图、搜索栏和顶栏
其中疫情地图模块,颜色的深浅表示疫情的严重程度,可以直观了解高危区域,鼠标移到每个省份会高亮显示,点击鼠标跳转至该省具体疫情情况(以折线图形式展现)。疫情折线图显示疫情发展趋势曲线图。
其中搜索栏模块分为按日期查询、按地区查询小模块。 * 按地区查询模块中用户可以根据所在下拉选择所在省份,市,县查询地区具体情况(以折线图形式呈现)。 * 按日期查询模块中用户可查询特定某天的疫情地图(原型中尚未设置点击事件)。 ![](https://img2018.cnblogs.com/blog/1918349/202002/1918349-20200227162233534-1165891776.png)
其中顶栏模块又细分为个人中心、防疫知识、防疫定点医院、疫情新闻、设置小模块。 * 个人中心模块可供用户对基本信息和联系信息进行设置; ![](https://img2018.cnblogs.com/blog/1918349/202002/1918349-20200227162333341-218485638.png) * 防疫知识模块列出显示为防疫知识相关文章标题的超链接,点击文章标题即可跳转到其他网站的相应文章页面; ![](https://img2018.cnblogs.com/blog/1918349/202002/1918349-20200227162434022-842147527.png) * 防疫定点医院模块会根据用户在个人中心页面填写的居住地列出用户居住地附近的疫情定点医院,医院名字下方标注该医院的地址,点击右边的箭头可以浏览该医院的大致信息; ![](https://img2018.cnblogs.com/blog/1918349/202002/1918349-20200227162458826-388001399.png) * 疫情新闻模块列出显示为新闻标题的超链接,点击文章标题即可跳转到其他新闻网站的相应新闻页面; ![](https://img2018.cnblogs.com/blog/1918349/202002/1918349-20200227162520768-2119846069.png)
### B—— Bnefit 好处 这个产品和服务会给客户/用户带来的好处: * 用图表直观展示疫情信息,使用户获取信息的方式更加生动形象。 * 用户可按需点击地图获取某一省份的疫情信息。 * 拓展设置了防疫知识的模块,使用户能在了解疫情状况的同时还能更好地进行疫情确认与防护。 * 拓展设置了防疫定点医院的模块,使用户能在了解疫情状况的同时还能更好地进行疫情防控。 * 拓展设置了疫情新闻的模块,使用户能在了解疫情状况的同时还能更好地进行疫情相关信息的获取。
C—— Competitors 竞争
优势:
- 疫情信息可视化,界面简洁美观,提升用户的观感;
- 新增多个模块,产品内容丰富;
- 及时响应当下最迫切的需求,市场需求率高;
劣势:
- 开发时间较短,未能全面考虑模块功能的实现。
- 目前市场上竞品较多,竞争压力大。
D—— Delivery 推广
先在本校进行推广,接收他们使用完产品的反馈,然后对产品进行完善,逐步拓展功能。进而向全国大学生推广。若能得到良好的使用反馈,可以进一步扩大团队,完善拓展产品功能,向社会推广。
04.原型开发工具
墨刀
05.结对的过程
06.PSP表格
PSP2.1 | Personal Software Process Stages | 预估耗时(分钟) | 实际耗时(分钟) |
---|---|---|---|
Planning | 计划 | 120 | 180 |
Estimate | 估计这个任务需要多少时间 | 30 | 20 |
Development | 开发 | 600 | 660 |
Analysis | 需求分析 (包括学习新技术) | 240 | 180 |
Design Spec | 生成设计文档 | 120 | 100 |
Design Review | 设计复审 | 30 | 30 |
Coding Standard | 代码规范 (为目前的开发制定合适的规范) | 60 | 80 |
Design | 具体设计 | 240 | 360 |
Coding | 具体编码 | 60 | 30 |
Code Review | 代码复审 | 30 | 30 |
Test | 测试(自我测试,修改代码,提交修改) | 30 | 30 |
Reporting | 报告 | 150 | 180 |
Test Report | 测试报告 | 30 | 20 |
Size Measurement | 计算工作量 | 20 | 20 |
Postmortem & Process Improvement Plan | 事后总结, 并提出过程改进计划 | 120 | 150 |
合计 | 1880 | 2040 |