139
社区成员
这个作业属于哪个课程 | 2022春软件工程实践 -W班 (福州大学) |
---|---|
这个作业要求在哪里 | 软件工程实践结对作业一 |
结对学号 | 221900309、221900334 |
这个作业的目标 | 掌握一款原型设计工具并设计冬奥网站原型 |
其他参考文献 | CSDN、博客园 |
构建之法第三章中提到了软件工程师的思维误区,主要介绍了分析麻痹、不分主次想解决所有依赖问题、过早优化、过早泛化这四个思维误区。
N(Need 需求)
1.奖牌总榜
- 可以查看各国代表团的奖牌数及最终排行,并通过一种形式高亮中国代表团。
2.每日赛程
- 展示各项目的详细赛程,显示比赛时间、大项名称、比赛名称、场馆等信息
- 支持通过选择、切换比赛日期、项目、场馆的形式来筛选用户希望查看的赛程
- 支持点击查看详细赛况
3.详细赛况
- 展示单项比赛的成绩公报,包含对应项目的参赛选手、得分、排行等比赛数据
4.奖牌地图
- 以世界地图的形式直观地展示各个参赛国家的奖牌数
- 在地图上使用不同的颜色代表大致的奖牌数区间,颜色深浅表示奖牌数的多少
- 鼠标点击或移动到每个国家会高亮显示奖牌信息
A(Approach 做法)
- 基于Web设计实现冬奥赛事网站,便于用户访问。
- 该赛事网站包括六个部分,分别为首页、奖牌总榜、每日赛程、详细赛况、奖牌地图以及了解更多,详细赛况包含冰球、冰壶、花样滑冰三个项目,通过导航栏进行页面跳转。
- 首页包含轮播图和冬奥各个项目的介绍,通过轮播图展现了冬奥会上运动员的风采,项目介绍让用户对冬奥赛事有一个基本的理解。
- 奖牌总榜通过表格的形式展现了各个国家获得的奖牌情况,通过红色高亮显示中国一行。
- 每日赛程页可以通过日期、项目、场馆三个下拉框对赛程进行筛选,点击最右侧的“详细赛况”即可查看该赛事的详情信息。
- 奖牌地图页导入了一张世界地图,并按照获得奖牌总数由深到浅对各个国家进行染色。当鼠标移入有获得奖牌的国家时,动态显示该国家的名称、名次、金银铜牌数量。
- 了解更多页中由一张轮播图循环显示每一届冬奥会的会徽,点击会徽可以查看该届冬奥会的具体信息,包括举办时间、地点、参赛人数、会徽介绍、吉祥物介绍等。
B(Benefit 好处)
- 采用网页的方式,使用浏览器即可查看,方便用户使用
- 操作简单易上手,方便查看冬奥会的各类信息
- 对赛程筛选有多种筛选形式,包括按日期、场馆以及项目进行筛选
- 通过地图显示奖牌的分布情况,给予用户直观的视觉体验
- 界面外观简约大方,使用舒适,用户体验良好
C(Competitors 竞争)
主要竞争对手:
- 其他结对小组:功能都类似,能否脱颖而出主要在于UI设计是否美观
- 冬奥官方网站:各种数据资源非常丰富,以我们目前的水平来看,比不过。
通过美化UI界面,丰富各种功能,提升用户体验程度进行竞争。
优势:
- 页面简洁大方,操作简单,不含任何广告以及冗余的功能
- 通过网页发布,相比于其它冬奥赛事App,访问更加方便
- 实现了奖牌分布的可视化 ,不仅可以通过列表查看奖牌榜,还能通过地图得到各个国家获得奖牌的情况
劣势:
- 仅仅实现了奖牌分布情况的展示以及赛程和各类赛事的详细信息,功能较为单薄
- 同类型产品多且趋于完善,本产品进入市场较晚,竞争压力较大
- 产品的生命周期较短,等冬奥热度结束后,用户就会大量流失
D(Delivery 推广)
- 通过各类官Q和学校公众号在校园内进行推广,收集反馈并对产品做出改进
- 将宣传帖子发布到虎扑等热门的体育论坛上,由于这类论坛有大量的体育爱好者,冬奥赛事平台能够迅速取得用户的共鸣
- 通过抖音等短视频平台进行推广。抖音有着大量的活跃用户以及巨大的流量,投放一个广告会获得非常高的曝光量
考虑到Axure的功能更加强大,因此我们本次原型设计的工具选用Axure RP9。在设计原型前,我们必须先学会使用Axure RP9。通过网站的教程安装完成后,我们在b站找到了一些视频教程,学习了一些基本元件的使用,特别是中继器的使用,后续表格的实现都是采用中继器。
我们首先仔细阅读了作业,本次作业要求我们设计一个冬奥会赛事数据的主题网站,通过图表等形式直观展示奖牌榜、每日赛程、详细赛况以及奖牌地图。为了使平台更加具有吸引力,引起人们对冬奥、冬奥历史的兴趣,还可以增加一个了解更多的页面,该页面主要介绍近几届冬奥会的会徽、举办地、吉祥物等。
明确了需求后,我们小队进行了充分的讨论,关于详细赛况的3个项目,我们选择了花样滑冰、冰壶以及冰球来进行具体的页面设计。
为了对需要制作的页面有更加清晰直观的认识,我们首先设计了顶部导航栏
首页
上方是一个轮播图,展现了冬奥会运动员的风采,下方是本届冬奥会15个大项目的简要介绍,点击不同的项目可以查看对应项目信息:
奖牌总榜页面
通过表格的形式展现了各个国家获得的奖牌情况,通过红色高亮显示中国代表团:
每日赛程页面
可以通过日期、项目、场馆三个下拉框对赛程进行筛选,点击最右侧的“详细赛况”即可查看该赛事的详情信息:
奖牌地图页面
通过地图的形式,以不同的颜色直观展示了奖牌在各个国家的分布情况。将鼠标移入到一个国家所在区域,即可显示出该国家的排名以及奖牌的具体情况。在地图的左下角给出奖牌数区间,颜色深浅表示奖牌数的多少:
详细赛况页面
详细赛况包含了冰球、冰壶以及花样滑冰三个项目。
冰球页面左上角显示具体比赛名称,对战国家,右上角显示场馆以及比赛时间,中央显示了国家国旗与总比分;左右两栏分别是两个国家的上场队员,介绍了各个队员的号码、姓名以及位置;下方两队比分一栏显示了每一小节的具体得分以及加时、点球情况;最下面一栏比赛数据,以柱状图的形式对比两个队伍的得分、射门、多打少、争球、被罚时间、短手进球的情况。
冰壶页面:通过国旗直观显示对战双方,设计了两个表格,分别展示小局比分以及出场队员名单:
花样滑冰页面:以表格的形式直观地展现出各国运动员们的具体得分数据:
了解更多页面
由一张轮播图循环显示每一届冬奥会的会徽,点击会徽可以查看了以往23届的冬奥历史、会徽、吉祥物等情况:
针对每天的赛程,我们共添加了19个中继器,并导入了数据(后续发现中继器太多导致原型页面加载太慢,无奈删减了许多(〒︿〒))。将所有中继器宽度和左上角坐标统一,并全部设置为隐藏。当页面载入时,默认显示02月02日的赛程数据。当单击具体日期时,显示当前日期数据,隐藏其他日期的数据,这样就实现了日期的切换。
首先通过查阅资料得知,要想实现奖牌地图,首先必须找到世界地图的svg图形。将得到的svg图形导入Axure中将其转变为形状,即可获得切割后的世界地图:
之前实现点击冬奥项目图标,左边的具体项目介绍切换是通过热区实现的。在每个冬奥项目图标上覆盖一个热区,热区的名称对应项目的名称,通过[[TargetItem.name == this.name]]筛选中继器。
因为冬奥会图标一次只显示7个,并且可以通过点击一直切换,上面的方法显然不适用。
这里我们采用矩形来进行覆盖,将矩形的透明度调到100%,并且设置矩形的初始文本:23-17,对应冬奥会的届数,当单击左右键进行切换时,修改矩形的文本,使文本值始终对应覆盖的冬奥会届数,这样对矩形的单击事件设置冬奥会详细数据的中继器筛选[[Item.n==this.text]],这样就实现了单击图标,切换到具体那一届的冬奥会介绍。
通过这次结对作业,我们学会了Axure RP的基本使用方法,尤其是中继器的使用,能够使用中继器实现表格,以及通过中继器的筛选实现动态的切换效果。经历了这次作业,我们的自主学习能力,查阅资料解决问题的能力以及沟通交流的能力都有了提升;此外,我们也意识到,最好在作业开始之前提前对相关的知识进行学习,这样能大大提高开发效率。
我们主要通过线下以及QQ聊天的方式对原型进行讨论和设计:
221900334:经历了第一次结对作业,我感触颇深。结对作业与个人实战不同,从一开始的对问题的分析讨论,到设计原型时的分工配合,每一个过程都需要两个人一起参与,协力完成。在这个过程当中,我们针对同一个问题也会有些许分歧,但是我们都通过积极沟通交流使双方达成共识,有效地推动了项目的进展。同时,两人的沟通交流的过程也是一个互相学习进步的过程,增强了我们的沟通能力和表达自身观点的能力。总体来说收获很大。
221900309:这次的结对过程对我来说是一次全新的体验,也令我体会到了其中的好处。两个人共同完成一个项目,和自己一个人独立开发完全不同;独立完成任务往往都是自己一个人闷头干,而结对让我有一个可以讨论问题的对象;在最初的磨合阶段,我们进度不算快,因为时常会存在意见上的出入,但在协调统一后,,我们培养了一定的默契,彼此相互配合,大大提高了作业的完成效率,相比于自己独立设计,做出来的原型也完善的多。
221900334对221900309的评价:HCK同学做事细致认真,很有耐心。当原型设计有了进展时,我都会发给HCK同学。HCK同学每次都仔细检查并给出修改意见,使我们原型的制作效率很高。在遇到困难时,我会请求HCK同学的帮助,两个人合力解决问题。总之,与HCK同学的这次结对合作很愉快,是一次很棒的经历。
221900309对221900334的评价:ZYX同学做事十分高效,并且善于看出问题所在,遇到一些难以解决的问题时同他探讨,总能使我茅塞顿开。把原型发给ZYX同学检查,他总能指出一些我没有注意到的细节,对这些细节进行修改,提高了原型设计的质量。经过这次结对的过程,我从他身上学到了不少知识,期待和他的下一次合作。
PSP | Personal Software Process Stages | 预估耗时(分钟) | 实际耗时(分钟) |
---|---|---|---|
Planning | 计划 | 10 | 20 |
Estimate | 估计这个任务需要多少时间 | 10 | 20 |
Development | 开发 | 580 | 830 |
Understanding | 需求分析 | 60 | 120 |
Learning | 学习原型设计工具 | 60 | 120 |
Discussion | 结对讨论 | 150 | 200 |
Design | 原型设计 | 250 | 320 |
Review | 原型复审 | 30 | 30 |
Test | 原型测试 | 30 | 40 |
Reporting | 报告 | 25 | 30 |
Size Measurement | 计算工作量 | 10 | 15 |
Postmortem & Process Improvement Plan | 事后总结, 并提出过程改进计划 | 15 | 15 |
合计 | 615 | 880 |
此次作业的时间主要花费在学习原型设计工具、结对讨论与原型设计上。
完成度很高的作业,原型整体风格也协调。很棒!我最喜欢的是首页,项目介绍做的用心了,左上角的墩墩很可爱。有个小问题:右上角五环左侧点开有个小搜索框,似乎没作用,可能是误加了需要删去?