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

这个作业属于哪个课程	<2023年福大-软件工程实践-W班>
这个作业要求在哪里	<结对第一次作业–原型设计>
学号	222000103； 222000302
这个作业的目标	<设计方案，给出原型>
其他参考文献	《墨刀使用教程》、《构建之法》

一、原型地址

原型地址

二、作业格式描述

此次作业我们先阅读《构建之法》第八章当中的NABCD模型并在下方原型模型设计当中体现；然后开始介绍我们的设计之路，从工具、思路入手介绍，到整个原型模型的过程及成果；最后阐述此次的经验之谈，反思不足之处，在下一次的结对作业当中改进，不断完善。

三、NABCD模型的详细说明

3.1 什么是NABCD模型

“NABCD”是由Need、Approach、Benfit、Competitors、Delivery五个单词的首字母组成，分别指需求、做法、好处、竞争、推广五部分。通过这五部分，可以清楚简明的把项目的特点概括出来。

3.2 根据NABCD模型对此次项目进行分析

N（Need,需求）

澳大利亚网球公开赛是网球四大满贯赛事之一，比赛通常于每年一月的最后两周在澳大利亚维多利亚州的墨尔本体育公园举行，是每年四大满贯中最先举行的一个赛事，也是最年轻的大满贯。上次我们的输出结果只是通过简单的文字来显示，不够直观、具体，对用户不够友好.我们希望能设计一个平台，通过图表等形式来直观显示选手信息、正式赛每日结果等。平台应具备以下功能：

选手排名

需完成Singles Aces Leaders的排名，需要展示Name,Rank,Matches,Aces

每日赛程

展示每一天的赛事，显示比赛类型(女单男单等)，比赛场地，参与选手，比赛时间和比分，且获胜者姓名加粗显示
支持通过切换日期查看不同的赛程，可参考此界面
支持点击查看详细赛况

详细赛况

展示比赛的成绩，包含本场比赛参赛选手，每个小场比分和获胜选手，最终比赛的获胜选手等

晋级图

可以通过晋级图看到选手的晋升路线，晋级图中要有选手和姓名和比分，并高亮显示晋级选手
鼠标移动到某一场比赛需要高亮或显示边框提示

A（Approach,方法）

数据获取

有两种方法，一种是通过数据库获取数据，调用目标数据并展示；另一种是爬取网站数据，显示到自己的网页上。

方法设计

使用墨刀工具进行原型模型设计，并使用MindMsater绘图工具绘制思维导图对整个网页模型设计有一个清晰的思路

B（Benefit,好处）

使用网页进行展示，只需在浏览器中输入网址即可，无需登录个人用户信息就可以进入网站查看获得信息，简介方便。

网页页面简洁，数据内容直观，没有冗余信息。

操作简单，详略得当，用户体验良好。

C（Competitors 竞争）

主要竞争对手

澳网平台栏目
其他结对小组的作品

我方优势

我方实现功能的代码简洁，网页页面简洁大方，易于修改内容，操作简单。
当甲方有额外需求或需求更改时，易于进行增删改查工作。且逻辑简单，组员之间不用过多解释相互完成的内容逻辑，组员均可在短时间内读懂实现功能的逻辑，小组分工明确。易于维护代码的。

我方劣势

相对于某些开发组可能过于简单，实现功能不够全面，画面不够美观.
无法记入客户数据，无法实现个性化内容
平台只支持网页形式登入，无法通过客户端访问

D（Delivery 推广）

发布邮件给各大网球爱好者吸引他们关注并宣传我们的平台
在比赛期间在各类体育论坛上发布，面向大众，鼓励大众了解并参与网球运动，弘扬体育精神
在抖音、Bilibili等热门视频网站上投稿，通过流量获得热度

四、原型设计

4.1 原型设计工具

考虑此次是设计网页，我们所采用的墨刀原型模型设计工具，相较于其他工具，我们小组认为墨刀更好用一些，接触并使用过后也表示确实如此，它也被大多数产品公司使用，也支持团队开发，故选择该原型设计工具。

4.2 原型设计思路

考虑用户提出的需求，仿照澳网公开赛的结构功能，删减多余功能，保留选手排名、每日赛程、详细赛况和晋级图这四个页面，其中详细赛况可以通过点击每日赛程页面中的各个赛况栏目进去查看。
同时，为了体现出整个网页模型的整体性，我们又添加了一个主页来将上述几个页面联结起来，以此使得网页更加明了完整，方便甲方的使用，更加清晰。
以下是原型的结构图：

五、原型设计过程及成果

5.1主页页面

主页将甲方需求的几个页面联结起来，用导航栏显示四个页面的按钮，目前为首页页面，点击其他按钮即可跳转该栏目页面获取信息，中间是此次澳网赛的名称，下方是此次比赛展现出的体育精神，希望能够引起共鸣，呼吁大众加入体育，热爱体育，热爱生活，为祖国健康工作五十年。

5.2选手排名

用来展示此次澳网赛的排名，左边为男子得分排名，右边为女子得分排名，用两个表格来填写数据；Events States 上方是四个按钮可以用来选择回归首页或者查看其他页面的信息。

5.3每日赛程

展示每一天的赛事，显示比赛类型(女单男单等)，比赛场地，参与选手，比赛时间和比分，且获胜者姓名加粗显示；左边是导航栏用一个导航菜单分别记录资格赛Q1Q2和正赛Day1Day2，可以通过切换日期查看不同的赛程，至于回答一下只有这几天的赛程.由于工作量原因，只制作这四天的赛程数据，剩下的就是重复性工作；其中Q1的第一个赛程数据可以点击查看其详细赛况了解当天的比赛数据。同样的，每日的每场比赛均可实现点入查看比赛详情，但由于该工作的重复性，本次并没有实现，后续有需求可以实现。

5.4详细赛况

展示比赛的成绩，包含本场比赛参赛选手，每个小场比分和获胜选手，最终比赛的获胜选手等；
可通过点击每日赛程里的比赛进入此页面查看比赛的详细数据。

5.5晋级图

可以通过晋级图看到选手的晋升路线，晋级图中有选手的姓名和比分，鼠标移动到某一场比赛会高亮显示晋级选手；可以点击左右方箭头按钮查看上一轮或下一轮的晋级选手与比赛数据，方便快捷。

5.6 遇到的困难及解决方法

遇到的困难其实还是挺多的。首先是刚入手的时候，不知道从哪里开始做，也不清楚做什么，在细读作业要求之后，明白到此次任务就是结对完成一项原型模型的设计满足客户的需求。在开始着手后，我的partner开始实现选手排名这一页面，而我则入手第二个每日赛程。与之而来的就是第一大难题，墨刀的分页器该如何使用，该如何实现跳转，而且墨刀的分页器只有五个按钮，而奥赛里有Q1-Q4加上Day1-14是有很多按钮的，我开始尝试如何增加按钮链接，发现无所下手，于是去b站查找视频询问其他人，各种方法都尝试过；后面发现墨刀教程里有，但是教程里面的是现实右边栏目有一个可以添加按钮数量的栏目，而我的网页版墨刀没有我也不懂为什么。后面我的partner问同学解决方法，就是添加一个矩形框，添加一个页面状态然后复制原来的页面状态 修改然后添加事件就可以了。这样就能够解决问题了，但是墨刀的分页器还是不能添加多个按钮，这是一个存在的问题，还是很棘手的。我们后来换了一个思路，不用分页器来做，直接用按钮来写，但是这样就少了左右两个按钮不能够像澳赛网里的那样子实现得很完美，也是苦恼了许久，没有得到解决答案，于是我们在作业里放弃了使用按钮来写，取而代之使用的是导航栏功能，使用一个多行导航菜单放置在左边下拉添加资格赛与正赛，这样一来可以实现添加多个Day数的数据，问题也得到了解决。而我们在作业里面并没有做很多Day的数据，我们只实现了四天的数据加链接详细赛况以此体现我们能够掌握这个技能，并没有做过多的重复性的工作，减轻工作量。如果在后续有这方面的需求的话，我们也是可以多添加多个Day数据，并不是什么大问题。总结来讲，还是有很多收获的这次，能够结对合作解决问题，互相磨合，互相提出建议，尝试解决问题，我相信是一件好事的。但还是有点不懂分页器哈哈哈。

六、经验之谈

6.1结对过程

以下第一张是成员从认识开始结对到一起安排分工完成作业的部分过程聊天截图、第二张线下结对共同讨论、细化和使用专用原型模型工具时的图片：

成员	主要工作
222000103	框架的搭建和各个页面、各个状态之间跳转的事件处理。部分页面的UI界面美化
222000302	文档的编辑，博客的攥写，模型页面的设计与美工，原型后期的完善与处理

6.2 结对感受及评价

222000103陈鹭星：本次作业掌握了如何使用墨刀软件对原型进行设计，该任务较为简单，但一开始也遇到了不少问题，最终在请教别组同学后能够自行顺利解决。一开始还遇到的问题是不知道应该做成什么样子，没有很好的理解能力正确理解老师对于作业的要求。对同伴的评价：我们能在较短的时间内互相表达各自的观点并且决定最终结果，但我们的做事效率还不够高，争取在下次作业中提前开始，并且提高效率，更快完成更加优秀的作业。
222000302蔡智伟：此次作业让我去深入了解并掌握如何使用专业模型工具对原型进行设计，但我认为我掌握得不是很熟练，办事效率有点低，遇到的问题也不少，有些问题也很头疼，但通过查资料上b站看视频等途径也能得到解决，希望下次能够写出更加优秀完美的作业。对同伴的评价：同伴办事效率很高，业务能力强于我，同时也能够听取我的意见做出修改，但我们磨合得还不够好，争取下次作业当中更快更好的完成任务。

七、 效能分析与PSP表格

7.1效能分析

主要还是使用墨刀进行原型设计时花费的时间比较久，刚开始学这个工具，对操作没有很熟练，很多功能都不熟悉，不知道如何使用，这就导致了效率很低。原因是在学习原型设计工具时太仓促心急了，很多功能没有学习然后就动手尝试做就显得很无力不知道怎么实现。熟练了解功能操作后，效率就会提升上去。而在俩人的磨合的当中，我认为是效率比较高的，磨合蛮快的，都能提出建议提出改善方案并对方案进行优化处理，我认为是不错的。

7.2PSP表格

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