第一次结对作业
| 项目 | 内容 |
|---|---|
| 这个作业属于哪个课程 | 2026-01 软件工程与软件工程实践班级博客 |
| 这个作业要求在哪里 | 2026秋软件工程个人作业(第三次) |
| 作业目标 | 完成「校园失物招领小程序」需求分析和原型设计 |
| 结对成员 | 102401217颜志航 102401139张智文 |
一、 作业背景与结对分工
本次结对作业阅读了《构建之法》第3章“两个人的合作”和第8章“需求分析”。第3章让我们明白了“驾驶员/领航员”结对模式的重要性,第8章则指导我们从用户痛点出发,用MVP(最小可行产品)思维做减法。
我们采用“驾驶员/领航员”方式结对:一人负责操作墨刀绘制原型,另一人负责对照需求检查流程,并定期轮换。我们选择的原型工具是墨刀,使用墨刀、组件、Auto Layout 和 Prototype 功能完成页面设计与跳转。
在线原型链接: https://modao.cc/proto/PcAhkFgtm0vri0LUnGpS/sharing?view_mode=read_only&screen=rbpVWQH8tVRH5hTBd


二、 用户需求分析
主要用户:校园学生,分为三类:
失主:丢失校园卡、钥匙、耳机等,希望快速发布寻物信息,并能搜索是否已有人招领。
拾得者:捡到物品后,希望用最少步骤发布招领信息,让失主联系自己。
浏览者:暂时没有发布需求,但会偶尔查看或搜索失物招领信息。
主要解决什么问题:
当前信息散落在班级群、宿舍群、朋友圈,容易被新消息覆盖,跨群传播有限,搜索困难。本软件主要解决“集中发布、分类浏览、关键词搜索、详情联系、状态更新”的问题。
三、 主要功能
本软件定位为简单、清晰、易用的 MVP,不实现后台管理、实名认证、即时聊天、地图定位等复杂功能。主要功能包括:
-
首页浏览:支持“全部”、“寻物启事”、“招领信息”三个标签切换,首页卡片展示缩略图、类型标签、状态标签、物品名称、描述及地点时间
-
搜索物品:顶部搜索框支持输入物品关键词,提供“历史搜索”记录和“热门搜索”标签(如钥匙、水杯、书籍、充电宝)快捷点击
-
发布信息:发布页顶部可切换“寻物启事”和“我要招领”,表单包含物品名称、物品描述、丢失/拾获地点、丢失/拾获时间、联系方式及图片上传
-
信息详情:详情页展示大图、状态标签、详细描述、地点时间,提供发布者联系方式(微信/QQ/手机号)及“一键复制”按钮,并支持“联系发布者”和“举报”
-
个人中心:“我的”页面展示用户的发布统计(已发布、已解决、进行中),并提供“我的发布”列表,支持状态管理
-
底部导航:底部固定导航栏包含“首页”、“发布”(中间大加号按钮)和“我的”三个入口
四、 基本使用流程
我们设计了清晰的使用路径,确保用户从进入首页到完成操作不超过三步。以下是核心流程图:
流程一:查看信息 → 查看详情 → 联系发布者
流程二:发布信息 → 填写表单 → 发布成功
流程三:搜索物品 → 查看搜索结果 → 查看详情

五、 原型页面设计
首页(浏览信息)

顶部区:蓝色背景,展示应用名称“校园失物招领”。
搜索区:提供全局搜索框,提示文字为“搜索物品名称,如:校园卡、钥匙、雨伞...”。
分类标签:支持“全部”、“寻物启事”、“招领信息”三个标签切换,方便用户快速筛选。
信息列表:以卡片流形式展示失物和招领信息。每张卡片包含物品缩略图(如校园卡、耳机、雨伞的3D图标)、类型标签(“寻物”/“招领”)、状态标签(“寻物中”/“待认领”/“已解决”)、物品名称、简要描述以及丢失/拾获地点和时间。
底部导航栏:包含“首页”、“发布”(中间突出的蓝色“+”号按钮)和“我的”三个入口。
搜索页面

顶部搜索区:提供输入框,右侧有“取消”按钮,方便用户快速退出搜索。
辅助搜索:下方提供“历史搜索”记录(如校园卡、雨伞、耳机)和“热门搜索”标签(如钥匙、水杯、书籍、充电宝),用户可以直接点击标签进行快捷搜索,减少输入成本。
发布信息页面

顶部导航:左侧返回箭头,中间标题“发布信息”。
类型切换:页面顶部提供“寻物启事”和“我要招领”两个Tab,用户发布前首先选择信息类型(默认选中“寻物启事”)。
表单字段:包含物品名称(如校园卡、钥匙)、物品描述(如颜色、品牌、明显标记)、丢失/拾获地点、丢失/拾获时间、联系方式(微信号/手机号)。
图片上传:提供虚线框“上传图片”,支持添加物品照片。
发布按钮:底部设有蓝色大圆角按钮“立即发布”。
信息详情页面

顶部导航:左侧返回箭头,标题“信息详情”。
图片展示区:占据较大区域,展示物品的3D大图或上传的照片。
核心信息:包含类型标签(“寻物启事”/“招领信息”)、状态标签(“寻物中”/“待认领”)、物品名称、详细描述、丢失/拾获地点、发布时间。
联系方式:展示发布者联系方式(如微信号、QQ号),并提供“复制”按钮,方便用户一键复制。
操作区:底部提供“举报”和蓝色按钮“联系发布者”。
我的(个人中心)

用户信息区:展示用户头像和欢迎语“同学你好”。
数据统计:展示“已发布”、“已解决”、“进行中”的数量统计(如3、1、2)。
我的发布列表:展示当前用户发布过的所有信息卡片,支持点击进入详情,也方便后续标记信息状态(如“已解决”、“已归还”)。
六、 PSP 表格
| 阶段 | 任务内容 | 预估耗时(分钟) | 实际耗时(分钟) |
|---|---|---|---|
| 计划 | 阅读资料与需求讨论 | 30 | 35 |
| 开发 | 需求分析(用户故事与MVP界定) | 40 | 45 |
| 开发 | 流程图绘制(业务流程与页面跳转) | 30 | 30 |
| 开发 | 原型设计(Figma 页面搭建与交互连线) | 120 | 150 |
| 报告 | 博客撰写与截图整理 | 60 | 70 |
| 报告 | 结对评审与修改 | 30 | 35 |
| 总计 | —— | 310 | 365 |
七、 结对过程记录
我们进行了三次主要讨论:
第一次:确定用户和核心痛点,砍掉聊天、地图、实名认证等功能,坚持 MVP 原则。
第二次:绘制查看、发布、搜索流程图,明确了发布流程要拆分出“选择类型”页面。
第三次:在墨刀中制作原型并互相评审。起初我们尝试用 AI 生成 HTML 导入插件,但因网络限制和图层混乱放弃,最终改为手动用 R(矩形)和 T(文字)在墨刀中搭建。这种“回归基础”的方式反而让图层结构更加干净,也让我们对布局有了更深的理解。
【此处插入结对讨论或原型评审截图】
八、后续开发计划
基于本次完成的需求分析与高保真原型设计,后续将按照先 MVP 落地、再迭代优化的软件开发思路,分阶段完成校园失物招领小程序的完整开发、测试与优化工作,整体开发分为数据库与后端搭建、前端功能开发、联调测试、迭代优化四个阶段。
第一阶段为基础环境与数据层搭建。将根据本次需求整理出用户表、物品信息表、搜索记录表等核心数据表结构,完成后端接口开发,实现信息新增、查询、修改、状态更新、删除等基础数据能力;同时搭建图片上传存储服务,为后续发布物品图文信息提供支撑。
第二阶段为前端核心功能开发。严格依照墨刀原型页面布局与交互逻辑,实现首页分类标签切换、物品卡片展示、关键词搜索、热门 / 历史搜索展示、清空搜索记录功能;完成发布页面双向类型切换、表单内容录入、图片上传校验、非空校验、发布提交功能;实现详情页大图展示、状态展示、联系方式一键复制、举报、联系发布者功能;完善个人中心数据统计、我的发布列表展示、物品状态管理功能,保证页面交互与原型完全一致。
第三阶段为前后端联调与功能测试。对所有业务流程进行完整闭环测试,包括信息发布、搜索查询、详情查看、复制联系、状态更新、记录清空等核心流程,修复页面 bug、接口异常、数据渲染错误等问题;适配手机端屏幕尺寸,优化页面加载速度、卡片布局、按钮交互体验,保证整体界面流畅统一。
第四阶段为版本迭代与功能优化。在 MVP 版本稳定运行的基础上,结合校园用户真实使用反馈进行轻量迭代,优化搜索匹配算法,提升关键词搜索准确度;完善信息状态流转逻辑,优化已解决、已归还的状态更新体验;同时规范代码结构、整理开发文档、优化系统容错能力,提升小程序整体稳定性与用户使用体验。
整体坚持《构建之法》MVP 开发理念,优先落地核心刚需功能,保证产品可用、好用,再逐步打磨细节、优化体验。
九、 个人总结
这次作业我先尝试了Figma,借助html.to.design插件粗浅地做了主页面和提交失物信息的基本模型,简化和缩短了我制作模型的过程。但是这个插件将HTML代码转换为模型的时候需要用到网络,在运行过程中屡次出现网络问题,我不得不使用队友推荐的墨刀进行后续制作。
我在本次结对中主要负责需求梳理和流程检查。我学会了用用户故事描述需求,也认识到原型应便于后续实现。遇到的问题主要是搜索和分类浏览的关系,最后确定“首页分类 + 搜索关键词”并行。通过 PSP 记录,我发现原型设计实际耗时高于预估,以后要预留更多修改时间。墨刀的协作功能也让结对评审更方便。这次作业让我明白,清晰的逻辑和良好的团队协作才是项目成功的核心。

浙公网安备 33010602011771号