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

这个作业属于哪个课程	202302软件工程实践
这个作业要求在哪里	结对第一次作业–原型设计
结对学号	222100410、222100412
这个作业的目标	学习原型设计工具、结对讨论、界面原型设计、结果汇报
其他参考文献	《构建之法》

1.原型地址

墨刀设计原型链接: 世界游泳锦标赛

---

2. NABCD模型

2.1 什么是NABCD模型

NABCD模型是一种营销策略模型，它代表着Need（需求）、Approach（方法）、Benefit（好处）、Competitors（竞争）和 Delivery(推广)。这个模型被广泛应用于销售和营销领域，它可以帮助企业制定出有效的营销策略，以满足消费者的需求并促进销售增长

2.2 N（NEED:需求）

希望能设计一个平台，通过图表等形式来直观显示世界游泳锦标赛选手信息、正式赛每日结果等，因此平台应具备以下功能：

1.选手排名

• 只需完成Women 1m Springboard决赛的排名，可以参考此界面，需要展示Overall Rank，Country，Athlete，Age，Points
  

2.每日赛程

• 展示每一天的赛事，显示比赛类型(男子1m跳板，女子10m跳台等)，参与选手和比赛时间
• 支持通过切换日期查看不同的赛程，可参考此界面
• 支持点击查看详细赛况
  

3.详细赛况

• 展示比赛的成绩，包含本场比赛参赛选手，选手排名，比赛积分，落后积分等
• 详情可参考此界面
  

2.3 A（APPROACH:做法）

• 使用墨刀进行原型模型设计
• 从技术上来说，我们打算采用前后端分离形式进行网页端开发，为产品后期分布式架构以及发展多端化服务打下坚实的基础
• 从用户角度上来说，我们本身对体育赛事也有所关注，因此我们能够清楚地明白用户的需求，从而以用户的眼光审视我们的产品，使得产品能够切实的满足用户需求，同时提供清晰明了的交互界面，给用户良好的使用体验

2.4 B（BENEFIT:好处）

• 使用本产品时用户无需下载，通过浏览器即可浏览资源，同时网页端采用响应式布局，使得用户在PC端以及移动端都能拥有较好的使用体验
• 本产品拥有良好的用户交互界面，用户能够轻松地获取想要的信息。同时我们使用轮播图进行热点推送，展示往届精彩集锦，激发用户对比赛的兴趣

2.5 C（COMPETITORS:竞争）

竞争对手：世界游泳联合会官网

我方优势：

• 页面简约精致，赏心悦目
• 交互逻辑简明，便于客户使用
• 只展示关键信息，模块化分组，更加直观

我方劣势：

• 平台只能支持网页形式访问，暂时不支持移动端
• 没有实现用户注册、登录功能，无法给客户推送信息

2.6 D（DELIVERY:推广）

• 可以在赛事进行期间于小红书、微博、抖音、b站等社交平台发推广博文，邀请体育评说大v们推荐，吸引关注该比赛的球迷们使用该平台，并且邀请cxk作为我们网站的代言人
• 通过大数据发送海量邮件给游泳赛事关注者，并且邀请他们关注世界游泳锦标赛这一赛事，同时在文末宣传我们的平台

---

3.模型设计

3.1 原型开发工具

在比对了市面上众多功能强大的原型开发工具，例如摹客RP，Axure，Mockplus等后，我们还是决定使用对个人开发者和新手上手使用较为友好的墨刀

3.2 任务分配

222100410：赛程、排名设计、博客概况搭建级图、赛程详细页面，博客编写与润色
222100412：提供改进意见、网页搭建代码可行性考察

3.3 原型设计过程

3.3.1 需求分析

通过在网络上学习NABCD框架相关知识后进行需求分析，决定设计首页、排名、赛程、赛事详情、直播、了解更多一共六个主要界面，在导航栏中有五种主要功能，并且可以通过点击赛程中的具体内容进入赛事详情

3.3.2 UI风格选定

我们对市面上主流的体育赛事网站进行了比较和分析，最终决定采用符合游泳主题的蓝色UI风格佐以灰色凸显层次感

3.3.3 具体开发的想法

整体上我们打算采用每个页面统一的顶端导航栏+搜索栏的基本格式，这样可以方便用户即使在不同页面也可以快速跳转找到自己想要的页面，这也是许多体育网站的常用风格
由于顶部导航栏的存在，我们打算用传统的上下结构来展示我们的图片和文字，通过滑动即可浏览完整页面，同时在需求的基础上，我们增加了了解更多和直播的页面，在了解更多页面，我们提供了全体赛事排名的一览图，并且在两端插入了很多图形防止观看疲劳（页面见结果汇报中的原型介绍）

---

4.结果汇报

4.1 原型介绍

本次原型设计采用每个页面统一的顶端导航栏+搜索栏的基本格式，设计风格方面我们采用了跟游泳元素相近的天蓝色和富有层次感的灰色来设计整体页面，并且拥有首页，赛程，排名，直播，了解更多这五大板块，满足了用户的需求

1.首页页面方面，我们选择了上下结构来展示我们的图片和文字，访客可以通过滚动页面来浏览页面，添加了图片和文字生动地介绍世界游泳锦标赛的历史和对体育界产生的影响

2.赛程页面方面，我们在左上角设计了一个日程选择框，可以筛选当天的赛程，下方还添加了了页面选择器。各个赛程以表格的形式整齐的排列在页面内，还可以通过点击赛程跳转赛赛程详情页，其中有比赛参赛选手，选手排名，比赛积分，落后积分等

3.排名页面方面，我们在左上角设计了一个赛事选择栏，下方还添加了了页面选择器，主体部分使用了表格分别展示了women 1m springboard的前五名选手，有选手的形象小图、国家小图、名字、排名、分数

4.了解更多页面方面，我整理了2024所有赛事的排名一览图，方便访客快速了解本次赛程的基本情况（拓展功能）

4.2 困难及其解决方法

Q1:把导航栏作为母版不完全适配
困难描述 ：
在制作导航栏的时候，由于对墨刀软件的中的母版概念并不熟悉，导致在制作一个所有页面都需要使用的导航栏时，尝试转换为母版但是发现其复制件并不会随着母版的变化而随之改变，使得页面转换之间不够连贯，遇到了一些意料之外的功能性问题，例如组件丢失等
解决尝试：
一开始我们以为是母版套用方面出了问题，就一直去对母版进行修改，尝试过使用母版复制件和原件来添加到不同的页面中，后来我们想到可能是因为墨刀组件中的标签页带有一个初始状态，但是在不同页面切换的时候，初始状态是需要改变的，所以母版无法套用在所有页面中，必须在不同的页面设置不同的初始状态，每个单独页面都要对导航栏中的标签页重新设置相关参数，才能保证页面之间能够流畅的转换并且不会出现一些逻辑上的问题
有何收获：
通过解决这个问题，我们更加了解组件的使用，意识到了在把组件转换为一个组合或者母版这样的集体时，应该关注个别组件的实际功能是否契合母版使用的概念，这个问题的研究使得我们更加了解了母版中的组件状态应该如何设置，这也为我们后续的原型打下了良好的基础。解决完这一问题后，我们也意识到当解决不了问题时可以换一个思路，而不能白白浪费时间

Q2:把排名页面组合组件无法套用在赛事详情
困难描述 ：
在制作赛事详情的时候，试图在排名页面格式的基础上来进行一些修改从而达到客户需求的功能（例如：PTS behind），因为两者的功能大差不差，但是尝试复制组合过来时发现大小并不适配，并且还无法直接拉伸，会导致很多组件的位置变得歪七扭八，非常影响美观
解决尝试：
对原有组合的排版进行优化，在其中删除了例如图标之类的会被拉伸严重影响的组件，只留下表格和文字等可以被直接拉伸的组件，然后经过套用排名页面和对赛事详情页的扩充和补充原有的图标等配件，实现了较为理想的效果
有何收获：
通过解决这个问题，我们意识到了不能一味的贪图方便快捷，很多功能与组件并不支持简单的套用和大小调整，必须手动调整，原型的开发并不能一蹴而就，而是 需要耐心开发和编写，才能呈现最好的效果

Q3:设计过程中与队友的意见不合
困难描述 ：
在制作直播和了解更多功能时，zhm认为可以添加一些额外的功能，但是ljc认为过多的开发会增加代码的编写难度，而且直播需要视频来源，目前并没有很好的思路来完成这个功能，同时了解更多只有文字非常枯燥，影响观感
解决尝试：
在沟通之后决定暂时放弃直播这个额外功能，但是由于已经到了开发后期，不好直接从导航栏中取消掉，所以这一部分只能先空缺着，而后我们在了解更多中添加了一些图片和背景色，使得看起来没有这么枯燥
有何收获：
在结对作业中两人应该共进退，积极提出问题和解决方案，才能更好的配合完成作业，及时沟通想法也可以为后续的开发节省很多不必要的麻烦，作为一个程序员更是如此，以后的工作还有很多需要团队合作的地方，提前熟悉这个过程会获得很多宝贵的经验

---

5.结对体验

5.1 结对过程描述

在这次结对作业中，选择了熟悉的舍友进行结对，因为方便我们通过线下交流同步进行的方式完成任务分工与细节讨论，遇到困难时我们也可以及时沟通

5.2 使用原型模型工具时的非摆拍结对照片

5.3 对队友的评价

222100412ljc to 222100410zhm：为了能够准确高效地完成这次作业，在设计原型前zhm积极地学习墨刀的使用，这使得整个结对合作过程十分顺利。同时他的行动力也很强，从任务发布之初就开始上手编写博客和设计原型，有他跟我组队让我非常的放心是个不可多得的合作伙伴！

222100410zhm to 222100412ljc：在整个设计过程中ljc给了我很多关于设计方面的意见，能够清晰地指出当前设计中一些问题，比如这个设计很难通过编程实现，避免了一些设计最后只是纸上谈兵，这些是我未注意到的，同在合作中也能迅速，完美地完成分配任务，让合作很快跨过了磨合过程，与他本次合作十分愉快！

6.PSP表与效能分析

6.1 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟)	实际耗时（分钟）
Planning	计划	20	25
Estimate	估计这个任务需要多少时间	10	10
Development	开发	540	600
Analysis	需求分析（包括学习新技术）	30	60
learning	学习原型设计工具	100	100
Discussion	结对讨论	100	100
UI Prototyping	界面原型设计	300	360
Test and Improvement	原型测试与改进	120	180
Reporting	报告	60	90
Problem Analysis & Postmortem	问题的分析和事后总结	60	60
	合计	1340	1585

6.2 效能分析

在需求分析和原型模型设计这两部分我们实际花费的时间超出了预计耗时。
其中一个原因是由于对NABCD模型的不了解，按需求设计的过程中花费了一定时间，不过后来在网课中系统学习了一下NABCD模型后，后续的设计思路犹如拨云见日，并且后续在原型设计的过程中我们继续精益求精，而后的任务中，我们把重心放在主要功能部分，在实施前最好先规划出大致内容和方向，尽可能避免效率低下的，通过这次的原型设计我们明白了之后作业应该明确的准则，就是“磨刀不误砍柴工”，即我们在做任务前应当做好充分的准备工作，切忌盲目开始！