zoukankan html css js c++ java

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

这个作业属于哪个课程	软件工程
这个作业要求在哪里	结对第一次—疫情统计可视化（原型设计)
结对学号	221701103 221701141
这个作业的目标	利用原型模型制作疫情可视化统计（在全国地图上使用不同的颜色代表大概确诊人数区间，可高亮、点击某个省份显示该省疫情的具体情况）
作业正文 ....	在这
其他参考文献 ...	《构建之法现代软件工程第3版_邹欣著_2017》

一、PSP表格

PSP2.1	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	10	8
Estimate	估计这个任务需要多少时间	10	8
Development	开发	1110	1460
Analysis	需求分析 (包括学习新技术)	180	150
Design Spec	生成设计文档	60	40
Design Review	设计复审	30	70
Coding Standard	代码规范
Design	具体设计	720	900
Coding	具体编码
Code Review	代码复审
Test	测试（自我测试，修改原型，优化）	120	300
Reporting	报告	140	124
Test Report	测试报告	60	44
Size Measurement	计算工作量	20	10
Postmortem & Process Improvement Plan	事后总结, 并提出过程改进计划	60	70
	合计	1260	1592

二、需求分析（NABCD模型）

1. Need

一、对产品功能性的需求

可读疫情有关文档并总结出各省市的感染情况
按照总结数据可生成不同颜色省份的中国地图（按照感染和疑似患者分类），在地图左下角显示不同颜色数量级
总结信息需显示更新时间并显示在地图顶部
总结信息需要与昨日情况对比并显示差值
鼠标移到的省份可高亮显示
鼠标点击的省份可显示具体的信息
- 点击后显示该省份按时间变化的新增确诊情况曲线图（可点击切换成累计确诊图和累计治愈死亡图）
- 曲线图上显示省份及更新日期并该省的总结信息
- 总结信息需要与昨日情况对比并显示差值
- 鼠标移到的折点显示对应日期的感染人数（广义）即纵坐标的值
点击问号获取提示信息

二、对产品开发过程的需求

开发需要若干个满足存储格式的日志文档
其他版块信息的迁入，例如问答版块
需要与大数据库相连的版块，例如志愿服务和口罩销售药店信息

三、非功能性需求（服务质量需求）

不同图切换的速度要快
折线图纵坐标的单位度量选取合理性，坐标值可以灵活选取，比如：如果数据差的比较大，可以1、10、100这样。
中国地图人数数量级不同颜色的分配合理性
信息图的美观性，整体界面的美观

四、综合需求

总结文档：总结出累计和新增两部分内容，包括各个病症情况
绘制整体中国地图（信息可切换）
绘制不同省份的折线图（信息可切换）

五、利益相关者的需求

用户
- 基本功能的实现
- 快捷方便
- 容易理解
- 美观简洁

扩展功能的实现

顾客（接受软件者）
- 基本功能的实现
- 扩展功能的实现
- 后期维护的成本要低
- 用户量
- 推广方式（网页形式）

2. Approach

一、参考百度上的疫情图

二、生活中实际碰到的问题并思考解决

3. Benefit

一、网页访问的便捷性

二、不同深浅颜色的直观性

三、累计和新增分离的变化性

四、点击即访问详情的简易性

五、疫情相关的实用性版块

4. Competitors

一、扩展功能（优势）

防护信息
- 增加口罩使用知识版块，包含口罩分类、预防新冠病毒需要的口罩、一次性医用口罩的佩戴方法、头戴式口罩佩戴步骤、使用后的口罩处理方式
- 常见问题链接版块
增加了全国疫情累计确诊趋势图以及在全国图上显示鼠标停留省份感染人数所占全国的百分比（只做了新疆甘肃福建黑龙江北京广东湖北的标识样例，后期投入使用的话可做全）
疫情动态：按照时间顺序展示最新的疫情消息，点击即可查看详情
各类榜单
- 谣言粉碎：澄清最新最热的疫情谣言，点击即可查看详情
- 今日疫情热搜榜：按实时热度更新，显示大家最关心的疫情动态
其他功能
- 救护
  1. 拨打120：紧急情况或疑似感染新冠病毒时用于求救
  2. 查找附近医院：点击则可滚动到百度地图内联框架
  3. 发现附近病患：以表格的形式记录感染或疑似患者的住址，避免在此区域接触病毒
- 微博：关注疫情实时动态
- 浏览器：方便搜索疫情相关问题
- 购物
  1. 超市
  2. 口罩
  3. 消毒用品
  以上信息都以表格的方式给出，实时更新，展示附近的口罩、生活用品、消毒用品是否上新有存货以及售卖点和价格数量，方便购买，不至于白跑一趟。
- 举报：可以举报身边的疑似患者或者从湖北返回的人，甚至可以举报高价出售口罩等相关生活物资的商铺或个人，积极反应，有助于身边人的身体健康和市场物价的稳定。
- 爱心
  1. 捐献物资
  2. 捐献口罩
  3. 捐款
  4. 志愿者申请
  以上版块都是由表单形式给出，大家可以根据需求填写并提交表单，贡献自己的一份力。该版块可由相关的监管部门监督物资的去向，安排物资输送渠道等一系列辅助工作。

二、界面特点

疫情相关图片轮播

在顶部放置，醒目，可用于通知紧急信息或重要信息，使得整个网页层次丰富，用户体验感较好。
所有扩展功能附近都会有回到顶部的按钮，方便用户理清思路，以免迷失在功能块里。
在网页中上部位置放有轮播警示标语，提醒用户加强防范还有鼓舞士气的话语。

5. Delivery

网页形式推广

三、总结

1.分而治之WBS

2.具体步骤

此处输入图片的描述

3. 全国地图和省份疫情折线图设计

此处输入图片的描述

4. 界面设计

此处输入图片的描述

5. 结对合作

0202年2月20日14:22，两个人愉快的合作了。
：这时候是不是要鼓掌庆祝一下：好好好
然后等待我们的就是充满挑战（令人头疼）的结对作业了，好南，一次比一次南。
刚开始拿到题目是一头雾水的，根本不知道原型是个啥。后来，我们先使用了MOCK PLUS学习了简单的原型制作。然后又在网上查到资料，可以用svg图来进行中国地图的制作，就转到了Axure RP。我们一个人负责两个疫情数据（图）的制作，一个人负责拓展功能和整体界面。
0202年2月27日，经过四天的辛勤劳动，我们终于完成了原型的制作，我们都很满意。ヽ(￣▽￣)و
后面的博客制作、总结等还是比较轻松的，终于做完了这份作业，呼~

6.困难及解决

顺序为：困难描述->尝试解决->收获

（1）如何开展工作？

开展工作也是困难？是！首先，我们两个以前没有合作过，刚开始还有些羞涩（···）。然后呢，对这次的作业不是很（一点也不）熟悉，所以下手有些困难。就像这样：
那说到解决，多亏了老师布置任务十分清晰。我们就把任务分成了需求分析（+NABCD模型）、作业的效能分析和PSP表格、1000字总结、原型模型设计、博客撰写。除了原型设计两个人合作完成，其余任务每人主做两个，快乐的学习之旅就这样开始了。
收获队友一枚，任务*n。

（2）两个图

先不说两个图了，就是中国地图我们就楞了。没学原型前：这是啥？挺酷的，难做吗？初步了解了原型后：昂，难做！使用了MOCK PLUS后：难道要我们自己画图，然后在上面建立交互吗？三十多块。
肯定是在网上查阅资料了，刚开始查到的都是使用ECharts具体实现，我还以为这么复杂。后面队友看到了可用Axure RP编辑SVG中国地图，我们就果断的采用了新的原型制作工具，开始了两个图的艰难制作。包括：大小颜色、卡片设计、交互（高亮+显示信息+链接）、折线图绘制。
耐心工作的能力++，最重要。当然了还学会界面制作、图形制作、交互方法这些。我好像在积极逃避~

（3）合作建立原型和越来越多的功能

可能是因为版本没有授权（没买）的原因，不能建立团队项目，而且随着时间的推移，功能越来越完善，所以我们两个人的版本合作就会有一些困难。
虽然这个项目对我们来说有些难，但是不算庞大。我们就把界面上的功能分成几个区域，然后每个人做一部分，这样就不会冲突了。版本合并那就靠原始的QQ发文件了，复制粘贴倒也很方便。我们的功能刚开始设计的不多，主要还是在必要功能上。队友后面又添加了一些比较酷的功能，如：志愿服务、谣言粉碎等。疫情1.0->2.0->...直到最后的
明白了一个道理：1+1>2。只要我们认真去做，还是可以做一个满意的作品的。O(∩_∩)O