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

最新推荐文章于 2025-05-12 19:29:21 发布

L李小花

最新推荐文章于 2025-05-12 19:29:21 发布

阅读量923

点赞数 18

文章标签：软件工程 java

本文链接：https://blog.csdn.net/m0_64752203/article/details/136497983

版权

这个作业属于哪个课程	2302软件工程
这个作业要求在哪里	结对第一次作业–原型设计
结对学号	<222100302 222100101>
这个作业的目标	掌握原型工具的使用，设计一个界面友好的网页原型。
其他参考文献	《构建之法》

1.原型开发工具

对比各原型工具的学习成本，我们们选择了上手较快的墨刀作为此次原型设计的工具。

2.原型网页链接

我们们的原型网页

3.PSP表格和效能分析

3.1 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	20	30
• Estimate	• 估计这个任务需要多少时间	20	30
Development	开发	540	510
• Analysis	• 需求分析 (包括学习新技术）	180	120
• discussion	• 结对讨论	60	30
• Design	• 界面原型具体设计	300	360
Reporting	报告	40	40
• Size Measurement	• 计算工作量	10	10
• Postmortem	• 事后总结	30	30
	合计	600	580

3.2效能分析

在这次的原型设计作业中，我们初步步入了原型开发的世界。起初，我们花费了一定的时间去深入了解原型设计的基本理念和流程，这对于我们后续的设计工作至关重要。选择合适的工具对于原型设计的效率和质量有着直接的影响。在众多的原型设计工具中，我们最终决定使用墨刀。我们选择墨刀的主要原因是它的用户界面直观且功能强大，适合快速原型制作，这使得我们在学习新工具的过程中节省了不少时间。

然而，在具体的界面原型设计阶段，我们遇到了预料之外的挑战。我们在设计理念和审美偏好上出现了一些分歧，这导致了决策过程的延长，从而使得整个设计阶段的时间投入超出了最初的预期。为了解决这个问题，我们进行了多次讨论，试图找到一个既能满足美观性要求又不会增加开发难度的设计方案。最终，我们决定采用一种较为简洁的设计风格，这不仅有助于缩短开发时间，而且有利于提升用户体验。

在这个过程中，我们也意识到了团队协作的重要性。虽然我们两人在合作上表现出了一定的默契，但在提高问题解决效率方面还存在不少的空间。我们认识到，有效的沟通和协作是提升团队工作效率的关键。因此，我们在后续的工作中更加注重沟通的及时性和有效性，努力确保每个成员的意见都能得到充分的表达和考虑。

Anyway，这次原型设计作业不仅让我们学到了原型设计的技术和工具，更重要的是，它让我们认识到了团队合作中沟通的重要性以及在设计决策中寻求平衡的重要性。虽然刚开始的时候有一些沟通不顺，往往一个布局就需要花费半个小时（甚至一个小时）的时间说服对方接收自己的审美。但通过这次经历，我们不仅提升了设计技能，也增强了解决问题和团队协作的能力，相信这对我们未来的学习和工作都将产生积极的影响。

4.阅读《构建之法》的理解和感悟

4.1 NABCD模型的详细说明

NABCD模型为产品开发和创新提供了一种系统的框架，它包括了从需求分析到产品推广的全过程。下面是对这个模型的详细解释：

N,需求（need）：这是模型的起点，强调了在进行产品设计和开发之前，必须首先明确用户的需求。这不仅仅是指用户直接表达的需求，更重要的是去挖掘和理解用户潜在的、未被明确表达的需求。这要求我们深入用户的日常生活和使用场景，通过观察、访谈、问卷等方式收集信息，从而确保我们的产品能够解决用户真正的问题。

A,做法（approach）：解决需求的手段：在明确了需求之后，下一步是确定解决这些需求的具体做法。这不仅涉及到技术方案的选择，还包括产品设计的理念、方法论以及实施路径。这个阶段要求设计者和开发者进行创新思维的发挥，寻找既能满足用户需求又具备可行性和可操作性的解决方案。

B,好处（benefit）：明确了解决方案后，接下来要考虑的是产品将给用户带来哪些具体的好处。这一点是产品能否成功的关键。好处不仅要具体、明确，还要具有吸引力，能够激发用户的购买欲望。同时，好处的表述需要简洁易懂，让用户一目了然，这对于产品的市场传播至关重要。

C,竞争（competitors）：任何产品的推出都不是在空白市场中进行的，了解竞争对手，分析市场上现有的解决方案及其优缺点，是产品成功的重要一环。这一阶段需要对市场进行深入的研究，包括竞争对手的产品功能、价格、销售渠道、客户反馈等各个方面，以便找到自身产品的差异化和竞争优势。

D,推广(delivery)：最后，如何将产品有效地推广给目标用户，是NABCD模型的收官之作。这包括选择合适的销售渠道、制定市场推广策略、建立品牌形象等一系列活动。在这个阶段，重点是如何让潜在用户了解到产品的存在和好处，并激发他们的购买意愿。

4.1.1 N,需求（need）

问题和需求
世界游泳锦标赛，是由世界游泳联合会主办的最高级别的大型国际性游泳赛事，主办机构是国际泳联总会。第一届世界游泳锦标赛于1973年举行，1978年至1998年间举办间隔年数屡有变化，自2001年起恢复每2年举行一届。2024年游泳世锦赛于2月2日至18日在卡塔尔多哈进行，们希望能设计一个平台，通过图表等形式来直观显示选手信息、正式赛每日结果等。平台应具备以下功能：

选手排名
只需完成Women 1m Springboard决赛的排名，可以参考此界面，需要展示Overall Rank，Country，Athlete，Age，Points;
每日赛程
展示每一天的赛事；显示比赛类型(男子1m跳板；女子10m跳台等)；参与选手和比赛时间;
支持通过切换日期查看不同的赛程；
支持点击查看详细赛况;

详细赛况
展示比赛的成绩；包含本场比赛参赛选手，选手排名，比赛积分，落后积分等。

4.1.2 A,做法（approach）

在设计和开发我们的原型时，我们采用了一系列技术和设计方法来确保产品既能满足用户需求，又具有良好的用户体验。以下是我们的主要做法：

数据获取和处理：为了确保我们的平台提供最新、最准确的赛事信息，我们决定直接从官方网站的API爬取相关数据。这一做法不仅可以自动化更新数据，保证信息的时效性和准确性，还能通过精确的数据解析，确保所存入数据库的数据结构清晰、易于管理。此外，通过将这些数据通过前端展示给用户，我们能够提供实时的赛程更新、运动员成绩、排名等关键信息，大大增强了平台的信息价值和用户的参与度。

导航与界面设计：为了提高用户的导航效率，我们采用了面包屑导航的形式，并设计了清晰的索引，涵盖了首页、赛程、排名等关键模块。用户可以轻松地在不同模块间切换，快速找到他们感兴趣的内容。同时，我们考虑到了界面的美观性，设计了可隐藏的导航功能，既保持了导航的便利性，又最大化了内容展示区域，使整个页面更加整洁、美观。

增强视觉体验：我们在首页加入了轮播图功能，精选了一些比赛中的精彩瞬间和运动员的风采展示，以此来增强用户的视觉体验和感情投入。轮播图的动态展示不仅可以吸引用户的注意力，还能传达比赛的激烈程度和运动员的风采，提升用户对赛事的兴趣。

将排名利用表格展示；信息的清晰展示：对于赛事排名等关键信息，我们选择了表格的形式进行展示。表格布局清晰，能够有效地组织和展示复杂的数据信息，如选手名次、得分等，使用户可以一目了然地了解到赛事的具体情况。

界面配色和设计：在网页设计上，我们采用了简单而又不失优雅的配色方案。简洁的背景和舒适的色彩搭配不仅有利于突出重要内容，还能减少用户的视觉疲劳，提升整体的浏览体验。通过精心的设计，我们旨在营造一个既专业又友好的用户界面，吸引更多的用户参与和使用。

通过这些精心策划和实施的做法，我们创建一个不仅功能全面、信息丰富，而且用户友好、操作便捷的平台。我们相信，通过这些努力，我们的产品将能够有效地满足用户的需求，提供卓越的用户体验，并在竞争激烈的市场中脱颖而出。

4.1.3 B,好处（benefit）

直观的导航体验：我们精心设计的导航栏不仅直观易懂，还通过隐藏功能进一步增强了界面的简洁性和美感。这样的设计确保了即使是首次访问的用户也能迅速找到他们需要的信息，大大提高了网站的可用性和用户满意度。隐藏的导航栏也意味着更大的内容展示区域，让用户可以更加专注于网页的核心内容，无论是赛程信息、运动员介绍，还是比赛结果。

简单的配色方案的多重好处：我们选择的简单配色方案不仅美观大方，还带来了以下好处：
提升用户体验：简约的配色让整个页面看起来更加清爽、整洁，减少了视觉干扰，从而提升了用户的整体浏览体验。
增强可读性：通过采用对比度合适的颜色搭配，我们增强了文本和图像的可读性，使信息传递更加直接和有效，用户能够更容易地吸收和理解页面上的信息。
跨设备适应性：简单的配色方案在不同设备上的显示效果更加一致，无论用户是通过手机、平板还是电脑访问，都能享受到相同质量的视觉体验。这种设计的响应性对于提高网站的可访问性和用户满意度至关重要。
降低设计和维护成本：简单的配色方案简化了设计过程，不仅降低了初期的设计成本，也使得未来的网站维护更加容易和成本效益高。此外，简化的设计还意味着更快的加载速度和更好的网站性能，进一步提升了用户体验。

表格展示排名的优势：通过将排名信息以表格形式展示，我们为用户提供了一种清晰、直观的方式来查看比赛结果。这种布局不仅方便用户一目了然地看到每位运动员的位置，还可以轻松比较不同运动员的成绩。表格的设计还允许我们在有限的空间内展示更多的信息，如运动员的国籍、比赛成绩和排名变动等，进一步丰富了用户的信息获取体验。

我们设计策略通过提供直观的导航、优化的视觉体验和清晰的信息展示，为用户提供一个既实用又愉悦的在线体验，使他们能够轻松获取和享受赛事信息，这些设计考虑不仅能够满足用户的基本需求，还能提升他们对平台的整体满意度。

4.1.4 C,竞争（competitors）

免费开放使用的策略：我们决定将我们的平台对用户免费开放。这一策略不仅可以快速吸引大量用户，增加用户基础，还能通过用户的实际使用反馈来持续优化我们的服务。这种开放和迭代的方法使我们能够及时了解用户需求的变化，并快速适应市场趋势，从而保持竞争优势。

简洁高级的配色方案：在众多相似服务中，我们的简洁而高级的配色方案使我们的产品在视觉上更为突出。这种简约风格不仅符合现代审美趋势，还能提升用户的浏览体验，使用户在使用过程中感受到舒适和愉悦，从而提升用户满意度。

高效率的设计：通过优化设计流程和采用高效的技术方案，我们将设计和开发成本控制在较低水平，这使我们能够将更多的资源和精力投入到产品功能的优化和创新中。这种成本控制策略不仅提高了我们的运营效率，还增强了我们在价格竞争中的灵活性，使我们能够提供更具竞争力的服务。

简洁可隐藏的导航栏设计：我们的导航栏设计兼顾了功能性和美观性，不仅提供了直观的用户指引，还能根据用户的浏览习惯进行隐藏，为用户提供了更为宽敞和清爽的浏览空间。这种细节上的考量反映了我们对用户体验的重视，有助于在功能繁多的竞争环境中突出我们的产品。

4.1.5 D,推广(delivery)

以下是我们为提高产品知名度和用户基础所采取的关键推广活动：

社交媒体营销：鉴于社交媒体平台的广泛影响力和高度互动性，我们决定在各大社交媒体上积极开展宣传和推广活动。这包括但不限于小红书、Bilibili、微博等平台。通过定期发布有关赛事的最新动态、精彩瞬间和背后故事，我们不仅能够提升品牌的可见度，还能激发潜在用户的兴趣和参与度。此外，我们还利用社交媒体的广告功能针对特定的用户群体进行精准推广，以提高推广效果。

口碑营销：我们鼓励支持者向他们身边热爱体育运动的朋友和家人推广我们的网页设计。通过这种个人到个人的传播方式，我们可以通过口碑传播扩大我们的用户群体。

5.原型设计过程及成果

5.1 设计过程

了解什么是原型设计；
讨论决定使用的原型工具，并学习工具的使用；
进行任务分工，每人负责一个页面的设计；
页面预览，进行页面优化。

5.2 成果展示

首页： 为了提高用户的浏览体验，我们的首页设计支持上下滑动功能，使用户能够轻松地浏览各种内容，如最新赛事、精彩瞬间、运动员介绍等。此外，我们在页面顶部设置了图片轮播模块，展示了一系列赛事精彩瞬间和重要信息。这种动态展示不仅能够吸引用户的视觉注意力，也为用户提供了一个直观的方式来了解赛事的最新动态和亮点。我们的导航栏设计既注重功能性，又兼顾美观。当用户浏览首页时，导航栏始终可见，提供了一个清晰的指引，使用户能够快速访问TOURNAMENT区域以及其他关键模块，如赛程、排名等。为了进一步优化页面的视觉体验，当用户的鼠标离开TOURNAMENT区域时，导航栏将智能隐藏，从而为图片轮播和其他内容提供了更大的展示空间，使整个页面看起来更加简洁、宽敞。

赛程： 为了方便用户查看赛程信息，我们设计了一个简洁且直观的滑动界面，用户可以通过上下滑动来浏览不同天数的赛程。在初始状态下，页面聚焦于展示第一天的赛程，为用户提供了一个快速了解赛事开始情况的入口。对于特定的赛事，如男子3米双人跳水（men 3m synchronised），我们提供了进一步点击查看详细赛况的功能。用户可以通过点击感兴趣的赛事项，进入一个详细页面，查看该赛事的详细信息，包括运动员名单、比赛时间、地点以及预期的精彩瞬间等，增强了用户的参与感和体验深度。

与首页相同，赛程页面的导航栏在用户浏览时始终可见，提供了稳定且清晰的导航支持。而当用户的鼠标离开TOURNAMENT区域时，导航栏将智能隐藏，这一细节设计在赛程页面上同样适用，保持了整个平台的交互一致性和视觉整洁性。这种智能化的导航体验不仅使用户能够更加专注于赛程内容本身，还增加了页面的美观度和专业感。

详细赛况： 我们认识到用户在查看详细赛况时可能需要浏览大量信息，包括比赛成绩、运动员介绍、比赛回顾等。因此，该页面支持上下滑动，使用户能够轻松地浏览整个页面，无需繁琐的点击操作。这种滑动式的交互方式使他们能够更加专注于内容本身。为了提升用户在深入查看详细赛况后的导航便捷性，我们在页面上设计了一个明显的返回箭头。点击这个箭头，用户可以迅速返回到上一级页面，无论是赛程总览还是其他模块。这种简洁直观的返回机制不仅减少了用户的操作步骤，还提高了整个平台的导航连贯性。（这里只做了一个跳转，其他实现方法也一样）

在"详细赛况"页面中，我们对内容进行了合理的组织和布局，确保信息的呈现既全面又易于理解。从比赛的基本情况到每个参赛者的表现，从精彩瞬间的回放到专业的赛事分析，每一部分内容都被清晰地划分和展示，以满足不同用户的需求和兴趣点。

排名： 在"排名"页面，我们突出展示决赛（finals）的结果，这是因为决赛的结果往往是用户最关心的部分，也是决定运动员最终排名的关键。通过将页面的焦点放在决赛结果上，我们能够提供给用户最关键的信息。另外，我们考虑到排名信息可能包括多个项目和众多参赛运动员的详细成绩，我们设计了这样一个支持上下滑动的表格，以展示完整的排名信息。这样的设计确保了即使在信息量较大的情况下，用户也能够通过简单的滑动操作，轻松地浏览整个排名列表。无论是寻找特定运动员的排名，还是对比不同运动员的表现，用户都能够在这个页面上得到满足。

为了保持整个平台的交互设计一致性，"排名"页面同样采用了智能隐藏导航栏的设计。当用户的鼠标聚焦在TOURNAMENT区域之外时，导航栏会自动隐藏，为排名表格提供了更大的展示空间，从而增强了页面的视觉清晰度和阅读体验。这种考虑细节的设计不仅使页面布局更加整洁，也提升了用户在查看排名信息时的舒适度。

5.3 遇到困难和解决方法

困难一：数据详细性与界面简洁性的冲突

困难描述： 在设计介绍世界游泳锦标赛的原型时，我们们遇到了一个常见但棘手的设计问题：如何平衡数据的详细性与界面的简洁性。这个困难在于，详细的数据可以为用户提供更加丰富、全面的信息，从而增加对世界游泳锦标赛的吸引力和理解度。然而，数据过于详细可能会导致界面过于复杂，影响用户体验，甚至使一些用户因难以导航而失去兴趣。

解决过程： 在解决这个问题的过程中，我们们首先尝试了多种界面布局和设计元素的组合，目的是在不牺牲信息量的情况下，尽可能保持界面的整洁与直观。例如，我们使用了折叠面板和标签页来组织内容，这样用户可以根据需要展开或隐藏详细信息。此外，我们还尝试利用图表和信息图解来呈现数据，因为视觉元素通常比文本更易于理解和吸引人。尽管这些尝试在一定程度上改善了界面的简洁性，但在原型测试阶段，我们们发现赛事数据量过大，可能难以在网页中快速家在。于是，我的队友（杨婷婷）建议采用动态内容加载的策略，即默认仅显示最基本的信息，并提供“更多详情”的选项，让用户可以按需加载更多内容。这样既保证了界面的整洁，又能满足对详细信息有需求的用户。

收获： 通过这些调整，我们们最终成功地解决了数据详细性与界面简洁性的冲突。这一过程让我们深刻认识到用户体验的重要性，并学会了灵活运用设计原则和技巧来解决实际问题。更重要的是，我们们意识到了与用户进行有效沟通的重要性，了解他们的需求和偏好对于设计一个既有吸引力又易于使用的平台至关重要。这次经历不仅增强了我们和我们队友的设计能力，也提高了我们们的问题解决技能，对之后实际工作中解决问题的能力有很大的提升。

困难二：作为设计者，较难换位思考，站在用于的角度去优化用户体验

描述： 在设计介绍世界游泳锦标赛的原型的过程中，我们们遇到的另一个主要困难是作为设计者，较难换位思考，站在用户的角度去优化用户体验。设计者可能对自己的项目过于熟悉，从而难以客观评估用户在实际使用中可能遇到的困惑和挑战。这种“专家盲点”可能导致设计忽视了用户的实际需求和偏好，从而影响产品的可用性和吸引力。

解决过程： 为了解决这个问题，我们首先尝试通过建立用户画像和情景模拟来增进对目标用户群体的理解。通过这种方法，我们试图捕捉不同背景和技能水平的潜在用户可能的需求和使用行为。然而，仅凭想象和推测来代入用户角色，往往还是不够准确和全面的。意识到这一点后，我们决定采用更为直接和有效的方法：用户测试。我们们邀请了各自的舍友（共6个人），代表参与原型的早期测试，并观察他们与界面的互动过程。通过这种实际的互动，我们能够直观地看到用户在使用过程中遇到的难点和痛点。此外，我们还收集了用户的直接反馈，了解他们对界面设计和信息呈现的看法。

收获： 通过这些用户测试，我们发现了一些之前未曾意识到的问题，并根据用户的反馈进行了相应的调整。例如，我们简化了一些复杂的导航元素，增加了搜索功能，以帮助用户更快地找到他们感兴趣的内容。同时，我们也优化了一些视觉设计元素，使界面更加友好和吸引人。这个过程教会了我们作为设计者，必须持续努力从用户的角度出发，真正理解并满足他们的需求。用户测试成为了我们设计工作中不可或缺的一部分，它帮助我们跳出自己的思维框架，从而创造出更加人性化和易用的设计解决方案。通过不断学习和实践，我们逐渐增强了自己的换位思考能力，这不仅提升了我们的设计作品的质量，也促进了我们的个人成长和职业发展。

困难三：组队沟通与协作

我们两个团队成员都有独特的技能、经验和设计观点，这是一种宝贵的知识来源，但也可能导致意见不一致和沟通障碍。我们两个人在项目初期就遇到了这样的问题，不同的设计理念和审美在一定程度上阻碍了项目的顺利进展。但我们两个人都想克服这一困难，所以我们约定好团队的定时交流，包括每一天晚上轮流到彼此的宿舍交流、重大工作节点会议和最后交作业时的一次会议，我们还采用了在线协作工具，比如墨刀的共享编辑功能，这样就支持两个人异地协作，所以总的来说，结对作业还是很开心的hhh～