结对第一次作业--原型设计

这个作业属于哪个课程	2023年福大-软件工程实践-W班
这个作业要求在哪里	结对第一次作业
结对学号	221701112 221900431
这个作业的目标	阅读《构建之法》学习NABCD模型方法，参考澳网公开赛官网，学习原型设计工具并完成原型设计任务
其他参考文献	《构建之法》

https://modao.cc/app/design/pbleyzrq7fgw0d68#builtin_nav_collapse

1.原型地址

墨刀原型

2.需求分析

在做本模块前，我们认真阅读了邹欣老师的《构建之法》第8章的相关内容，对于文章中关于“二拍”定需求的比喻深有体会，明白做需求分析不能靠“拍脑袋”“拍胸脯”，书中提到了采用NABCD模型是一个很有效的办法，所谓NABCD模型即N（Need,需求），A（Approach,做法），B(Benefit,好处)，C（Competitors,竞争），D（Deliver,推广）。

2.1需求（Need）

近年来，中国高校也正掀起一股“网球热”。以最近的福州大学为例，我们学校建有独立室内网球场，每年体育校选课中网球的报名人数十分火爆。网球比赛是球迷们欣赏选手对局和提高水平的重要手段之一。澳大利亚网球公开赛作为全球网球四大满贯赛事之一，在全世界有亿万的粉丝和观众。根据这一背景，我们参考澳大利亚网球公开赛官网，设计了这样一个网站。主要用来满足用户查看赛程、排名、晋级和了解更多有关消息的功能。具体需求如下：
1男单女单选手排名
2直观地查看每天的赛程信息

显示获胜方
查看某天赛事具体赛况

3 查看某一场正式赛的赛事信息

选手的晋级路线
从八强赛开始
鼠标移到表格高亮

4 展示选手风采，了解选手故事

2.2做法（Approach）

针对需求的功能结构我们采用Spring框架进行开发，在原型设计上，我们采用轻便易上手的墨刀作为开发工具。做好需求分析，利用墨刀来制作符合需求的原型，在通过原型来即使调整完善模型和更好辅助编码。

2.3好处（Benefit）

以网页的形式呈现，整体界面统一简洁，后期开发维护方便快捷。对于喜爱网球的普通用户来说，容易上手，具有友好的交互界面和清晰的数据展示。

2.4竞争（Competitors）

我们主要的竞争对手是澳大利亚网球公开赛官方网站，澳网网站有强大的开发人员和庞大的用户基数，但是我们的网站也有一些自身的竞争优势：
一.我们的网站体积更小，且精简了一些功能，使得整个界面更加清爽便捷，普通用户更容易找到自己想要的功能，更贴近日常实际需求。
二. 中文化的界面对于中文用户人群更加友好，避免了网站翻译的麻烦和错误。
因此，在面对广大普通用户，我们虽然是后来者，但通过小体积，易获取，易上手的特点，仍然有强大的竞争优势

2.5推广（Deliver）

我们设想的推广计划是，先以福州大学网球俱乐部为起点，逐渐把用户扩散到福大校内的网球爱好者，乃至整个大学城。采取的推广手段有，分享转发网站链接，线上QQ群宣传，校内网球比赛赞助等。

3.原型设计过程

3.1原型设计工具

墨刀[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rfrc9M0y-1678424963856)(https://img-community.csdnimg.cn/images/04524b0555e341ee9c538cf0312457f1.png “#left”)]

3.2 设计中遇到的问题和解决办法

Q1.如何切换通过点击赛程的方式来跳转至详细赛况界面？
有两种方法，一种是通过表格直接链接到新界面，一种是通过按钮的方式来设计事件进行跳转，我们小组一开始采用的是通过按钮的方式，导致按钮覆盖住了赛程，我们讨论和尝试后，通过将按钮的透明度调为0的方式“隐藏”了按钮。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eYnRDsZF-1678424963858)(https://img-community.csdnimg.cn/images/0d2d1fac7c22441295f7e4cc23ff37cb.png “#left”)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X2GOIlIK-1678424963858)(https://img-community.csdnimg.cn/images/46ee0052d49540be81e51da5cf26c0a6.png “#left”)]

Q2.针对每日赛程有多个界面，如何切换？
在拿到题目时，我们对于每日赛程的切换非常头疼，不知道怎么通过点击不同日期进行查看，后面经过讨论，采用贴上日期图，在对应日期下设置按钮的事件为单击跳转对应日期界面，当用户单击按钮时，即可跳转到对应界面。
以Day1为例，要想跳转到其他日期，只需要在箭头所示的地方安装13个按钮设置跳转事件并设置透明度为0即可完成切换日期功能。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l46y047J-1678424963859)(https://img-community.csdnimg.cn/images/0b7f019c3e544481ae28d897bffa656e.png “#left”)]

Q3.如何直观显示详细赛况？
详细赛况的功能我们小组是最后设计的，针对详细赛况的分歧也是最大的，如何直观的展示详细赛况数据，我们小组在经过激烈讨论后决定采取表格的形式来清晰直观展示包含本场比赛参赛选手，每个小场比分和获胜选手，最终比赛的获胜选手在内的数据。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-snJz15RM-1678424963859)(https://img-community.csdnimg.cn/images/eb066c6c21b94b8ba46821a5571e9e29.png “#left”)]

Q4.整体界面的观赏性如何优化？
我们在做了大概的页面布局后，发现页面存在大量空白，显得十分单调。经过讨论和借鉴其他网站的设计，我们最终采取在网站空白处适当置底与主题相关的图片，并设置相应透明度，让整个界面和谐而又具有观赏性。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OVEacxe2-1678424963860)(https://img-community.csdnimg.cn/images/f3dc54a32aa14d2b9f418458e0d8c46c.png “#left”)]

4.原型展示说明

4.1 主页

简洁明了的风格，采用了常用的横式导航栏，符合人体视觉第一感受，打开原型停留在主页部分，方便各个部分进行跳转，整体界面设计如下图。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VKNa7Vuc-1678424963860)(https://img-community.csdnimg.cn/images/98241a3875ab47b181c138eef262a7b8.png “#left”)]

4.2 选手排名

背景采用天蓝色的风格，配上选手赛场上的风采英姿。展示前20名的男单与女单排名，调节透明度来显示背景，使整个画面干净而不失活泼，右上角添加了返回主界面的按钮，方便用户返回进行其他操作，如下图。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8yGCCPOl-1678424963861)(https://img-community.csdnimg.cn/images/e07688f7598e4bad9a9acc024e6d8da2.png “#left”)]

4.3 每日赛程

比赛总共14天，采用自由跳转导航栏，进行每天随意跳转，加深所选当天的颜色。每天向用户展示6场比赛，包括当场比赛的时间、场地、比分、国家等各种信息。点击每场比赛还可以跳转到其相应的比赛，查看比分的具体详情。同样的添加了返回按钮，方便进行后续操作，如下图。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OAjwgNW2-1678424963861)(https://img-community.csdnimg.cn/images/08076514bea1468d928f1ed91849ed22.png “#left”)]

4.4 比赛详情

采用表格积分的形式，用户可以看到各个set所属的每个game的比分。经过每日赛程对应的比赛点击进行跳转，整个界面清晰明了的展示了比赛双方选手，每小节比赛的比分以及最终获胜选手，如下图。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-59jlSDK7-1678424963862)(https://img-community.csdnimg.cn/images/f608a8e04fbe4f4890299f13fd0fb1fa.png “#left”)]

4.5 晋级图

展示最终八强的晋级图以及其各自比赛的得分，非常直观的浏览到最终八强的晋级情况鼠标移动到对应比赛时，会高亮显示，如下图。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zPOJEZJl-1678424963862)(https://img-community.csdnimg.cn/images/93d9db2ca88d4484aa1ed3dbf14acd7f.png “#left”)]

4.6 了解更多

展示了网球赛中人物的风采，图片切换采用左划入和右划入，起到放松观众视觉作用。下方添加了跳转官网的按钮，想要了解更多详细赛情，可以点击进行跳转。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VzOQ25sY-1678424963862)(https://img-community.csdnimg.cn/images/244778db288e45e48d28d4056caf0b07.png “#left”)]

5.效能分析与结对工作

5.1结队成员

221701112_陈一铭
221900431_赵杰

5.2结对作业分工

221701112_陈一铭：首页、排名、每日赛程，详细赛况，晋级图，了解更多，博客撰写
221900431_赵杰：需求分析，资料收集，每日赛程，详细赛况，博客撰写

5.3结对聊天截图

因为我们是不同年段的同学，见面比较困难，所以没有线下交流照片，但是我们线上交流非常频繁，基本每天都有几十上百条聊天记录，以下图片截取至我们的聊天讨论记录。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cSUOpu7M-1678424963863)(https://img-community.csdnimg.cn/images/4c9b0f3f607f40578f7d0eb77b37f7fd.png “#left”)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XvUCqW4h-1678424963863)(https://img-community.csdnimg.cn/images/a1f6578c702342de8a4e5778d01e6130.png “#left”)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yo31HyG7-1678424963865)(https://img-community.csdnimg.cn/images/1abd5860b34842f49e96496ebb59f890.png “#left”)]

5.3队友互评

221701112–>221900431：
很认真，很积极，改原型文件格式既有耐心又非常高效，收集材料和添加组件工作做得非常好，结对作业时非常果断且编写原型认真负责，是不错的队友！
221900431–>221701112:
我的队友对于界面布局的设计有独到的想法，界面清晰明了，方法简洁易懂。做事认真细心，工作分配到位。

5.4结对感受

221701112：通过这次结对作业，让我感受了结对完成作业的效率之高，两个人互相督促，互相进步，有时候能一起写原型作业写到很晚而不知疲倦，这让我更加期待后面的团队作业，希望自己能够积累这次结对作业的经验，在后面的团队作业中能够做好自己的角色。
221900431:这次的结对增强了我与人合作的沟通能力，协调能力，一个人的想法好不过两个人共同的想法，团队合作更有成就感。

5.5PSP表

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟
Planning	计划	20	15
Estimate	估计这个任务需要多少时间	1300	1800
Analysis	需求分析	40	120
Analysis Comprehension	需求理解	40	200
Design Spec	生成设计文档	60	30
Design Review	设计复审	30	30
Design	具体设计	100	160
Prototyping Tools Learning	学习原型设计工具	80	40
Team Discussion	结对讨论	200	320
UI Prototyping	界面原型设计	500	800
Reporting	报告	200	250
Size Measurement	计算工作量	30	20
Postmortem & Process Improvement Plan	事后总结, 并提出过程改进计划	30	50
	合计	1330	2035

5.6效能分析

从PSP表看，在需求分析和需求理解以及界面原型设计上所花费的时间超过预期，我们经过讨论，认为具体的原因有：对需求分析的把握和重视不够，因为我们两个人结队比较晚，时间紧，导致在我们拿到题目后，没有深刻去认识需求就开始写，走了不少弯路，以至于后面需要花费更多时间去修改界面原型设计。因此，在一个团队任务中，一定要在前期认真落实好需求分析工作，不能急才能少做“冤枉功”。

5.7心得体会

221900431:一个人的力量终究是有限的，双人团队合作更加促进了我们的效率，各自发挥各自的灵感，揉搓合并实现一个满意的作品。
221701112:二人齐心，其利断金，通过这次结对，让我对这句话的体会更深。一个人完成作业时可能会存在很多困难，但是结对后两个人在一些方面能够互补，对于困扰对方许久的问题有时候能够有独到的解决方式。借用《构建之法》中关于结对的一句话，“结对能更有效地交流，相互学习和传递经验，分享知识”。