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

这个作业属于哪个课程	2302软件工程社区
这个作业要求在哪里	结对第一次作业–原型设计
结对学号	222100408冉洋、222100409任思泽
这个作业的目标	阅读构建之法；分析用户需求；结对完成原型设计；撰写博客
其他参考文献	《构建之法》、CSDN、墨刀教程

1. 原型地址

点这里

2. 原型工具

经过在网上搜索相关信息得出，市面上最流行的原型工具是Axure和墨刀这两种，本次作业我们最终选择了墨刀作为原型工具，理由如下：

• 墨刀是一个国产的原型设计工具，更适合中国宝宝体质。
• 墨刀的操作更加简单，参考墨刀教程，适合新手上手。
• 墨刀素材广场整合了许多的素材，可以直接使用。

3. NABCD模型

3.1 N（Need）

用户希望能设计一个平台，通过图表等形式来直观显示世界游泳锦标赛选手信息、正式赛每日结果等。平台应具备以下功能：

选手排名

• 完成Women 1m Springboard决赛的排名，展示Overall Rank，Country，Athlete，Age，Points和Pts behind等信息

每日赛程

• 展示每一天的赛事，显示比赛类型(男子1m跳板，女子10m跳台等)，参与选手和比赛时间
• 支持通过切换日期查看不同的赛程，可参考此界面
• 支持点击查看详细赛况

详细赛况

• 展示比赛的成绩，包含本场比赛参赛选手，选手排名，比赛积分，落后积分等

了解更多

• 介绍更多赛事相关的信息

3.2 A（Approach）

• 使用墨刀进行原型设计和组件化设计，复用组件

• 采用图表形式展示数据，图文并茂

• 使用统一的 header 和 footer，统一设计风格

• 定义操作流程、页面跳转逻辑和交互元素，使用导航栏

3.3 B（Benefit）

• 使用Web网页技术栈，可以跨设备使用

• 参考了诸多大平台网页设计，页面简洁而又不失美感

• 清晰的模块设计和定位，逻辑明确，用户上手快

• 图文并茂，数据直观

3.4 C（Competitors）

竞争对手：

• 世界游泳锦标赛官方网站：丰富的组件设计，及时的赛事信息
• 其他结对小组

我方优势：

• 页面简洁美观无广告，信息分区明确

• 无需注册即可查看，用户体验更好

• 模块设计和定位清晰，数据显示多样化

• 组件复用率高，维护成本较低

我方劣势：

• 能力有限，交互动画制作不够丰富

• 没有提供用户反馈的功能，不利于用户体验的提升

• 无法提供实时信息

3.5 D（Delivery）

• 通过B站、微博、微信公众号等社交媒体进行推广
• 通过SEO优化，提高网站在搜索引擎中的排名
• 通过广告投放，提高网站的知名度
• 通过和高校合作，学生参加相关活动可以加学分

4. 原型设计

如下图所示：

5. 成果展示

该作品主要基于世界游泳锦标赛官网进行设计。

5.1 导航栏

采用统一导航栏样式

5.2 页脚

统一页脚

5.3 首页

上部分使用轮播图组件，循环自动播放一些比赛相关图片
  

下半部分是一些关于赛事的描述和图片

5.4 选手排名

选手排名样式模仿官网实现

5.5 每日赛程

每日赛程使用一个日期选择组件，可以根据日期过滤当日的比赛
  

5.6 详细赛况

可以点击比赛查看比赛结果

点击选手右边的 + 可以展开更详细的记录

5.7 了解更多

了解更多展示一些比赛相关的新闻和一些宣传视频

6. 困难及其解决

困难一：原型设计工具的选取

• 困难描述：作业初期，我们两人因为都是第一次尝试原型设计，所以在选取原型设计工具上陷入了困境。
• 解决尝试：通过信息收集，我们在形形色色的原型设计工具中筛选出Axure和墨刀这两款主流工具。后经过多方对比，我们发现墨刀可以兼容Axure的文件，而Axure不能兼容墨刀的文件，墨刀在兼容性上更具优势，且网络上墨刀的教程更丰富，利于像我们这样的小白快速上手。
• 是否解决：是
• 有何收获：通过解决原型设计工具选取的困难，我们学会了信息收集与对比，团队合作与共识，以及快速学习和适应能力。这些收获不仅帮助我们解决了当前的问题，还培养了我们的综合能力和自信心，为未来面对各种挑战和困难提供了宝贵的经验和技能。

困难二：动态组件的使用

• 困难描述：由于刚开始接触墨刀，在原型的设计过程中，不熟悉动态组件等的使用，常遇到日期选择器跳转失效等问题。
• 解决尝试：学习墨刀高级教程，边实践边总结，在付出了足够多的学习时间后，最终得出了通过多状态切换来使用动态组件的经验。
• 是否解决：是
• 有何收获：学习与实践相结合，作为计算机专业的学生，常查阅文档教程，通过学习文档教程来理解知识与解决问题，并通过实际操作和不断尝试来加深理解最终达到熟练。这种学习与实践相结合的方法能使我们在今后的生涯中更好地成长。

困难三：页面高度变化的问题

• 困难描述：在实现详细赛况页面的时候，发现当动态组件展开后会占据更多的页面内容，而墨刀不具备动态改变页面高度的功能，导致页面留了很大一块空白。
• 解决尝试：经过网上搜索和与其他同学进行交流，发现一个一个画布可以放置多个页面，每个页面对应不同组件状态，能够让页面高度适应组件高度。
• 是否解决：是
• 有何收获：要具备信息获取的能力，既包括从互联网上获取，也包括从与他人的交流中获取，这是程序员的必修课。

7. PSP表格与效能分析

7.1 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	20	20
• Estimate	• 估计这个任务需要多少时间	20	20
Development	开发	670	830
• Analysis	• 需求分析	30	40
• Learning	• 学习原型设计工具	120	180
• Discussion	• 结对讨论	60	60
• Design Spec	• 生成设计文档	40	30
• Design	• 界面原型设计	360	420
• Test & Improvement	• 原型测试与改进	60	100
Reporting	报告	80	80
• Achievements Exhibition	• 原型成果展示	20	20
• Problem Analysis & Postmortem	• 问题分析和事后总结	60	60
	合计	770	930

7.2 效能分析

在此次原型设计完成过后，通过比对PSP表格中预估耗时和实际耗时，我们发现主要的差距是学习原型设计工具、界面原型设计、原型测试与改进三个方面。

学习原型设计工具

• **原因：**缺乏及时反馈和评估机制。在学习原型设计工具的过程中，如果没有及时的反馈和评估机制，团队成员可能无法准确地了解自己的学习进展和存在的问题，从而导致效率低下和错误的学习方向。
• 思考： 建立反馈和评估机制。为了提高学习效率，可以建立一个及时的反馈和评估机制。这可以包括定期的学习评估或者考核，通过实际操作和问题解答来检验团队成员的学习成果。同时，鼓励团队成员互相之间进行反馈和交流，提供支持和辅导，及时纠正错误和改进学习方法。

界面原型设计

• 原因： 缺乏对设计目标和核心功能的明确理解。在界面原型设计中，如果团队成员缺乏对设计目标和核心功能的明确理解，可能会导致设计过程中出现模糊和不一致的情况，影响设计的一致性和用户体验。
• 思考： 明确设计目标和核心功能。在开始界面原型设计之前，团队成员应该与项目相关人员充分沟通，明确设计的目标和核心功能。这包括了解产品的定位、用户需求和关键功能，以及项目的时间和资源限制。只有明确了设计目标和核心功能，团队成员才能更好地聚焦设计工作，避免不必要的功能和界面冗余。

原型测试与改进

• 原因： 缺乏有效的项目管理和跟踪机制。在界面原型设计过程中，如果没有建立有效的项目管理和跟踪机制，团队成员可能会在设计过程中遇到困难或有收获时没有及时记录，导致后续总结时遗漏细节或效率低下。
• 思考： 建立有效的项目管理和跟踪机制，包括使用任务管理工具、定期召开会议和使用协作工具和备忘录，以及进行阶段性总结和回顾，团队成员可以更好地记录和回顾设计过程中的收获和见解，提高总结的质量和工作效率。

8. 结对过程与队友评价

8.1 结对过程

两人此次结对作业全程都在宿舍里面对面协作完成，几乎无聊天记录，这里呈现原型设计的文件传输图和宿舍交流图。

文件传输图：

宿舍交流图：

8.2 结对感受

• 冉洋（222100408）：结对开发更考验双方的默契和凝聚力。小型项目开发能更好地展现两人之间的默契程度，特别是在原型设计中，由于双方审美不同，需要找到共同点进行设计。结对作业的优势在于可以更高效地分工合作，我们在这方面做得不错，并成功利用团队协作工具完成了任务。
• 任思泽（222100409）：在本次结对作业中，由于我们的空闲时间刚好一致，所以在进度推进过程中，我们相处得非常愉快，总有一种事半功倍的感觉。团队协作的好处在于思维的碰撞和解决问题的方式不同，可以相互帮助，提高设计效率。通过及时、细致的沟通，我们制定了合理的时间规划和统一的设计标准，使作业完成得井井有条。

8.3 队友评价

• 冉洋（222100408）：任思泽是一个非常有才华的队友，他具有出色的技术能力和深厚的专业知识。他在项目中展现了高效的工作风格，能够迅速解决问题并提供创新的解决方案。他对任务的理解和执行非常准确，能够按时高质量地完成工作。此外，任思泽具有良好的沟通能力，能够清晰地表达自己的想法，并与团队成员积极合作。与任思泽合作是一种愉快的经验，期待未来继续与他合作。

• 任思泽（222100409）：冉洋是一个出色的队友，他具有卓越的学习能力和适应能力。他能够快速掌握新技术和工具，并在项目中灵活运用。冉洋具有很强的分析和解决问题的能力，能够深入挖掘问题的本质并提出有效的解决方案。他在团队合作中展现了积极主动的态度，能够与队友充分沟通和协调。他的工作态度认真负责，能够按时完成任务并保证质量。与冉洋一起合作十分愉快。