软件工程实践结对作业一

221900334_庄艺翔 学生 2022-03-11 22:08:37
这个作业属于哪个课程2022春软件工程实践 -W班 (福州大学)
这个作业要求在哪里软件工程实践结对作业一
结对学号221900309、221900334
这个作业的目标掌握一款原型设计工具并设计冬奥网站原型
其他参考文献CSDN、博客园

目录

  • 一、原型地址
  • 二、阅读《构建之法》第三章
  • 三、NABCD模型
  • 四、原型工具的使用
  • 五、原型设计过程
  • 5.1明确需求和功能
  • 5.2具体页面的设计
  • 5.3交互细节的设计
  • 六、原型介绍(设计结果)
  • 七、困难解决
  • 困难一 每日赛程如何切换不同日期的数据
  • 困难二 奖牌地图的实现
  • 困难三 了解更多页面冬奥会的切换
  • 困难四 了解更多页面点击中继器切换到具体的冬奥会介绍
  • 收获
  • 八、结对过程&&队友评价
  • 结对过程
  • 结对感受
  • 队友评价
  • 九、PSP表格和效能分析
  • PSP表格
  • 效能分析

一、原型地址

戳这里

二、阅读《构建之法》第三章

构建之法第三章中提到了软件工程师的思维误区,主要介绍了分析麻痹、不分主次想解决所有依赖问题、过早优化、过早泛化这四个思维误区。

  • 分析麻痹是指遇到问题后,不想解决问题,而是推卸责任,出了问题都赖在相关问题上。
  • 不分主次,想解决所有依赖问题:这刚好与分析麻痹相反,当遇到问题时,想马上动手修复所有主要和次要的依赖问题,以达成最初设定的目标,而不是根据自身能力找到一个折中的方案。
  • 过早优化:一个软件在早期的时候有很大的可塑性,各个模块都可以进一步进行优化。软件工程师在整个软件还没搭建好,就对其中一个模块功能花费大量时间进行优化,而不知道这样的优化对于全局是否必要。
  • 过早扩大化/泛化:有些软件是用来解决一个特定环境下的具体问题,而程序员想将这个软件泛化,让该软件能够处理所有类似问题。但结果往往是失败的,因为程序员没有正确认识自身的能力,不了解其中的技术难度。

三、NABCD模型

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站找到了一些视频教程,学习了一些基本元件的使用,特别是中继器的使用,后续表格的实现都是采用中继器。

五、原型设计过程

5.1明确需求和功能

我们首先仔细阅读了作业,本次作业要求我们设计一个冬奥会赛事数据的主题网站,通过图表等形式直观展示奖牌榜、每日赛程、详细赛况以及奖牌地图。为了使平台更加具有吸引力,引起人们对冬奥、冬奥历史的兴趣,还可以增加一个了解更多的页面,该页面主要介绍近几届冬奥会的会徽、举办地、吉祥物等。
明确了需求后,我们小队进行了充分的讨论,关于详细赛况的3个项目,我们选择了花样滑冰、冰壶以及冰球来进行具体的页面设计。

5.2具体页面的设计

为了对需要制作的页面有更加清晰直观的认识,我们首先设计了顶部导航栏

在这里插入图片描述

  • 首页我们设计了一个轮播图,用以美化界面,然后对冬奥会的各项赛事进行了简单的说明。
  • 奖牌总榜页面我们设计了一个表格,通过中继器来实现,有国家排名、国旗、国家名称、金银铜牌数量以及奖牌总数,并且高亮地显示了中国代表团。
  • 每日赛程页面我们设计了三个Droplist,可以按日期查询、按比赛项目查询、按场馆查询。我们通过表格的形式展现每日的赛程,展现每项比赛的比赛时间、比赛大项、比赛名称、场馆、比赛状态以及详细赛况。其中可以点击详细赛况可以跳转查看该场比赛的具体数据。
  • 详细赛况页面, 我们对冰壶、冰球、花样滑冰这三个项目进行界面设计::
    • 冰壶是国家队与国家队之间的对抗,中间设置两国的国旗以及大比分。然后以表格的形式展示10个小局的具体得分以及最后的总分。最后以表格的形式给出两队出场队员名单。
    • 冰球也是国家队之间的对抗,同样中间设置两国的国旗以及大比分,以表格形式展现三节的具体得分以及加时、点球情况。由于冰球的出场人员比较多,将出场名单设置在两边,给出队员的号码、姓名以及位置。最后还给出比赛的具体数据,包括:射门数、多打少、争球、被罚时间,并以柱状图的形式直观显示出来。
    • 花样滑冰以表格的形式给出了运动员的排名、出场顺序、代表国家、姓名、具体得分以及总分。
  • 奖牌地图页面给出了世界地图,并按照获得奖牌总数由深到浅对各个国家进行染色。当鼠标移入有获得奖牌的国家时,动态显示该国家的名称、名次、金银铜牌数量。
  • 了解更多页面介绍了往届的冬奥会基本信息,包括举办时间、举办国家、举办城市、代表团数量、比赛项目数、参赛人数,同时介绍了各届冬奥会的会徽与吉祥物。

5.3交互细节的设计

  • 首页具体项目介绍设计:
    • 本届冬奥会共有15个大项目,首先设计了一个冬奥项目中继器,母版是项目名称与项目图片,并设计中继器的布局为网格排布,每行5个。然后设计了另一个项目介绍中继器,母版有项目名称、项目图片与简要介绍。
    • 接下来实现点击右边的冬奥项目小图标,左边能根据点击的图标切换到对应的项目介绍。我们添加了15个热区,每个热区的命名与所覆盖的项目名称相同。然后为热区添加单击时筛选项目介绍中继器,采用规则[[TargetItem.name==this.name]],这样便实现了点击图标的切换效果。
    • 但是如果没有点击项目图标,所有的项目介绍都会出现,所以添加了一个页面载入时的交互,添加中继器筛选[[TargetItem.name=='花样滑冰']],让页面打开时默认显示花样滑冰的项目介绍。
  • 在奖牌榜页面,当鼠标移入一个国家时,设置了鼠标悬停样式,通过改变国家的颜色实现高亮显示,使得用户能清晰看到此时鼠标悬停国家,提升用户交互体验。
  • 在导航栏的详细赛况位置添加了子菜单项,当鼠标悬停在详细赛况位置,会出现3个子菜单项可以点击,分别是:冰球、冰壶以及花样滑冰。点击后可以跳转到相应项目,查看具体比赛数据。
  • 了解更多页面设计了以往各届冬奥会的图标,只显示7个图标,默认显示23-17届,可以通过点击左右箭头进行切换,查看想要了解的冬奥会历史。

六、原型介绍(设计结果)

首页
上方是一个轮播图,展现了冬奥会运动员的风采,下方是本届冬奥会15个大项目的简要介绍,点击不同的项目可以查看对应项目信息:

在这里插入图片描述



奖牌总榜页面
通过表格的形式展现了各个国家获得的奖牌情况,通过红色高亮显示中国代表团:

在这里插入图片描述



每日赛程页面
可以通过日期、项目、场馆三个下拉框对赛程进行筛选,点击最右侧的“详细赛况”即可查看该赛事的详情信息:

在这里插入图片描述



奖牌地图页面
通过地图的形式,以不同的颜色直观展示了奖牌在各个国家的分布情况。将鼠标移入到一个国家所在区域,即可显示出该国家的排名以及奖牌的具体情况。在地图的左下角给出奖牌数区间,颜色深浅表示奖牌数的多少:

在这里插入图片描述


详细赛况页面
详细赛况包含了冰球、冰壶以及花样滑冰三个项目。
冰球页面左上角显示具体比赛名称,对战国家,右上角显示场馆以及比赛时间,中央显示了国家国旗与总比分;左右两栏分别是两个国家的上场队员,介绍了各个队员的号码、姓名以及位置;下方两队比分一栏显示了每一小节的具体得分以及加时、点球情况;最下面一栏比赛数据,以柱状图的形式对比两个队伍的得分、射门、多打少、争球、被罚时间、短手进球的情况。

在这里插入图片描述


在这里插入图片描述

冰壶页面:通过国旗直观显示对战双方,设计了两个表格,分别展示小局比分以及出场队员名单:

在这里插入图片描述

花样滑冰页面:以表格的形式直观地展现出各国运动员们的具体得分数据:

在这里插入图片描述


了解更多页面

由一张轮播图循环显示每一届冬奥会的会徽,点击会徽可以查看了以往23届的冬奥历史、会徽、吉祥物等情况:

在这里插入图片描述



七、困难解决

困难一 每日赛程如何切换不同日期的数据

针对每天的赛程,我们共添加了19个中继器,并导入了数据(后续发现中继器太多导致原型页面加载太慢,无奈删减了许多(〒︿〒))。将所有中继器宽度和左上角坐标统一,并全部设置为隐藏。当页面载入时,默认显示02月02日的赛程数据。当单击具体日期时,显示当前日期数据,隐藏其他日期的数据,这样就实现了日期的切换。

在这里插入图片描述

  • 是否解决?√

困难二 奖牌地图的实现

首先通过查阅资料得知,要想实现奖牌地图,首先必须找到世界地图的svg图形。将得到的svg图形导入Axure中将其转变为形状,即可获得切割后的世界地图:

在这里插入图片描述


接下来又有一个难点,由于切割后的各个地区形状为矩形,因此存在某些小的地区被其它地区所覆盖的问题,我们通过调整不同形状的图层顺序使这些图形不完全被覆盖。随后,我们将各个国家和地区的奖牌数据填入中继器中,在各个形状中添加鼠标移入和移出时的交互,移入时通过[[Item.country ==this.name]]筛选中继器中的与该国家相对应的数据,并将奖牌信息显示在鼠标所在位置。做完这些修改后我们发现鼠标移入一个地区时,奖牌信息仍然固定在原来位置,无法随着鼠标移动。经过我们的一番讨论,发现将中继器转为动态面板即可解决问题。
在奖牌地图基本实现后,我们发现移入某个国家时,展现奖牌信息的面板会不断的闪烁,给人带来较差的视觉体验。经过一次偶然的尝试,我们将游标的横、纵坐标都加上10,意外解决了这个问题。

  • 是否解决?√

困难三 了解更多页面冬奥会的切换

  • 首先,我们将23届的冬奥会图片存入中继器的表格中,将图片绑定到中继器的母版中,这样就有了23个各届的冬奥会图标。
  • 接下来,在中继器的数据表格中添加了字段n,数值为1-23,对应每一届冬奥会,并设置了两个全局变量left与right,默认值分别为23和17。然后对页面设置载入交互,添加中继器筛选,[[Item.n<=left&& Item.n>=right]],让中继器只显示7届冬奥会,初始默认显示23-17届。
  • 接着再对左右箭头添加单击事件,当点击后,修改全局变量left与right的值,并添加筛选,让中继器显示left到right范围内的图片,这样就实现了图片的切换。
  • 这里有一点需要注意,修改全局变量left的值时,当我们选择插入变量,点击全局变量里的left,出现的是This.left,这边要把This.删除。

在这里插入图片描述

  • 是否解决?√

困难四 了解更多页面点击中继器切换到具体的冬奥会介绍

之前实现点击冬奥项目图标,左边的具体项目介绍切换是通过热区实现的。在每个冬奥项目图标上覆盖一个热区,热区的名称对应项目的名称,通过[[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表格和效能分析

PSP表格

PSPPersonal Software Process Stages预估耗时(分钟)实际耗时(分钟)
Planning计划1020
Estimate估计这个任务需要多少时间1020
Development开发580830
Understanding需求分析60120
Learning学习原型设计工具60120
Discussion结对讨论150200
Design原型设计250320
Review原型复审3030
Test原型测试3040
Reporting报告2530
Size Measurement计算工作量1015
Postmortem & Process Improvement Plan事后总结, 并提出过程改进计划1515
合计615880

效能分析

此次作业的时间主要花费在学习原型设计工具、结对讨论与原型设计上。

  • 由于我们都是第一次接触原型设计,虽然在设计之前通过网络资源(B站等)对Axure进行了系统的学习,但在设计的过程中还是会遇到各种问题,导致在设计的过程中仍然在不断学习。
  • 在原型设计之前,我们花费了大量时间对项目需求进行了探讨;此外,即便需求以及明确下来,但在设计过程中有时会存在意见上的分歧,这需要我们花时间来协调统一,讨论出一个合理的方案。
  • 由于对Axure原型工具的使用不太熟练,因此在设计过程中慢慢摸索Axure的各种功能以及使用方法,这导致了原型设计的花费时间超出了我们的预期。
...全文
245 6 打赏 收藏 举报
写回复
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
Jingbin-Wang 教师 03-19
  • 打赏
  • 举报
回复
奖牌地图基本实现后,我们发现移入某个国家时,展现奖牌信息的面板会不断的闪烁,给人带来较差的视觉体验。经过一次偶然的尝试,我们将游标的横、纵坐标都加上10,意外解决了这个问题。 事后有没有分析一下解决问题的原理?
  • 举报
回复 1
@FZU_SE_teacherW 事后我们对原理进行了分析,大概是由于我们设置了鼠标移入时显示奖牌信息面板、移出时隐藏面板的交互,当鼠标移入某个国家热区时会触发鼠标移入交互,如果在鼠标的当前位置显示面板,则导致国家热区与面板的区域是重叠的,并且面板遮挡住了热区,这相当于鼠标又移出了热区,触发了鼠标移出交互,将面板隐藏起来;这样不断的显示和隐藏面板,导致面板的闪烁问题。因此我们将面板出现的位置修改为鼠标的横、纵坐标都加上10,使热区和面板不会重叠在一起,从而避免了这个问题。
助教_李耕 助教 03-14
  • 打赏
  • 举报
回复

完成度很高的作业,原型整体风格也协调。很棒!我最喜欢的是首页,项目介绍做的用心了,左上角的墩墩很可爱。有个小问题:右上角五环左侧点开有个小搜索框,似乎没作用,可能是误加了需要删去?

  • 举报
回复
@DraiLGun 谢谢助教的肯定! 搜索框确实是误加,最初构思的时候觉得可以通过搜索框查询赛程信息,但在设计过程中没有实现。现已将搜索框删去
助教_李耕 助教 03-14
  • 举报
回复
@Veltuss. 想法是可以的,放在上边意义不大,可以放在下面和筛选框一行,对比赛名称模糊搜索,实现时可以考虑下。
221900334_庄艺翔 学生 03-15
  • 举报
回复
@DraiLGun 谢谢助教的指导,编码实现时我们会考虑一下。
发帖
2022年福大-软件工程、实践-W班

136

社区成员

2022年福大-软件工程;软件工程实践-W班
软件工程 高校
社区管理员
  • FZU_SE_teacherW
  • 丝雨_xrc
  • Lyu-
加入社区
帖子事件
创建了帖子
2022-03-11 22:08
社区公告
暂无公告