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

目录

一、原型地址

戳这里

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

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

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

三、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表格

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

效能分析

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

• 由于我们都是第一次接触原型设计，虽然在设计之前通过网络资源（B站等）对Axure进行了系统的学习，但在设计的过程中还是会遇到各种问题，导致在设计的过程中仍然在不断学习。
• 在原型设计之前，我们花费了大量时间对项目需求进行了探讨；此外，即便需求以及明确下来，但在设计过程中有时会存在意见上的分歧，这需要我们花时间来协调统一，讨论出一个合理的方案。
• 由于对Axure原型工具的使用不太熟练，因此在设计过程中慢慢摸索Axure的各种功能以及使用方法，这导致了原型设计的花费时间超出了我们的预期。