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

[222100104林辰恬]

这个作业属于哪个课程	2023软件工程
这个作业要求在哪里	结对第一次作业--原型设计
结对学号	222100104 222100202
这个作业的目标	共同进行原型设计
其他参考文献	《构建之法》

目录

• 一、原型地址
• 二、PSP表格与效能分析
• 三、NABCD模型
• N：需求（Need）
• A：做法（Approach）
• B：优点（Benefit）
• C：竞争（Competitors）
• D：推广（Delivery）
• 四、模型设计
• 4.1使用的模型工具
• 4.2 原型设计过程
• 4.2.1 任务分配
• 4.2.2设计过程
• 4.2.3 成果展示
• 五、结果展示
• 5.1 首页
• 5.2 选手排名
• 5.3 每日赛程以及详细赛况
• 5.4 关于比赛
• 5.5 导航栏
• 六、遇到的困难
• 困难一：
• 困难二：
• 困难三：
• 困难四：
• 困难五：
• 困难六：
• 七、评价
• 7.1 结对过程
• 7.2结对评价
• 7.3结对感受

一、原型地址

原型地址

二、PSP表格与效能分析

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	10	10
• Estimate	• 估计这个任务需要多少时间	10	10
Development	开发	360	330
• Analysis	• 需求分析 (包括学习新技术)）	120	60
• Discussion	• 结对讨论	60	60
• Design Spec	• 生成设计文档	20	10
• Design	• 原型设计	120	240
• Test & Improvement	• 测试与改进	40	20
Reporting	报告	120	100
• Achievements Exhibition	• 原型成果展示	30	30
• Problem Analysis	• 问题分析	30	30
• Size Measurement	• 计算工作量	30	10
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	30	30
	合计	490	500

观察PSP表格，对比做之前的预期和做之后的实际时间，我们进行了效能分析，发现在学习界面原型设计工具方面我们花了过多的时间。我们进行讨论剖析之后发现在学习设计工具的前期我们总之依赖在网上找教程，找不到教程的就不知道该怎么做，比如滚动条，而比起理论来说更重要的是实践，所以我们自己探索这款设计工具，手动运用它之后渐渐自己找到了如何运用它。还有在美化设计原型的时间也超过了预期，因为我们初步设计的时候并没有想的很清楚，所以美化的时候一边改一边做。

三、NABCD模型

N：需求（Need）

上次我们的输出结果只是通过简单的文字来显示，不够直观、具体，对用户不够友好。因此在本次作业里，我们希望能设计一个平台，通过图表等形式来直观显示选手信息、>正式赛每日结果等。平台应具备以下功能：
选手排名

• 完成Women 1m Springboard决赛的排名，需要展示Overall Rank，Country，Athlete，Age，Points

每日赛程

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

详细赛况

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

A：做法（Approach）

通过使用原型制作软件墨刀来制作用户所需要的模型，将一些细节和用户可能没想到的方面进一步优化，来提高使用的舒适度和便利性。提供页面跳转、首页、选手排名、每日赛程、详细赛况等功能，通过图表等形式来直观、具体地展现比赛信息，帮助用户们更方便的获取世锦赛相关信息。

B：优点（Benefit）

1.在原型设计中我们提供了丰富的按钮功能，可以实现页面跳转和在每日赛程中选择日期来查看不同日期的赛程，也可以点击每日赛程的具体比赛跳转到具体日期的赛程，操作简洁明了，便利了用户查看世锦赛的相关信息。
2.增加了宣传视频，大大吸引了了解和不了解的用户们对世锦赛的兴趣
3.由于自身的审美不足，所以我们在整体的页面布局美化上参考了世锦赛官网的美化，有必要的信息，同时也有一定的图片来提升界面的美感，使得页面在简洁中不失大气。
4.用户无需进行注册即可查看。大大便利了用户查看世锦赛相关信息

C：竞争（Competitors）

竞争对手：
我们竞争对手主要是世界游泳锦标赛官方网站和其他可以查看世界游泳锦标赛的app以及其他的结对小组。
世界游泳锦标赛官方网站赛事信息完整，界面成熟，信息及时
而我们小组的网站
1.相比于官网我们的功能更加简洁明了，操作方便快捷，用户可快速上手。
2.相比与app，网页信息的查看更加便捷，不需要下载注册。
3.增加了轮播图，吸引用户点进来

D：推广（Delivery）

1.在世界游泳锦标赛粉丝的超话或者小组或者论坛里面大力发帖子宣传
2.在小红书、抖音、微博、bilibili投放广告吸引用户
3.推荐给家人身边朋友，并让他们帮忙宣传介绍产品
4.通过朋友圈及各类公众号发布宣传类推文

四、模型设计

4.1使用的模型工具

本次原型设计使用的是墨刀

4.2 原型设计过程

4.2.1 任务分配

222100104 林辰恬负责首页、每日赛况、关于比赛界面设计
222100202 李刘琛负责选手排名、详细赛况的界面设计
博客撰写由两人共同完成。

4.2.2设计过程

1. 打开助教提供的网址：世界游泳锦标赛，查看首页、每日赛况、选手排名、详细赛况等界面，学习界面的设计。
2. 使用墨刀的多人协作功能，组队后共同在线协作一个原型设计，可以实时更新每个人的设计。
3. 学习墨刀使用教程，快速上手基本操作。
4. 分配不同界面进行设计，提高效率。
5. 1 首页：设计图片轮播形式，使用户浏览世锦赛的风采；
6. 2 选手排名：完成Women 1m Springboard决赛的排名，参考官网的界面设计，展示Overall Rank，Country，Athlete，Age，Points，以及国家的图片，使用滚动面板实现上下滚动，通过斑马纹表格实现选手录入；
7. 3 每日赛程：导航栏下方添加一栏日期按钮，可选择日期查看每日赛程，模仿官网的设计，写出比赛时间、项目，点击后可跳转到详细赛程的页面，使用滚动面板实现上下滚动，通过矩形组合实现比赛项目时间的整合；
8. 4 详细赛况：展示比赛的成绩，包含本场比赛参赛选手，选手排名，比赛积分，落后积分，使用滚动面板实现上下滚动；
9. 5 关于比赛：介绍世锦赛的相关信息；
10. 6 导航栏：每个页面顶部有一个面包屑导航栏，点击不同模块跳转不同的页面，通过添加事件实现页面跳转；
11. 完成各自的部分后进行设计检查、设计演示。
    

    

4.2.3 成果展示

原型地址
录屏展示：
[video(video-6xMDrLQ8-1709712815295)(type-csdn)(url-https://live.csdn.net/v/embed/368029)(image-https://video-community.csdnimg.cn/vod-84deb4/50a607aedb6971ee806f6733a78e0102/snapshots/94d3779b936941849e3fab270ef9cebc-00003.jpg?auth_key=4863295762-0-0-c2672966b3e18e24c5d1a7b0c65cafce)(title-%E6%88%90%E6%9E%9C%E5%B1%95%E7%A4%BA)]

五、结果展示

5.1 首页

插入图片轮播形式，使用户浏览世锦赛的风采。

5.2 选手排名

插入斑马纹表格，录入选手姓名、年龄、排名和分数，添加国家图片，通过滚动面板进行上下滚动。排版整齐，模仿官网界面，使用户更为清晰的查看选手排名。

5.3 每日赛程以及详细赛况

插入日期导航栏，可点击选择日期，插入滚动面板，可上下滚动比赛信息等。满足用户需求，方便查看不同日期的不同赛事，模仿官方的设计风格，简洁明了。点击比赛可以查看详细赛况。详细赛况包括选手排名以及落后分数等。

5.4 关于比赛

介绍世锦赛的相关信息，对世界游泳联合会（World Aquatics）的介绍，以及一些比赛规则等，让用户了解世锦赛。

5.5 导航栏

每个页面顶部有一个面包屑导航栏，点击不同模块跳转不同的页面。界面功能清晰的分开使用户快速找到想要查看的信息。

六、遇到的困难

困难一：

• 困难描述： 当网页内的内容无法全部显示在用户的屏幕上时，需要使用滚动条来滑动浏览。找到滚动面板的控制组件后，使用不当，无法对页面进行上下滚动。
• 是否解决： 解决了。在网上搜到教程后发现与我们所用不同，只能自己摸索，尝试建立各种滚动条，最后在拉长面板后等到了解决。
• 收获： 当网页内的内容数量或长度较多时，使用滚动条进行内容输出，能够提高用户的阅读效率，同时还能够优化网页的排版设计，更好地展现数据和信息。许多时候需要自己尝试后才能找到解决办法，所以要对问题进行不同的尝试。

困难二：

• 困难描述： 困难描述： 第一次做原型设计，完全不会，从零开始学习原型设计。
• 是否解决： 解决了。在对比了墨刀和其他原型设计软件的优缺点之后选择了墨刀，因为墨刀页面简洁，操作便捷，还可以通过邀请链接进入团队合作，多人一起进入编辑模式，可以看到双方实时编辑。
• 收获： 墨刀真是一款好用的软件。

困难三：

• 困难描述： 困难描述： 墨刀这款软件较冷门，网上教程相比其他软件较少，能搜出来的教程很多都是小程序的，而不是web的，进度一度举步维艰。
• 是否解决： 解决了。加大关键字搜索力度。并且在b站观看官方网站的视频，先学习基础组件，再学习高级组件。
• 收获：加深了我们对墨刀这款原型设计工具的理解和使用。通过充分了解墨刀的功能和技巧，我们可以更加灵活地进行设计和合作，并大幅度减少出现问题的概率。

困难四：

• 困难描述： 在使用绘制原型设计的过程中，常常一个人的操作影响了另一个的操作。
• 是否解决： 解决了。我们选择线下合作，实时沟通，查看对方的进度，这样就不会写重了或者写矛盾了。
• 收获： 搭建了良好的合作氛围，提高了团队内部的归属感，更好地协调了工作。使我们变成了一个默契的团体。

困难五：

• 困难描述： 一个页面不足以容纳所有信息。
• 是否解决： 解决了。通过选择天数来跳转页面。
• 收获： 办法总比困难多。

困难六：

• 困难描述： 每日赛况的列表是模板是一样的，而却要绘制很多列表，工作重复繁琐。
• 是否解决： 原型设计工具可以将自己设计的模块组合变成自己的组件，从而使用组件化开发的形式进行，极大的减少了重复工作，提高了工作效率，节约了时间
• 收获： 在做重复工作的时候要相信前人的智慧，站在前人和软件设计者的肩膀上做业。

七、评价

7.1 结对过程

由于本次作业基本采用线下共同协作的方式，所以聊天截图没有细化的过程，均以面对面讨论为主。聊天截图仅有对博客撰写的内容传输。

7.2结对评价

李刘琛to林辰恬：林辰恬是个认真负责的好队友，遇到意见不统一的时候会及时沟通，工作效率高，原型设计和博客的攥写的过程很细心，在磨合的过程中我们越来越有默契，让我感受到了团队的齐心协力，平时相互督促出来写原型设计，让我倍感动力

林辰恬to李刘琛：在团队合作过程中，李刘琛表现出认真负责、高效务实的优秀素质。当我们意见不一致时，她会和我进行沟通，以保证工作的顺畅进行。在原型设计和博客编写的过程中，她严谨细致，为工作提供了有力保障。在团队的磨合过程中，我们逐渐建立了默契和信任，体验到了团结合作的力量。

7.3结对感受

本次所参与的结对体验获得了极为良好的效果。除了平日中我们常常会一起学习并展开相应的讨论，该次结对环境的优越性亦促进了我们的合作，使得所取得的成效远超过各自单独行动。在面对困难的时候，我们之间相互协同并且致力于钻研问题的解决方案，体现了相互支持与帮助的价值。结对体验意味着我们不再独自面对挑战，而是可以相互配合，其间交流的过程能够很好地协同思维并揪出问题的关键点，同时，个人的拖延症问题也得以一定的改善。