软件工程实践结对作业第一次——原型设计

[222200112李嘉琪]

这个作业属于哪个课程	2401_CS_SE_FZU
这个作业要求在哪里	软件工程实践结对作业第一次——原型设计
结对学号	222200112，222200109
这个作业的目标	学会使用axure学会原型设计
其他参考文献	《构建之法》

@

目录

• 1.原型地址
• 2.NABCD模型
• Need
• Approach
• Benefit
• Competitors
• Delivery
• 3.原型设计
• 3.1 原型开发工具
• 3.2 首页
• 3.3 奖牌榜
• 3.4 每日赛程
• 3.5详细赛况
• 3.6 对阵表
• 4.PSP表格
• 5.遇到的问题
• 5.1不知道怎么设计交互效果
• 5.2不知道如何进行团队协作
• 5.3不知道如何利用动态面板展示信息
• 5.4用户需求中所需要展示的数据庞大复杂，应该如何处理？
• 5.5不知道如何进行需求分析
• 5.6收获和心得
• 6结对过程
• 6.1结对图片
• 6.2感受和评价
• 6.3贡献度情况

1.原型地址

原型地址

2.NABCD模型

NABCD 模型是一种创新思维和项目管理的工具，广泛应用于产品设计、创业和业务开发的过程中。它通过五个关键要素——Need（需求）、Approach（方法）、Benefit（好处）、Competitors（竞争）、Delivery（交付），帮助企业或个人系统化地分析和规划产品或项目。

Need

基于2024年巴黎奥运会的背景，此次作业的需求集中在构建一个用户友好的平台，帮助用户更直观地了解赛事信息和进展。具体需求如下：

1. 奖牌榜排名：展示各参赛国家的奖牌数量排名，使用户可以快速了解各国的奖牌获奖情况。

2. 每日赛程：显示每一天的比赛类型、时间、参赛国家、比分等信息，支持日期切换，帮助用户方便地查看各日赛程。

3. 详细赛况（以足球比赛为例）：提供每场比赛的详细信息，包括参赛国家、参赛名单和比赛详情，使用户能够深入了解比赛过程。

4. 对阵表（足球比赛）：通过图表形式展示比赛晋级过程，提升比赛进展的可视化效果，并在鼠标移动时提供高亮或边框提示。

5. 引导用户了解更多奥运背景：通过图文结合的方式介绍巴黎奥运会的举办背景，增强用户体验和平台吸引力。

   Approach

6. 原型实现：使用Axure RP9团队版来设计原型。

7. 功能模块：为了方便用户能够快速进行信息的筛选和查询，将赛事信息分为几个模块：首页、奖牌榜、每日赛程、详细赛况和对阵图。

8. 交互设计：通过定义操作流程、页面跳转逻辑和交互元素，确保用户能够顺畅地在平台中导航和操作。

   Benefit

9. 数据的直观展示：通过奖牌榜、赛程和比赛结果的图表和交互设计，用户可以快速、清晰地了解最新的奥运会进展，而不需要浏览大量的文本信息。这提高了数据的可读性和用户的理解效率。

10. 用户体验友好：平台的界面设计注重交互性，例如鼠标悬停高亮比赛对阵等功能，增强了用户的使用体验，特别是对于复杂的赛程和比赛信息，可以更轻松地找到关注的内容。

11. 丰富的赛事信息：详细的赛况信息（例如足球比赛的出赛名单、比赛细节）满足了用户对比赛深入了解的需求，让体育迷可以更好地跟踪自己感兴趣的比赛。

12. 提高信息获取效率：用户可以通过日期切换快速查看不同天的赛程信息，并点击查看详细赛况，极大地减少了手动查找的时间成本。

    Competitors

13. 竞争对手：

    • 大型体育媒体网站（如ESPN、BBC体育、Yahoo体育等）
    • 专注于奥运会的官方应用和网站（如IOC官网、奥运会官方App）
    • 其他独立赛事跟踪工具和应用（如SofaScore、FlashScore等）

14. 本平台的差异化优势：

    • 专注于奥运会的可视化展示：相比于一般体育平台的新闻报道，本平台通过直观的图表、对阵表等功能，将奥运会的赛程、奖牌榜和比赛结果以视觉化的方式呈现，使用户体验更加友好。
    • 定制化功能：本平台支持用户通过日期切换、点击查看详细赛况等交互功能，满足用户对特定比赛的深入了解需求。这种针对性的设计更能抓住对某项赛事有特定需求的用户。
    • 背景信息和丰富内容：除了赛程、成绩等信息，本平台通过介绍奥运会背景等方式，增强了内容的多样性和文化吸引力，能让用户在了解赛事的同时对巴黎奥运会有更深刻的理解。
    • 简化的用户界面：相较于一些信息繁杂的平台，本平台通过聚焦奥运会比赛，提供更加简洁和专注的界面，避免了信息过载，使用户更容易找到所需内容。

15. 差异化竞争策略：

    • 专注的用户群体：主攻对奥运会感兴趣的用户，尤其是那些希望快速获取比赛结果和背景信息的人群，而非广泛覆盖各类体育赛事。
    • 增强互动性：通过高亮提示、鼠标悬停展示更多信息等功能，增加用户的互动参与感，提高平台粘性。

      Delivery

16. 社交媒体推广：通过奥运会相关的社交媒体平台（如微博、豆瓣、小红书）进行宣传，展示平台的亮点功能，如奖牌榜、每日赛程等，并吸引体育迷下载或访问平台。

17. 用户反馈收集：平台上线后，通过定期收集用户反馈，了解用户在使用中的痛点和期望的改进点，持续进行平台优化。

3.原型设计

3.1 原型开发工具

Axure PR 9

3.2 首页

在此设置了“首页”，“奖牌榜”，“每日赛程”，“详细赛况”，“对阵表”五个区域：
1设置交互状态：单击跳转对应界面。
2.利用动态面版，在首页以点击滑动的形式展示相关图片。

3.3 奖牌榜

进入奖牌榜界面，我们可以查看到参加奥运会的所有国家或地区的排名，以及获得金牌、银牌和铜牌的数目，以及总数。

通过滚动页面可以看到更多国家详情。

3.4 每日赛程

进入每日赛程页面，鼠标单击“每日赛程”的按钮，会弹出日历。

鼠标移动到具体日期会出现文字阴影，单击日期数字会跳转到下方具体日期。

日期栏设计为下拉组件的形式，鼠标单击日期栏即可出现当日赛程，展示比赛类型、时间、参赛国家、比分等信息。
再次单击即可收回。

单击男足1/4决赛、男足1/2决赛、铜牌赛和金牌赛的信息框，可跳转查看详细赛况。

3.5详细赛况

在详细赛况的界面呈现了1/4决赛，1/2决赛，决赛的区块，单击跳转相应页面。
以1/2决赛为例：当鼠标移入国家，单击可以出现该队的出赛名单（隐藏形式），右侧是大比分数据，可以直观的了解赛况。

3.6 对阵表

分为女足，男足两个类别，涉及1/4决赛，1/2决赛，决赛和铜牌赛，当鼠标移入对应国家会出现阴影效果。

4.PSP表格

PSP Persona	Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	20	30
• Estimate	• 估计这个任务需要多少时间	900	840
Development	开发	400	320
• Analysis	• 需求分析（包括学习新技术）	60	100
• Design Spec	• 生成设计文档	60	60
• Design Review	• 设计复审	60	80
• Design	• 具体设计	60	50
• Test	• 测试（自我测试，提交修改）	60	30
Reporting	报告	30	30
• Test Repor	• 测试报告	30	30
• Size Measurement	• 计算工作量	60	60
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	60	50
	合计	900	840

5.遇到的问题

5.1不知道怎么设计交互效果

解决方案：
在学习网站中了解了Axure的使用方法，包括如何添加热区，动态面板，单击跳转等操作。
第一次设计完成之后，发现缺少了当前所处界面显示，在各个界面对应的区块下设计不同颜色以提示用户当前所处界面。第二次设计完成之后，发现当处于详细赛况界面时，鼠标移入对阵表没有显示女足男足的选择框，重新添加了交互效果，在该界面的对阵表设计隐藏显示效果。

5.2不知道如何进行团队协作

解决方案：
Axure PR 9具有团队协作的功能，任务发起者可以将原型发布到Axure Cloud中并邀请团队成员查看，评论，编辑，将整个任务分解，每个人负责不同区块的设计和测试。在开始设计之前，需要一人对设计流程进行分析，包括实现哪些界面，展示哪些数据等问题，然后各自认领任务进行设计，设计结束后共同浏览结果，并再次修改。

5.3不知道如何利用动态面板展示信息

解决方案：
查询CSDN中有关动态面板使用的知识，了解到如何利用动态面板实现图片滚动浏览：设置一个动态面板，在该区域下可以设计多个状态，将对应图片插入state 1，2，3......，并且在图片两侧设计热键，添加交互效果：单击进入下一项（循环）。即可实现此功能。

5.4用户需求中所需要展示的数据庞大复杂，应该如何处理？

解决方案：由于平台需要展示大量数据（如奖牌榜、每日赛程、详细赛况等），如果信息架构设计不当，容易导致信息的展示混乱，用户难以快速找到所需信息。因此使用可视化设计工具，将复杂数据以图表或模块化布局呈现，简化用户操作。例如：

• 奖牌榜：采用列表的形式，分别展现排名、国家、金银铜牌的数量，使用户可以清晰地了解具体信息。
• 每日赛程：以模块化布局呈现，每日比赛列表位于日期下方，单击日期可下滑展现每场比赛的时间、参赛国家、比分等信息。
• 详细赛况：以模块化布局呈现，点击详细赛况可清晰看到1/4决赛、半决赛和决赛的比赛类型选择，出赛名单隐藏在参赛国家之中，点击国家名即出现，简化了用户界面，提高用户浏览体验。

  5.5不知道如何进行需求分析

  解决方案：一开始对作业里所展示的用户需求如何实现很茫然，后来上B站学习了一些原型设计的视频，制作了思维导图简化了设计流程，对应该有多少个界面以及每个界面需要体现说明的信息以及如何清晰直观地展现数据进行分析，最后整理出具体思路。

  5.6收获和心得

  通过此次原型设计和开发项目，我们深刻体会到用户体验和功能实现之间的平衡是设计的核心挑战。尤其是在奥运会这样的大型赛事项目中，如何将海量的复杂信息通过简洁、直观的方式呈现给用户，不仅需要细致的需求分析，还需要在设计过程中不断优化和调整。与此同时，跨设备的兼容性和高效的数据处理也是影响平台成败的重要因素。整个过程中，我们学会了如何从用户角度出发，结合技术实现，打造出既美观又实用的产品体验。

  6结对过程

  6.1结对图片

  

  
  

  

6.2感受和评价

• 222200112李嘉琪：在本次作业中，我掌握了原型设计的基本流程和Axure的使用方法，学会了如何思考交互逻辑以及实现交互效果，在完成任务的过程中，我学会了和队友进行沟通和商讨，使原型更加完善。
  对队友评价：芷洋同学在设计过程中一直和我保持良好的沟通，她负责任务划分，非常细心，并且很有耐心，自己负责的页面完成度也非常好，对我遇到的问题提供了解决方案，合作非常愉快！！！
• 222200109庄芷洋：在构建奥运会赛事平台的过程中，我意识到每个细节设计都需要从用户角度出发，同时考虑到信息传递的清晰性和交互体验的流畅性。整个过程让我对如何平衡用户体验与技术实现有了更深刻的体会，也让我在设计思维和开发协作方面有了更多的收获。
  对队友评价：和嘉琪同学在原型设计过程中，从需求分析到产品实现，她都提出了非常好的想法和见解，遇到问题时也能积极地与我进行沟通。她负责了比较复杂的模块，并且实现了美观、交互性强的界面，合作愉快！

  6.3贡献度情况

  222200112李嘉琪（50%）：完成了“首页”，“对阵表”，“详细赛况”界面的设计，以及对原型的修改和完善，完成文档。
  222200109庄芷洋（50%）：完成了“每日赛程”，“奖牌榜”界面的设计，以及对原型的修改和完善，完成文档。