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

这个作业属于哪个课程	福州大学-202302软件工程实践
这个作业要求在哪里	结对第一次作业–原型设计
结对学号	222100229、222100236
这个作业的目标	利用原型设计工具设计多哈世锦赛的平台
其他参考文献	参考文献见于文末

一、原型地址

多哈世锦赛平台原型

二、原型设计思路及展示

2.1 原型设计工具

我们小组采用墨刀进行原型的设计

2.2 原型设计思路

在使用墨刀设计多哈世锦赛平台时，我们围绕核心用户需求展开，旨在创建一个既直观又信息丰富的界面。设计重点包括选手排名、每日赛程、详细赛况以及了解更多等功能模块。选手排名部分提供了一个清晰的排名表，可以查看不同阶段的选手成绩。每日赛程通过日历视图和赛事卡片，使用户能够轻松查看和筛选不同日期和项目的赛程。详细赛况部分深入展示了赛事结果和统计数据，采用图形化元素增强信息的可读性。此外，了解更多部分通过赛事背景及选手故事等，增加了平台的丰富性和用户的参与度。

2.3 成果展示

• 首页
  首页作为平台的门户，设计上追求直观和引导性。它展示了即将发生的重点赛事预告和实时新闻，以图文并茂的方式吸引用户深入探索。顶部导航栏清晰地列出了平台的主要功能模块，如选手排名、每日赛程等，确保用户可以快速找到感兴趣的信息。
  
• 每日赛程
  每日赛程界面通过一个清晰的日历视图展示了赛事的日程安排。用户可以选择不同的日期，查看那天的所有赛事信息。也可以通过赛事名称进行筛选。每行显示一个赛事，展示了赛事的基本信息还可以单击获取详细赛况。
  
  
• 选手排名
  选手排名界面提供了一个全面的排名表，详细列出了各项目的选手排名情况。用户可以通过简单的筛选操作，如按项目阶段筛选，快速找到特定的排名信息。根据作业要求只完成了Women 1m Springboard决赛的排名。
  
• 了解更多
  了解更多界面是一个内容丰富的专栏，提供了比赛历史及选手访谈等内容。这里旨在通过提供赛事以外的额外内容，增加用户的参与度和平台的吸引力。

三、困难的解决

Q1：墨刀软件的使用

• 困难描述：初次使用墨刀软件，对于其界面布局、功能模块不熟悉，导致在进行设计工作时效率低下。
• 解决尝试：通过观看墨刀官方教程视频、阅读用户手册，以及参加墨刀社区的交流讨论，快速学习软件的基本操作和高级功能。
• 有何收获：掌握了墨刀软件的核心功能，包括如何创建画板、导入元素、利用组件库等，大大提高了设计效率和质量。同时，了解了一些设计技巧和最佳实践，为后续的设计工作打下了坚实的基础。

Q2：组件状态的切换

• 困难描述：在设计交互原型时，遇到了如何实现组件状态切换的问题，比如按钮在不同状态（如激活、禁用）下的样式变化。
• 解决尝试：通过搜索相关的教程和文档，了解到可以使用墨刀的“动态面板”功能来实现组件状态的切换。尝试按照教程一步步创建动态面板，并设置不同的状态和触发条件。
• 有何收获：成功实现了组件状态的动态切换，增加了原型的交互性。同时，这个过程加深了对墨刀交互设计功能的理解，能够在后续的设计中更灵活地应用不同的交互效果。

Q3：组件的组合

• 困难描述： 设计复杂的页面布局时，需要将多个组件组合成复合元件，但不清楚如何有效管理和复用这些组合组件。
• 解决尝试：探索墨刀的组合功能，将重复使用的元件创建为自建组件，这样在不同的画板中可以快速调用和更新。同时，学习如何将多个组件组合并创建成一个可复用的组件。
• 有何收获：通过使用复合组件，大大提高了设计的效率和一致性。此外，也使得后期对设计的修改变得更加方便和快捷，只需修改自建组件，就可以同步更新所有使用该组件的地方。

Q4：交互逻辑的实现

• 困难描述： 在设计复杂的交互原型时，难以准确实现预想的交互逻辑，特别是一些条件跳转和数据传递的场景。
• 解决尝试：首先，通过细化交互流程，将复杂逻辑分解成较简单的多个步骤。然后，利用墨刀的“页面跳转”功能，根据用户行为设置不同的条件。在此过程中，多次测试原型，确保每个逻辑的正确性。
• 有何收获：通过实践学会了如何在墨刀中实现较为复杂的交互逻辑，使原型更加接近产品的实际表现。

Q5：响应式设计的应用

• 困难描述： 在进行移动应用和网页设计时，需要考虑到不同屏幕尺寸和设备的适配问题，但刚开始不知道如何在墨刀中实现响应式设计。
• 解决尝试：研究墨刀提供的文档和社区分享，了解到可以使用“自适应布局”功能来实现响应式设计。通过调整元素的大小和位置，确保设计在不同屏幕尺寸下都能保持良好的用户体验。
• 有何收获：掌握了在墨刀中实现响应式设计的方法，提升了设计的适应性和灵活性。

四、NABCD模型的详细说明

N（Need，需求）

• 用户希望通过直观的图表来快速了解运动员信息、正式赛每日结果等
• 需要轻松访问赛程、比赛结果，以及运动员的表现
• 网站内容丰富，包含运动员故事、比赛历史等衍生内容，以提升用户体验和参与感
• 提供简单明了的导航和快速的信息获取方式，避免复杂的界面和繁琐的操作
• 兼顾手机端和PC端，以便用户随时随地获取信息

A（Approach，做法）

• 使用合适的前后端框架进行具体的网站开发
• 开发响应式网站，使用HTML5技术，确保网站在不同的客户端下均能提供良好的用户体验
• 实时收集和更新游泳世锦赛的相关数据，包括比赛成绩、赛程安排和参赛运动员的信息，确保内容的准确性和及时性。

B（Benefit，好处）

• 用户无需注册登录即可快速访问赛事信息，降低用户的使用门槛
• 网站的响应式设计确保用户在不同设备上均能获得良好的浏览体验，增加网站的可访问性
• 简洁的界面和清晰的模块设计，使用户易于导航和使用。

C（Competitors，竞争）

优势：

• 学生团队开发，平台更加贴近年轻用户的喜好和习惯
• 专注于提供比赛相关的资讯，过滤无关信息
• 维护成本低，开发和迭代产品时更灵活，能够快速响应用户反馈

劣势：

• 相比官方网站，获取最新、最全面的赛事数据是非常困难的，尤其是与拥有直接数据来源的平台相比
• 与官方网站和大型体育新闻平台相比，学生团队开发的平台可能在财务资源、技术支持和品牌知名度上存在劣势
• 在面对大量用户访问时，平台可能会遇到服务器承载能力不足的问题，影响用户体验

D（Delivery，推广）

• 利用抖音、微博、B站等社交媒体平台，发布赛事预告、精彩瞬间和背后故事等吸引关注，增加用户粘性
• 鼓励用户反馈和参与，定期举办用户调查，收集意见进行改进。这不仅可以提升用户体验，还能通过用户的口碑营销推广平台
• 通过创建高质量的原创内容，如赛事分析、选手专访、技术教学视频等，增加平台的曝光率和用户参与度。利用SEO策略优化内容，提高搜索引擎排名

五、PSP表格和效能分析

5.1 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	25	35
• Estimate	• 估计这个任务需要多少时间	25	35
Development	开发	530	800
• Analysis	• 需求分析	30	40
• Leaning	• 学习原型设计工具	100	180
• Discussion	• 结对讨论	40	40
• Design Spec	• 生成设计文档	20	30
• Design	• 界面原型设计	300	450
• Test and Improvement	• 原型测试与改进	40	60
Reporting	报告	85	80
• Achievements Exhibition	• 原型成果展示	55	50
• Problem Analysis & Postmortem	• 问题的分析和事后总结	30	30
	合计	640	915

5.2 效能分析

分析PSP表格后发现差距较大的部分出现在学习原型设计工具以及界面原型设计两块

• 学习原型设计工具:初次接触原型设计工具，对软件操作不够熟悉，需要时间学习和掌握。初始学习过于深入，花费大量时间在非项目直接相关的功能上。应该要针对项目需求，学习软件的基础和必要操作。在实践过程中学习，面对特定问题时，寻找具体的解决方案，避免在项目初期花费过多时间学习不必要的高级功能。
• 界面原型设计: 首次使用墨刀进行原型设计，对于软件的操作流程和工具的使用不够熟悉。在设计过程中碰到了多个技术障碍和实现方面的问题。在开始设计前，进行更充分的准备，包括软件功能的预学习和设计方案的可行性评估。简化设计思路，优先考虑设计的可实现性，避免在不熟悉的工具上花费不必要的时间。

六、结对体验

1.结对过程

• 分工细节
  • 222100229：负责首页、运动员信息、了解更多等界面设计以及博客攥写
  • 222100236：负责赛程、赛果等界面的设计以及博客攥写
• 讨论过程
  
  
  

2.结对感受

• 222100229：这次的结对设计过程让我感受到了团队的力量。虽然过程中不乏分歧，但是沟通和协作可以让我们以高效率完成任务。
• 222100236：每个人的想法都是不一样的，两个人的想法碰撞可以使对方跳出原本的思维局限。当双方的冲突得到解决，达成共识后探寻新的解决方案的获得感也大大提高。

3.结对评价

• 222100229的评价：我非常认可我队友的能力，无论是在学习新技术还是沟通与实现，他总是非常可靠，遇到问题时，会和我积极讨论，给我不少灵感和思路，为我完成设计提供帮助，期待下次继续合作。

• 222100236的评价：我的队友在时间管理方面显示出了很强的能力，他能有效地分配任务，确保我们按时完成设计。此外，他非常注重团队之间的沟通和反馈，他的开放态度鼓励了我提出自己的想法，也使得设计过程中充满了合作和创新的氛围。

参考文献

• 墨刀使用–页面导航条功能实现交互
• 墨刀快速入门教程
• NBA官网(参考设计界面)
• 墨刀动态组件