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

222100326郑锦程 2024-03-10 15:56:23

这个作业属于哪个课程	福州大学-202302软件工程实践
这个作业要求在哪里	结对第一次作业--原型设计
结对学号	222100326郑锦程、222100324罗斌
这个作业的目标	阅读构建之法，分析用户需求，结对完成原型设计
其他参考文献	1.Axure教程 2.《构建之法》

原型地址
NABCD模型
需求 (Need):
做法 (Approach):
好处 (Benefit):
竞争 (Competitors):
推广 (Delivery):
原型设计
设计工具
设计过程
思路与示意图
设计成果
页头与页尾
比赛日程
比赛结果
奖牌排行
精彩时刻
发表评论
报名观赛
了解更多
困难及解决方法
困难1：原型设计工具的选择
困难2：整体风格的选择
困难3：客户的需求分析
困难4：页面切换导航栏的选中状态如何变更
困难5：软件本身提供的下拉菜单的样式无法修改，导致整体风格不统一
结对详情
结对过程
感受
评价
效能分析
PSP表格
分析

原型地址

NABCD模型

需求 (Need):

上次我们的输出结果只通过简单文字显示，不够直观，用户友好性差。为解决这一问题，我们计划设计一个平台，利用图表等形式直观展示选手信息和正式赛每日结果。平台需包含选手排名、每日赛程和详细赛况等功能。

选手排名：
- 展示Women 1m Springboard决赛的排名，包括Overall Rank、Country、Athlete、Age、Points 和 Pts behind。
每日赛程：
- 显示每天的赛事，包括比赛类型、参与选手和比赛时间。
- 支持通过日期切换查看不同赛程。
- 提供点击查看详细赛况的功能。
详细赛况：
- 展示比赛成绩，包含参赛选手、选手排名、比赛积分、落后积分等。
- 提供更详细、细致的比赛信息，形成单独的详细赛况页面。
用户友好性改进：
- 结合博客内容，强调平台用户友好性的改进，如更直观的图表、清晰的指导界面等。

做法 (Approach):

为满足需求，我们采取以下做法：

设计工具选择：
- 采用Axure9进行原型
平台功能设计：
- 设计集选手排名、每日赛程和详细赛况基础功能于一体的平台，采用图表形式展示数据，提高用户理解和分析的便利性。
- 补充上了自己设计的一些功能，例如：奖牌排行，精彩时刻，发表评论，报名观赛和了解更多，使得用户的体验更为丰富
用户界面设计：
- 结合博客中的建议，确保清晰的界面布局、统一的设计风格、统一的色彩和字体，以及易于识别的图标。
交互设计：
- 定义操作流程、页面跳转逻辑和交互元素，结合博客中的用户建议，确保用户在平台中能够顺畅导航和操作。
用户友好性改进：
- 强调在用户友好性上的改进，如引导性的悬停变化、更简化的操作流程等。

好处 (Benefit):

采用上述做法带来以下好处：

信息全面：
- 平台提供选手排名、每日赛程和详细赛况等全面信息，满足用户不同需求。
直观展示：
- 通过图表等形式直观展示数据，结合博客中的建议，帮助用户快速理解和分析比赛情况。
良好体验：
- 强调在用户友好性上的改进，确保界面美观、操作便捷，提供良好的用户体验。
功能丰富:
- 使得用户有更多的选择空间和更加丰富的体验，增加用户的留存时间和满意度。

竞争 (Competitors):

识别竞争对手：
- 官方网站
- 其他小组设计
分析竞争对手的优劣势：
- 强调我们的差异化优势，如用户友好性、更直观的图表以及更多的独有功能等。
- 官方网站
  - 劣势：网站太过杂乱，大多是英文，同时对于中国大陆网络访问有些不便。
  - 优势：信息全，设计经过多年沉淀。
- 我们小组
  - 劣势：信息不全。
  - 优势：功能更加新颖，对于中国本土化做的比较好。
制定竞争策略：
- 侧重差异化竞争，加强在用户体验上的优势，保持持续创新功能。

推广 (Delivery):

原型迭代与优化：
- 根据用户反馈和作业博客中的建议，迭代优化原型，特别关注用户友好性的改进。
整合各种资源：
- 在福州大学学校游泳队和游泳馆进行宣传，发布问卷调查以更好了解用户需求。
拓展用户群体：
- 利用抖音、B站、微博等平台，结合博客中的社交媒体推广建议，进一步扩展用户。

原型设计

设计工具

本团队使用 Axure 进行原型设计
Axure提供了丰富的基本组件，可以快速搭建原型界面，节省了时间和精力，支持团队协作，可以多人同时编辑同一个原型文件。

设计过程

思路与示意图

在原型设计的过程中，我们始终坚持采用自主完成功能的原则，而不是依赖网上现成的组件库，主要出于以下几点原因：

新手学习与理解： 我们认为，特别对于新手而言，更应该通过亲自完成基础组件的搭建，以深入了解原型设计的逻辑。通过亲身经历每个组件的创建过程，能够更有效地加深对原型设计的整体理解，使团队成员在学习过程中积累更丰富的经验。
项目需求并不困难： 当前项目的功能需求并不十分复杂，因此我们认为不必为了节省时间而采用现成的组件库。通过自主完成功能，我们能够更好地掌握项目的特定需求，确保每个组件都能够完全满足项目要求，避免引入不必要的复杂性和冗余代码。
符合个性化设计风格： 我们追求的是一种独特的设计风格，通过自主完成组件，能够更灵活地塑造符合项目需求的个性化设计。使用自行完成的组件，我们更容易调整样式、结构和交互，确保最终的原型展现出符合团队设计风格的独特特色，与项目整体风格更为协调一致。

总的来说，我们坚守自主完成功能的原则，不仅是为了促使团队成员更深入地理解原型设计，还是为了更好地满足当前项目需求并确保设计风格的独特性。这一决策旨在培养团队成员的综合能力，使其能够更自如地应对各类设计挑战。
同时，我们结合项目主题跳水，以及参考了Apple坚持的圆润设计理念，选择了淡蓝色为主色调，采用圆角矩形作为主要形状基底，形成了项目的整体设计风格。
经过小组的多次讨论，最后将原型设计分为以下几个功能，同时给出具体的实现方法：

页头与页尾：具有导航栏功能和返回顶部功能

用Axure的母版功能，将页头和页尾变成母版，这样更改的时候所有页面都会一起更改，十分方便，导航栏利用了全局变量来判断当前页面
比赛日程：显示比赛的日程表，并且可以选择日期

利用动态面板实现下拉菜单，在下拉菜单的交互中用动态面板实现项目的排列和切换
比赛结果：显示比赛的具体结果，可以查看每个项目初赛和预赛的成绩，以及选手的具体单次跳水得分

同样采用动态面板来实现，同时利用了隐藏组件显示时推拉其他组件的特性
奖牌排行：显示比赛国家所获得的奖牌排行

简单地利用矩形来进行构图与展示
精彩时刻：显示视频和图片

运用了内联框架来实现视频功能和动态面板来实现轮播图
发表评论：具有留言和查看留言功能

这个实现较为复杂，利用了中继器加上全局变量再加上基础按钮和动态面板进行组合
报名观赛：具有填表报名观赛的功能

同样利用了中继器和动态面板
了解更多：显示更多比赛相关的图片和文字信息

利用文字标签来表现文字，矩形来设计排版和颜色
示意图如下：

设计成果

页头与页尾

原型是以一名游泳运动员跳起在空中即将入水的图片为背景，充分彰显了游泳的主题，其次添加了World Aquatics的logo，彰显甲方世界游泳锦标赛---由国际泳联（FINA）主办的一项重要国际体育赛事，旨在展示全球顶尖游泳运动员的实力和技艺。
整体色调以蓝色调为主，蓝色与水相关联，能够与游泳运动的本质产生视觉上的关联。
原型以"66th International Divers’ Day Rostock"居中，表示主办地点。
正下方有七个button可以进行页面切换，分别为比赛日程、比赛结果、奖牌排行、精彩时刻、发表评论、报名观赛、了解更多。
鼠标悬停在一个按钮上时，按钮下方会出现矩形，悬停在下拉菜单或者可点击内容时都会有阴影提示，以此来进行用户交互。
点中任意一个按钮跳转到其页面时，该按钮会高亮提示，提醒正在当前页面。
比如当前正在‘比赛日程’页面
所有元素均为圆角矩形，给人带来更加温和和友好的感觉，相较于直角矩形更具审美效果。用户与界面的交互更加平滑和自然，减少了意外点击或碰撞的可能性。
界面下方均为赞助商以及联系官方方式。
在浏览器当前窗口的右下角固定增加了一个小火箭，就是返回顶部的按钮，也具有悬停反馈。

比赛日程

本界面有下拉菜单选择日期，日期会展示月份，以及周几，点击日期可以查看某一天比赛日程，比赛类型将以加粗方式突出显示，配以具体时间（使用AM/PM格式）和初赛/半决赛/决赛等赛程信息。在其中，决赛将以高亮形式呈现，并标注金杯图标以突显其重要性。如果想查看某个比赛的详细结果，直接点击该比赛即可进入该比赛结果页面。

比赛结果

本界面会先展示比赛类型，点击任意一个比赛之后会展开详细展示该比赛结果。
比赛结果总体分为三类，即初赛/半决赛/决赛，点击任意一个类型即可查看该类型结果，结果具体以以下7列详细展示

第一列为该运动员在该类型比赛排名，按照升序排序
第二列为代表国家，并附以国旗，更加直观了解运动员来自哪个国家
第三列为运动员，采用头像＋姓名的形式，让人更加直观了解运动员
第四列为运动员年龄
第五列为该运动员在本类型的比赛总得分
第六列为该运动员相比第一名落后的得分
第七列为每一行结尾添加了'+'号，点击后可以查看选手得分详细

奖牌排行

奖牌排行以金牌数为首要关键字，银牌数为次要关键字，铜牌为再次要关键字进行排序。

第一列即为总排名
第二列为国家，附以国旗，使人更直观的了解是哪个国家
第三列即为金牌数，并以金色为背景，更加直观。
第四，第五列分别为银牌数、铜牌数，效果同金牌
第六列即为总奖牌数

精彩时刻

精彩时刻采用精彩视频合集+轮播图的形式，循环展示赛场上运动健儿的英姿飒爽，让观众仿佛置身现场，感受他们奋勇拼搏、突破极限的壮丽场面，激发人们对运动、竞技和团队精神的崇敬和热爱。

发表评论

我们引入一个留言板功能，旨在让用户能够向运动员和相关工作人员表达支持、鼓励和感谢之情。提升用户参与感和平台活跃度。留言板将成为一个让用户与运动员及工作人员直接沟通的渠道，倡导共同体验和积极交流，营造积极向上的体育氛围。用户能够以书面形式向运动员和相关工作人员传递他们的心声，包括对他们的赛事表现的赞赏和鼓励，以及感谢他们为比赛付出的努力。留言板将为用户提供一个独特的机会，与运动员和工作人员建立更紧密的联系，增进彼此间的理解和支持。例如评论一句“测试评论”，新评论会显示在下方，并显示评论时间。功能使用中继器来实现。

报名观赛

相信很多人都想前往现场领略体育盛事带来的激动人心的氛围和精彩表现，我们提供报名观赛的功能，只需填一些基本信息即可提交观赛申请。
点击提交申请之后会提示申请成功，并清空信息输入框。

了解更多

这里介绍了赛场上的精彩故事，让大家更加全面和多方位了解本次体育赛事。
这里还有一个用户交互功能，鼠标悬停在任意一段文字上时，背后的蓝色矩形会转一圈来进行用户交互。

困难及解决方法

困难1：原型设计工具的选择

困难描述： 在项目初期，我们陷入了对原型设计领域的一片茫然，对于应该使用哪种原型设计工具毫无头绪。
解决尝试： 通过深入的网络搜索和向周围有经验人士的咨询，我们得知Axure是新手开发原型的理想选择。在选择Axure的过程中，我们发现该工具不仅适用于新手，还在行业内被广泛认可为一款强大而灵活的原型设计软件。其丰富的功能集使我们能够更精准地表达项目需求，同时它的学习曲线相对平缓，为我们提供了更容易上手的机会。我们积极寻找并学习了Axure的教程资料，系统地掌握了这一工具的使用技巧。
是否解决： 是的，我们最终选择了Axure进行开发，并成功地初步掌握了该软件的操作。
有何收获： 通过这一解决过程，我们不仅理解了原型开发的概念，还在实践中学会了运用原型设计工具。这为未来的原型开发打下了坚实基础，为项目的推进提供了可靠的支持。此外，通过学习原型设计，我们深刻领悟到良好的用户体验设计对项目成功至关重要。在项目进行过程中，我们将继续关注用户反馈，不断优化原型，以确保最终产品符合用户期望并具备良好的可用性。这也反映出了团队对于追求卓越用户体验的执着追求。

困难2：整体风格的选择

困难描述： 针对整体设计风格的挑选，我们这些新手一度感到毫无头绪。
解决尝试： 通过浏览参考网站，包括一些知名网站如Apple.com等，我们尝试借鉴并吸收优秀设计风格的理念，以获得启发。
是否解决： 是的，最终我们结合项目主题跳水，以及参考了Apple坚持的圆润设计理念，选择了淡蓝色为主色调，采用圆角矩形作为主要形状基底，形成了项目的整体设计风格。
有何收获： 在这个解决尝试中，我们不仅成功地解决了整体设计风格的选择难题，还学到了从世界级网站中获取灵感的重要性。通过深入研究和借鉴，我们更清晰地理解了用户界面设计的核心原则，为我们的项目赋予了更为独特和吸引人的外观。这一过程也锻炼了我们团队对设计审美的敏感性，为今后类似挑战提供了更丰富的经验。

困难3：客户的需求分析

困难描述： 在客户需求分析阶段，我们面临了解读和理解客户需求的难题。
解决尝试： 我们采取了主动主观的方法，通过仔细研读提供的需求文档，以尽可能完整地理解项目要求。同时，我们进行了内部讨论，结合团队成员的不同视角，试图透过多个角度审视客户需求。
是否解决： 部分解决。尽管我们没有直接与客户沟通，但通过内部的深入讨论和多角度审视，我们成功地澄清了一部分模糊的需求，使得我们对项目的整体方向有了更清晰的认识。
有何收获： 这一经验使我们意识到在缺乏直接客户沟通的情况下，内部团队之间的有效沟通和理解变得尤为关键。我们强化了团队协作，提高了对项目整体方向的共识。虽然这是一种临时性的解决方案，但这种团队内部的密切合作将成为我们未来处理类似挑战的重要资源。

困难4：页面切换导航栏的选中状态如何变更

困难描述： 在项目中遇到导航栏切换页面时，无法正确变更选中状态的问题。
解决尝试： 我们尝试通过设置全局变量来处理这个问题。具体做法是在单击导航栏时设置变量，通过变量判断是否选中当前导航栏块。然而，尽管我们采用了这种方法，但依然无法成功改变选中状态。最终，我们发现问题出在必须先设置全局变量再进行页面跳转，而不是先跳转再设置全局变量。
是否解决： 是的，通过多次的调试和排查，我们最终找到了问题的根本原因，并成功解决了导航栏选中状态无法变更的困扰。
有何收获： 在这一解决过程中，我们不仅解决了具体的技术问题，还加深了对项目中页面切换和导航栏状态管理的理解。学会了在处理类似问题时要注意操作的先后顺序，这为团队今后在前端开发中更加细致处理页面切换效果提供了宝贵经验。这也强调了在开发过程中对细节敏感的必要性。

困难5：软件本身提供的下拉菜单的样式无法修改，导致整体风格不统一

困难描述： 面对软件自带的下拉菜单样式无法灵活修改的问题，特别是我们倡导圆润风格，希望呈现一种浮于水面的感觉。若下拉菜单风格不统一，会导致整体页面失去协调性。
解决尝试： 我们采取了创造性的方式，通过两个动态面板相结合，模拟了一个自定义下拉菜单。尽管这样的方法较为繁琐，但它允许我们随意调整样式，确保整体风格更为一致。
是否解决： 是的，我们成功解决了下拉菜单样式无法修改的问题，通过自主设计的方式使得整体界面风格更具统一性。
有何收获： 这一经验教会了我们在面对技术限制时要保持创造性思维。通过采用非传统的方法，我们不仅解决了样式无法修改的问题，还锻炼了团队的创新能力。这次尝试表明了在技术挑战面前，转变思路往往能够开辟新的解决路径，为团队未来的项目中更灵活地应对类似问题提供了启示。

结对详情

结对过程

任务分工：
- 222100324：负责编写博客的主体部分，润色完善原型细节，
- 222100326：负责完成原型主体与框架部分，润色完善博客细节。
分工截图（部分）
讨论照片

感受

222100326_郑锦程：初次体验结对作业，和同伴一起合作，分享任务，让整个学习过程变得更加丰富。逐渐发现合作的默契，通过分享想法和互相倾听，使整个过程更加流畅。结尾时，看到我们共同努力的成果，感觉非常满足和有成就感。
222100324_罗斌：第一次结对作业，我感到一些紧张，但也很期待。与同伴共同努力，分享任务，让整个过程更为有趣。尽管在沟通和协调方面可能会遇到一些挑战，但通过这次经历，我学到了更多关于团队合作的重要性和技巧。

评价

222100326_郑锦程：我觉得和罗斌搭档效率挺高的，原型设计与写博客同步进行很快就完成了任务而且碰到bug我俩也能很快找到问题解决问题，他比较靠谱细心，原型有一些细节也是他完善的。
222100324_罗斌：郑锦程大局观意识很强，先列大纲，把原型框架搭出来，而且考虑的很周到，拓展思维很强，原型拓展了许多功能，和他合作很开心。

效能分析

PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	10	10
• Estimate	•估计这个任务需要多少时间	10	10
Development	原型设计	630	780
• Analysis	• 需求分析	60	70
• Design Spec	• 生成设计文档	40	40
• Design Review	• 设计复审	40	40
• Learning	• 学习Axure原型设计工具	60	80
• Design	• 具体设计	400	520
• Test	• 测试（自我测试，修改代码，提交修改）	30	30
Reporting	报告	180	160
• Size Measurement	• 计算工作量	20	20
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	160	140
	合计	820	950

分析

根据PSP表格，我们可以进行效能分析。在这个分析中，主要关注预估耗时和实际耗时之间的差异。

PSP Stage	预估耗时（分钟）	实际耗时（分钟）	差异（实际-预估）
Planning	10	10	0
Development	630	780	+150
Reporting	180	160	-20
合计	820	950	+130

从上表可以看出，在开发阶段和报告阶段，实际耗时与预估耗时存在较大的差异。特别是在开发阶段，实际耗时比预估耗时多了150分钟，而在报告阶段则比预估耗时少了20分钟。

Planning阶段:
- 预估耗时与实际耗时一致，表明较好的计划能力。
Development阶段:
- 学习Axure和具体设计阶段与预估耗时存在较大差异，耗时较长，原因如下：
  - 经验不足：本次是我们第一次进行原型设计，对于原型设计工具学习的时间成本预估太过乐观，导致了一些偏差。
  - 设计复杂性：项目的具体设计阶段可能面临了较高的复杂性，需要更多的时间来应对设计挑战。
- 改进方法如下
  - 提前进行技术评估：在项目开始前，对新技术或工具的学习成本进行更为细致的评估，避免对学习时间的过度乐观估计。
  - 经验积累：一回生二回熟，多多积累经验，以提高对设计复杂性的应对能力。
Reporting阶段:
- 预估耗时与实际耗时差距不大，显示稳定的报告能力。