🐰 小物件,大温暖:校园失物招领小程序结对原型设计

项目 内容
这个作业属于哪个课程 H202601软件工程与软件工程实践
这个作业的要求在哪里 2026秋软件工程个人作业(第三次)
这个作业的目标 完成需求分析和原型设计
结队成员 052402111林诗怡,102402106赖彦然

原型工具:墨刀(在线链接:点击此处查看墨刀高保真原型)


⭐ 一、 需求分析:从痛点到产品(NABCD模型)

在校园生活中,物品遗失是高频痛点。现有的解决方案主要依赖班级群、QQ群、贴吧、表白墙等渠道,存在信息碎片化、时效性差、无法检索、联系方式暴露与失联等致命缺陷。基于《构建之法》第3章的需求分析方法,我们采用NABCD模型对产品进行了重新定位:

  • N (Need 需求):学生不仅需要一个“发布信息”的地方,更需要一个“能精准搜索、安全认领、状态透明”的闭环平台。典型用户如“丢东西的学生”和“捡到东西的学生”,核心诉求分别是“尽快发布寻物信息”和“低成本地把信息发出去”;辅导员/学生干部则希望信息集中沉淀、可检索、可统计;校园管理人员需要审核信息合规性、处理举报。
  • A (Approach 做法):我们设计了“关键词搜索 + 类型/地点/时间三维筛选”的检索机制;引入“实名认证 + 一键复制联系方式”平衡隐私与可达性;发布者可随时修改状态为“已找到”,信息自动从列表隐藏。
  • B (Benefit 好处):将信息从“时效性极强的群聊”转移到“结构化、持久化的数据库”中,用一个集中的信息池替代分散的群聊刷屏,用结构化字段 + 多维筛选替代翻聊天记录,预计可将校园失物找回率提升50%以上。
  • C (Competitors 竞争):对比传统校园墙、表白墙,本小程序更垂直、更轻量,且具备状态追踪(进行中/已完成)功能,信息不会随时间沉底;同时配套Web管理后台,具备审核、驳回、下架、处理举报等能力,这是传统渠道完全不具备的。
  • D (Delivery 推广):通过校内社团合作、图书馆/食堂扫码海报、以及辅导员在年级群进行冷启动推广。
  • 用户画像(Persona):如下表所列举
用户角色 典型场景 核心诉求
丢东西的学生(主要用户) 在食堂丢了校园卡、在教室落下水杯和耳机 尽快发布寻物信息,让拾到者能联系上自己
捡到东西的学生(主要用户) 在操场捡到钥匙串、在图书馆捡到书包 低成本地把信息发出去,不用在群里反复刷屏
辅导员 / 学生干部(次要用户) 班群、年级群常有人发失物信息 信息集中沉淀,可检索、可统计
校园管理人员(后台用户) 需要审核信息合规性、处理举报 有问题信息能下架、有纠纷能追溯

🧩 二、 原型设计:高保真与极致体验

本次原型设计采用 墨刀 制作,遵循了标准的设计系统(Design System)规范(统一的主色调、字体层级、8px网格间距),并使用了Auto Layout(自动布局)和组件变体,确保交互流畅。视觉上使用淡紫 #8B6FE8 + 薄荷绿 #3ECFA0 双色配色,搭配自绘的3D软萌插画素材,降低了“失物招领”这类工具型产品的严肃感,更贴合校园用户的使用习惯。原型共包含5个核心页面:


原型工具:墨刀(在线链接:点击此处查看墨刀高保真原型)


1. 首页(Home):

* 顶部为搜索栏和“全部/寻物/招领”标签切换。
* 主体采用卡片流布局,展示物品类别图标、标题、地点、时间与状态标签。
* 嵌入校园3D插画地图,展示福大风貌
* 搜索栏点击进去后,搜索页可按标签筛选
* 卡片点击,可查看物品详情。发布用户可修改自发布状态,可查看其他用户的联系方式
* 设计决策:列表卡片统一显示类别图标而非用户上传的照片,保证首页视觉一致。


首页



2. 发布信息页(Publish):

* 提供寻物和招领双入口。
* 表单设计极简:支持一键上传图片(最多3张,云端存储)、选择物品分类(证件、电子产品、生活用品等)、输入丢失/拾获地点与时间。
* 发布后可选择查看详情或返回首页
* 特殊设计:招领发布支持 AI拍照识别——直接调起相机拍照,云端视觉大模型自动识别物品名称、外观描述与所属类别并回填表单(只填空着的字段,不覆盖已填内容),大幅降低填写成本。


发布



3. 我的(My Posts):

* 管理个人发布的信息:我的发布。点击进去后,可对已发布信息进行修改和删除操作。
* 实名认证:未实名认证的用户可浏览,但不可发布。认证信息包括:真实姓名,学号,学院/班级,手机号,学生证照片
* 可修改个人信息:用户名和头像可修改,支持同学们的个性化展示。

我的



4. 真实交互模型展示:

微信图片_2026-09-27_164254_307_副本


🏊‍♀️ 三、 业务流程设计(泳道图)

为了清晰展示软件的闭环逻辑,我们使用Draw.io绘制了核心业务流程的泳道图(区分“失主”与“拾主”),以下是核心流程的文字描述:


  1. 浏览与搜索流程:
    进入首页 → 浏览信息列表 / 点击地点气泡 / 进入搜索页(关键词/类型/地点/时间筛选) → 查看物品详情 → 联系发布者(复制联系方式) → 线下确认归还 → 发布者标记“已找到”。

泳道图1(新)

  1. 发布信息流程:
    进入发布页 → 选择类型(寻物/招领) → 填写物品信息(名称/描述/地点/日期/类别) → 拍照上传(可选,AI自动识别填充) → 点击发布 → 提交成功进入待审核 → 管理员审核通过 → 首页可见。

泳道图2

  1. 新用户首次使用路径:
    打开小程序 → 进入首页(可直接浏览) → 尝试发布信息 → 提示需要实名认证 → 填写认证资料 → 等待审核 → 认证通过 → 返回发布页 → 完成发布。

泳道图3

  1. 信息完整生命周期:
    发布者提交 → 待审核 → 管理员审核 → 审核通过(首页/搜索可见)/ 审核驳回 → 被查看详情、被联系、被编辑 → 发布者标记“已完成” → 从列表隐藏(详情仍可查看)。

泳道图4


🛠️ 四、 结对过程与协作

本次结对作业,我们为了提高效率,采取线下共同作业。汇合,一边探讨一边同时操作,共同编写博客。
image
image


📋 五、 PSP(个人软件过程)表格

任务阶段 具体任务 预估耗时 (min) 实际耗时 (min)
需求分析 调研校园痛点,建立NABCD模型,绘制用户画像 60 80
原型设计 墨刀高保真UI设计、交互连线、AI识别流程设计 180 250
流程设计 Draw.io绘制泳道图与信息生命周期流程图 45 40
文档撰写 撰写博客正文、PSP与个人总结 90 100
Review与修改 互相检查原型交互与博客排版 30 45
总计 405 515

(注:实际耗时高于预估,主要原因是对墨刀的Auto Layout组件化设计不够熟练,以及在后期的交互细节打磨上花费了较多时间)


🐰 六、 个人总结

102402106 赖彦然 的个人总结:

本次结对作业让我深刻理解了《构建之法》中“需求是迭代出来的”这一理念。我们在构建这个小程序模型的过程中,也在不断思考:怎么把这个失物招领做成同学们喜爱的,会使用的,能够在后续真正落地的小程序。最终,我们决定在视觉设计和功能方面做出创新。我主要负责需求分析与博客撰写,也参与了墨刀的UI界面交互设计,最大的收获是学会了用NABCD模型来结构化地表达产品价值,而不是仅仅罗列功能。遇到的困难是在墨刀中实现卡片状态切换的微交互,后来通过查阅官方文档和B站教程,学会了使用它强大的交互功能,这让我对原型工具的强大有了全新的认识。

052402111 林诗怡 的个人总结:

本次结对作业,我主要负责墨刀原型的设计制作,也参与了需求分析以及梳理业务流程。我们先挖掘校园失物招领的痛点,明确目标用户与核心功能,绘制用户操作流程图,再基于需求完成原型页面搭建。在设计过程中,我体会到需求是原型设计的基础,只有理清用户场景,页面逻辑才不会混乱。我们两人多次讨论打磨页面,简化操作步骤,同时采用组件化思路复用 UI 模块,方便协作维护。过程里我踩过坑:一开始想增加不少附加功能,让页面变得繁杂,后面回归核心场景,删减了非必要内容。这次实践让我完整经历了从需求分析到原型设计的软件前期设计流程,也感受到结对协作互相检查逻辑的好处。

posted @ 2026-09-27 19:08  Annabelle-Lin  阅读(48)  评论(0)    收藏  举报