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

W。..

已于 2023-03-08 18:12:43 修改

阅读量444

点赞数 1

文章标签：墨刀

于 2023-03-08 18:11:27 首次发布

本文链接：https://blog.csdn.net/CowBoyHS/article/details/129392921

版权

作业基本信息

这个作业属于哪个课程	软件工程-23年春季学期
这个作业要求在哪里	软件工程实践寒假作业
结对学号	222000211、052003113
这个作业的目标	结对合作，设计一套方案，向客户推销。通过原型工具给出原型模型，提供大概的解决方案预期规划
其他参考文献	《构建之法》

1. 原型地址
 2. PSP表
 2.1效能分析
 3. 阅读《构建之法》的感悟和理解
 3.1 NABCD模型
 3.2 Need(需求)
3.3 Approach(做法)
3.4 Benefit(好处)
3.5 Competion(竞争)
3.6 Delivery(推广)
3.7 软件产品的利益相关者
 3.8 关于软件工程师的思维误区
 3.9 关于自我评估部分
 4. 模型设计
 4.1 使用的模型工具
 4.2 任务分配
 4.3 设计过程
 4.4 成果展示
 4.5 遇到的困难与解决办法
 5.心得体会与反思
 5.1 反思
 5.2 心得体会
 5.3 结对过程
 5.4 评价在此

1. 原型地址

原型地址

2. PSP表

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	10	10
• Estimate	• 估计这个任务需要多少时间	10	10
Development	开发	545	700
• Analysis	• 需求分析	20	20
• Design	• 界面原型设计	400	500
Reporting	•报告	30	40
• Test Repor	• 测试报告	10	15
• Size Measurement	• 计算工作量	5	5
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	10	10
• GetPoint and Discuss	• 需求理解、结对讨论	30	50
• Learning	• 学习原型设计工具	40	60
• Total	合计	555	710

2.1 效能分析

我们都是第一次接触原型设计，在设计之前虽然有通过B站与度娘对墨刀进行了些许的学习，但在设计的过程中还是会遇到各种问题，导致在设计的过程中仍然在不断学习。
由于对墨刀原型工具的使用不太熟练，因此在设计过程中慢慢摸索墨刀的各种功能以及使用方法，这导致了原型设计的花费时间超出了我们的预期。所以我们作为软工的人可以多多上手一些跟我们专业有关的工具，可以轻松解决这些问题
出现效率低下的原因主要还是在于摸不清头脑要如何去设计与排版，是做简洁的？还是复古的？对这些问题纠结了挺久的
出现效率低下的次要原因是学习使用墨刀，但是由于墨刀上手难度较低，也挺轻松就解决了

3. 阅读《构建之法》的理解以及结合本次原型设计分析

3.1 什么是NABCD模型

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

3.2 Need（需求）

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

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

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

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

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

3.3 Approach(做法)

对于数据，可以通过分析并爬取官方网站的api来获得，然后存入本地的数据库中，并通过前端页面依照简洁风格清晰的展现给用户
使用h5+vue开发前端
使用ssm/springBoot开发后端
+总体采用面包屑导航的形式，上面有赛程、排名、晋级三个按钮进行索引和导航，具体赛程信息可点击相关模块进行查看。
排名模块使用表格的形式清晰的展现
用户详细信息使用常用的pk视图展现
晋级图采用树状形式，并高亮获胜选手

3.4 Benefit（好处）

使用导航栏的形式，将用户需要的信息全部锁定在该处，不需要用户查看其他页面或者费劲去查看其他是否存在的按钮去查看更多信息
排名采用表格的形式展现十分直观和清楚
晋级采用树状图的形式，自顶而下，用户想了解谁获胜，获胜走向可以在很短的时间获取这些信息

3.5 Competitors（竞争）

页面简洁明了直观，功能操作简单。只需要点击面包屑的按钮即可浏览整个网址的所有信息
界面美观,用户体验好，采用简单的简约配色，使用高级色搭配，简单但显得高级
用户需要的是第一眼的信息是否满意，满意之后才会查看更多详细的信息，我们尽量将用户需要的重要信息简单的展现出来，使用起来相对方便
免费开放使用，可以收集到用户的反馈，可以不断更新和换代，以求达到用户满意的界面与功能
竞争对手主要为澳大利亚网球联赛的官方信息网址。但是我第一次查询该网站时并没有给我十分清晰的数据表现，比如晋级图，不能直接查看全部的，而是要点击模块去查看，对于需要短期获取信息的用户来说反而不太有利，我们通过直观的展现所有的晋级状态，并用明显的区分色高亮他们，更加直观和直白。还有对手的详细信息不能傻瓜式的一下看清谁赢，比分趋势是如何展示。我们通过某某vs某某且比分也是某某-某某的形式清晰的展现

3.6 Delivery(推广)

在各大社交媒体上进行推广宣传
向身边喜爱体育运动的朋友推广

3.7 软件产品的利益相关者

想要查看澳大利亚网球公开赛信息的用户
想要分析成绩走向的与推测最终胜者的分析师
需要上传信息并展现给用户的管理员
开发该软件能直接获取金钱利益的开发团队

3.8 关于软件工程师的思维误区

我们并不一开始展望太多，先按照小部分，分而治之的分给每个人对应模块的开发，最后再整合起来
而且先以大体为纲，先进行简单的更改，对问题先提出较简单的解决方案，并在实现后不断对其进行优化，以实现并确保没太大问题同时按时完成为基准去完成

3.9 关于自我评估部分

这次的作业使用墨刀去完成会相对容易，这是我们在开始这个项目前的大概想法，考虑到墨刀学习成本不高，使用就能上手，对这块学习部分做了简单的评估，对所需要的开发时间提前有了个简单的预估

在这里插入图片描述

4. 模型设计

4.1 使用的模型工具

墨刀

4.2 任务分配

222000211：赛程、排名设计、博客概况搭建
052003113：晋级图、赛程详细页面，博客编写与润色

4.3 设计过程

浏览参考各大体育网站,查看各大体育网址是如何进行布局，并以此作为参考
先讨论双方的任务，并根据自身能力采取墨刀进行页面设计，并查看一些赛事的比赛配色
学习墨刀基本使用，看b站黑马程序员的视频进行学习
动手操作，每个人设计出各个部分，最后进行整合和资料的整理

4.4 成果展示

主页：

采用面包屑导航进行处理，符合主流，简单明了

排名：

可以大图显示leader-aces，下面显示总体的排名

在这里插入图片描述

详情：

通过xx vs xx 比分也是 xx - xx 的形式使得比分一目了然十分直观

晋级：

采取树状图的形式，清晰表现

在这里插入图片描述

4.5 遇到的困难及解决方法

困难描述：晋级图太大，而展示时无法展示完全，但是墨刀又无法缩小晋级图
是否解决：我们通过改变墨刀的展示板大小从而实现展示模块的变化
收获：加深了我们对墨刀这款设计工具的使用熟练度
困难描述：改变了晋级图之后其他板块也需要跟着改变
是否解决：我们通过改变导航栏的宽度让其他板块去适应导航栏板块的大小来解决这个不协调的问题
收获：每个板块独立出来制作，可以极大降低耦合度，而程序最需要的就是低耦合度，而低耦合度可以让程序改起来难度不会太大，而且还能轻松的进行后续的优化
困难描述：第一次使用墨刀，使用熟练度欠缺
是否解决：通过度娘和b站搜索教材，并通过在软件上进行实操来达到设计时所需的熟练度
收获：多学会了一个设计工具的使用
困难描述：设计时头疼，不知道哪种颜色配出来的高级，不知道哪种颜色搭配出来眼镜会看上去舒服
是否解决：通过查看别人制作的网站作为参考即可完美解决这个问题
收获：万事开头难，但这个时候不妨看看别人做的，或者理解其他人制作的网站，优秀的人满天飞，要站在巨人的肩膀上前进，我们才能学的更快，比别人掌握更多实用的知识。他们的作品可以给我们带来很大的启发
困难描述：制作晋级图与每场比赛的比分的时候有大量重复的模块，重复工作较高
是否解决：通过墨刀的添加组件的方式进行。墨刀可以将每个设计的小模块变成自己的组件，从而使用组件化开发的形式进行，极大的减少了重复工作，提高了工作效率
收获：提高了我们对墨刀这款软件的使用熟练度
困难描述：使用墨刀时无法实现页面跳转
是否解决：通过查看b站的视频进行学习，并通过事件这个属性进行处理
收获：提高了我们对墨刀这款软件的使用熟练度
困难描述：结对编程如何协作？每个人的模块如何整合？
是否解决：之前有了解过墨刀这款软件，可以一个账号多人同时在线进行编辑，可以同时查看对方的编程进展，创建不同的独立模块进行同时制作
收获：用墨刀进行操作虽然可能可以较为容易的实现多线程的多人协作操作，但是有可能一个人的操作会影响到两个人的作品，这点是不太有利的，最好自己创建一个新的原型，然后在上面进行操作，进行整合的时候也不要动原先的模型，最好保留原先的模板，否则一改就无法挽回了

5. 心得与反思

5.1 反思

我发现我在设计原型时经常陷入了过度设计的陷阱。我会花费大量的时间来完善细节，而忽略了更重要的方面，例如用户体验和功能。我也发现我需要更多地与用户进行交流和测试，以确保原型的实用性和易用性。

5.2 心得体会

在设计网页原型时，我学到了一些重要的经验和技巧。首先，我发现在开始设计之前，需要明确网站的目标和用户群体。这有助于确保设计的原型符合用户需求，并且易于使用。其次，我学会了使用工具来辅助设计，例如墨刀等。这些工具不仅可以帮助我们更快速地创建优美的原型，而且可以进行交互和测试。最后，我意识到在设计过程中需要保持灵活性，随时准备调整和改进原型，以确保最终的设计能够满足用户需求。
总的来说，设计网页原型是一个需要不断学习和改进的过程。通过不断地实践和反思，我相信我可以不断提高我的设计能力，并且设计出更好的网页原型。