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

222100125钱元城 2024-03-09 16:52:03

这个作业属于哪个课程	软件工程实践-2023学年-W班
这个作业要求在哪里	结对第一次作业--原型设计
结对学号	<222100125，222100123>
这个作业的目标	①学习NABCD模型并展示阅读成果 ②学习设计原型，满足客户需求
其他参考文献	①《构建之法》 ② Axure中文学习网

1.原型链接
2.NABCD模型
2.1 简要说明
2.2 N（Need，需求）
2.3 A（Approach，做法）
2.4 B（Benefit，好处）
2.5 C（Competitors，竞争）
2.6 D（Delivery，推广；Data，数据）
3.第三章心得体会
4.PSP表格与效能分析
4.1 PSP表格
4.2 绩效分析
5.原型设计
5.1 原型工具
5.2 原型设计过程
5.3 原型设计成果
6 结果汇报
6.1 原型展示
6.2 遇到的困难及解决办法
7 结对过程
7.1 结对讨论照片
7.2 结对讨论记录细节截图
7.3 结对感受
7.4 对双方的评价
7.5 贡献度

1.原型链接

原型链接

2.NABCD模型

2.1 简要说明

我们的产品为了解决用户希望有友好平台可以通过网页的形式把选手排名、每日赛况和详细赛况直观的展示出来。我们通过使用原型设计将这几个基本功能实现出来，同时我们利用好宣传方法让用户做到我们的产品。

2.2 N（Need，需求）

选手排名中需要展示Overall Rank,Country,Athlete,Age,Points。
每日赛程中需要展示：
      ①每一天的赛事，显示比赛类型（男子1m跳板等），参与选手和比赛时间
      ②通过切换日期查看不同赛程
      ③支持点击查看详细赛况
详细赛况需要展示比赛的成绩、本场比赛参赛选手，选手排名，比赛积分，落后积分。
了解更多，通过丰富的图文，介绍世界游泳锦标赛的举办背景,吸引人们对其的兴趣。

2.3 A（Approach，做法）

使用Axure RP 9工具设计出原型模型。
在主页中设计导航栏和其他地方用于基本功能和其他功能的跳转。
在主页中提供一个可选的小游戏模块，帮助用户了解比赛项目，提升用户的使用欲望。
每日赛况界面中查看当地时间和自己所在时区的比赛信息。
每日赛况中可以跳转到详细赛况页面。
详细赛况页面展示比赛详细信息和选手排名的信息。
运动员数据页面通过图表动态直观的展示运动员信息。
提供一个关于我们和赛事介绍的页面，介绍国际游泳联合会和世界游泳锦标赛的背景和历史。

2.4 B（Benefit，好处）

我们的产品具有清爽简介的界面，尽可能减少不必要的冗余信息的显示，只提供最基本的内容展示，具体的详细内容让用户根据自己的需求来选择性打开，这样可以提升用户对信息的专注度，减少无关信息也可以提升用户在使用时的愉悦感。
我们的产品可以动态展示信息，使得页面可以根据信息的内容或者用户的操作自动更新不同的显示效果和内容，用户在使用过程中可以比较友好的筛选自己想要浏览的信息。
我们的产品具有良好的交互逻辑和交互反馈，让用户能直观感受到要如何操作，操作后可能会发生什么，可以让用户快速上手，提高用户的使用欲望。

2.5 C（Competitors，竞争）

竞争对手：其他小组，向世界游泳联合会提供类似服务的同行。

己方优势：①配色简单且符合主题，给人一种视觉的舒适感，每个组件都有一定的反馈效果，可以给用户更好的使用感受，激发用户的使用欲望。
                  ②在主页中的导航栏和在主页下面的图片中均可跳转到每日赛况、详细赛况和了解更多，使得用户在使用中可以比较简单的找到自己想要的数据。
                  ③每日赛况和详细赛况中均使用了数据的显示和隐藏，方便用户查看数据，也让界面避免同时展示大量可能不需要的信息，让界面更简洁清爽，将浏览信息的选择权交到用户自己的手里。
                  ④对数据展示采用组件化的模式，具有较好的可拓展性和可复用性，可以根据需求快速做出相应，增加相应的模块。

我方劣势：①导航栏没有驻留功能，用户在进行界面跳转时都要滚动到最上方进行页面切换。
                  ②因为原型工具服务器在国外，并且使用图片数量较多，服务器响应慢，所以在体验的过程中可能会出现转换页面时卡顿的情况。

2.6 D（Delivery，推广；Data，数据）

做好演示视频或者是使用说明然后选择比较有影响力的应用市场或者是用户来帮助我们宣传。
通过调查问卷等方式调查设计不足的地方。
使用广告进行宣传。

3.第三章心得体会

成为一个资深的软件工程师对于我们来说还是需要经过很长的历练，在对于自己能力的判断中有一些可以参考的方法，我们借助这些方法对自己有一个初步的了解并且在阅读软件工程师思维误区和团队中分工后，对于在未来的工作和学习中会警示自己吸取经验教训。

4.PSP表格与效能分析

4.1 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	40	30
• Estimate	• 估计这个任务需要多少时间	40	30
Development	开发	560	830
• Analysis	• 需求理解	40	30
• Study	• 学习原型设计和原型设计工具	60	200
• Design Spec	• 生成设计文档	30	50
• Design Review	• 设计复审	30	40
• Design	• 具体设计	300	360
• Discuss	• 讨论	100	150
Reporting	报告	40	55
• Size Measurement	• 计算工作量	20	25
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	20	30
合计		640	915

4.2 绩效分析

        在分析PSP表格后，对于预估耗时和实际耗时相差多的部分进行了总结，得出在设计原型过程中导致这个情况出现的几个问题。
        原因一：对于原型的了解不够充分，在原先以为原型应该是个简单的模型之类的东西，并没有认识到原型的真正样貌，导致在进一步了解原型的过程中使得效率低下，进行相关原型设计工具的学习也没有清楚的认知。因此在学习原型设计和原型设计工具实际花费时间比预估多不少。
        原因二：在简单进行原型设计工具的学习之后，认为就是简单的组件套用。但在具体使用过程中，想实现对于下拉菜单的结果，找到了一个现成的模板，发现用起来并不是顺手，并且在使用过程中还出现了组件重复嵌套导致在写交互后并没有得到自己想要的结果。而且没有充分理解交互的绑定过程，因此在学具体设计时所花费的时间超出预估耗时过多。
        原因三：在预期中，我们认为这个作业只需要在前期设计过程中花比较多的时间进行讨论大概框架，对于细节的东西并没有很深的进行讨论，因此在之后的具体设计过程中同样也花费了不少时间在讨论细节方面的问题。

5.原型设计

5.1 原型工具

Axure RP 9

5.2 原型设计过程

我们根据需求，初步将原型划分为以下几个页面：

主页

对于主页，我们的基本设计思路是不在这里展示大篇幅的信息，将浏览信息分类放置于其他的页面中，只在主页上放置一些可以吸引用户兴趣、帮助用户了解比赛的内容，以及去往其他页面的路由跳转，尽可能减少主页上的信息，让主页干净清爽一些。在具体的设计上，我们首先设置了一个可选的有关游泳比赛的小游戏，让用户自由选择是否要游玩，我们希望可以通过这个小游戏，让用户对游泳（也可以根据不同需求换成其他的内容）这一比赛项目有更多的了解，激发用户的浏览兴趣。之后就是主要的几个板块的路由跳转，在这一部分我们设计了比较多的动态交互以及彩蛋，在保证基本功能的同时，让用户在使用时可以收获更多的惊喜，同时我们希望这些交互反馈可以给用户更好的使用感受。最后我们选择放置一个图片滚动展示区，展示比赛中的精彩瞬间，通过这些图片让用户进一步感受这项运动之美，激发用户对这项运动或赛事的兴趣与热情。
每日赛程

对于这一功能，因为在一个页面上有多种相同类型的数据需要展示，但又不需要同时展示，所以我们决定采用页面动态切换的方式，保证页面不切换，但是内容根据用户需要切换，这样可以避免页面多次切换，需要不断创建新页面的过程，让用户有更好的浏览和交互体验。同时，因为数据有多个子项目，将其全部同时展开肯定是不实际的，所以我们将其以折叠面板的形式展示，让用户根据需要来选择展示的信息，这样既可以减少不必要的冗余信息，减少数据传输量以此来优化响应速度，提高用户的检索效率，也可以让页面更简洁，给用户更好的浏览体验。然后根据用户需求，我们也在合适的地方设置了一个通往详细赛况页面的跳转路由。
详细赛况

根据用户需求，我们发现选手排名和详细赛况的功能存在包含的关系，所以我们整合了这两个功能，避免不必要的功能重复。这个功能我们采用了和每日赛程相似的解决方案，用户可以根据需要展开折叠面板，然后选择比赛阶段进行浏览，其他相似的部分这里就不再赘述。
运动员数据

在这个页面，我们使用了几个动态图表来展示与运动员有关的信息，比如分类运动员、比赛日程等等，让数据的展示更加直观且简洁。这些图表之后也可以根据用户需求的改变进行修改和增减。
运动项目介绍

在这个页面上我们对项目进行逐一介绍，让想对各个项目有进一步了解的用户可以自由选择浏览，在这里我们提供了项目的背景简介、硬件要求、比赛规则、相关图片等，帮助用户了解和学习。
关于我们

在这个页面上我们提供了关于世界游泳联合会的有关信息，供感兴趣的用户浏览阅读，帮助用户了解比赛主办方。
比赛介绍

在这个页面上我们提供了关于世界游泳锦标赛的有关信息，供感兴趣的用户浏览阅读，帮助用户了解比赛。

除此之外，再介绍一下页面的其他共同元素：

页眉

页眉主要是由导航栏以及一些和比赛有关的要素构成，部分导航栏采用了下拉菜单以减少导航栏项目数，左上角的logo是主页路由，点击后可返回主页，这些部分都设置了相应的交互反馈。
页脚

页脚主要展示了版权所有的信息，但只是临时的，内容可以根据用户的需求进一步修改。

5.3 原型设计成果

主页中主要设计了页面路由跳转和信息展示的功能。
利用交互的功能实现了在每日赛况中使用动态面板实现了在当地时间和自己所在时区之间的展示每一天的赛事和要求的信息。
在每日赛况中的选手信息是使用交互和动态面板结合起来把选手信息隐藏和显示出来，实现了动态展示。
在每日赛况中添加蓝色箭头使得可以跳转到详细赛况。
在详细赛况中同样使用了交互和动态面板结合实现了把比赛详细信息和选手排名的信息展示，同时在展示页面中可以选择比赛的类型(Preliminary,Semifinal,Final)。
运动员数据中使用动态图表展示运动员的部分数据。
运动项目介绍页面展示相应运动的历史、规则等内容。
关于我们页面展示国际游泳联合会的相关内容。
比赛介绍页面展示国际游泳锦标赛的相关内容。

6 结果汇报

6.1 原型展示

主页
页眉展示

logo交互

菜单栏交互

小游戏展示

路由索引展示

图片滚动板块展示

详细赛况
列表未展开

列表展开

切换比赛阶段
每日赛程
当前时间展示

本地时间展示

列表展开展示
运动员数据
图表展示

关于我们

比赛介绍

项目介绍

6.2 遇到的困难及解决办法

问题一：
在显示选手信息时结合交互和动态面板时设置鼠标单击的交互在预览界面中需要双击后才有效果，只点击一下是看不出任何效果的。
解决思路：在看到这个与预期结果不相同的结果出现时，发现得连续鼠标按下好几次才有反应，因此在第二次测试的时候特地数了一下需要点击的次数，发现需要点击2次才能将选手信息收起来，这就让我想到在设置交互的状态初始值中可能是将选手信息展示出来，而在界面中的最初状态选手的信息已经展示出来，因此在第二次改进时将选手信息直接设为隐藏，解决了单击时就可以有效果展示。

问题二：
在解决问题一后发现直接隐藏后在界面中选手信息的地方是不占位置的，如果需要将下面一个具有显示/隐藏选手信息交互的矩形接在上一个的下面时，得将选手信息覆盖，这样在几个矩形同时接在后面时选手信息不仅会被矩形覆盖还会被接下来的选手信息覆盖。
解决思路：把直接将选手信息隐藏改成在选手信息的矩形中加入载入时隐藏的交互，使得在软件中是将下一个有显示/隐藏选手信息交互的矩形接在该选手信息之后，而不是上一个矩形之后。

问题三：
在将选手/比赛信息展示出来的时候不能使下面具有显示/隐藏选手信息交互的矩形和选手信息自动下移。
解决思路：将所有元素都放在动态面板中，并且在点击的矩形中添加了元素下移的交互，这样就可以实现在显示选手信息后下面的信息全部自动下移和在隐藏选手信息后下面信息会自动上移。

问题四：
在预览界面的底下多出了许多意外的空白。
解决思路：这个问题结对的两个人都遇到了相同的情况，但是出现的原因有些许不同。
①在其中一种情况出现是在显示选手详细信息界面，在这个界面中出现这个问题时，最开始是将已经写好的页面再拆开后复制到新建的页面，一个一个尝试，后面发现是在组合表格时组合了很多没有用的矩形并且和具有交互功能的矩形一样，尺寸超出了最外层的动态面板并且动态面板没有将自适应内容的矩形框勾选，因此会产生这种情况。所以在最后将动态面板中自适应内容勾选后解决。
②第二种情况是出现在显示具体赛况的界面，在这个界面中，在勾选自适应内容矩形框后还会出现这种情况是因为在尝试将一个组合图片框放在页面最底部，但是放在了最外层的动态面板外面，这样会使得原本隐藏起来的空白区域显示出来，因此将这个组合图片框放在最外层的动态面板底下即可解决这个问题。
③补充，在解决完上述两个情况后，在某一次的调试中又出现了这个情况，后面发现是因为调整动态面板后，自适应内容的矩形框会恢复成无勾选状态，因此需要再次勾选。

收获：
在上述的几个问题中，出现的是有顺序的，在解决完一个问题后会再次出现另一个问题，因此在遇到问题时，既不能带着解决完这个问题后就皆大欢喜的幻想也不要带着问题会源源不断的出现，要相信办法总比困难多，解决问题的首要就是不能急躁，保持好心情，只要这样就已经将问题解决一半了。

7 结对过程

7.1 结对讨论照片

7.2 结对讨论记录细节截图

7.3 结对感受

222100123姚磊 ：在结对过程中，很明显的体会到团队合作的重要性，无论是在完成自己负责的部分还是遇到问题时都可以进行相互交流一起解决问题，效率明显提高且在遇到问题后可以有另一个人帮助你稳住心态。

222100125钱元城 ：结对编程需要两个人相互配合共同完成一项任务，在这个过程中我们学会了团队配合和分工协作，遇到困难可以互相帮忙解决，交流经验，也能同时完成几个不同的子任务，和独立开发比起来，这让开发效率提高不少，也让开发过程没有那么枯燥，事半功倍。

7.4 对双方的评价

222100123姚磊 对 222100125钱元城 的评价：在前五个学期，有相关的小组作业我们基本都有一起参与，包括数据库的实践设计和人工智能导论的算法复现。他是个喜欢在原有要求上进一步搞出自己想法的一个人，同时也在面对一个新的东西时会很快找到指导资料并且很快上手，而且对于他负责的部分很认真负责并且会积极热情地帮助负责其他部分的队友。和他合作完成工作很顺利也很开心。

222100125钱元城 对 222100123姚磊 的评价：还是那个老搭档，但是又有不一样的感受，姚磊是一个做事认真负责，行动力强的人，用一个词形容就是靠谱，当我们遇到困难时，他从不会轻易放弃，他会在一次次的试错中不断进步，直到找到解决方案，他也非常有时间观念，和他一起组队，我们永远不会见到ddl，狠狠给他加鸡腿，希望下次还能和他一起组队。