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

这个做业属于哪一个课程	2020春 W班
结对的学号	221701120 & 221701122
这个做业要求在哪里	2020软工实践 结对第一次 疫情统计可视化(原型设计)
这个做业的目标	根据客户描述提取需求，进行原型设计并提供大概的解决方案
做业正文	2020软工实践 疫情统计可视化（原型设计）
其余参考文献	Axure 9全面教程、人人都是产品经理

1、原型模型

• <原型连接>    <--点这里

• 也能够在下方直接进行预览，因为直接在博客中显示，加载缓慢（某些js被拦截没法正常显示），建议直接点开原型连接访问

• 推荐用GoogleChrome浏览器（加载迅速）访问并容许当前网页的不安全脚本加载

<iframe frameborder="0" width="700px" height="700px" src="https://pyse1e.axshare.com/#id=mx82vm&p=page_1"allowFullScreen="true"></iframe>

2、基于 NABCD 模型的解决方案

  背景：目前新型冠状病毒肺炎疫情到了很是关键的时期，学校仍然是严阵以待。有一家统计网站天天都会提供一个对应的日志文本，记录国内各省前一天的感染状况，但疫情统计结果只是经过文字来显示，不够直观、具体，对用户不够友好，但愿能够经过地图的形式来直观显示疫情的大体分布状况，还能够查看具体省份的疫情统计状况。

  当今新冠肺炎疫情严重，牵动着每一个人的心，共同抗疫无疑是全中国每一个人的第一要务。咱们的网站致力于提供全国以及各地的疫情状况，用不一样颜色表示各地区疫情的程度，以最简洁、直观的方式向各位展现疫情状况。不只如此，咱们还提供了各式的统计图表，包括柱状图、折线图、饼状图等，更为形象直观地向您展现全国疫情的各种数据与地方数据。在您关注疫情信息的同时，咱们平台还提供了疫情相关的新闻供您阅读，包括实时播报功能与全民热搜板块，让您掌握第一手的新闻资讯。此外，咱们平台还提供了全平台口罩放货监控功能，让抢不到口罩的用户在第一时间奔赴网店秒速下单，作好全面防御。咱们也在此由衷地祝愿全国人民早日打败疫情，可以早日出门在阳光下自由地呼吸。武汉加油！中国加油！

---

一、N (Need,需求)

基本需求：

① 要有个全国的疫情图。

② 各个省份根据疫情的程度显示不一样的颜色，使用户可以简洁直观地获取疫情信息。

③ 鼠标移到每一个省份该省份可以高亮显示，给予用户一个视觉反馈。

④ 鼠标移动到省份上，点击鼠标可以显示该省的主要疫情情况。

⑤ 可以查看具体省份的具体疫情状况，包括该省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数。

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

拓展需求：

① 页首提供新闻滚动框，提供疫情相关的新闻。

② 具备实时播报功能，掌握第一手疫情相关咨询。

③ 具备全民热搜板块，看看一样关注疫情的他们还在关注着哪些内容。

④ 具备全国迁徙热门城市板块，可以查看热门迁入地与迁出地。

⑤ 提供全平台口罩放货监控功能，让买不到口罩的你抢到口罩。

⑥ 疫情图不只能提供现有确诊状况，还要能查看累计的确诊状况（包括治愈好的与已死亡的）。

⑦ 对全国疫情数据进行更加具体与直观形象地展现，包括饼状图、折线图、柱状图等图形展现。

---

二、A (Approach,作法)

实现语言：HTML+CSS+JavaScript+Java

适用人群：对这次疫情关注且有条件访问互联网的全部人

具体作法：基于WEB平台进行开发，后端统计提供日志文件网站的数据，前端经过Echart等组件实现具体图表的绘制。

---

三、B(Benefit,好处)

① 界面简洁明了，交互简单，易于上手，适合各个年龄层的用户使用。

② 构建在WEB平台上，用户无需下载额外APP，受众面广。

③ 拥有不一样的图表展现不一样的数据，能从不一样的视角更加全面且直观明了的角度查看疫情的相关数据。

④ 能提供新闻咨询和热搜模块，提供给用户更多的选择，在一个平台便可实现对疫情的全方位了解。

⑤ 提供全网口罩放货监控功能，让用户尽量地购买到所须要的口罩。

---

四、C(Competitors,竞争)

(1) 优点

① 使用web做为开发平台，提供了不一样设备间的兼容性与便捷性。用户再也不须要下载特定的APP来查看疫情状况，这样也容易吸引更多的新用户。

② 提供了较为完善的图表展现功能，包括柱状图、折线图、饼图等等。让用户可以从不一样的角度更为全面地了解疫情数据。

③ 具备新闻推送、实时播报与热搜板块，提供给用户更多的选择，让用户关注数据的同时也可以最快速地关注到时事新闻。

④ 具备全网口罩监控入口，切中用户痛点，可以很好地吸引用户。

⑤ 提供全国城市迁徙率排行，从不同的角度全面提供疫情数据信息。

---

(2) 劣势

① 从现实因素考虑，当今互联网上各大厂商均以推出各自的查看疫情信息功能，市场趋于饱和。且起步时间过晚，用户不会轻易转换当下正在使用的平台。

② 当前处理的数据都是基于一个假设的天天提供规定格式日记的网站，若投入现实使用，将没法处理复杂庞大的海量数据。

五、D(Delivery，推广)

① 向一些流量较大的网站或应用平台申请广告位（如百度搜索前几条、抖音开屏广告等）。

② 找一些社交媒体的大V进行推广，如微博、微信公众号的一些知名博主。

③ 自行运营一些媒体帐号，发布抗疫相关短视频、文章等，并附上平台网址连接进行推广。

3、效能分析与PSP表格

效能分析：还没有进入具体编码阶段，没法评估效能

PSP表格:

完成原型设计只进行到前期分析阶段，故PSP表格后半部分实际耗时暂无。

PSP2.1	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	40
Estimate	估计这个任务须要多少时间	30	40
Development	开发	1370
Analysis	需求分析 (包括学习新技术)	300	260
Design Spec	生成设计文档	30	30
Design Review	设计复审	30	20
Coding Standard	代码规范 (为目前的开发制定合适的规范)	20	15
Design	具体设计	240	480
Coding	具体编码	480
Code Review	代码复审	30
Test	测试（自我测试，修改代码，提交修改）	240
Reporting	报告	240
Test Report	测试报告	180
Size Measurement	计算工做量	30
Postmortem & Process Improvement Plan	过后总结, 并提出过程改进计划	30
	合计	1640

4、遇到的困难与解决方法

一、远程沟通的不便

  受这次疫情影响至今未能开学，咱们也算是提早试上了最近大火的“远程办公”。平时须要交流讨论的问题直接面谈交流就能解决的问题，如今却有种“明明你就在眼前却隔得好远好远”的悲情。

  由于两人都是第一次使用Axure来设计原型，还有不少用不来的地方，因而就有了长达几十页的QQ聊天记录和下图所呈现的录屏交流。虽然麻烦了一点，但也算是一个不错的可替代方案。两人没选择语音交流的主要缘由是语音远没有文字来得直观，语音环境的影响反而会致使信息的丢失而下降效率。没怎么使用通话是怕两我的说着说着聊起来忘了正事。

二、对于原型设计该呈现到哪一步的疑惑

  这是咱们第一次接触原型设计，对此并无什么概念。一开始一直在纠结原型设计该呈现出什么内容，该作到哪一步才算结束。是展现一个静态界面再加上一些页面之间的跳转逻辑就算达到目的了？仍是要呈现一些更加具体的操做与逻辑，尽量地逼近最终成品？

  经过学习《构建之法》、上网查看其余优秀的原型设计以及助教的解惑下，算是有了比较明确的答案。原型设计更可能是给客户看的，要能体现你所但愿展示的功能，若只是静态页面的跳转那和PPT无异，用不着大费周章换个软件写PPT。故要实现必定的动态操做功能才能尽量地展现产品，让客户更直观地看出是否是本身想要的。

三、对地图部分怎样实现高亮的不解

  一开始咱们使用的原型设计工具是墨刀，但当尝试着实现鼠标在地图上移动会高亮这一功能时卡壳了。一开始的想法是拥有足够多的各省份的地图，底色为白色的一个，底色为蓝色的一个，而后经过添加交互监听鼠标进入范围就换成另外一个颜色的地图。结果被“找不到各省市的地图图片”所战胜。绝望之时甚至想要用PS来一个个扣出各省份的地图。（好在人懒没去作，真扣了如今我会骂本身无数遍傻X）

  后来经过搜索引擎了解到Axure会更好实现一点，便转战Axure，利用SVG图片的特性导入Axure中转图片为图形，就可以比较符合逻辑地实现外观的变化。但也存在着问题，SVG图片的边界是方形，而省份地图边界是不规律的，所以对于鼠标进入的断定范围会更大一点（以下图）。对于这一点咱们也讨论了好久，尝试了好久，但最终没能很完美地实现。最后恍然大悟，如今只是原型模型设计阶段，尽可能体现所但愿呈现的功能是重点，而去扣这些细节实现的必要性和重要性并非那么大，就仿佛你在纠结原型中放的数据是不是正确的同样。能完美地贴合最终的产品的操做当然很好，但更重要的是体现产品的操做逻辑给客户，万万不可本末倒置。

四、对Panel组件内鼠标坐标的误解

  在实现点击地图出现各地区感染状况的小气泡的功能时，采用的是断定单击事件后设置气泡为可见并移动到鼠标所在坐标来实现。一开始可以很好地实现，但在地图上添加Panel组件实现页面移动后，鼠标点击却不能出现预期功能。

  一开始觉得是Panel会覆盖其下的组件，鼠标点击事件断定到Panel上了。但鼠标进入地图区域却能正常变色，这点使人疑惑。两人商讨许久未果，只好新建项目进行试验，才发现Panel并不会隐藏其内部组件，而是Panel的鼠标绝对坐标发生变化，再也不是以前相对整个页面的绝对坐标，而是以Panel左上角为起点。故问题获得解决。

5、结对的过程

  因为都没有大佬愿意带咱们两只咸鱼，只好咸鱼抱团取暖。由于两人比较熟，所以也不存在什么配合的磨合，交流的障碍等等因素，还算是比较顺利和愉快地完成了这次做业。

  从头至尾两我的都挺认真积极地完成做业的，虽然不会的东西不少，也共同被困难卡住，但都在共同探讨，共同克服。

  因为疫情各自家里蹲，想摆拍也摆拍不了，如下为部分聊天记录与视频截图：

6、心得体会

  <>此次的原型设计让我对于如何了解客户的需求以及如何进行设计的分析以及实现的定位与价值有了更加深入的了解和认识。

  <>学习了NABCD模型进行分析设计，第一次与他人远程合做完成任务。

  <>团队的合做分工能提升工做的效率，减轻负担，但也存有沟通上的一些问题。

  <>学习了Axure工具进行原型设计的方法。

  <>最大收获：体会工程的思想，谨防闭门造车。

附：此博客PDF下载地址