软工第一次结队作业

【结对作业 1】校园失物招领小程序——需求分析与原型设计

软件工程与实践 · 结对作业（2 人）· 2026-09-27

这个作业属于哪个课程	2026-01软件工程与软件工程实践
这个作业的要求在哪里	结对作业一：需求分析与原型设计
这个作业的目标	阅读《构建之法》第 3、8 章，掌握结对合作、需求分析与原型设计的基本方法，完成校园失物招领小程序的需求分析与原型设计。
原型设计链接	https://www.figma.com/design/KPqFvrd9Oxx7eYWWf9XBzw/Untitled?node-id=0-1\&t=r06FBSLSoAZMoy3J-1
结对成员	102402150 周子钦、102402148 周凯

一、问题分析

校园里丢东西几乎每天都在发生：校园卡、钥匙、水杯、雨伞、耳机、教材。目前同学们靠班级群、宿舍群和朋友圈发布信息，我们分析出三个痛点：信息分散，捡到校园卡的同学发在班级群，丢卡的同学可能在另一个群，两边碰不上；容易被覆盖，群消息不断刷新，几小时前发的信息很快被顶走；无法检索，想找"有没有人捡到校园卡"只能翻聊天记录。

问题的本质是：信息发布方和信息需求方不在同一个信息通道里。因此本软件不做即时聊天、不做地图定位，只聚焦把散落的寻物与招领信息集中到一个可按关键词检索的地方。

二、用户与需求分析

用户角色	典型场景	核心需求
失主	在食堂丢了校园卡	发布寻物启事；按名称搜索；看详情后联系对方
拾得者	在教室捡到校园卡	发布失物招领；写清地点与时间；留联系方式
浏览者	随手翻一翻	按类型浏览最新信息；点开查看详情

三类用户的共同诉求是发布要快、查找要准、联系要直接，因此主路径控制在 3 步以内。

三、主要功能

浏览失物与招领信息（首页分类列表）／发布失物招领信息／发布寻物信息／按关键词搜索（支持类型、地点、时间三项筛选）／查看物品详情／修改信息状态（归还后标记"已归还"，自动从首页隐藏）／我的发布（含管理账号入口）。前五项为本次原型重点演示的功能。

其中"发布失物招领"与"发布寻物"做成两个独立页面：两者要填的信息不同（招领填"拾取地点/拾取时间"，寻物填"丢失地点/丢失时间"），配色也要区分（招领绿、寻物橙），合在一页里容易填错；分成两页后各自默认停在对应类型，页内还能一键互切。

四、基本使用流程

• 浏览：进入首页 → 浏览失物/招领列表 → 点击信息 → 查看详情 → 联系发布者
• 发布（招领）：进入发布页 → 默认停在「拾到物品 · 我来招领」→ 填写信息 → 必填校验 → 发布成功
• 发布（寻物）：进入发布页 → 点「丢失物品 · 我来寻找」切到寻物页 → 填写信息 → 必填校验 → 发布成功
• 搜索：首页搜索框 → 输入关键词 → 用类型/地点/时间筛选 → 查看搜索结果 → 查看详情

两条发布流程走的是两个页面，但页顶的两张类型卡互为入口：在招领页点"丢失物品"即跳到寻物页，反之亦然，因此用户不必先想清楚该走哪条路径。

五、原型设计

原型开发工具：Figma（在线协作设计工具）。 我们按 Figma 的组件化与 Auto Layout 规范设计：先定义颜色、字号、间距等设计变量（主色 #07C160 表示失物招领、#FF8A3D 表示寻物启事，统一 8pt 栅格与圆角），再抽出"信息卡片""状态标签""表单行""底部导航"等可复用组件，最后拼装出 7 个 375×812 的页面画框（Frame）。改一处组件即全页面同步，也方便第二次作业按同一规范实现代码。

在线原型链接：https://www.figma.com/design/KPqFvrd9Oxx7eYWWf9XBzw/Untitled?node-id=0-1\&t=r06FBSLSoAZMoy3J-1

打开后是 7 个手机画框并排的画布（首页、搜索页、发布页·招领、发布页·寻物、发布成功页、信息详情页、我的发布页），页与页之间共有 18 条交互连线。点右上角 ▶ Present 进入演示模式即可在手机壳里点击跳转，从首页出发可走通"查看详情""搜索""发布招领""发布寻物"四条流程。链接已设为"知道链接的任何人可查看"，无需登录 Figma 账号。

各页要点如下：

页面	要点
① 首页	品牌色渐变头部铺满画框顶端（状态栏白字叠在色块内）、标题与副标题、胶囊搜索框、分类筛选「全部 / 证件卡类 / 电子设备 / 钥匙 / 水杯」、「最新信息 · 查看全部」区块、5 条信息卡片、底部三项导航
② 搜索页	搜索栏（返回 + 关键词「校园卡」+ 清除 + 取消）、类型/地点/时间三个筛选胶囊、结果提示「为你找到 6 条与「校园卡」相关的信息」、6 条结果卡片、底部引导卡「没找到你丢失的物品？」
③a 发布页·招领	类型卡「拾到物品 · 我来招领」为激活态（绿）、6 项表单（物品名称 / 分类 / 拾取地点 / 拾取时间 / 联系方式 / 详细描述）、上传图片、温馨提示、绿色发布按钮
③b 发布页·寻物	结构同上，激活卡为「丢失物品 · 我来寻找」（橙）、字段改为"丢失地点 / 丢失时间"、上传区留空（丢了东西通常还没有照片）、发布按钮为橙色
④ 发布成功页	圆形对勾、"发布成功"、说明文案、「查看我发布的信息」与「返回首页」两个按钮，整块垂直居中
⑤ 信息详情页	图片区与"待认领"标签、发帖人信息、分类/地点/时间/状态四项属性、详细描述、底栏「收藏」与「联系发布者」
⑥ 我的发布页	渐变头部（头像、姓名学号、管理账号入口）、统计卡「5 我的发布 / 3 待处理 / 2 已归还」、「我的发布」区块、5 条信息卡片、底部三项导航

底部导航中间是凸出栏顶的"发布"悬浮按钮——做成凸起是为了让最常用的操作有更大的点击区域（直径 44px，符合移动端最小舒适点击区），同时下半截仍嵌在导航栏里、不会显得突兀。

六、PSP 表格

阶段	任务	预估耗时（分钟）	实际耗时（分钟）
需求分析	梳理用户角色与痛点、确定功能范围	50	60
设计	绘制流程图、确定页面跳转关系	25	30
设计	原型工具选型与规范学习	20	15
原型	定义设计变量与可复用组件	25	30
原型	绘制 7 个页面	105	135
原型	交互连线（18 条）与演示调试	35	40
文档	博客撰写与排版	40	50
沟通	结对讨论与互相评审	30	40
合计		330	400

页面绘制的实际耗时比预估高出 29%，因为我们低估了统一视觉规范所花的时间。

七、结对过程记录

我们的结对方式是一起定规范、分头画页面、交叉查问题，全程在同一份 Figma 文件里实时协作，改动随时互相可见，不用来回传文件对版本。

一开始一起把客户描述拆成三个痛点，就是否加入"即时聊天""地图定位"争论了几轮，最后对齐到"客户说的是信息分散，不是联系不方便"，决定砍掉，据此画出主干流程图。规范定下来之后分头绘制各自负责的页面——先把颜色、字号、间距和组件模板统一，所以两人画的部分拼在一起基本不用返工。中途走查时发现一个设计问题：原本只做一页发布页、用两个选项切换类型，但寻物和招领要填的字段其实不同（拾取时间 vs 丢失时间），挤在一页里容易填错，于是当场拆成两个独立页面，各自配色。最后交叉走查对方的页面，统一圆角、间距与文案，连好 18 条交互，再按四条流程逐条演示验证。

这套流程下来，时间主要花在前期把规范对齐上，规范定死之后各自出页面的速度明显更快，交叉走查也几乎没发现低级错误。

八、个人总结

周子钦（102402150）：最大的收获是学会做减法。我最初想把即时聊天和地图定位都做进去，队友提醒我"客户说的是信息分散，不是联系不方便"，我们才回头对齐需求；砍掉之后主路径缩到 3 步以内，第二次作业实现起来也轻松。遇到的困难是时间预估过于乐观：以为画 7 个页面只要 105 分钟，实际用了 135 分钟，多花在"卡片间距是 8 还是 12"这类细节上，教训是先把规范定死再动手。这次也第一次体会到组件的价值——改了信息卡片，首页、搜索结果、我的发布三处同步更新；招领与寻物两页发布页由同一套组件复制而来，只改了配色和字段文案就完成，省下一半工作量。
周凯（102402148）：我负责主干流程图和「我的发布」页，最大的体会是信息架构比视觉更值得先想清楚。第一版流程图我是按"一条直线"画的：首页 → 列表 → 详情，画完觉得挺清楚。交叉走查时才发现不对——「搜索」其实是首页分出的另一条支路，详情页既可能来自首页列表、也可能来自搜索结果，发布成功后还要能回到「我的发布」。改成有分支的结构之后，四条流程（浏览 / 搜索 / 发布招领 / 发布寻物）和 18 条连线一眼就能看明白，后面拼页面几乎没返工。流程图没画对就动页面，等于把错误放大七遍。