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

[222100303陈昕]

这个作业属于哪个课程	2302软件工程社区-CSDN社区云
这个作业要求在哪里	结对第一次作业--原型设计-CSDN社区
结对学号	182000214 222100303
这个作业的目标	为2024多哈世界赛设计一个平台，完成原型设计
其他参考文献	墨刀用户帮助手册

目录

• 1. NABCD模型分析
• 2. 模型设计
• 2.1 原型设计工具
• 2.2 设计过程
• 需求分析
• 界面结构确定
• UI风格选定
• 组件设计
• 交互设计
• 3. 结果汇报
• 3.1 原型展示
• 基础功能
• 附加功能
• 3.2 困难及解决办法
• 4. 效能分析和PSP表格
• 结对过程
• PSP表格
• 效能评估

原型链接：https://modao.cc/proto/Do8cHwIrsa4az2r9LeeyV3/sharing?view_mode=device #se实践结对作业-原型设计

1. NABCD模型分析

Need

跨平台兼容性：软件应该能够在主流操作系统（如Windows、macOS、Linux）上正常运行，并且与主流浏览器（如Chrome、Firefox、Safari）兼容。

响应式设计：软件的界面应该具备响应式设计，以便根据用户的设备和屏幕大小自动调整布局和元素的显示方式，确保在不同平台上都能提供良好的用户体验。

移动端支持：软件应该提供移动端版本，兼容主流的移动操作系统（如iOS和Android），用户可以通过手机和平板电脑方便地访问比赛数据。

Approach

进行技术调研后，认为可以基于 Flutter 框架进行代码编写，并将程序编译到不同的平台，支持 Web / 移动端 / Windows / Linux / MacOS 等多个平台。通过响应式编程提供一致的使用体验。
世锦赛的相关数据，比赛成绩等可实时更新。
设计清新简约的UI风格，保持页面总体风格一致
制作相关组件和设置动效，以提供良好的用户交互体验。

Benifits

提供更广泛的用户覆盖范围：通过跨平台支持，软件可以在多个不同的平台上运行，包括桌面操作系统、移动操作系统和各种浏览器。
增强用户体验：跨平台支持可以提供一致的用户体验。用户可以在不同的设备上无缝切换，而不需要适应不同的界面或学习新的操作方式。这有助于提升用户的满意度。
方便的移动访问：通过支持移动设备，用户可以随时随地使用该软件。

Competitors

相较于原本的单一平台支持，跨平台支持可以提供更广泛的用户覆盖范围，增强用户体验，方便用户移动访问。

提供更广泛的用户覆盖范围：通过跨平台支持，软件可以在多个不同的平台上运行，包括桌面操作系统、移动操作系统和各种浏览器。
增强用户体验：跨平台支持可以提供一致的用户体验。用户可以在不同的设备上无缝切换，而不需要适应不同的界面或学习新的操作方式。这有助于提升用户的满意度。
方便的移动访问：通过支持移动设备，用户可以随时随地使用该软件。

数据时效性，为用户提供数据实时更新体验。

Delivery

在 Windows 下可以发布到 Windows Store，MacOS 下可以发布到 App Store，移动端可以发布到 Google Play Store 和 Apple App Store，Web 部署到 Web 服务器上，通过浏览器提供支持。通过在微博等平台宣传可以增加曝光量，同时也可以采取投放广告方式。

2. 模型设计

2.1 原型设计工具

我们是在墨刀和Axure两款设计工具中选择。出于成员操作系统原因无法使用Axure,我们开始对比墨刀。墨刀上手快，有丰富的组件库，开发难度较小。同时实时写作功能提供了很大便利。我们最终选择了墨刀作为我们的原型开发工具。

2.2 设计过程

需求分析

通过阅读作业要求和队内讨论，可知需求包括：

• 选手排名：展示Overall Rank，Country，Athlete，Age，Points
• 每日赛程：展示每一天的赛事，显示比赛类型，参与选手和比赛时间（支持通过切换日期查看不同的赛程/支持点击查看详细赛况）
• 详细赛况：展示比赛的成绩，包含本场比赛参赛选手，选手排名，比赛积分，落后积分等
• 补充需求：宣传和科普功能，对应模型的D分析。

界面结构确定

通过阅读作业要求和结合NABCD模型进行分析，我们确定了包含以下界面：
首页：包括简单介绍，页脚包括团队成员介绍等信息
选手排名：下拉选框，点击显示不同比赛排名
每日赛程：显示所有日期的对应赛事，也可通过选择日期进行查看
详细赛况：包括详细得分
了解更多：科普宣传，包括赛事介绍等。

UI风格选定

我们调研了市面上主流体育赛事网站，同时结合游泳锦标赛水元素，决定采用蓝白色调为主，清新简约的UI风格。

组件设计

页面导航栏

通用于各个页面顶部，实现基本页面的页面跳转。同时进行外观美化，增加了导航项悬停效果。

日期组件

日期组件用于赛程页面，可以通过该组件选择日期查看当天赛程。

组件由两部分组成：左侧标签页组件和右侧下拉菜单组件，通过两组件均可实现不同日期赛程跳转

详细赛况组件

每一名次对应一子项。子项内容包括：排名，国籍，运动员图像、姓名、年龄，比赛积分，落后积分。

赛程组件

全部赛程由各个日期对应赛程组成。每一项比赛对应一个子项。

子项内容包括：比赛时间，比赛项目名，比赛阶段（初/半决/决）；

此外EVENT DETAILS子组件具有悬停高亮和页面跳转效果：①点击可跳转至详细赛况页面 ②鼠标移入出现高亮

排名组件

排名组件用于排名页面，该组件显示特定赛事项目参赛选手排名。

每一名选手/双人组对应一个子项，子项内容包括排名，国籍，远动员头像、姓名、年龄，比赛积分。

交互设计

本次作业的交互部分主要包括：
页面导航栏

交互内容包括①页面跳转 ②悬停高亮

1.页面跳转：对相应的组件添加事件——单击时页面跳转，并选择指定跳转页面

2.悬停效果：当鼠标移入导航项时，对应导航项出现蓝色下划线，移出则效果消失

为组件新增组件状态

分别为该组件不同状态进行事件处理：

①状态一添加鼠标移入状态，移入后变为状态二；

②状态二添加鼠标移出状态，移出后返回状态一。

日期导航栏

交互内容包括页面跳转

给出两种日期选择方式，分别是左侧的标签页组件和右侧的下拉菜单组件。分别为组件子项添加页面跳转事件即可。

3. 结果汇报

3.1 原型展示

基础功能

选手排名界面

• Women 1m Springboard决赛的排名，展示选手Overall Rank，Country，Athlete，Age，Points等信息。

每日赛程

1. 按日期展示

2. 点击显示参赛选手+可查看详细赛况

详细赛况

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

附加功能

首页制作

首页内容包括：

轮播图组件，用以展示一些赛事新图片；

Doha2024世锦赛的简要介绍

世锦赛比赛项目的介绍：swimming ,water polo,diving, artistic swimming ，具有一定科普作用

（首页长度长，截图截成下方左右两张）

了解更多

页面主要内容包括：多哈的相关宣传（图片）+ 世锦赛最新新闻

3.2 困难及解决办法

Q1、组件悬停效果制作

困难描述： 墨刀原有组件库中的导航栏并不符合预期外观，于是便想自己制作新的导航栏。导航栏基础外观制作完毕后，调研多数网站导航栏有悬停效果，例如移入时出现高亮。在制作悬停效果时遭遇挫折，花费较多时间。

解决尝试： 开始阶段我们先随意摸索软件功能，发现难度较大。接着我们查看组件库中具有悬停效果的组件，发现其为动态组件具有多组状态。我们前往软件官网查看帮助手册，了解到了动态组件的相关概念。上手实践，先挑选了个小组件，为其新增了组件状态2（变色）。状态添加完毕后，该组件成为动态组件，为组件注册事件（切换组件状态），至此悬停效果初步实现。

有何收获：了解了动态组件的相关概念，学会设置动态组件，添加组件状态。同时悬停效果的初步实现，也使我们对于组件的事件处理有了进一步了解。为后续组件更多动态效果的实现提供了经验和思路。

Q2: 组件悬停效果问题二：组件悬停卡顿+鼠标移出时效果不消失。

困难描述： 之前完成了悬停效果的初步实现。大量悬停组件存在时，发现出现了效果显示卡顿+移出时效果不消失的情况，使页面外观很混乱。

解决尝试：开始阶段百思不得其解，想不出问题出现在哪里。后面对比组件库中成熟组件以及自行探索发现：动态组件的不同状态可以设置不同事件。而在上一问题中的初步实现，并没有精准指定对应状态。于是我们为组件状态一添加事件（鼠标移入时切换为下一状态），为组件状态二添加事件（鼠标移出时切换为上一状态）。同时设置效果时长（ms）

有何收获：对于组件的不同状态有了进一步理解。同时我们意识到，对于细节处理要更为仔细，看似不重要的细节对效果也会有着很大影响。

Q3:页面布局/组件反复修改麻烦

困难描述： 页面设计总是难以达到预期，组件或布局反复调整很麻烦；同时具有某一组件大量使用，组件修改时需全部替换的情况，增大工作量、降低效率
解决尝试： ①提前画设计图。设计好页面总体布局，组件大致排布状态，可以一定程度减少后期调整难度。②了解到墨刀具有母版功能，当出现一个自定义组件反复大量使用的情况，可将该组件设置为母版，当需要更改时，仅需调整模板即可完成任务。
有何收获：计划和提前设计、草稿有利于后期效率的提升，条理性有利于任务的更好完成。同时要善于利用软件/平台的相关机制提高作业效率。

Q4:组件层次问题/部分组件在预览状态出现消失情况

困难描述： 页面和大组件是由很多组件层叠/拼凑而成，有时出现某一组件并不出现在指定位置上或消失的情况；某一页面制作完毕后点击预览发现组件消失
解决尝试： 首先尝试设置组件层次（置于顶层/底层），这一方法可以解决部分问题，但对于复杂的由大量组件构成的情况不大适用。后面发现新生成的组件默认覆盖于原本存在的组件之上，通过复制粘贴调整了分散组件状态，最后将调整完毕的组件进行组合。
有何收获：多试试可能可以发现问题+设置母版在这个适合也能发挥大用处。

4. 效能分析和PSP表格

结对过程

照片

队友评价

评价lwt

在合作的过程当中，刚开始讨论的时候，我们的想法是比较一致的。但在实际的操作过程当中，在一些细节上的设计产生了分歧，于是我们仔细讨论了一下，最终敲定了设计方案。在后续的设计中，他和我都比较积极地沟通，对自己负责的设计都非常负责。在对于我的设计产生疑问的时候，他都会先来询问我，在达成一致的意见之后才开始动手操作，使得我们的进展非常顺利，最终高效地完成了设计，合作的过程非常地愉快。

评价 cx

- 制作出的原型精美，用户友好
- 学习能力强: 很快学会了墨刀如何使用, 并教我如何使用
- 好沟通: 在设计过程中，比如动画合适不合适，页面要不要加，都会友好地交流
- 认真负责: 合作的过程中时间观念强，所有任务都在她的规划下保时保序的完成了

PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	25	20
• Estimate	• 估计这个任务需要多少时间	25	20
Development	开发	820	1040
• Analysis	• 需求分析	40	30
• Learning	• 学习原型设计工具	30	30
• Discussion	• 结对讨论	30	30
• Design Spec	• 生成设计文档	30	30
• Design	• 界面原型设计	600	800
• Test and Improvement	• 原型测试与改进	90	120
Reporting	报告	270	330
• Design procedure	• 原型设计过程	90	90
• Achievements Exhibition	• 原型成果展示	90	120
• Problem Analysis & Postmortem	• 问题的分析和事后总结	90	120
	合计1115	1115	1390

效能评估

成果评估

1. KPI -- 原型功能完整性评分

• 预期结果：8 分
• 实际结果：9 分
• 分析：原型超出预期，使用了大量动画，并提供了超出客户需求的界面与功能

2. KPI -- 文档书写评分

• 预期结果：8 分
• 实际结果：8 分
• 分析：按时且保质地完成了报告，报告内容详尽，展示了产品原型的主要功能

团队合作

• 团队成员之间的协作和沟通效果良好，在项目周期内保持了良好的沟通和信息共享
• 团队成员的角色分工和责任履行情况符合预期

时间管理

• 在项目开始前有良好的时间安排，按阶段安排了学习/设计/实现/报告书写等时间，并有预留空间
• 项目进度和里程碑的准时交付情况良好，项目按计划逐步推进
• 项目在时间线上没有明显的延误

资源利用

• 团队合理利用了所需的技术工具和软件资源，在很快的时间内学习使用墨刀作为原型开发工具，高效地完成了设计工作
• 可行性研究和需求分析工作充分，对项目需求的理解准确；且考虑了下一阶段编码部分的实现可能

质量控制

• 网页原型的设计、用户界面和功能质量达到了预期水平
• 团队对错误和问题的处理能力强，及时修复漏洞并改进功能
• 提交报告及时，报告详尽

根据PSP表格，开发和报告阶段均远超预期时间，尤其低估了开发阶段。开发过程中有时纠结于某些点耗费了大量时间。PSP表格的预估和实际仍有一定差距，需要在后续阶段继续完善，学会更好进行分析。

在学习开发工具的阶段不能囫囵吞枣，一些关键点认真学习了之后有利于后续工作。

在原型设计过程中有时候过于扣细节导致了时间的大量浪费，效率不够高；同时要善于一些开发软件的现成工具，有利于提高效率。