软件工程实践--第一次结对作业 原型设计

软件工程实践第三次作业

这个作业属于哪个课程	<软件工程-23年春季学期>
这个作业要求在哪里	<结对第一次作业–原型设计>
这个作业的目标	设计展示澳大利亚网球公开赛的原型，向客户推销
其他参考文献	构建之法

1 原型地址

原型地址

2 NABCD模型说明

2.1 N （Need，需求)

澳大利亚网球公开赛是网球四大满贯赛事之一，是最年轻的大满贯。正是由于赛事的火热，客户需要有一个平台能够方便地查询赛况、参赛选手的信息以及排名等。该平台要简洁，能够客观直白地向客户展现赛事数据。上次我们的作业完成的输出结果只是通过简单的文字来显示，不够直观、具体，对用户不够友好。因此在本次作业里，我们希望能设计一个平台，通过图表等形式来直观显示选手信息、正式赛每日结果等。

2.2 A（Approach，做法）

可以全面实现对网球赛事平台的赛事信息管理和选手管理、晋级图绘制，大大减轻工作人员的工作量，全面提高了效率，应用新的系统可以在计算机上灵活、方便地管理赛事信息，从而大大的提高了处理效率，使管理更加现代化。

2.3 B （Benfit，好处）

完美迎合用户基本需求，没有冗余数据参杂在网页里，赛事数据以图表方式可以直观地向用户展示比赛结果。
新系统要基于好用、易用、美观的原则设计统一的人机界面，使系统适用于综合型体育比赛，实现对赛事和选手排名的现代化综合管理。新系统要考虑到设计与用户两方面，使其尽量具有好的兼容性，速度快，功能强的特点
，可让程序运行相对变得简单而方便，可使用户只要根据功能提供的提示，就可以简便地运行正确操作。

2.4 C（Competitors，竞争）

由于赛事热门，市场上应该会有很多类似的澳大利亚网球公开赛赛事数据查询平台，也就是我们的竞争对手。
我们的优势有：
1.界面简洁没有冗余数据，界面设计符合大众审美。
2.麻雀虽小五脏俱全，功能简单但基本能满足用户需要，打开平台就能简单上手。
3.图表结构完整，数据一目了然。

2.5 D（Delivery，推广）

采用市场:我们可以通过数字媒体，以及发放观赛优惠券让用户快速的了解这款APP，我觉得最好的方法是在体育频道广播电台，这可以吸引很多对体育感兴趣的驾驶员，然后一传十，十传百，迅速发展；后期可以和咪咕体育，百事体育等商家合作，将这个功能加入其中。

3 模型设计

3.1 设计工具

非常容易做交互，操作简单，效率极高，适合初学者。

1. 非常容易做交互，操作简单，效率极高，适合初学者。
2. 界面优美整洁。简洁的界面在一定程度上有助于提高开发人员的效率。
   强大的演示能力。墨刀在轻量级的移动端原型制作更加迅速，展示更加方便。
3. 分享方便。反馈及时。墨刀不仅上手快，还可以快速分享，快速查看应用在网页上的效果。反馈回复很及时，产品改进速度也很快。

3.2 设计过程

首先，我们确定了设计的原型为1440x1024的网页，根据选手排名，赛程信息，晋级图，确定了需要三个大的版块，又根据选手排名分为Mans和Womens又在选手排名下新建两个子页面，每场比赛的赛程在单击后跳转到详细页面，包括每回合的各自得分情况，晋级图采用动态组件，可以通过按钮切换4th Quarter和Quarterfinals。

3.3 设计成果

我们在主页面（首页）设置了跳转到选手排名页面和每日赛程页面以及晋级图页面。其中选手排名包含两个子页面，分别是男选手排名和女选手排名。每日赛程的子页面是赛事详情页面。

封面图，点击箭头即可进入首页

首页页面

选手排名


赛事详情

每日赛程

晋级图

3.4 困难解决

一，设计不出晋级图的切换效果
第一次尝试：
在官网看到可以通过点击btn在同一页面切换四分之一赛和四分之一决赛，当时感觉到这一步将会很困难，后来从bilibili上学习到了动态组件这一组件，其实就是先将整个赛季的对战晋级图都画出来，将动态组件的每个状态都设置为不同的可视区域，当事件发生时，切换动态组件的不同状态，显示不同阶段比赛。
第二次尝试：
由于第一次的方法是可以做出晋级图的效果，使用了一个动态组件达到了可以切换赛程阶段的效果，但问题随之而来，在晋级图的基础上，还要实现，将鼠标移出移入某场比赛方框时，要高亮的显示边框，刚开始我打算在已有的动态组件内将每一场比赛的方框也设置为一个动态组件，可最后发现动态组件内不能再嵌套一个动态组件，所以只能将第一次的尝试推翻。
Final ：
既然可以拉入一个动态组件以改变动态组件的状态，我考虑到页面也可以设置多个状态，所以我将整个晋级图的不同阶段放入不同的页面状态，当点击事件发生时，仍然可以切换比赛阶段，不影响第一次尝试的结果，并且没有了之前的动态组件，我可以将每个方框设置为动态组件，以达到设置鼠标移入移出的事件。
二.各个组件布局问题
在刚开始对整个页面没有什么具体排版的时候，我们就是突然想起怎么做就怎么做，导致了在做到选手排名时，男生界面每一个选手排名的表项大小不一，宽高不统一，而且又男生跳转到女生排名时，展现的效果很不好，很不流畅，当时其实是有办法的，在每次增加表项的时候，需要按住ctrl放大看他的XY坐标，但是特别麻烦；后来我终于发现，墨刀里面有一个东西叫参考线，我苦苦寻找的东西；这样一来有了参考线和墨刀自带的辅助对齐功能，画表格也不是很痛苦了。

3.5 心得收获

自己在本次的作业的过程中主要使用的是墨刀来完成作业。原本以为十分麻烦且枯燥的作业，没想到做着做着觉得还挺有意思。简单的操作，实现了一个原本需要使用HTML/CSS实现的界面，在没完成本次作业之前，我是完全不知道还有这样的方式来实现一个产品的原型，要是以前自己肯定会用前端去做这样的一个东西，这样肯定会花费许多时间。本次作业最大的收获便是知道了什么是原型、如何快速创建一个原型来简化和用户的沟通。

4 结对过程

4.1 任务分工

我们是舍友也是很好的朋友，所以选择了相互结对。
我们的小组成员有许定伟，罗耀坤；我们首先一起对原型设计做了需求分析；
其次根据四个大个方面，许定伟负责，选手排名，和晋级图的设计；罗耀坤负责对赛程信息和详细赛事的设计；最后一起设计了首页；并一起完成MarkDown。

4.2 工作细节

线下合作

线上交流

4.3 结对感受与互评

222000124许定伟的感受：这次结对作业过程中，我感受了一个人思维的局限性，来自搭档的建议和想法可以更加发散我们的思维。

222000124许定伟对222000121罗耀坤的评价：经过三年的生活，我们的默契还是可圈可点，我们对各个页面大的方向和构思都可以不约而同。

222000121罗耀坤的感受：这次结对设计原型，感觉两个人想法都挺多的，但是考虑到后续工作开展的不方便，还是摒弃了很多想法，希望后续工作能顺利

222000121罗耀坤对222000124许定伟评价：定伟对任务工作很上心，而且懂的很多，对工作开展起到巨大作用。

5 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	10	10
• Estimate	• 估计这个任务需要多少时间	5	5
Development	开发	600	800
• Analysis	需求分析 (包括学习新技术）	60	120
• Design Spec	• 生成设计文档	10	20
• Design Review •	设计复审	5	5
• Coding Standard	• 代码规范 (为目前的开发制定合适的规范)	10	20
• Design	• 具体设计	30	50
• Coding	• 具体编码	200	360
• Code Review	• 代码复审	30	60
• Test	• 测试（自我测试，修改代码，提交修改）	100	120
Reporting	报告	20	30
• Test Report	• 测试报告	10	20
• Size Measurement	• 计算工作量	10	10
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	20	30
	合计	1120	1640