第一次结对作业

项目 内容
这个作业属于哪个课程 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,不实现后台管理、实名认证、即时聊天、地图定位等复杂功能。主要功能包括:

  1. 首页浏览:支持“全部”、“寻物启事”、“招领信息”三个标签切换,首页卡片展示缩略图、类型标签、状态标签、物品名称、描述及地点时间

  2. 搜索物品:顶部搜索框支持输入物品关键词,提供“历史搜索”记录和“热门搜索”标签(如钥匙、水杯、书籍、充电宝)快捷点击

  3. 发布信息:发布页顶部可切换“寻物启事”和“我要招领”,表单包含物品名称、物品描述、丢失/拾获地点、丢失/拾获时间、联系方式及图片上传

  4. 信息详情:详情页展示大图、状态标签、详细描述、地点时间,提供发布者联系方式(微信/QQ/手机号)及“一键复制”按钮,并支持“联系发布者”和“举报”

  5. 个人中心:“我的”页面展示用户的发布统计(已发布、已解决、进行中),并提供“我的发布”列表,支持状态管理

  6. 底部导航:底部固定导航栏包含“首页”、“发布”(中间大加号按钮)和“我的”三个入口

四、 基本使用流程

我们设计了清晰的使用路径,确保用户从进入首页到完成操作不超过三步。以下是核心流程图:

流程一:查看信息 → 查看详情 → 联系发布者

流程二:发布信息 → 填写表单 → 发布成功

流程三:搜索物品 → 查看搜索结果 → 查看详情

流程图

五、 原型页面设计

首页(浏览信息)

首页原型

顶部区:蓝色背景,展示应用名称“校园失物招领”。

搜索区:提供全局搜索框,提示文字为“搜索物品名称,如:校园卡、钥匙、雨伞...”。

分类标签:支持“全部”、“寻物启事”、“招领信息”三个标签切换,方便用户快速筛选。

信息列表:以卡片流形式展示失物和招领信息。每张卡片包含物品缩略图(如校园卡、耳机、雨伞的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 记录,我发现原型设计实际耗时高于预估,以后要预留更多修改时间。墨刀的协作功能也让结对评审更方便。这次作业让我明白,清晰的逻辑和良好的团队协作才是项目成功的核心。

posted @ 2026-09-28 20:54  fzuyzh  阅读(3)  评论(0)    收藏  举报