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

这个作业属于哪个课程	2020春|S班(福州大学)
这个作业要求在哪里	软工实践寒假作业（2/2）
结对学号	221701131,221701114
这个作业的目标	阅读《构建之法》第3章和第8章的内容，设计疫情统计可视化原型
作业正文	结对作业1
其他参考文献	博客园

疫情统计原型模型地址

链接：https://free.modao.cc/app/BQHKM880ppxi1EGn7MRGfg7Uw1OlQ9y?simulator_type=device&sticky

所遇困难以及解决方法

1.使用什么原型开发工具以及如何使用

  解决方法：通过百度了解了一些原型开发工具，最终我们选择使用墨刀这个原型开发工具，它是北京磨刀刻石科技有限公司旗下的一款在线原型设计与协同工具，支持云端保存，实时预览，一键分享，及多人协作功能，让产品团队快速高效地完成产品原型和交互设计。下载了墨刀软件之后，里面有许多的视频教程，通过观看墨刀提供的这些视频教程，我们对墨刀有了进一步的了解，掌握了墨刀一些基本的使用方法。后面再通过百度，知道了如何进行多人的项目协作，我们可以对项目进行协同编辑和管理。

2.全国地图以及省份高亮如何实现

  解决方法：一开始，我们找到了相应的地图插件，但是我们实在找不到在墨刀中导入它的方法，所以我们放弃了这个想法，换一种方式来，我们找了一张比较清晰的全国地图，以及各个省份的模块图，省份的模块图首先用Photoshop处理成高亮的颜色，放到全国地图上相应的位置，并把该模块图设置成隐藏模式，为模块图新增一种显示状态，为模块图设置添加事件，当获得鼠标焦点时，切换到显示的状态，当失去鼠标焦点时，切回到了隐藏的状态，以此达到省份高亮的效果。

3.如何实现折线图

  解决方法：在上学期的web实践课，我们使用到了ECharts，ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。所以想在这次的模型设计的折线图设计时也使用ECharts，然而，我们在墨刀中好像不能写入js的代码，所以这个想法又破灭了，我们只好通过ECharts，根据网站上的疫情统计数据，在ECharts上先生成想要的折线图，保存到本地，再导入到墨刀中项目页面的相应位置。

4.收获

• 设计工具的选择还是挺重要的，在选择之前要对类似的工具都有个大概的了解以及比较，然后选择合适的。墨刀这个原型设计软件整体使用下来的感觉还是一般般的，网上关于墨刀的教程，使用技巧等等的资料是真的非常的少，本次想使用的地图插件以及ECharts也没能用上，还是有点儿遗憾的。当然，通过本次的作业，让我们对墨刀有了比较好的了解，相信之后改用别的原型设计工具会更加容易上手。
  *构建之法的学习，如何成为一个优秀的软件工程师，如何分析，如何设计，如何追踪和发现需求，非常的关键。目前的编程都是按照需求，或者一拍脑袋就决定的事情。没有很详细的调查，当然，也没有调查的必要，因为之前，接触的都很简单。但在今后的学习中，还是要学会发现需求，提取需求。
  *结对编程。确认彼此的进度，才能协调一致，就像两人三足。往往也要喊着121 121 才能一同前进，光靠心理的默契看来是不可能的。teamwork 的精神很重要，今后还会遇到很多类似的问题，学会合作，才能更好的前进。

NABCD模型使用

1 N (Need、需求)

在之前发布的疫情统计程序命令行版，对于用户有一定的操作要求。

命令行与参数冗长，不便记忆。

单纯的数据，不可观。

客户需要有一个全国地图，能够使用不同颜色，代表大概疫情的严重程度。

鼠标移动省份会高亮显示。

点击鼠标会显示该省份的具体疫情。

点击该省份能够显示该省份的具体情况。

显示该省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数。

该省份到目前为止的新增确诊趋势、新增疑似趋势、治愈趋势和死亡趋势。

2 A(Approach、方法)

使用网站展示，兼容大部分手机和电脑，受众面广泛。

前后端分离，方便开发和维护。

开发原型，能够进一步确定用户的需求，直观明确。

3 B(Benefit、好处)

页面简洁大方，层次分明详略得当。

基本满足用户需求。

4 C(Competitors、竞争)

优势是网页端的便利。

信息的直观

界面的简洁。

5 D(Delivery)

推广方法。在微信平台上推广，创立自己的公众号，或者附带到公众号平台上。利用抖音平台快视频推广。可以自制广告营销或者请用户来推广。

当然作为学生，没有什么预算的情况下，本身的产品比较一般，还是先从身边的亲朋好友做起，听取意见不断改进。

原型开发工具

  本次使用的原型开发工具是：墨刀。

  墨刀 MockingBot 是北京磨刀刻石科技有限公司旗下的一款在线原型设计与协同工具。支持云端保存，实时预览，一键分享，及多人协作功能，让产品团队快速高效地完成产品原型和交互设计。

结对过程

PSP表格

PSP2.1	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	30
Estimate	估计这个任务需要多少时间	30	30
Development	开发	680	780
Analysis	需求分析 (包括学习新技术)	120	150
Design Spec	生成设计文档	30	40
Design Review	设计复审	10	20
Coding Standard	代码规范 (为目前的开发制定合适的规范)	0	0
Design	具体设计	500	550
Coding	具体编码	0	0
Code Review	代码复审	0	0
Test	测试（自我测试，修改代码，提交修改）	20	20
Reporting	报告	80	110
Test Repor	测试报告	30	40
Size Measurement	计算工作量	10	10
Postmortem & Process Improvement Plan	事后总结, 并提出过程改进计划	40	60
合计		790	920

博客内容PDF附件

附件