122
社区成员
发帖
与我相关
我的任务
分享结对第一次作业--原型设计
| 这个作业属于哪个课程 | 2302软件工程社区 |
|---|---|
| 这个作业要求在哪里 | 结对第一次作业--原型设计 |
| 结对学号 | 222100408冉洋、222100409任思泽 |
| 这个作业的目标 | 阅读构建之法；分析用户需求；结对完成原型设计；撰写博客 |
| 其他参考文献 | 《构建之法》、CSDN、墨刀教程 |
目录
- 1. 原型地址
- 2. 原型工具
- 3. NABCD模型
- 3.1 N（Need）
- 3.2 A（Approach）
- 3.3 B（Benefit）
- 3.4 C（Competitors）
- 3.5 D（Delivery）
- 4. 原型设计
- 5. 成果展示
- 5.1 导航栏
- 5.2 页脚
- 5.3 首页
- 5.4 选手排名
- 5.5 每日赛程
- 5.6 详细赛况
- 5.7 了解更多
- 6. 困难及其解决
- 困难一：原型设计工具的选取
- 困难二：动态组件的使用
- 困难三：页面高度变化的问题
- 7. PSP表格与效能分析
- 7.1 PSP表格
- 7.2 效能分析
- 8. 结对过程与队友评价
- 8.1 结对过程
- 8.2 结对感受
- 8.3 队友评价
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）：冉洋是一个出色的队友，他具有卓越的学习能力和适应能力。他能够快速掌握新技术和工具，并在项目中灵活运用。冉洋具有很强的分析和解决问题的能力，能够深入挖掘问题的本质并提出有效的解决方案。他在团队合作中展现了积极主动的态度，能够与队友充分沟通和协调。他的工作态度认真负责，能够按时完成任务并保证质量。与冉洋一起合作十分愉快。
...全文
请发表友善的回复…
发表回复
