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

这个作业属于哪个课程	2020春 S班(福州大学)
这个作业要求在哪里	结对第一次—疫情统计可视化（原型设计）
结对学号	221701422 & 221701421
这个作业的目标	提高与队友的协作能力，学习产品原型制作、学习NABCD原型
作业正文	作业正文
其他参考文献	ECHARTS

原型展示

原型链接

本次原型是使用墨刀原型设计工具完成，展示的是一个疫情统计的可视化网页模型，该网页主要包含5个功能：疫情动态、省份疫情详情查询、迁徙地图、图表订制和防护指南。可以帮助用户以地图的形式直观了解目前全国的疫情，也可以通过图表信息了解各省份疫情的详细情况（这里只做了湖北、湖南、福建作为示例），通过图表订制可以下载自己自定义的图表，在预防指南栏目获取与防疫相关的小知识。

需求分析——NABCD模型

Need(需求)

软件影响的利益相关者

• 普通网民：需要通过一个疫情统计系统实时了解全国以及各地区的疫情情况
• 政府机关：需要获得迁入（迁出）本地人口的主要来源地（目的地），便于进行疫情控制
• 疫情报道的编辑人员：需要一个便捷获取实时统计图表的途径。

具体需求

​ (1)以地图的形式展现全国的疫情情况(主页面)

• 颜色的深浅可以表示疫情的严重情况，能够直观的看出高危区域

• 鼠标移动到每个省份会以高亮显示

• 点击鼠标可以显示该省的疫情情况

（2）某省份疫情情况的详细页面

• 显示该省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数
• 以折线图的形式展示该省份到目前为止的新增确诊趋势、新增疑似趋势、治愈趋势和死亡趋势

（3）拓展功能1：添加一个能够显示迁徙情况的功能

• 在主页面的迁徙功能显示全国迁出（迁入）人口最多的十个省份
• 在省份详细页面的迁徙功能能显示迁入人口到本省最多的和接收从本省迁出人口数量最多的前十省份
• 以表单的形式展现

（4）拓展功能2：用户根据自己的需要可以在本页面生成想要的疫情统计图表，用户可以选择省份、数据类型、图表形式（如：xx省份新增确诊患者的折线统计图）,并可以从本页面下载到本地

（5）拓展功能3：添加预防指南栏目，其中添加一些预防疫情的小知识

Approach(方法)

项目实现方式：web

• web形式更容易进行推广
• 访问简单
• 我们学过与之相关的课程，觉得实现时会比较顺利
• 该网页一般只用于短期使用，觉得做成网页比较符合实际情况

图表实现方式：使用Echart

• Echart包含的图表种类齐全，涵盖我们所需要的图表

拓展功能1：我们经过分析后，认为网站的利益相关者不仅仅只有普通网民，作为防疫工作指挥中心的各地方政府单位同样需要详细、直观的统计图表来了解疫情，因此我们在网站中加入了疫情地图功能，决定以表单的形式展示出截止到当前日期，本地区迁入人口的主要来源地和本地区人口迁出的主要目的地（展示出占比前十名的迁入地和迁出地），便于从源头控制疫情的进入和控制疫情向其他地区的扩散。

拓展功能2：因为网络上现有的图表不一定能够满足编辑人员的需求（不一定是最新的，省份等信息不一定是需要的等等），编辑人员在编辑图表的时候首先需要去寻找数据，再通过特定的软件制作图表，中间过程比较繁琐，因此我们决定在本网站添加一个实时疫情图表订制的功能，解决这部分用户的烦恼，使网页功能更加丰富。

拓展功能3：我们认为本网站面对的主要用户群体是比较关注疫情的网友用户，该部分用户在关注疫情的同时往往也会比较注意自身如何防疫，因此我们认为添加了防护指南的功能更能引起用户群体的好感，提高浏览体验。

Benefits(好处)

• 简单、便捷的访问方式
• 丰富的图表可以帮助用户直观的了解当前的疫情情况
• 用户可以通过简便的方式获取实时疫情图表
• 可以在关注疫情的同时了解一些防疫知识，增强了用户的浏览体验

Competitors(竞争)

我方优势

• 图文并茂，动态的疫情地图更有吸引力。相比于很多枯燥的文章报道，一个具有漂亮外观的动态网页往往会更吸引人。

• 具有图表订制功能，目前市场上虽然带有疫情统计的软件很多，但是几乎没有看到和我们类似的疫情图表订制功能，同时我们的订制功能使用规则简单，只需点击鼠标即可完成，易于推广。体现了我方的后发优势。

我方劣势

• 网页功能不够齐全：相比于市场上的很多其他产品，我们的网页功能的完备性上还是显得有些不足。
• 产品用途单一：市场上的其他产品除了疫情统计之外往往还会带有其他的用途，具有更高的实用性。

Delivery(推广)

• 我们可以通过校园的特殊平台进行推广
• 利用QQ、微信等平台进行推广
• 简单、实用的功能让用户相互推荐

功能的定位和优先级

• 杀手需求：图表订制功能

  我们认为作为疫情统计系统，大家的实现的功能都相差不多，因此要将用户从竞争对手中吸引过来就需要一个与众不同、有实际用途的功能作为关键功能。相比于迁移地图、防护指南等拓展功能图表订制功能更具有实用性和创新性，因此我们将其作为项目的“杀手功能”。

• 必然需求：能够流畅的运行网页，良好的界面设计

• 外围需求：迁徙地图功能、防护指南功能

遇到的困难及解决方法

• 地图图形的高亮显示与保存（是否解决：是）

  • 困难描述、解决尝试

    在疫情可视化的地图上，当我们将鼠标落在查询省份上时，该省份应高亮显示，移去鼠标时又应取消高亮，同时，当点击省份时，哪怕鼠标移出，该省份应保持高亮，同时也要鼠标移入别的省份时保持高亮。为解决该问题，我选择添加更多的页面状态，在每个页面状态上设置不同的组件默认状态与事件，最后解决。

  • 收获：

    在面对一个新的工具，新的技术的时候我们难免会觉得很陌生，会遇到很多的困难，但是我们仍然要勇敢的去面对，网上有很多的资料可以供我们参考，通过前人的经验和自己的思考可以帮助我们解决很多原来看起来难以解决的问题。

• 地图省份对鼠标的感应不准确（是否解决：改善但并未完全解决）

  • 困难描述：

    地图上的各个省份为不规则的图形，会有各种菱角，各省份的地图相互嵌合，组成了中国地图。而在原型工具当中却只能实现为最小外接矩形图形，这样就会相互遮挡一部分。这样最终会导致部分省份鼠标虽然没有移到上面但是就会高亮显示，部分省份虽然鼠标移上去了但是仍没有高亮显示。

  • 尝试解决：

    一开始我选择将省份截出来转化成png格式，但依然会有遮挡，无法做到精确，在尝试了墨刀与Axure XP，查询了相关的资料后，还是无法解决，最后通过调整各个省份的图层来尽可能减小这种影响。

  • 收获：

    省份能够在鼠标悬停能高亮显示是用户的要求的需求，我们必须要实现。但在原型设计阶段因为工具等其他客观原因导致的无法解决或很难解决的问题时，我们也可以进行一定程度的妥协，在能够展示出用户需求的基础上尽可能的优化，以保证项目进程的正常推进。

• 分享功能的可行性验证（是否解决：否）

  • 困难描述、解决尝试：

    最初我们想要开发一个分享功能作为扩展功能之一，在想出这个功能后我们去查了一下这个功能需要一些什么技术，我们后期是否能够完成，然而我们查了很久也没搞清楚具体要怎么做。在查找的过程中我们却发现了Echart有具有图表的下载功能，而且实现并不麻烦，但因为下载的图表上并没有与网站相关的标识不适合做成分享功能。这时我们经过讨论分析后认为可以将这个点拓展出一个新的功能（图表订制），因此放弃了分享功能选择了图表订制。

  • 收获：

    虽然我们最终并没有解决这个这个遇到的问题，但是我们在不断的尝试中也接触到很多新的知识给予了我们很多新的灵感。因此我们认为在将来的学习中仍要不断的去主动解决问题，积极探索，哪怕最后不一定真的会有结果仍可以让我们获得很大的进步。

个人软件开发流程（PSP）

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

描述结对过程

因为我们平时关系比较好，选课也是一起选的，所以听到需要两个人组队的时候我们就直接一组了，在作业的完成过程中我们的分工是队友去看《构建之法》，提出需求并去查一下大概要怎么实现，后期能不能完成；我的工作是去熟悉原型工具，制作原型。

感想

一开始，对这个作业的意思其实是不太理解的，也不懂什么是原型。到后来经过百度，以及自己去查看了几个原型后才对原型有了初步的了解。在选择工具时，我在墨刀与AxureXP之间来回，两个都有试，但是因为墨刀的用户操作界面更加友好还是选择了墨刀，但后来发现Axure的功能更加强大，可惜已经用墨刀写了很多，还是没有换回Axure，有些遗憾。在制作时，由于缺乏大局观，没有先商讨好所有的功能及界面样式，结果反复更改，花费了大量时间在这上面，下次要吸取教训，一定要先将所有的东西都更好的规划下，再开始制作原型。

博客PDF

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