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

这个作业属于哪个课程	2302软件工程社区
这个作业要求在哪里	结对第一次作业–原型设计
结对学号	222100323，222100325
这个作业的目标	根据客户描述的现实困扰，以共同发布一份博客随笔的形式，设计一套方案，向客户推销。理解客户的需求、提供给客户可行的优化的使用建议，给出原型模型，并提供大概的解决方案预期规划。
其他参考文献	《构建之法》，Axure使用教程

0. 原型设计链接

原型地址

1.《构建之法》的启示

1.1 阅读总结

在本次作业开始前，我们对《构建之法》的第三、八章进行了阅读。

• 第三章主要是围绕软件工程师个人能力的衡量与发展以及职业发展展开的，旨在帮助软件工程师了解自己的现状和发展方向，从而更好地提升个人能力并规划职业发展。
• 第八章介绍了需求分析的重要性，包括获取和引导需求、分析和定义需求、验证需求以及管理需求的方法。通过用户调查等方式获取用户需求，利用竞争性需求分析框架NABCD模型来评估市场需求。确定功能的定位和优先级，以杀手功能、外围功能、必要需求和辅助需求进行分类。同时，采用分而治之的方法将大型任务分解为小任务，有助于团队高效完成项目。需求分析对于软件开发项目的成功至关重要，能够帮助团队全面理解用户需求并有效管理项目进度。

1.2 对于NABCD模型的详细说明

根据在第八章中阅读到的NABCD模型，我们利用这个模型对本次作业进行详细说明：
1. N（Need，需求）：
用户需要一个可以直观展示选手信息和比赛结果的平台。这个平台需要具备查看选手排名、每日赛程和详细赛况的功能。同时，用户也希望了解更多关于世界游泳锦标赛的背景信息。
2. A（Approach，做法）：如何解决问题？
为了实现这些需求，我们将设计一个交互友好的原型，通过图表等形式来直观显示信息。我们将参考现有的界面设计，并在此基础上进行改进和创新，以下是我们对于所考虑到的基本功能以及扩展功能的解决办法：

• 选手排名功能：

  • 设计一个页面或模块，显示Women 1m Springboard决赛的选手排名信息。
  • 包括Overall Rank（总排名）、Country（国家）、Athlete（运动员）、Age（年龄）、Points（积分）等字段。
  • 可以采用表格或列表的形式呈现，确保信息清晰明了。

• 每日赛程功能：

  • 创建每日赛程页面，展示当天比赛的类型、参与选手和比赛时间等信息。
  • 支持通过切换日期查看不同日期的赛程安排，确保用户可以方便地获取所需信息。
  • 可以提供类似日历视图或列表形式的界面，便于用户浏览。

• 了解更多（介绍世界游泳锦标赛背景）：

  • 设计专门页面，用图文结合的方式生动介绍世界游泳锦标赛的背景。
  • 可以包括历史沿革、重要赛事、参与国家、获奖记录等内容，以吸引用户对比赛的兴趣。
  • 确保页面内容丰富、图文结合，提升用户体验。

• 选手资料页面：

  • 创建详细的选手个人资料页面，包括运动员生涯、成绩记录、个人简介等信息。
  • 让用户更好地了解各位选手，增加用户对比赛的投入感和关注度。

• 赛事回顾和精彩瞬间：

  • 设计赛事回顾页面，展示历届比赛的经典瞬间、重要时刻等，让用户回顾比赛历史。
  • 增加平台吸引力和趣味性，提升用户体验。

• 数据统计和分析：

  • 提供赛事数据统计和分析功能，如国家成绩对比等，让用户更深入地了解比赛数据。
  • 增加专业性和参与感，吸引数据分析爱好者和专业人士。

3. B（Benefit，好处）：
通过这个平台，用户可以更方便地获取和查看游泳锦标赛的相关信息，提高用户体验。同时，丰富的图文介绍也将增加平台的吸引力，引起人们对世界游泳锦标赛的兴趣。
4. C（Competitors，竞争）：

• 竞争对手分析

1. 体育新闻网站：如Bleacher Report、Sports Illustrated等，这些网站提供全面的体育新闻，包括游泳比赛，但可能不专注于游泳世锦赛的深度信息。

2. 体育赛事直播平台：如ESPN、Fox Sports等，它们通常提供直播服务和赛事信息，但可能不具备专门的游泳世锦赛详细信息。

3. 社交媒体平台：Twitter、Facebook等社交媒体平台上的游泳爱好者群组，用户可以分享和讨论赛事信息。

4. 官方国际泳联（FINA）网站：提供官方的比赛信息和结果，是权威的信息源，但可能在用户体验方面不如第三方平台。

5. 其他结对小组

• 竞争策略

1. 用户体验优先：设计一个直观、易于导航的界面，确保用户能够快速找到他们需要的信息。

2. 内容丰富：除了比赛结果，还可以提供选手个人信息及最好记录等内容，增加用户的参与度。

• 竞争优势

1. 专业性：专注于游泳世锦赛，提供更深入的分析和专业的信息。

2. 交互设计：通过图表和可视化工具提供直观的数据展示，改善用户体验。

3. 指定化服务：为用户提供个性化的服务，如指定日赛程等。

5. D（Delivery，推广）：
本次项目的交付成果将包括一个交互友好的原型设计，以及相关的文档和说明。原型设计应满足用户的需求，具备查看选手排名、每日赛程的功能，并能吸引用户了解更多关于世界游泳锦标赛的背景信息。

2. 模型设计与结果展示说明

2.1 原型模型设计工具

Axure Rp

2.2 原型设计过程

• 需求分析：确定用户需求，包括展示选手信息、比赛排名等内容。
• 草图和构思：根据需求，设计（一个非常美观、好看的）首页、选手排名页面、每日赛程页面的布局和功能。
• 原型设计：使用专业设计工具Axure Rp创建页面原型，包括首页、选手排名页面、每日赛程页面等界面、交互和功能。
• 用户测试和反馈：邀请用户（这里就是我们的舍友 ）进行原型测试，并收集他们的反馈意见，以改进原型设计，提高用户体验！
• 迭代和优化：根据用户反馈，对原型进行迭代和优化，确保满足用户需求和设计要求。
• 最终确认：确定最终的原型设计，并准备进行开发实现。

2.3 设计结果展示说明

设计主要包括五个方面：首页、赛事日程、奖牌榜、精彩瞬间、赛事结果、了解更多五个方面来进行。

1.首页（HOME）：

首页突出了网站的主题以及简短介绍跳水运动的特点

2.赛事日程（SCHEDULE）:

赛事日程展示了每日的赛程，包括了比赛类型，比赛时间，比赛地点以及参赛结果，可以通过点击赛程来显示详细的赛程结果。

并且提供了下拉菜单来选择不同的日期并展示当天的赛程

3.奖牌榜（MADEL TABLE）

本页面统计了本次比赛的所有国家的得奖情况，按照金牌的数量来排序结果，并以表格的形式展示出来。

4.精彩瞬间（PERFERT MOMENT）

本页面选取了跳水比赛的精彩瞬间，以视频的方式展示在页面上，同时也提供了相关的新闻，可以通过点击新闻来阅读相关的详细信息

5.赛事结果（RESULTES）

详细的展示了每项赛事的结果，通过点击赛事展示相关的详细信息，并分为初赛、半决赛、决赛来展示赛事结果

同时可以点击“+”号来获得更加详细的得分情况

也可以通过点击选手的头像查看该选手的详细信息

6.了解更多（MORE）

采用了轮播图的方式来展示一些水上赛事项目，并详细介绍了跳水运动

3. 历程汇报

在设计整个原型的过程中，我们遇到了多个具体问题，包括页面布局困难、复杂交互设计挑战……通过针对每个问题的分析和解决方案的实施，我们成功地克服了这些挑战，并取得了宝贵的经验和教训。

3.1 困难描述以及对应的处理方法

• Axure Rp9 的初步使用
  Axure RP9 是一个功能强大的原型设计工具，因此我们在项目开始之前花了蛮多的时间来熟悉其界面、工具和功能。为了在短时间内快速掌握这个设计工具的基本操作，我们通过观看官方教程视频、还有b站上的一些教学课程来快速掌握。
• 页面布局
  在进行页面布局时，感到不够灵活，调整元素位置和大小有一定难度（感觉元件的分布特别乱！）。后来我们学习使用网格、对齐线和布局工具来帮助精确布局页面元素，同时锁定和分组元素来简化操作。
• 交互设计
  这是我们在整个界面设计过程中遇到的最核心的困难所在！！创建复杂的交互动作和状态切换对于我们而言一开始真的是一头雾水，完全不知道该如何下手，特别是涉及到条件触发和动画效果。以下是我们所总结的所遇到的问题以及对应的解决方法：

复杂交互设计：
在交互设计过程中我们发现涉及到了一些复杂的流程或状态转换，可能会导致设计过程十分复杂，就比如对于每一项运动具体赛事情况的展开。
【解决办法】：
我们将复杂的交互设计拆解成多个简单的组件和交互动作，在设计过程中逐步添加和调整。可以使用 Axure RP9 中的页面链接、条件判断、变量和交互动作等功能来管理复杂的交互流程。

交互效果不流畅：
在预览交互原型时，经常会出现卡顿或加载延迟等问题，这样有可能会影响最终的用户体验。
【解决办法】：
首先确保电脑性能足够，关闭其他占用系统资源较大的软件或进程。还可以优化交互设计，减少页面或部件的数量，尽量简化页面结构和元素数量，合理使用组件和母版，同时定期保存文件并备份工作内容以避免意外丢失！！还有一个就是尽量避免过多的动画效果和复杂的交互操作。

如何实现页面转换：
点击某个选项，然后跳转到其他页面的效果，这样可以为原型添加交互性，提升用户体验！那么如何实现呢，我们绞劲脑汁，经过网上资料搜查以及相关知识的再次学习，我们总结了以下解决步骤：
【解决办法】：
首先，在页面管理器中创建所需页面。然后，选中元素（如按钮、文本等），在交互式属性中设置链接。在“交互”面板中，选择“单击”事件，并点击“链接到页面”选项，选择目标页面进行链接。如果有些页面转换困难会需要过渡效果，可以在设置链接时选择相应过渡效果和持续时间。最后，通过预览按钮查看交互效果，并可以导出交互原型进行分享或测试。

如何实现下拉菜单：
点击某个按钮，在下面弹出内容。例如我们想要添加一个新的功能——点击加号，可以下拉出一个选手详细成绩的表格。我们的想法是利用一个动态面板巧妙地实现下拉菜单的交互效果。
【解决办法】：
可以使用动态面板来模拟下拉菜单的效果。首先，创建一个按钮作为下拉菜单的触发器，并在页面上放置一个动态面板作为菜单内容的容器。通过设置动态面板的不同状态来分别表示下拉菜单的展开和收起状态。在展开状态下，设计并添加菜单项、链接等内容以模拟完整的下拉菜单。然后，为按钮添加交互，当用户点击按钮时，触发动态面板切换到展开状态，显示下拉菜单内容；再次点击按钮时，将动态面板切换回收起状态，隐藏下拉菜单。最后，通过预览功能测试交互效果，确保下拉菜单的展开与收起行为符合预期。

• 团队协作问题：
  因为本次作业是由双人参与的交互设计，那么为了在短时间内实现好一点的成功，如何解决协作问题、设计冲突也是很重要的！
  使用 Axure RP9 的项目协作功能，将设计文件存储在共享的云端存储或版本控制工具中，确保两个人可以同时进行协作和更新。与团队成员进行有效的沟通和协调，及时解决冲突和合并变更。

• 软件问题：
  我们在设计的过程中发现，如果添加了一些较大的图片当作元件的背景，那么这个软件就很容易弹出一个警告窗口，然后整个软件就像失灵一样就无法动弹，这是因为大型图片可能会占用较多的系统资源，导致软件运行缓慢或崩溃。这个警告旨在提醒我们要注意图片的大小和分辨率，以避免对软件性能产生负面影响。
  为了避免这种情况，建议大家优化图片大小和分辨率，确保它们适合在原型中使用。万一一个不小心弹出警告，出现点哪里都没用时候，可以关闭运行任务，Axure Rp9会自动帮你备份6分钟前的设计界面。

3.3 基于以上问题解决的收获

• 学习资源的有效利用：通过观看官方教程视频和在线教学课程，快速掌握了工具的基本操作，节省了时间和精力。

• 灵活运用布局工具：利用网格、对齐线和布局工具，以及锁定和分组元素，实现了精确且简单的页面布局。

• 复杂交互设计问题简单化：将复杂的交互设计拆解成简单组件和交互动作，并利用Axure RP9的功能管理交互流程，提高了设计效率。

• 优化交互效果：通过简化页面结构、减少元素数量和动画效果，改善了交互的流畅性，提升了用户体验。

• 团队协作和解决冲突：利用Axure RP9的项目协作功能，加强团队成员之间的协作和沟通，及时解决冲突，提高了团队效率。

• 优化图片使用：通过优化图片大小和分辨率，避免了软件崩溃和缓慢运行的问题，保障了设计进程的顺利进行。

这些挑战与收获不仅促使我们更深入地了解和掌握了Axure RP9工具的功能和特性，还提高了团队协作能力和解决问题的能力。通过不断地克服困难和挑战，我们最终完成了设计任务，并获得了全新的设计思路和方法，为未来的项目奠定了坚实的基础！

4. 结对过程

4.1 结对伙伴的选择

本次作业的结对伙伴选择的是舍友，那么结对编程过程可能会更加亲近和融洽。在这样的情况下，两人可以更容易地安排共同的工作时间表，并且在工作之余也能更轻松地进行讨论和交流。此外，由于舍友间通常对彼此比较了解，可能更容易建立起高效的沟通方式和工作模式。也可以在舒适的环境中进行工作，而不必担心陌生人之间的尴尬或紧张❤。

4.1 结对任务分配

成员学号	姓名	主要任务
222100323	林锦晖	制定项目计划和时间表、分配资源和角色、学习原型设计工具、各项功能的实现、整体界面布局设计、博客细节调整
222100325	周庆鸿	需求理解、撰写需求文档与博客、练习使用工具以熟悉操作和界面、初步草稿设计规划、功能细节优化

4.2 任务分工时间记录表

我们使用甘特图来记录我们各个子任务的完成情况：

4.3 结对照片

4.4 结对感受与评价

222100323林锦晖：本次合作过程还是很愉快的，舍友之间沟通迅速且有效，常常能很快达成共识，节省了很多时间。并且周庆鸿同学办事靠谱，有想法，在他的调整下设计界面变得更加高级和精美，同时很有责任感，按时完成自己的工作，这使得我们直接的合作过程一直保持着轻松愉快的氛围。

222100325周庆鸿：我也觉得本次的结对过程非常愉快！在整个项目过程中，林锦晖同学时间规划很强，各个阶段要做什么非常清楚，很有助于这个项目在规定时间内更好的完成；而且林同学思维活跃，在设计功能的时候，思路清晰，设计工具上手能力强！对待事情认真负责上进，当日任务当日毕，是个好队友，希望下次继续合作！

5. 效能分析与PSP表格

5.1 效能分析

• 计划阶段：在计划阶段没有出现时间偏差，计划执行比较顺利。

• 需求理解阶段：实际时间超出了预估时间,因为在需求理解阶段遇到了一些挑战或者需要额外的时间来满足需求。

  • 需求分析：实际时间超过了预估时间,因为需求的复杂性导致了额外的时间投入。

• 学习原型设计工具阶段：实际时间超出了预估时间,因为学习原型设计工具需要更多的时间来熟悉和掌握。

  • 学习软件基础知识：实际时间超过了预估时间,因为软件基础知识的复杂性或者学习过程中遇到的困难。

• 界面原型设计阶段：实际时间超出了预估时间,因为界面原型设计需要更多的时间来完成，以及在设计过程中需要进行调整和优化。

  • 初步草稿设计：实际时间超过了预估时间，因为初步草稿设计过程中需要进行多次修改和改进。
  • 总体布局设计：实际时间超过了预估时间，因为总体布局设计的复杂性或者需要额外的时间来完成布局设计。

5.2 PSP表格

PSP	Personal Software Process Stages	预估时间（分钟）	实际时间（分钟）
Planning	计划	60	60
Requirements	需求理解	180	240
• Requirement Analysis	需求分析	60	120
• Requirements Documentation	需求文档撰写	120	120
Learn Prototype Tools	学习原型设计工具	360	420
• Learn Software Basics	学习软件基础知识	120	180
• Practice Tool Usage	练习使用工具	240	240
Pair Discussion	结对讨论	120	120
Interface Prototype Design	界面原型设计	600	720
• Initial Draft Design	初步草稿设计	240	300
• Overall Layout Design	总体布局设计	180	240
• Detail Optimization	细节优化	180	180
Total	总计	1320	1560