2026秋软件工程结对作业（第一次）——校园失物招领小程序原型设计

这个作业属于哪个课程	H202601软件工程与软件工程实践
这个作业要求在哪里	2026秋软件工程个人作业（第三次）
这个作业的目标	完成校园失物招领小程序的需求分析和Figma原型设计，明确主要功能与用户流程，并为后续代码实现打下基础
结对成员	102401209（洪添军）、102401125（罗宇泽）、102401209（洪添军）

前言：开发工具推荐（仅供参考）

我们本次开发选择figma作为开发工具的一个原因是谷歌浏览器扩展商店自带专门为figma设计的html.to.design插件，这个插件的主要作用是把html界面导入进入figma后可以变成可以编辑的原型界面（官方规定一个月只能导入十次），个人感觉这个插件挺不错的，因为你可以先让ai生成html文件，然后修改到满意为止再导入figma。以下是这个插件的详细介绍和用法。

另外就是codex中有专门和figma适配的MCP插件，能够直接操控的figma界面，相比于让agent直接通过computer use插件控制电脑这个插件会让修改更加精准且高效，并且额度消耗更少。

一、队伍分工

本次作业我和队友采用“共同讨论、模块分工、交叉检查”的方式完成。我们共同进行需求分析和功能规划；我主要负责在初始原型基础上继续完善Figma界面设计，完成页面交互、跳转关系、加载与异常状态页面，并对原型进行整体优化。我的队友主要负责博客整体内容的撰写与整理、用户使用流程图的制作，以及Figma原型初始页面和整体页面结构的搭建；最后我们共同检查三条基本流程是否能够正常演示，并完成最终内容核对。

我们小队讨论需求、共同核对内容的聊天截图将在后文展示。

---

二、教材阅读与设计思路

阅读《构建之法》第三章后，我认识到软件工程师的成长不仅体现在编程能力上，还包括分析问题、团队协作、沟通和持续学习等方面。个人能力需要在实际项目中不断积累和改进，同时也要关注代码质量和团队规范。通过本章，我对软件工程师应具备的综合能力和成长方向有了更清晰的认识。

阅读第八章后，我认识到需求分析是软件开发的重要基础。开发前要先明确用户真正需要什么，通过调研、沟通等方式获取需求，再进行分析、验证和优先级排序。NABCD、KANO、WBS 等方法让我了解到需求分析可以更加系统。结合本次原型设计，我也体会到先明确需求、再制作原型，有助于减少后续返工，提高开发效率。

---

三、需求分析

本软件主要面向校园学生。

• 遗失物品的学生：希望发布寻物信息，并快速查找可能相关的招领信息；
• 拾到物品的学生：希望发布招领信息，让失主能够及时发现；
• 信息发布者：在物品找到或归还后，希望能够管理并修改信息状态。

小程序主要解决目前班级群、宿舍群和朋友圈中失物信息分散、容易被新消息覆盖、传播范围有限的问题。

---

四、主要功能

功能	说明
浏览信息	查看最新寻物和招领信息
发布寻物	发布物品名称、丢失时间、地点、描述等信息
发布招领	发布拾取物品的相关信息
搜索物品	按关键词及“全部/寻物/招领”筛选
查看详情	查看图片、时间、地点、状态、描述和联系方式
我的发布	查看并管理本人发布的信息
修改状态	将“寻找中”改为“已找到”，或“待认领”改为“已归还”

---

五、用户使用流程

根据作业要求，我们重点设计并实现了“查看信息 → 查看详情”“发布信息 → 发布成功”“搜索物品 → 查看搜索结果”三条基本使用流程，同时增加了信息状态修改流程。

1. 查看信息 → 查看详情

用户进入首页后，可以浏览最新的寻物和招领信息。选择感兴趣的信息并点击后，即可进入详情页面，查看物品图片、时间、地点、当前状态、详细描述以及联系方式等内容。

2. 发布信息 → 发布成功

用户进入发布页面后，可以根据实际情况选择发布“寻物”或“招领”信息。填写物品名称、类别、时间、地点、描述、图片及联系方式等内容后提交，系统进入发布成功页面，并提示用户可以前往“我的发布”查看信息。

3. 搜索物品 → 查看搜索结果

用户进入搜索页面后，可以输入物品名称等关键词进行搜索，同时可以通过“全部、寻物、招领”进行分类筛选。搜索成功后，系统展示相关信息，用户还可以进一步进入信息详情页面。

针对搜索过程中可能出现的网络异常或没有匹配结果的情况，我们也设计了搜索失败和搜索无结果等反馈状态。

4. 三条基本流程综合演示

为了更加直观地展示原型的实际交互效果，我们使用Figma Prototype将上述三条基本流程进行了连贯演示。动图依次展示了：

查看信息 → 查看详情 → 发布信息 → 发布成功 → 搜索物品 → 查看搜索结果：

通过该演示可以看到，三个主要功能之间的页面跳转较为清晰，用户可以按照界面提示完成浏览、发布和搜索等操作。

5. 修改信息状态

除作业要求的三条基本流程外，我们还增加了信息状态管理功能。用户可以从“我的”页面进入“我的发布”，选择需要管理的信息并修改状态。

例如，寻物信息可以由“寻找中”修改为“已找到”，招领信息可以由“待认领”修改为“已归还”。修改过程中系统还会依次显示确认、更新中和修改成功等反馈状态。

---

六、原型设计

本次原型采用 Figma 完成设计和交互制作。

原型在线地址：请点击此处

原型主要包括首页、发布寻物、发布招领、发布成功、搜索、信息详情、个人资料和“我的发布”等核心页面。

同时，为了使操作过程更加完整，我们还设计了搜索中、搜索失败、搜索无结果、首页加载失败以及状态修改成功等交互反馈状态。总共制作了35个界面。

1. 首页

首页用于集中展示最新的寻物和招领信息，同时提供搜索、发布寻物和发布招领等主要功能入口。

2. 发布页面

寻物和招领采用相似的表单结构，但根据实际场景分别使用“丢失时间、丢失地点”和“拾取时间、拾取地点”，使页面含义更加明确。

3. 搜索与详情页面

搜索页面支持关键词搜索以及“全部、寻物、招领”分类筛选。用户点击其中一条搜索结果后，可以进一步进入信息详情页面查看完整信息。

4. 个人资料与我的发布

“我的”页面展示用户的QQ、手机号、微信、常用校区等资料，并提供“我的发布”入口。

用户可以在“我的发布”中查看并管理自己发布过的信息。

5. 交互反馈状态

除主要业务页面外，我们还针对实际操作过程中可能出现的不同情况设计了搜索失败、搜索无结果、加载失败以及状态修改成功等反馈，使用户能够明确了解当前系统状态以及下一步可以进行的操作。

---

七、结对过程

注：这部分和我的搭档一致，本来想切换到我的视角截图，但想了想都一一样的效果。
前期我们共同阅读作业要求及教材，并结合客户描述分析实际用户需求，确定小程序的核心功能和页面结构。

随后根据两人的分工分别完成流程图、Figma页面设计和交互制作。在制作过程中，我们通过沟通不断调整功能和界面细节，并共同测试“查看详情”“发布信息”和“搜索物品”等主要操作流程。

以下是我们小队讨论需求、共同核对内容等协作过程的聊天截图（因拼图会损失部分内容，因此采用单张图片展示形式）：

---

八、PSP表格

PSP阶段	具体内容	预估耗时/min	实际耗时/min
Planning	阅读作业要求及教材	30	50
Requirement	需求分析与功能确定	40	30
Design	页面结构及流程设计	60	40
Prototype	Figma原型制作	360	300
Interaction	页面交互及状态完善	120	180
Flowchart	绘制用户流程图	60	40
Testing	原型测试及修改	60	80
Documentation	博客及图片整理	60	50
合计		790	770

---

九、个人总结

刚开始阅读作业要求的时候，其实对原型设计这个概念是一头雾水，对这个东西没有一个清除的认知，只记得黄老师在上课的时候提及瀑布模型的时候提到过这个原型设计，黄老师：“当你的老师给了一个比较模糊的需求，你可以先设计几个原型给老师看，老师觉得这个方向没问题再继续做”，但是这个描述是抽象的，当我具体打开原型设计软件才知道在软件开发中的原型设计是什么。

学习之后我的理解是这样子的:原型设计就是先根据一个需求设计出一个APP，小程序基本的功能界面，再把这个原型发给客户看是否能够满足客户的基本需求，如果这个原型设计的大体方向是对的，我们再继续完善一些功能，或者客服可以在原型的基础上提出新的需求：比如界面美化、增加社交功能、扩展聊天功能等等。我们进而去不断在原型的基础上进行修改。

有意思的是我本以为原型设计是属于前端的活，在搜索以后才发现这居然是产品经理的工作内容，其实在我的职业规划里面有考虑过这个岗位，但是我在这之前并不知道产品经理具体的工作内容是什么。只是在网络上听说产品经理不用写很多代码，需要有敏锐的市场感知力，对热门的产品有一定的理解。也听说过一些前后端的人转到产品经理这个岗位。本次作业也有助于我的职业规划，让我对产品经理这个岗位有了更深刻的认识。

最后diss我的队友罗神（想看奶龙的可以点击一下），他对于作业的整体进度有着清晰的把控，很适合进行团队组织的工作，并且他在拿到题目的第一时间就开始制作整体的思路、方案以及分工。良好的沟通和分工其实是很提高工作效果和进度的，分工明确也能让我专心做自己的任务，并且我完全不需要担心他的工作进度和工作质量，这次合作也让我意识到了良好的协作的重要性，为下一次作业合作开发app打下基础。