这个作业属于哪个课程 | 2020春|S班(福州大学) |
---|---|
这个作业要求在哪里 | 结对第一次—疫情统计可视化(原型设计) |
结对学号 | 221701409和221701306 |
这个作业的目标 | 完成疫情统计可视化的原型设计并以网页形式发布 |
作业正文 | 结对第一次作业 |
其他参考文献 | 博客园,百度 1 邹欣大大的博客NABCD 2 Axure的教程 3 Axure地图灵感 4 Axure散点图教程 |
一、原型模型地址
二、原型开发工具 Axure RP
Axure RP是一款专业的快速原型设计工具。可以让负责定义需求和规格、设计功能和界面的使用者能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。
三、计划安排
四、NABCD模型
N(Need,需求)
目前新型冠状病毒肺炎疫情到了非常关键的时期,学校仍然是严阵以待。上次的疫情统计结果只是通过文字来显示,不够直观、具体,对用户不够友好。故在本次作业里:
-
通过地图的形式来直观显示疫情的大致分布情况,还可以查看具体省份的疫情统计情况。
-
在全国地图上使用不同的颜色代表大概确诊人数区间
a. 颜色的深浅表示疫情的严重程度,可以直观了解高危区域
b. 鼠标移到每个省份会高亮显示,并显示该省当前确诊人数 -
点击某个省份进入该省疫情的具体情况
a. 显示该省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数
b. 该省份近日的确诊趋势、疑似趋势、治愈趋势和死亡趋势 -
与全国总确诊人数一起显示的还有用户本省的疫情情况
A(Approach,做法)
在上一次作业的基础上,我们已经完成对疫情统计程序的数据处理,这次主要是完成呈现统计数据的部分。我们认为发布成网页是较为合适的,基于这些需求选择了原型设计工具Axure RP9。相比其他的原型设计工具,Axure的功能更强大完善,也更符合这次作业的要求。
万般皆用Axure RP9。
在这之前也曾尝试过另一个原型设计工具Balsamiq Wireframes来设计网页草图,因此也产生了一个手机端原型草图副产品,界面如下~
虽然是走了弯路 但是通过这一过程也让我们的设计思路更加明确啦!
很多附上地图艰难的获取过程(눈‸눈) 眼睛都要瞎噜
B(Benifit,好处)
- 首先是相比第一版的疫情统计程序,前端的美化让数据可读性更强,更好操作。
- 相比其他的网站,用户可以一目了然地读取到最新的信息,网站的信息非常清晰明了。
- 根据采访,我了解到身边的用户最迫切的需求是,及时了解自己身边的疫情情况,碍于日志文件只精确到省份,我们将在网站首页直接显示用户本省的疫情情况。
- 根据采访,我了解到身边的用户最关心的几项数据是新增确诊、新增死亡、新增治愈以及病死率。我们对其以图表形式做了整理。
- 界面设计简洁美观,地图根据严重情况显示不同颜色。
- 数据统计图只显示近5日的疫情趋势,免去了对于普通民众而言的大量数据冗余,了解最新的进展。
- 对现有的疫情类程序使用情况进行分析,汲取优点摒弃缺点,更加优化程序的功能和使用体验。
C(Competitors,竞争)
现在已经有很多这样的与疫情统计有关的程序了,相关的疫情可视化产品功能逐渐趋向成熟和完善。大部分产品所做的功能相差不多,并且先推出的程序也还在继续完善中。
但是由于本产品适用用户范围广,且本次疫情受关注度高,人们每天都希望能第一时间获得最新消息并且多多了解有关新闻。从而本产品在竞争中应该占有较大优势。
D(Delivery,推广)
- 可通过微博、微信、qq等常用软件来做推广和宣传。
- 投稿各大网站,通过审核后即可推送到首页,让更多人看到和关注本产品。
五、效能分析和PSP表格
效能分析
因为本次作业为原型设计,无具体代码,故没有代码的效能分析~
PSP表格
PSP2.1 | Personal Software Process Stages | 预估耗时(分钟) | 实际耗时(分钟) |
---|---|---|---|
Planning | 计划 | 60 | 35 |
Estimate | 估计这个任务需要多少时间 | 60 | 35 |
Development | 开发 | 550 | 837 |
Analysis | 需求分析 (包括学习新技术) | 130 | 320 |
Design Spec | 生成设计文档 | 60 | 70 |
Design Review | 设计复审 | 30 | - |
Coding Standard | 代码规范 (为目前的开发制定合适的规范) | - | - |
Design | 具体设计 | 100 | 40 |
Coding | 具体编码 | 150 | 340 |
Code Review | 代码复审 | 20 | - |
Test | 测试(自我测试,修改代码,提交修改) | 60 | 67 |
Reporting | 报告 | 110 | 95 |
Test Report | 测试报告 | 30 | 35 |
Size Measurement | 计算工作量 | 20 | 15 |
Postmortem & Process Improvement Plan | 事后总结, 并提出过程改进计划 | 60 | 45 |
合计 | 720 | 977 |
六、遇到的困难及解决方法
-
地图的导入:找不到合适的地图,试了很多种也没有试出合适又满意的地图。然后……自己描了张地图哈哈哈哈哈哈哈哈哈哈
-
地图显示高亮:一开始试了几种方法,发现都不好显示高亮。最后发现使用Axure可以有效的方便的进行地图高亮设置。同时也要用中继器提供数据,写交互。
-
中继器的学习:下载的最新版本没有教程,操作不熟悉,自己摸索很费劲。解决方法就是把头发熬秃wwwwwww!
(https://img2018.cnblogs.com/blog/1927334/202003/1927334-20200301201903647-413743141.jpg) -
折线图绘制:很难操作,过程繁琐。需要用中继器的交互来写,设定很多交互的事件和动作。解决方法是靠坐在电脑前一天,腰酸背痛的写完~
七、收获与小结
- 306同学:这次作业中有一个很不一样的部分是要自己在众多原型设计软件中选择一个最符合需求的来设计,作业要求中给了好几个模型,虽说Axure是第一个,可我们一开始选择的并不是Axure(Mockups画风实在太可爱了),兜兜转转还是回到Axure。在模型选择上其实花费了不少时间,有些模型,比如墨刀,操作起来最方便,有自己的模板库,还可以在线编辑,实操了一会儿发现并不适合本次作业。选一个合适的工具简直重要的一批,如果在一开始多花一点时间了解模型的异同,其实能省下海量的时间。黑龙江的马路都要给我绕过噜─=≡Σ(((つ•̀ω•́)つ
还有一个大坑是找地图svg这事儿,找了很多线程的文件,不是不能用就是缺斤少两或者不符合审美(颜控:地图也要长得好看才可以),与其大海捞针不如干脆自己画,更符合需求还省时间,条条大路通罗马嘛~ - 409同学:本次作业学会了如何使用Axure RP,同时在合作中学会两个人协调完成任务。遇到了很多困难嗷,但是最终都解决啦!!
八、结对合作
结对过程
![](https://img2018.cnblogs.com/blog/1927334/202003/1927334-20200301205834694-167870310.png)
合作过程
- 因为疫情的缘故,特殊时期只能通过qq来联系讨论啦!辣么就来些截图看看我们的快乐合作8!