2026 秋软件工程第三次作业:校园失物招领小程序(需求分析与原型设计)

作业信息

项目 内容
这个作业属于哪个课程 H202601 软件工程与软件工程实践
这个作业要求在哪里 2026 秋软件工程个人作业(第三次)
这个作业的目标 完成「校园失物招领」小程序的需求分析与原型设计,明确主要功能与用户流程,为后续编码打基础
学号 / 姓名 102402124 / 洪豊帧
成员二:学号 / 姓名 无(本次全部工作由本人独立完成)
原型工具 / 在线原型 墨刀(Modao)/ 点击查看在线原型

一、队伍分工

本次未找到搭档,全部工作由本人独立完成。为了不丢掉"配对"的好处,我把课程里的驾驶 / 领航做法保留下来: 每 40 分钟换一次角色——先当驾驶员动手画原型、写文档,再退回领航员视角,对着作业要求逐条查漏。

成员 学号 主要负责 同时参与
洪豊帧 102402124 需求分析、6 个页面原型、3 张流程图与演示动图、博客初稿 角色互换自查、原型走查、PSP 记录
(暂无搭档) 无 本次未组队 ——

二、软件构想与设计思路

我想做的不是"又一个群聊",而是一个公开、可检索的校园失物招领信息池: 捡到东西的人与丢了东西的人不用认识、也不用在同一个群,只要在同一个池子里"发一条、搜一下"就能接上。

读完《构建之法》第 3 章和第 6 章后,我把思路收敛成三条原则:

  1. 需求先落在场景里:先写清"谁、什么时候、遇到什么问题",再决定做不做某个功能;
  2. 范围要克制:只做"发布 → 检索 → 联系"这条最小闭环,后台管理、实名认证、即时聊天、地图定位明确不做;
  3. 流程要简单:发布不超过 3 步,首页一屏内看到搜索框、分类和信息流。

产品骨架因此是一条时间流:首页信息流(浏览 / 搜索)→ 详情页 → 发布页 → 我的发布。

三、需求分析

(1)主要用户及其需求

用户 典型场景 核心诉求
失主:丢了东西的同学 在图书馆丢了钥匙,当天就想找回来 快速知道"有没有人捡到",并且能马上联系上对方
拾得者:捡到东西的同学 在教学楼捡到一张校园卡 一次把时间、地点、描述写清楚,尽快物归原主
顺路浏览的同学 午休、睡前顺手刷一刷 不想翻聊天记录,搜一下就知道有没有自己的东西

(2)软件主要解决什么问题

现状是把信息发到班级群、宿舍群、朋友圈:信息分散、跨班级看不到、被新消息顶掉、想找只能翻聊天记录。

要解决的是三件事:集中发布(一个地方看全校失物招领)、 关键词检索(按物品名称直接搜)、状态可更新(归还后标记"已归还")。

四、主要功能

功能 说明 优先级
浏览失物和招领信息 首页信息流按时间倒序;顶部可切换「全部 / 招领 / 寻物」 P0
发布寻物信息 选「寻物」类型,填写丢失物品的名称、类型、地点、时间 P0
发布招领信息 选「招领」类型,填写拾取到的物品信息 P0
搜索物品 按物品名称等关键词搜索,命中标题与描述 P0
查看物品详情 图片、时间、地点、状态、描述、联系方式 P0
修改信息状态 待认领 / 寻找中 / 已归还 / 已找到 P1
我的发布(附加) 集中管理自己发布的信息,可修改状态与删除 P1

前 6 项覆盖了作业要求列出的功能点;「我的发布」是补充项,解决"发错了、已归还没法改"的问题。 寻物用橙色、招领用绿色,扫一眼就能分辨。

五、用户使用流程

1. 查看信息 → 查看详情

首页浏览信息 → 点卡片「点击查看详情」→ 详情页看图片、地点、时间、状态、描述和联系方式 → 点「联系发布者」。

同一张图的 mermaid 源码(博客园可直接渲染):

graph TDA([开始]) --> B[进入首页,浏览最新寻物 / 招领信息]B --> C[选择感兴趣的信息]C --> D[点击「查看详情」]D --> E[进入信息详情页]E --> F[查看图片、时间、地点、状态、描述和联系方式]F --> G[点击「联系发布者」]G --> H([结束])

2. 发布信息 → 发布成功

点首页「+ 发布」→ 选类型 → 填名称、地点、时间 → 上传照片、填联系方式 → 点「发布」→ 进入发布成功页。

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

点首页搜索框 → 输入关键词(如"校园卡")→ 查看结果列表;结果为空时提示更换关键词。

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

动图按「首页 → 信息详情 → 发布信息 → 发布成功 → 搜索物品 → 我的发布」循环播放,每帧停 1.4 秒, 正好走完上面三条基本流程;同一个原型在 prototype/index.html 里可以真实点击走一遍。

六、原型设计

1. 原型工具与在线链接

原型使用 墨刀(Modao) 制作,在线链接:https://modao.cc/proto/5AmeweAStm2iuwqkXScZBn/sharing?view_mode=read_only&screen=rbpVWVSUILF2FBjjF

链接是墨刀的只读分享链接,无需登录即可打开;点页面里的卡片、按钮和底部导航,

就能走完「查看信息→查看详情 / 发布信息→发布成功 / 搜索物品→查看搜索结果」三条主流程。

prototype/index.html 是同一份尺寸稿的 HTML 版可点击原型,双击也能演示主流程与必填校验等分支。

2. 页面清单

作业要求至少包含首页、发布信息、搜索、信息详情;我们另补了「发布成功」「我的发布」。

首页(信息流 + 搜索入口 + 分类) 信息详情页(图片/时间/地点/状态/描述/联系方式)
发布信息页(寻物 / 招领 + 表单) 发布成功页(结果反馈 + 信息预览)
搜索页(关键词 + 结果 + 空状态提示) 我的发布(修改状态 / 标记已归还)

设计上把握三点:首页一屏给全入口;详情页按"是不是我的东西"排序; 状态用颜色加文案双重表达(待认领绿、寻找中橙、已归还灰)。

3. 三条基本流程在原型中的走法

流程 起点 中间 终点
查看信息 → 查看详情 首页信息流 点击卡片「点击查看详情」 信息详情页,点「联系发布者」
发布信息 → 发布成功 首页「+ 发布」 选类型 → 填表单 → 点亮「发布」 发布成功页,可去「我的发布」
搜索物品 → 查看搜索结果 首页顶部搜索框 输入"校园卡" → 查看结果列表 结果列表,点任一结果进详情页

4. 交互反馈与异常状态

原型不只有"一路顺利"的路径:下面几种打断情况都给了明确反馈,在 prototype/index.html 里点对应按钮就能看到 (发布页的「清空试试 ›」用来演示"必填项未填")。

状态 触发场景 界面反馈
搜索结果为空 关键词没有命中任何信息 结果列表底部提示"没有更多结果了,换个关键词试试?"
必填项未填 发布时"物品名称"等带 * 的字段为空 「发 布」按钮置灰,字段旁红字提示;点击不跳转,弹出"请先填写必填项"
已加载全部 首页信息流翻到底 列表底部显示"已加载全部 · 共 126 条信息",不再继续加载
发布成功 表单提交成功 跳转发布成功页:对勾 + 信息预览 + 「查看我的发布 / 返回首页」
状态修改成功 在详情页或「我的发布」改状态 提示"已标记为「已归还」",详情页状态标签同步变灰
联系方式保护 点「联系发布者」 复制联系方式并提示,不在详情页直接摊开号码

七、结对过程(本次为单人独立完成)

本次未组队,由本人独立完成;为了避免"自己骗自己",我把角色拆成两步走:先做(驾驶),再退回检查(领航)。

日期 阶段 做了什么 产出
09-23 读题与需求 逐条读要求,圈出"必须做"与"明确不做",梳理用户与痛点 要求清单、需求分析
09-25 设计与原型 定页面结构、状态与配色,搭 6 个页面并拉通 3 条主流程 原型图、可点击原型
09-27 评审与提交 退回"领航员"视角自查是否覆盖要求第 4、5 条,核对字数与错别字 修改记录

图 1:做原型时的界面——在墨刀里调「发布成功」页,并顺手把「分享」面板的連結權限设为 「所有人」(对应作业要求第 2 条的可分享原型、第 11 条的过程截图)。

图 2:画流程图的过程——在画布上摆节点、连「是」分支、再补上「否 · 必填校验」分支的草稿; 「五、用户使用流程」里的 3 张流程图就是照这张草稿画的(脚本可复现,见文末配套文件)。

两个最有价值的发现都来自"退回检查"这一步:失物与招领不该做成两个独立入口(用户只关心"有没有我的东西"), 以及详情页直接展示联系方式会泄露隐私(改为仅登录可见)。文档与原型源文件按作业要求第 15 条用 GitHub 管理。

八、PSP 表格

说明:「预估」是开工前估的;「实际」是提交前回填的真实投入——预估 490 分钟、实际 650 分钟, 多出来的时间几乎都在没做过的事情上(原型细节打磨、插图和字数自检),与 docs/PSP.md 是同一份数据。

阶段 任务 预估(分钟) 实际(分钟) 说明
计划 读作业要求、读《构建之法》第 3、6 章、拆需求;定范围与分工 50 65 圈出 15 条要求与"不做"清单,比预估多 15 分钟
需求 用户与痛点、用户故事、用例与功能清单、非功能需求 70 95 4 类用户、7 条用户故事、4 个用例;入口拆分返工一次
设计 页面结构与信息架构、状态与配色约定 45 40 首页/搜索/详情/发布/成功/我的,比预估省 5 分钟
原型 必需 4 个页面(首页、发布、搜索、详情) 90 130 配色与间距调三轮 + 详情页为隐私重排,最花时间
原型 补充「发布成功」「我的发布」 40 55 成功页要兼顾「分享」引导,改了两版
原型 流程图 3 张 45 70 查看信息 / 发布信息 / 搜索;第一张漏「否」分支重画一次
测试 三条主流程逐条走查;必填校验、状态切换等分支回归 30 45 渲染 + 交互共 12 项断言,图片做像素自检
文档 博客初稿(800–1200 字 + 插图) 60 85 插图尺寸要统一 + 正文压进 1200 字,来回改三次
文档 自查评审、改错别字与排版 30 40 无搭档,改成对着 15 条要求逐条自查、改错别字
总结 个人总结 30 25 顺着前面的返工记录写,比预估快
合计 490 650 约 10.8 小时(比预估多 33%)

九、个人总结

洪豊帧(学号 102402124)

最大的收获是明白了需求分析到底在做什么。我一开始把"失物"和"招领"做成两个独立入口,总觉得别扭;

后来按《构建之法》的方法先写"谁、在什么场景下、遇到什么问题",才反应过来用户只关心"有没有我的东西",

于是合并成一条信息流加类型筛选。

第二点是"退回检查"能挡住自己的盲区。画完原型容易顺着自己的思路看下去,换成"领航员"视角

对着 15 条要求逐条查漏,才发现发布表单要滚动两次才点得到"发布"、详情页摊开联系方式有隐私风险;

画流程图时又发现"搜索无结果"这条分支完全没写——用户搜不到会以为程序坏了,补上"提示更换关键词"。

取舍上,功能列了十几个只留 P0 六项,标准是"不做这一项,用户的困扰还算不算解决";

PSP 里预估 490 分钟、实际 650 分钟,多出来的几乎都在没做过的事上(原型细节、图片与字数自检)。

下次我会先写验收标准再动手,并把重复劳动继续脚本化。

附:本次作业的配套文件

文件 内容
docs/需求分析.md 完整的用户画像、用户故事、用例、功能清单与非功能需求
prototype/screenshots/ 6 张原型图 + 3 张流程图 + 1 张主流程演示动图(博客插图的原始文件;另有两张过程截图直接放在 blog/img/)
prototype/index.html 可点击原型(与墨刀版同一份尺寸稿),双击即可演示三条主流程与必填校验等分支
墨刀在线原型 https://modao.cc/proto/5AmeweAStm2iuwqkXScZBn/sharing?view_mode=read_only&screen=rbpVWVSUILF2FBjjF(只读分享,无需登录)
prototype/prototype.py、flowcharts.py、demo_gif.py 原型图、流程图、演示动图的生成脚本(可复现,便于迭代)
tools/ 一键重建与自检脚本(build.py、过程截图准备、图片像素探针、字数统计、原型渲染回归)
docs/PSP.md PSP 时间记录的完整版
docs/结对过程.md 制作过程记录(含过程截图与 GitHub 提交记录的说明)