这个作业属于哪个课程 | 福大20春软工S班 |
---|---|
这个作业要求在哪里 | 结对第一次—疫情统计可视化(原型设计) |
结对学号 | 221701113、221701128 |
这个作业的目标 | 1. 阅读《构建之法》,了解NABCD模型 2.制作疫情分析可视化模型 3.给出原型模型,并提供大概的解决方案预期规划 |
作业正文 | 正文 |
其他参考文献 | 百度 CSDN博客 Axhub 大饼老师教你axure |
疫情统计分析问题描述
我们已经有了可以将日志文件统计并输出疫情情况的功能,但是上次的疫情统计结果只是通过文字来显示,不够直观、具体,对用户不够友好,我们希望可以通过地图的形式来直观显示疫情的大致分布情况,还可以查看具体省份的疫情统计情况。
原型地址
https://www.pmdaniu.com/storage/114641/375b17fd7ea0512726bb05777dd2b663-82774/start.html
NABCD模型
Need——需求
- 用户需求:
有一家统计网站每天都会提供一个对应的日志文本,记录国内各省前一天的感染情况,上次的疫情统计结果只是通过文字来显示,不够直观、具体,对用户不够友好,我们希望可以
通过地图的形式来直观显示疫情的大致分布情况,还可以查看具体省份的疫情统计情况。
- 在全国地图上使用不同的颜色代表大概确诊人数区间:
- 颜色的深浅表示疫情的严重程度,可以直观了解高危区域;
- 鼠标移到每个省份会高亮显示;
- 点击鼠标会显示该省具体疫情情况
- 点击某个省份显示该省疫情的具体情况:
- 显示该省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数;
- 该省份到目前为止的新增确诊趋势、新增疑似趋势、治愈趋势和死亡趋势
Approach——做法
此次任务的需求通过网页来实现,本次任务使用的工具软件是axure,该软件配备了大量元件和基础的网页交互功能,还能找到中国地图模型,能很快实现用户需求
- 前端将向用户展示中国地图,和疫情统计的数据,并且用户能通过点击详情查看各省的详细疫情统计数据
- 后端处理数据,将数据整合发送到前端给用户观看可视化模型
Benefit——好处
- 可视化模型能给用户非常直观的体验,提供良好的人机交互
- web支持多个用户端,手机电脑平板都可以访问
- 更新更加及时,用户只要刷新即可看到最新数据
Competition——竞争
- 优势
- 画面精简,直观
- 浏览速度快
- 缺点
- 功能不够完备
- 同类型产品非常多,且大多都是集合了许多功能
- 品牌宣传力不足,无法与大品牌竞争
Delivery——推广
- 推广人群
- 因疫情统计是我国大事,该应用可以给任何拥有访问网页能力的人群推广
- 推广平台
- 现实中向班级同学,身边的人推广
- 网络中,通过QQ、微信、博客等方式推广
困难解决
问题描述
- 1、如何做出一个中国地图模型?
- 2、如何给中国地图加入用户交互功能(高亮、按人数划分颜色、点击进入详情等等)?
- 3、如何在详情中加入统计表格?
- 4、如何实现网页的动态切换?
问题解决
axure,一款强力的软件,通过大饼老师教你学axure掌握了基本的使用方法
- 1、选取工具axure,运用里面的中国地图模板
- 2、axure拥有强大的实现交互功能,可以在鼠标悬停时填充颜色,也可以点击时生成详情按钮
- 3、引入库Axhub charts,可以在axure中加入折线图
- 4、运用axure中的动态面板功能,实现动态切换
收获
- 在开始时要有合适的计划,其中选取一款合适的工具非常重要
- 合适的工具能够大幅度缩短开发时间,增加开发效率
原型模型
原型模型设计工具
- Axure RP 9
功能简介
- 首页,包含整体统计信息,并且在地图显示各个省的疫情概况,越深色表示人数越多,提供现有确诊和累计确诊,按了按钮后会切换
- 移到省的位置会高亮,点击后显示人数
- 点击详情,显示省份具体数据,提供四种折线图
结对过程与讨论
结对过程
分工
讨论
效能分析和PSP
效能分析
在本次作业中,从事前准备到分析分工到合作的效率都不低,唯一一点美中不足的是由于过于缺少经验,在对项目内容互相建议以及观点讨论时所花费的时间过长,整体效率仍然极高。
PSP表格
> PSP2.1 | Personal Software Process Stages | 预估耗时(分钟) | 实际耗时(分钟) |
---|---|---|---|
Planning | 计划 | 5 | 5 |
Estimate | 估计这个任务需要多少时间 | 5 | 5 |
Development | 开发 | 275 | 285 |
Analysis | 需求分析 (包括学习新技术) | 60 | 65 |
Design Spec | 生成设计文档 | 5 | 5 |
Design Review | 设计复审 | 10 | 10 |
Coding Standard | 代码规范 (为目前的开发制定合适的规范) | 0 | 0 |
Design | 具体设计 | 20 | 15 |
Coding | 具体编码 | 120 | 120 |
Code Review | 代码复审 | 30 | 40 |
Test | 测试(自我测试,修改代码,提交修改) | 30 | 30 |
Reporting | 报告 | 25 | 20 |
Test Repor | 测试报告 | 10 | 5 |
Size Measurement | 计算工作量 | 5 | 5 |
Postmortem & Process Improvement Plan | 事后总结, 并提出过程改进计划 | 10 | 10 |
合计 | 305 | 310 |