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

[222000310刘鑫悦]

这个作业属于哪个课程	<2023年福大-软件工程实践-W班社区>
这个作业要求在哪里	<结对第一次作业--原型设计>
结对学号	222000309、222000310
这个作业的目标	设计一套方案，向客户推销。描述大致方案，以向客户证明你正确理解了客户的需求、提供给客户可行的优化的使用建议，给出原型模型，并提供大概的解决方案预期规划
其他参考文献	<构建之法、CSDN、Bilibili>

目录

• 1. 原型链接
• 2. NABCD模型
• 2.1 N(需求)
• 2.2 A(做法)
• 2.3 B(好处)
• 2.4 C(竞争)
• 2.5 D(推广)
• 3. 模型设计
• 3.1 采用的原型开发工具
• 3.2 原型设计过程
• 4. 结果汇报与展示
• 4.1 原型介绍
• 导航条
• 选手排名
• 每日赛程
• 晋级图
• 介绍页面
• 4.2 困难描述、解决思路及感受
• 困难1
• 困难2
• 困难3
• 困难4
• 困难5
• 感受
• 5. 结对过程
• 5.1 分工
• 5.2 结对感受
• 5.3 评价
• 5.4 结对截图
• 6. PSP表格
• 7. 效能分析

1. 原型链接

原型设计

2. NABCD模型

通过阅读构建之法第八章, 总结概括NABCD模型的概念如下:
“NABCD”是由Need、Approach、Benfit、Competitors、Delivery五个单词的首字母组成，分别指需求、做法、好处、竞争、推广五部分。通过NABCD模型, 开发团队可以快速对项目进行分析, 将项目的鲜明特点概括提炼出来, 帮助团队制定富有针对性、有效性的市场营销手段，使客户可以快速了解产品特点，促进产品推销与销售。

2.1 N(需求)

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

• 选手排名
  • 只需完成Singles Aces Leaders的排名，可以参考以下界面，需要展示Name,Rank,Matches,Aces

  • 

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

    

    
    

    

• 详细赛况
  • 展示比赛的成绩，包含本场比赛参赛选手，每个小场比分和获胜选手，最终比赛的获胜选手等
  • 详情可参考
    

    

• 晋级图
  • 可以通过晋级图看到选手的晋升路线，晋级图中要有选手和姓名和比分，并高亮显示晋级选手
  • 鼠标移动到某一场比赛需要高亮或显示边框提示
  • 由于数据量较多，可以从第四轮（4th Round）开始，参考以下界面
    

    

• 了解更多
  • 介绍澳大利亚网球公开赛的举办背景，通过丰富的图文使平台更具吸引力，引起引起人们对澳大利亚网球公开赛的兴趣

2.2 A(做法)

• 采用前后端分离的方式
  • 前端: HTML5 + CSS + JavaScript + Vue2 + Bootstrap5
  • 后端: Java(Spring5+SpringMVC+Mybatis+SpringBoot2)
• 数据获取: 采用与第二次实践作业相同做法, 从官网从爬取JSON文件, 由Java解析程序解析, 保存到数据库中
• 页面设计
  • 导航条: 使用Bootstrap5导航条设计
  • 页面切换: 使用Vue路由组件实现页面点击切换
  • 选手信息: 采用表格形式, 简洁明了地展现出选手数据
  • 日期导航条: 通过点击不同日期获取相应的日期数据加载详细页面
  • 晋级图: 采用轮播图的形式, 让用户可以无需点击, 可以直观了解赛程情况, 同时点击相应赛程,可以查看赛程详细信息
  • 了解页面: 该页面较为简单, 可以采取瀑布流结构, 介绍澳网相关信息

2.3 B(好处)

• 相比于官网, 通过图表等形式展现选手以及比赛的相关数据, 更加简洁明了, 清晰可观
• 通过顶部的导航栏, 方便用户切换页面, 找到自己感兴趣的内容
• 简洁的了解更多页面可以吸引对澳网从未了解的用户, 能够让用户以最短的时间对澳网产生最深刻的印象认知

2.4 C(竞争)

本次产品设计最大的竞争对手自然便是澳网，虽说其功能数据都较为完备，且作为官方具有权威性，但毕竟是外网的网站，存在着访问速度不佳，对国内用户阅读存在门槛，信息冗杂的缺点，相较于它，我们具有：

• 网站访问快速，网站部署于国内，用户查看时可以更快的加载网页
• 中文页面，方便国内用户阅读理解
• 介绍页面，使对澳网不理解的小白，也能快速领略其体育魅力
• 页面简洁， 网站信息展示简洁，色调明了，使用户查看更加方便获取想要获取的信息

2.5 D(推广)

• 通过CSDN博客面向广大网友的方式进行推广
• 通过QQ、微信等通讯工具传播方式进行推广
• 通过向身边亲朋好友介绍的方式进行推广
• 通过宣传单在校内进行推广
• ...

3. 模型设计

3.1 采用的原型开发工具

Axure Rp9

3.2 原型设计过程

1. 确认好模型开发的工具, 并对其进行系统性学习
2. 统筹分配任务, 协调工作安排
3. 浏览澳网主页, 借鉴设计灵感
4. 动手实践开发, 借助Axure团队开发工具, 进行协同开发
5. 沟通设计不足, 完善设计细节
6. 合并开发作业, 总结交流开发经验

4. 结果汇报与展示

4.1 原型介绍

导航条

通过点击AO按钮,可以进入澳网的介绍页面。点击导航条上的不同tab, 可以实现界面的切换。同时鼠标切换到不同tab时, 导航条将呈现紫色的悬浮效果

选手排名

按照作业要求, 展示了Name,Rank,Matches,Aces

每日赛程

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

晋级图

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

介绍页面

通过点击导航栏上的AO可以进入介绍页面, 介绍页面介绍了澳网的发展历史, 通过点击不同的tab可以查看相应时期的澳网历史

4.2 困难描述、解决思路及感受

困难1

对Axure原型设计软件不熟悉, 组队研发开发进度慢, 具体困难描述为: 一开始由于并不知道有团队开发这一个功能，采用各开发各的，最后通过互发文件的方式将内容整合在一起，但通过实战下来发现整体效率低下, 由于需要经常改动变更, 即使是在同一宿舍, 但频繁的发送文件也十分影响专注力, 导致项目进度开发紊乱

解决思路: 在不断抱怨之中, 被宿舍的其他舍友所聆听, 最后才得知了原来Axure自带团队开发的功能(赞美Axure, 赞美热心舍友), 于是便快马加鞭的创建其团队项目, 与小伙伴一起快快乐乐的进行起了团队开发

困难2

再刚开始利用Axure进行团队开发时, 需要公用一个 .rpteam文件, 每次修改完毕后需要将其上传至Axure云端中, 另一个人可以很方便的从云端中获取修改后的文件。但依旧是对功能的不熟悉, 对Axure签出签入功能不了解, 在另一个人修改完文件并提交更改后, 另一个人却接收不到相应的改动。

解决思路：在经过一阵心烦气躁之后，逐步稳健心态，究其问题原因，毕竟是出于自己对功能的不熟悉，于是开始耐心求助百度、同学的帮助，了解签出签入功能的具体原理，最后才懂得签出功能类似于对文件加锁，只有自己才能进入，签入功能类似于解锁。在熟悉其功能后，后面团队开发的效率与顺利度节节升高。

困难3

由于初出茅庐, 最开始的计划是能够完美复刻澳网的内容, 但实际开发过程中, 发现技术难度较大, 逐步降低了要求, 如: 官网中有许多动态效果, 点击某些按钮能够实现页面局部部件的动态移动, 无法实现像官方那样的绚丽效果, 如: 官网的day导航条可以实现点击移动

解决思路: 在经过慎重考虑之后, 我们决定知难而退, 保持模型的简约风格, 不设置较多的动态效果, 取而代之的是较为简单, 但看上去一目了然的动态效果

困难4

尽管需要保持简约风格, 但总体设计下来, 总是会对大大小小的页面布局位置、布局大小、字体大小、颜色等各种样式搭配感到不是很满意, 分析原因, 主要是两个人对于设计这一块内容有点一窍不通, 简单来说就是缺乏艺术细菌

解决思路: 在讨论后, 决定先将基础页面先做好, 再去深究其细节, 避免因小失大, 最后采用从官网中照猫画虎的方式, 一步一步将模型搭建出来

困难5

对模型之间的交互效果, 如页面切换, 局部页面切换, 鼠标悬停等动画效果设置一知半解, 如: 对表格实现鼠标悬浮时边框的高亮显示效果,在Axure中没有找到相应设置

解决思路: Axure在这一方面的设置还是较为明晰的, 一些实在不清楚如何设置的事件效果, 最后通过查询百度的方式还是得到一一实现, 对表格的高亮效果最后是通过在其上设置透明的矩形框, 鼠标悬浮其上时, 显示矩形框实现的

感受

这是一次意义非凡的结队合作训练, 两个人通过Axure的团队开发工作, 体会到了团队协作的必要性, 一砖一累筑城墙, 明白了1+1>2的道理, 建立了对模型建模的基本认知, 同时也熟知了自身存在的哪些方面的不足: 起初开发较为懒散、对一些技术不够熟悉导致一些要求没有得到较为满意的实现。但总体来说还是对这次开发合作成功较为满意，毕竟世上没有一步求成的道理，更多的还是学习与积累经验。

5. 结对过程

5.1 分工

222000309：选手排名、每日赛程、详细赛况、晋级图、界面优化
222000310：关于界面、导航条、界面交互、博客编写与润色

5.2 结对感受

222000309：

这次结对作业让我第一次真正体会到了结对编程的好处和优势，相较于以往在写个人编程作业时的相互交流和学习探讨，这次结对编程的效率远远超出我们以前个人的单打独斗 ，两个人结对编程不仅能够相互督促提高效率，还能够发现和解决平时难以发现的漏洞，也更加加深和扩充了我们结对伙伴之间的默契程度。通过这一次作业，我真正体会到了，只要结对伙伴选择得当，编程效率一定能够达到1+1>2的深刻意义。

222000310：

软件开发过程中, 团队队友之间的协同开发合作是必不可少的步骤, 本次的结对作业, 锻炼了我与队友之间协同交流的能力, 通过合理分配安排任务, 能够使任务开发事半功倍, 同时相比于单人开发, 一个人默默敲代码, 结对开发可以与他人更多的交流, 学习借鉴其开发经验, 总结自身的不足。总体来说, 本次结对是一次收获满满的经历, 我从中学习到了很多团队协同开发的知识, 认识到了团队协作开发的必要性。

5.3 评价

222000309:

我的队友技术水平高超，和他在一起就特别有安全感，我们两个座位也靠的比较近，平时交流起来也很方便；这次分工合作下来，除了有遇到一些技术上的问题，在沟通和协作方面还是比较默契的，一些小问题可以一起思考解决，遇上一些疑难杂症和技术性的问题，还能场外求助请其他舍友和同学一起帮忙解决，总之我和我的队友在一起结对编程，不仅能够互相学习，而且还能共同进步

222000310:

个人患有严重拖延症，再加上近些日子，学校其他方面工作考试的缠身，内心十分烦躁，能在有队友的催促下，终于动起了键鼠，由于是住在一间宿舍，沟通交流也比较方便，在急起来想砸键盘的时候，也可以被及时阻止，总之，队友十分可靠，以后一起fighting、fighting、fighting！！！

5.4 结对截图

由于与队友是在同一宿舍, 大部分交流都是以口头形式交流, 故截图较少

6. PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	20	20
• Estimate	• 估计这个任务需要多少时间	600	700
Development	开发	500	550
• Analysis	• 需求分析 ）	30	30
• Design	• 设计	200	250
• Learning	• 学习新技术	60	80
Reporting	报告	20	30
• Test Report	• 测试报告	5	10
• Size Measurement	• 计算工作量	10	10
• Discuss	结对讨论	15	50
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	20	30
	合计	1480	1760

7. 效能分析

• 由于此前与结对队友均无原型开发设计的相关经验, 又深深得知磨刀不误砍柴工的道理，我们花费了较多的时间在选取原型开发工具, 学习原型开发工具的过程, 学习的途径大多是从B站、CSDN、百度等渠道进行有关Axure RP9原型工具的学习
• 尽管在开发前，对原型模型投入了较多时间的学习，但动手实操时，错误也是层出不穷，在团队协同开发时常常遇到各种问题，令人心烦气躁，开发效率依旧不高，深究其原因，我想是由于初次开发经验的不足，以及未能习得“视频习来终觉浅，代码设计要躬行”的深刻道理
• 尽管设计过程一度受挫，屡屡出现想要砸烂电脑的冲动，但终归是将任务圆满完成，也算是不负努力，通过本次实践我们也习得了开发设计的相关知识，懂得了开发前模型设计的重要性，模型设计比起敲代码，更像是在做网页版的PPT