软件工程实践结对作业一

EncounterMe

已于 2022-03-12 16:18:44 修改

阅读量195

点赞数

文章标签：软件工程

于 2022-03-12 08:43:18 首次发布

本文链接：https://blog.csdn.net/EncounterMe/article/details/123435594

版权

这个作业属于哪个课程	2022年福大-软件工程、实践-W班
这个作业要求在哪里	软件工程实践结对作业一
结对学号	221900420 221900428
这个作业的目标	设计一个平台，通过图表等形式直观显示奖牌总榜、每日赛程，可以查看具体某个项目的各个小场赛况。
其他参考文献	CCTV冬奥栏目、Olympic.com

1. PSP表格、效能分析

PSP表格

Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
需求理解	10	10
学习原型设计工具	60	180
结对讨论	60	80
界面原型设计
• 主页部分	180	445
• 奖牌总榜	100	150
• 每日赛程	60	120
• 详细赛况	180	240
• 奖牌地图	120	60

合计	770	1285

由于一开始讨论不够充分，导致起步阶段效率十分低，团队成员之间积极交流很重要。

2. NABCD模型的详细说明

（1）Need，需求

2022年初，北京冬奥会的各项赛事成为热门话题，全国大众对冬奥赛程、奖牌的关注度持续提高，需要有一家体育赛事网站每天都会提供当日的冬奥赛况，并记录各代表团的奖牌获取情况，我们希望能设计一个平台，通过图表等形式来直观显示奖牌总榜、每日赛程，并且具有一定的交互性，可以查看具体某个项目的各个小场赛况。
为解决现阶段的需求，该平台应具备以下功能：

奖牌总榜
- 可以查看各国代表团的奖牌数及最终排行，并通过一种形式高亮中国代表团。
每日赛程
- 展示各项目的详细赛程，显示比赛时间、大项名称、比赛名称、场馆等信息
- 支持通过选择、切换比赛日期、项目、场馆的形式来筛选用户希望查看的赛程
- 支持点击查看详细赛况
详细赛况
- 展示单项比赛的成绩公报，包含对应项目的参赛选手、得分、排行等比赛数据
奖牌地图
- 以世界地图的形式直观地展示各个参赛国家的奖牌数
- 在地图上使用不同的颜色代表大致的奖牌数区间，颜色深浅表示奖牌数的多少
- 鼠标点击或移动到每个国家会高亮显示奖牌信息
额外部分
- 动态评论条
  - 展示部分热评，可以提供点赞功能。
- 冬奥短视频
  - 查看有关冬奥的短视频，可以进行分享
- 北京申奥历程
  - 展示北京申请冬奥的时间历程和过程经历

（2）Approach，做法

参考Olympics官网、CCTV冬奥栏目、百度搜索结果等页面的美术风格，内容呈现形式，汲取它们的可取之处~~（扒光它们的素材，再参考它们的数据展示形式，进行一个缝合，然后转换为自己的）~~。通过接口获取数据，并以Web页面来呈现数据，制作奖牌总榜和奖牌地图相关页面，来展示此次冬奥会中各国代表团的比赛成果，并且制作赛程相关页面，直观的展示每个日期所对应的赛程，并能通过交互链接显示某场比赛的详细赛况。

（3）Benefit，好处

更加直观和美观的展现此次北京冬奥会相关的内容，方便用户查看各国代表团的金、银、铜奖牌数量和最终的排行，同时额外采用地图的形式呈现奖牌相关信息，让用户主动与奖牌地图交互，获取所需各国运动队的奖牌信息，增添了用户查看奖牌过程的交互性。同时以列表形式展现每日赛程，让用户查询感兴趣赛程的同时，体会便利性。

（4）Competitors，竞争

Olympics官网、CCTV冬奥栏目、百度搜索结果等都制作了有关2022北京冬奥的内容呈现，但是都存在一定的缺点。比如，Olympics和CCTV的冬奥相关展示页中，都存在一定的广告。Olympics官网相关页面中，屏蔽广告后，页面交互会存在一定的小问题。

但是相对的，上述几个网站都在页面美术风格，内容丰富性，用户交互体验等方面都十分优秀，而且都针对自己的目标用户群体做了特别的改进，例如：Olympics官网是面向世界的，所以页面支持多国语言，主页展示的内容也并不倾向于某些特定的国家，数据统计和数据呈现部分也更加专业；而CCTV是面向国内的，所以主页的展示的内容会倾向于与中国相关的内容，同时数据的呈现形式也更易于一些不是十分了解比赛项目的用户理解。这些都是值得我们借鉴的。

上述的几个网站都没有奖牌地图相关的内容，这是我们的优势。（？吗

原型设计完成后，发现页面存在一些缺点：

一些中继器展示列表的页面，列表每一项的比例过大，导致同一时间显示的表项数目较少，需要不断滑动页面。
内容有些单薄，不够充实
美术风格较为单一
详细赛况页面展示的比赛数据虽然直观，但是专业性不足，没有展示特定比赛项目的更加具体且专业的数据统计
…

（5）Delivery，推广

先将项目给周边同学玩玩，而后发布到互联网，收集意见。

~~冬奥都结束了，害推广呢~~

3. 模型设计

采用的原型开发工具

Axure RP9

原型设计过程

因为是结对进行作业，所以原型开发工具的选择，不仅要考虑上手难度，也要考虑工具是否支持团队协作。由于团队中有成员具备Axure RP9的使用经验，并且AxureRP9支持协同工作，同时能够对签出操作进行阻塞处理，当团队中有人签出页面进行修改，并且没有完成签入时，其他成员对相同页面无法进行签出操作，同时，当一个成员完成签入操作后，其他成员也能随时签出，实时进行进度查看和内容审查，所以综合考虑下，选择Axure RP9进行原型开发。

首先先对现有的需求进行划分，根据需求，将任务分为以下几个实现模块：

整体页面布局设计
奖牌总榜
奖牌地图
每日赛程
详情赛况
细节优化
额外内容

一开始只进行了页面整体布局的设计，单纯采用 arp 内置的默认基本原件进行布局设计，确定每个部分所占据的控件，同时熟悉一下原型开发工具的基本使用。由于布局设计可能会随着后续模块的实现而改变，所以设计时并未填充素材，单纯只对页面各个部分进行占位。当整体页面布局设计完成后，就按照模块分配每位成员的任务。

以下为各模块的原型设计过程：

奖牌总榜部分

因为在整体页面布局设计中，有多个页面共用同一侧边栏的设计，所以在制作奖牌总榜之前，首先参考Olympics官网中侧边栏的奖牌榜，制作了mini奖牌榜，仅用于展示前几名运动队的奖牌信息，用于侧边栏部分的内容填充，同时也熟悉一下中继器的使用。并且在mini奖牌榜的右上角，提供一个跳转交互的箭头，当点击箭头时，跳转到奖牌总榜。

奖牌总榜部分只需要负责展示各个国家代表队的最终排名和奖牌获取情况即可，所以这部分只需要通过冬奥页面获取各国代表队的数据排名，获取相应的图片素材，再用中继器进行数据展示即可。

每日赛程部分

每日赛程部分采用中继器展示数据，展示的数据以及图片素材来自某TV某Oly官网。

在每一项比赛的最后增加<成绩公报>项，当鼠标悬停时，改变此项的样式，提示能够进行鼠标点击的交互操作。当鼠标点击<成绩公报>时，跳转到对应的详细赛况页面。

同时利用下拉列表，配合按钮情形实现中继器的筛选功能：

当点击<选择项目>下拉框时，下拉框展示所有此次冬奥会中包含的比赛项目，当选定一个比赛项目并点击查询时，给中继器添加筛选，当选定项为 “选择项目” 时，移除比赛项目相关的筛选，及展示所有比赛项目的赛程；
当点击<选定场馆>下拉框时，下拉框展示所有可选择的场馆，当选定一个场馆并点击查询时，给中继器添加筛选，当选定项为 “选择场馆” 时，移除场馆相关筛选，及展示所有场馆的赛程；
当点击<选择比赛日期>下拉框时，下拉框展示所有可选择的有效日期，当选定一个日期并点击查询时，给中继器添加筛选，并移除其他所有中继器筛选，当选定项为 “选择日期” 时，展示默认选定日期的赛程。

综合上述筛选逻辑，实现：通过选择、切换比赛日期、项目、场馆的形式来筛选用户希望查看的赛程。

详情赛况部分

选择了2月04日的三个大项：冰壶、冰球、花样滑冰。当点击每日赛程中每一项的成绩公报按钮时，跳转到对应的详情赛况页面。详情赛况页面仅作单项比赛的成绩公报，设计页面布局，并利用中继器以列表的形式来展示对应项目的参赛选手，得分，排行等比赛信息。

奖牌地图部分

找到了适用于Axure9的世界地图元件之后进行二次开发。国家的颜色对应着获得奖牌数的多少，可以增强地图的层次感，用户可以从图中更清楚的认识各国奖牌获得数的差异，左下角是国家颜色与奖牌获得数的对应图。支持鼠标移入国家后实时显示当前国家的奖牌获得情况，增强了用户的交互性。

滚动评论条部分

为以后提供评论接口做预留位，用户可以评论或查看到最新热评，以及点赞当前的评论。
交替使用交互事件的元件移动和隐藏，可以进行循环播放。

页面母版部分

页面母版部分用于对先前所做的整体页面布局设计部分进行再处理，用于协调和统一各个页面之间的总体风格。在页面母版中，添加页面的顶部导航栏，通过导航栏的交互，可以跳转到主页、每日赛程、奖牌总榜页面。在鼠标移入导航栏中的<运动项目>部分时，页面动态下拉展示此次冬奥的所有运动项目。在页面母版的侧边栏部分，加入mini奖牌榜，和冬奥热搜部分，当点击mini奖牌榜中的箭头时，也会跳转到奖牌总榜页面。

主页轮播图

轮播图用于展示开幕式、闭幕式、冬奥选手场上的闪光时刻，支持切换播放用于用户交互。

冬奥短视频部分

使用中继器展示在冬奥会期间发生的一系列事件，以视频的形式进行展示，供用户查看。

北京申奥历程

以时间线的形式展示北京申请冬奥会资格的历程，配色部分采用中国水墨画形式，从暗到明的背景表现出中国成功申奥的艰辛过程。

4. 结果展示

原型地址

原型设计地址

首页总览

首页部分主要展示一些冬奥相关的项目和场景图片，以及奖牌地图、滚动评论条部分。这部分主要用于包含奖牌地图，顺便利用导航栏对所有页面的主要内容进行一个综合展现，所以没有搞的特别复杂。

在这里插入图片描述

导航栏部分

导航栏部分简单实现了一些动态和交互效果。当鼠标移入交互区域时，相应选项的样式会发生变化。当鼠标移入运动项目选项时，弹出下拉列表，展示此次冬奥会的所有比赛项目。

在这里插入图片描述

每日赛程部分

在这里插入图片描述

每日赛程部分主要用于展示当日的所有赛程信息，包括比赛开始时间，比赛项目，参赛队员，比赛场馆等进行展示，默认展示2月04日的赛程信息。通过列表中每一项最后的成绩公报按钮，可以跳转到对应的详情赛况页面。支持通过选择不同比赛日期、比赛项目和场馆来筛选用户希望查看的赛程，通过赛程信息列表上方的下拉框及查询按钮，可以选择所需日期、场馆和比赛项目进行筛选，点击查询后，按照相应选择的条件显示对应的赛程信息列表。

如下图所示：
请添加图片描述

详细赛况部分

详细赛况部分实现了三个不同项目（花样滑冰、冰壶、冰球）的比赛数据展示，包含对应项目的参赛选手、得分、排行等比赛信息。这部分主要工作量是在于不同项目比赛数据的不同成绩形式的界面设计。而比赛数据只需利用Excel批量导入中继器中即可。

以下为三个比赛项目的详细赛况界面：
在这里插入图片描述请添加图片描述

奖牌总榜部分

奖牌总榜部分同样是使用中继器来展现各国代表队的总体奖牌数据和最终排行，并使用五角星图形来高亮标识中国代表团的奖牌获取信息。
在这里插入图片描述

奖牌地图部分

奖牌地图以地图的形式直观的展示各个参赛国家的奖牌数量，利用地图块不同的颜色深浅度来表示获取奖牌数量的多少。当鼠标移入某个地图块时，将会给鼠标所在的地图块添加悬浮效果，并动态展示相应国家的奖牌获取数量。

在这里插入图片描述

滚动评论条

首页下方的滚动评论条。参考百度冬奥搜索相关滚动热评制作。
请添加图片描述

轮播图

首页下方的轮播图。主要用于展示冬奥高光时刻。

在这里插入图片描述

冬奥短视频、北京申奥历程

首页最后的冬奥短视频、北京申奥历程列表栏。冬奥段视频栏目迎合短视频趋势，具有一定交互，当鼠标移入短视频列表项时，相关标题将会高亮显示，当点击标题时，将会打开链接页面。北京申奥历程按照时间线，展示了北京申奥的几个关键时间点。
请添加图片描述

5. 遇到的一些困难

每日赛程部分：

一开始每日赛程只完成了界面的设计，以及用中继器实现了对单天赛程列表的展示。但是后续发现需求中要求每日赛程能够通过切换日期、项目、场馆来实现对数据的筛选展示，所以又着手这部分交互功能的实现。

起先中继器中保存日期字符串内容形式为 “04日8:35” ，这种情况下，要按照日期对中继器中的数据进行筛选展示，需要在载入时添加筛选，并且判断字符串是否相等，来实现数据筛选。但是比赛日期下拉框的被选项中只有 “05日” 格式的日期形式，所以需要判断中继器中日期数据是否包含字符串 “05日” ，可Axure RP9中并未提供相应判断包含关系的函数，加上对Axure RP9中元件内容的不熟悉，利用substring函数取子串取不明白，这个思路就作罢了。

后来转变思路，将中继器中保存的日期字符串形式修改为两列，即 “04日” “8:35” ，就能够直接不做任何处理进行字符串相等判断，实现按照日期筛选赛程数据。

后续比赛项目和场馆部分的筛选查询与日期筛选类似，结合ARP9提供的情形功能，也就很容易实现了。
滚动条部分：

一开始有这个想法时首先想到了利用Axure自带的移动交互事件来实现滚动评论，但是研究了半天发现没有参数或事件可以进行循环，Axure的移动起始点始终是相对位移，不能通过设置绝对起始点进行移动。在试了好久以后发现通过显示隐藏的递归调用可以实现回到起始点，于是只要知道父组件的右边界即可实现循环播放了。
其他

因为我们对页面设计如何美观这方面确实都不太了解，加上初期对于想要实现什么样的页面效果没有经过很充分的讨论，导致后续开展任务的进度有些慢，也有些无从下手。后边被DDL推着，做了不少参考后，也才终于有些实质性的进展。由于交流不够充分，也推翻了之前的页面布局设计，但是迫于工期，只能继续进行了。

所以交流讨论真的特别重要特别重要特别重要特别重要特别重要特别重要特别重要特别重要特别重要特别重要特别重要特别重要特别重要重要重要重要重要重要重要重要重要重要重要重要重要。