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

222000314邵彧扬学生 2023-03-10 18:49:23

这个作业属于哪个课程	<2023年福大-软件工程实践-W班>
这个作业要求在哪里	<结对第一次作业——原型设计>
结对学号	222000312、222000314
这个作业的目标	<学习使用原型设计工具、学会设计原型>
其他参考文献	《构建之法》

1.选手排名（希望快速了解男选手和女选手的排名）

用户可以查看Singles Aces Leaders的排名

2.每日赛程（希望能够快速直观地查看任意日期的赛程信息，并能了解获胜方）

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

3.详细赛况（希望能够查看某一场正式赛的赛事信息）

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

4.晋级图（可以通过晋级图看到选手的晋升路线，晋级图中要有选手和姓名和比分，并高亮显示晋级选手；同时要能通过鼠标与用户进行交互）

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

5.了解更多

本网站的用户可能分为，了解网球但是不了解澳网，不了解网球，以及熟知网球熟知澳网。
最后一部分群体，毋庸置疑，也许有很强的用户粘性，但是对于前两部分群体，我们急需增加他们对于网球对于澳网的认同感，以此我们可能会收获一批忠实用户。

6.说在最后

对于网球群体来说，花哨的用户界面，不是他们想要的，我们相信他们对于网球的关注远大于界面。因此，我们要做的仅仅是将用户关注的内容，比如比赛结果，选手排名，给简单明了的展现出来，我们更应该做的是减少意外的出现，比如卡死和内容的缺失。

A：（Approach）做法

1.我们小组使用墨刀进行设计，主页添加了一些自动轮播图片来吸引用户，单机左上角的“More Details”按钮将进入功能页面，我们共设计了四个功能，“选手排名”、“每日赛况”、“详细赛况”、“晋级图”。

在主页，添加了一些自动轮播图片来吸引用户
针对导航栏，我们采用悬浮高亮，简洁美观。
针对选手排名，我们采用表格分成男女两组，以从上到下的方式排列，清晰明了。
针对每日赛程，我们添加了日期导航栏，允许用户获取相应比赛的详细赛程。
针对晋级图，我们则使用从左到右淘汰式晋级图，体现了“文无第一，武无第二”的特点。

2.我们添加了了解更多功能。

对于不了解澳大利亚网球公开赛的用户，我们贴心的增加了澳网的举办背景，通过丰富的图文使平台更具吸引力，引起引起人们对澳大利亚网球公开赛的兴趣。
而且对于了解网球的用户，我们的了解页面还有德约科维奇和拉菲尔的图文，能够引起用户的共鸣，增加用户粘性。

B：好处

AO比赛作为大满贯赛事，参加的选手众多；在16-29的14个比赛日中，每天又会举行很多场小组赛。因此，用简单的文字结果来展示选手信息和赛程结果是非常麻烦的。本系统在赛事数据的基础上，采用丰富的图表来展示各种各样的赛事信息，并可以与用户进行交互，为用户查看赛程提供了良好的体验，最大的好处就是满足客户需求。

此外，我们为我们的设计增加了对用户隐藏需求的满足，比如我们就将人们最关注的信息放在了最显眼的位置。以及对用户主观需求精神世界的满足。

C：竞争

优势：
页面简约精致，基础功能人性化设计，增加了有趣的表现。
我们的附加功能，尽显人文色彩
上端导航栏固定，右侧展示区支持滚动，方便用户定位到目标页面
交互逻辑简明，便于客户使用
只展示关键信息，模块化分组，更加直观
没有广告，体验良好

劣势：
平台只能支持网页形式访问，不支持移动端

D：推广

1.我们可以通过高效率的CSDN传播法，同时在赛事进行期间于小红书、微博等社交平台发推广博文并在文末宣传我们的平台，能很快的让目标用户知道我们的产品，并进一步传播。

2.将完善后的项目向各大应用平台推广，通过投放广告来维持运营及相关宣传。

三、说明使用的原型设计工具，原型设计过程

工具：墨刀

使用自带的团队项目进行协同设计，团队项目提供互斥修改，页面内同时完成原型与文档，需求逻辑一目了然。

原型设计过程

1.轮播图

利用墨刀软件内置的轮播图组件，将澳网官网上的图片通过开发者工具下载下来，合成、调整图片的尺寸，将图片上传到组件中，即可完成轮播图。

2.选手排名（希望快速了解男选手和女选手的排名）

用户可以查看Singles Aces Leaders的排名

对男、女单打领先选手排名，按升序显示在表格中，同时用其他单元列显示他们的相关信息；

3.每日赛程（希望能够快速直观地查看任意日期的赛程信息，并能了解获胜方）

展示每一天的赛事，显示比赛类型(女单男单等)，比赛场地，参与选手，比赛时间和比分，且获胜者姓名加粗显示。

统计三个赛季和14天的赛事结果，实现每场比赛的信息可视化；

在页面左侧设置不同比赛日的按钮，用户点击时，可以切换日期查看不同的赛程；

每场正式赛的信息包括其类型、状态、选手国籍（用国旗体现）和姓名、各小场比分；

用加粗样式来标注获胜方；

用户单击某场比赛下方的“Match Situation”按钮时，可以查看详细赛况：展示比赛成绩、参赛选手、各小组比分及获胜方等信息，展现每场赢家的照片；

4.详细赛况（希望能够查看某一场正式赛的赛事信息）

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

5.晋级图（可以通过晋级图看到选手的晋升路线，晋级图中要有选手和姓名和比分，并高亮显示晋级选手；同时要能通过鼠标与用户进行交互）

可以通过晋级图看到选手的晋升路线，晋级图中有选手和姓名和比分，并高亮显示晋级选手

鼠标移动到某一场比赛需要高亮或显示边框提示

四、结果汇报

1.原型展示

导航栏

为每个页面设置跳转选项，考虑到与用户的友好交互，添加了鼠标进入时的提示。

主页

主页的设计一共分为两部分，一部分是澳洲网球公开赛相关图片的轮播，一部分是进入澳网详细界面的按钮。图片的自动轮播借助于动态面板，在每个面板上添加需要展示的图片。该界面能够使得客户看到一些澳网比赛的精彩瞬间以及国际知名球员，提高美感，能够增强客户对澳网的兴趣及客户黏性。

选手排名 Players Ranking

参照原网站，按照需求使用两个表格分别列出男女选手排名，名次依次从上到下排列。

每日赛程 Daily Schedule

每日赛程界面的设计分为两部分，第一部分是时间选择的垂直菜单栏，客户可以通过切换日期查看不同的赛程。第二部分是赛程的展示，客户可以通过点击相应的赛程来查看详细赛况。该页面为每一个部件都添加了鼠标悬浮事件，使得页面更加的生动。

详细赛况

晋级图 Promotion Chart

显示最后四轮晋级结果，分成两页个版面展示，通过点击方向图标切换。客户可以点击按钮查看晋级信息，界面设计简洁美观，方便客户对信息的了解。

2.遇到的困难及解决

困难1：第一次接触原型设计软件，不懂如何选择、使用软件

解决思路：在本次实践之前，我们从未接触学习过原型设计，对如何选择软件也很迷茫。于是我们请教了一个了解这方面知识的同学，在她的建议下选择了轻量级的墨刀免费版软件。在确定好了要使用的软件之后就是学习使用软件了，尽管墨刀是一款小巧轻量级的软件，但是它毕竟是陌生的领域，无法独自在短时间内迅速上手。于是，我们在B站上找到了墨刀的教学视频：传智教育墨刀全套教程。由于年份以及墨刀版本不一致，视频中的软件界面和我们使用的最新版有些区别，但是介绍的功能、用法都是一样的，只是要花点时间找找新版软件的该功能在哪个位置。

困难2：对原型设计软件开发不熟悉，尽管经过了初步的网课学习，组队研发开发进度仍然很慢，常常因为使用了错误组件而影响了对方开发的效率。

解决思路: 两个人先单独使用各自的空闲原型熟悉软件功能，最后再共同完成作业要求的原型开发。

困难3：最开始的计划是以复刻澳网的标准, 但实际实现过程中, 发现有许多组件未能完全替代官网的设计, 如: 官网中有许多动态效果,无法找到合适实现方式、官网每日赛程的日期导航条可以实现点击移动而我们没有找到相同的组件。并且实现过程中发现官网有许多并不在作业要求之中且并无复刻的必要。

解决思路: 在经过慎重考虑之后, 我们决定知难而退, 保持官网本身的线性逻辑, 不设置较多的动态效果, 并且去除了许多不必要的导航。

困难4：总体设计下来, 总是会对大大小小的页面布局位置、布局大小、字体大小、颜色等各种样式搭配感到不是很满意，并且由于是两个人设计，颜色搭配总是十分辣眼睛。

解决思路: 所幸我们之中有一个人曾学习过绘画，有一定审美，最终将整体颜色和图片的设计交给了对方完成

五、 PSP表格与效能分析

1. PSP表格

PSP	预估耗时（分钟）	实际耗时（分钟）
计划	20	10
• 估计这个任务需要多少时间	10	10
需求分析	60	30
• 理解需求	40	40
• 设计方案	40	50
学习原型设计工具	180	120
• 学习Axure	180	120
结对讨论	100	100
• 对需求、如何实现、拓展功能的讨论	120	100
原型设计	160	250
• 具体界面设计	120	180
• 原型复审	40	90
总结	90	105
• 经验总结	30	50
• 编写博客	120	300
合计	710	880

2. 效能分析

由于此前与结对队友均无原型开发设计的相关经验、对NABCD模型的不了解，我们采取了边学习边设计的方法完成原型设计。由于沟通和空闲时间上的差异我们遇到了许多困难导致影响了效率。我认为这是由于初次开发经验的不足，未能养成良好的团队沟通习惯，因而导致团队沟通浪费了许多时间。尽管出现了许多问题，但是由于原型设计以其中一人的方案为标准、原型实现则是共同完成，因而也提升了效率，我想这次的作业使得我们积累了许多经验。

经分析我们发现原型设计的效率较低，主要原因就是对相关知识的掌握不足，以及原型设计的经验不足，导致多次推翻重做，超出了预期时间。我们认为改进方法就是多花时间学习，掌握墨刀的更多使用方法，提高设计效率。本次实践我们在没有充分学习的基础上就开始了设计，对墨刀的使用仍然停留在基础组件，更多像是在制作ppt。

六、结对心得

1.结对过程

此前的几次课程我们就已经有了组队的经历，再加上又是舍友比较方便讨论，在本次软工实践中我们自然而然的组成了一队。

2.非摆拍照片

制作前先通过☁讨论决定了网站整体简约的风格

由于我们在一个宿舍所以讨论比较方便，很快就商讨决定了网站的整体架构，之后就是对一些细节进行修改，完成初步的原型设计。

3.工作细节

任务	分工
需求分析	222000312
功能设计	222000314
原型开发	共同完成
博客撰写	222000314

4.相互评价及结对感受

222000314->222000312：彭季菖同学在本次原型开发的过程中上手很快且开发效率很高，我跟他提出的想法都能很快的得到实现，并且在开发过程中也十分严谨，揪出了几个我不曾发现的小毛病并且加以改善。而且我们组的开发氛围也十分的良好，就算有时候出现分歧也能很快心平气和的讨论出一致意见。通过这次结对作业的锻炼，我对原型开发有了深刻的认知。正如本次的困难收获所说，实际项目涉及的技术通常较广也更加复杂，很难保证充分掌握，所以开发环节的时间不容易缩短，还是需要多上手实践以积累经验。

222000312->222000314：在这次的结对编程中，我发现了小伙伴有以下优点：1.有耐心。在编程的过程中遇到困难能够想办法去解决。2.够专注。完成作业的时候不会被环境干扰。通过这次结对编程，让我学习了很多东西，让我提高了一些重要能力。1.团队合作能力。一个团队要取得高效的工作，团队成员必须力往一处使，必须相互配合。2.交流表达能力。团队之间的沟通是很有有必要的，沟通才能发现很多问题。

...全文