这个作业属于哪个课程 前往班级
这个作业要求在哪里 前往查看
这个作业的目标 完成校园失物招领小程序的需求分析与原型设计
队员1学号姓名 102401309 叶凯乐
队员2学号姓名 102401234 黄俊凡
原型在线链接 前往查看（Figma） （如有黑屏请切换浏览器）

一、结对分工

角色 任务
叶凯乐 需求分析、用户角色与场景、功能列表、流程图绘制
黄俊凡 原型设计、Figma页面制作、交互链接、截图
协同 需求讨论、确定功能边界、互审原型、撰写博客主体、PSP

二、需求分析

2.1 用户角色

角色 特征 核心需求
失主 丢失物品的同学，可能在教学楼、食堂、图书馆等场所遗落 发布寻物信息、搜索招领信息、快速联系拾获者
拾获者 捡到物品的同学，希望尽快找到失主 发布招领信息、接收失主联系、归还后更新状态

2.2 痛点分析

  • 信息分散： 拾获者与失主往往不在同一个群，消息难以互相触达
  • 信息沉没： 群聊消息不断更新，之前发布的信息很快被覆盖，事后查找不便
  • 触达受限： 发布范围受社交圈限制——在教学楼捡到校园卡的同学只能发在自己的班级群，失主很可能根本看不到

2.3 核心功能列表

功能 说明
浏览失物和招领信息 首页信息流，支持“全部/寻物/招领”分类筛选
发布寻物信息 填写物品名称、地点、时间、描述、联系方式后发布
发布招领信息 同上，信息类型选择“招领”
搜索物品 按关键词匹配标题、地点、描述
查看物品详情 展示完整信息与联系方式
修改信息状态 在“我的发布”中标记为已解决
我的发布 集中管理自己发布的信息

聊天、地图定位、实名认证、后台管理不纳入本次原型

三、流程图设计

流程一：查看信息 - 查看详情

graph TD A[进入首页] --> B{浏览或搜索} B -->|浏览| C[信息列表] B -->|搜索| D[输入关键词] D --> E[搜索结果] C --> F[点击卡片查看详情] E --> F F --> G[查看完整信息与联系方式] G --> H[联系发布者]

流程二：发布信息 - 发布成功

graph TD A[点击发布按钮] --> B[选择类型：寻物/招领] B --> C[填写物品信息] C --> D{必填项是否完整?} D -->|否| E[提示补填缺失项] E --> C D -->|是| F[点击发布] F --> G[发布成功] G --> H[查看我的发布 或 返回首页]

流程三：搜索物品 - 查看搜索结果

graph TD A[进入搜索页] --> B[输入关键词] B --> C{是否有匹配结果?} C -->|有| D[展示结果列表] D --> E[点击查看详情] C -->|无| F[提示无结果，建议换关键词]

流程四：我的发布—查看与修改信息

graph TD A[进入我的发布] --> B{选择操作} B -->|修改状态| C[标记已找回或已归还] C --> D[更新物品状态] B -->|查看信息| E[点击物品卡片] E --> F[查看我的发布详情] F --> G[点击编辑信息] G --> H[修改物品资料] H --> I{用户操作} I -->|保存修改| J[确认保存] J -->|取消| H J -->|确认| K[保存成功] K --> F I -->|返回| L{是否有未保存修改} L -->|否| F L -->|是| M[显示未保存提醒] M -->|继续编辑| H M -->|放弃修改| F M -->|保存并离开| J

四、流程展示

在信息浏览流程中，用户可以通过首页分类或关键词搜索查找物品，进入详情页查看地点、时间、物品描述及发布者联系方式。

{8B5E0245-5DFC-4B66-8621-3AB79C9384AE}

在信息发布流程中，用户选择寻物或招领类型，填写物品资料后进入发布成功页面，并可返回首页或查看个人发布记录。

image

在搜索流程中，以“校园卡”为例，原型展示了从关键词搜索、结果列表到信息详情的操作过程。

{7CA27859-6DEC-401C-B660-920A9FAEEE94}

此外，我们进一步补充了个人发布信息的查看与编辑流程，设计了保存确认、保存成功及未保存离开提醒等交互状态，使原型能够更完整地表达发布后的信息管理需求。

{06B2A6B3-FFBA-4A75-BC7A-0E3087203F38}

五、原型设计

5.1 原型工具与在线链接

本次作业采用 Figma 进行原型设计，使用 Figma Agent 辅助生成初始界面，并通过人工调整、组件设计和 Prototype 交互连接完善原型。

Figma 支持多人在线协作，便于两名成员共同修改、检查设计。同时，原型可通过在线链接展示，无须编写程序即可模拟用户操作。

原型展示链接： 校园失物招领小程序原型

5.2 页面说明与截图

根据需求分析，我们设计了首页、发布信息、发布成功、搜索、搜索结果、信息详情及我的发布等主要页面，整体采用统一的蓝白配色和卡片式布局。

主要页面功能如下：

页面 主要功能
首页 浏览寻物与招领信息，进入搜索或发布页面
发布信息 填写物品名称、分类、地点、时间、描述及联系方式
发布成功 展示发布结果，支持返回首页或查看个人发布
搜索及搜索结果 根据关键词查找相关物品信息
信息详情 展示物品完整信息及发布者联系方式
我的发布 查看个人发布的信息，修改物品状态
我的发布详情与编辑 查看、修改已发布的物品信息，并保存

主要功能页面总览

主要功能页面总览

5.3 走查与修改

构建主要的几个页面（首页、搜索、发布）后，我们人工检查页面布局、字段完整性及交互流程，并补充了“我的发布”等功能。

页面布局的检查
image

在状态修改功能的走查中，我们发现：最初采用多个完整页面模拟“寻找中”“已找回”等状态，切换寻物与招领页面后，可能重新显示修改前的信息。

针对这一问题，我们将蓝牙耳机和水杯设计为交互组件，利用不同变体表示物品状态，通过 Change to 实现卡片内部状态切换，将物品状态变化与页面导航分离。

初期使用完整页面模拟状态变化

原先的状态页面

改进后的组件变体设计

组件化状态管理

与同伴检查沟通过后，我们决定添加修改信息的功能。原型中在发布页面可点击相应的物品卡片，修改自己的失物与待招领物品信息

{7EC0406A-9ED0-46EA-9D17-D48CC7139C4A}

我们补充了个人发布信息的查看与编辑页面，并设计了保存确认、未保存离开提醒等交互状态。

最后通过 Prototype 连接页面，在演示模式中检查信息浏览、发布、搜索、状态修改及返回等基本流程。

我的发布与编辑页面

通过本次走查，我们认识到原型设计不仅需要关注界面外观，还应考虑操作逻辑、状态一致性和后续实现的可行性。

六、PSP表格

任务 预估耗时 实际耗时 差异
阅读《构建之法》第3、8章 1h 0.5h -0.5h
需求分析 1h 1h 0
流程图绘制 2h 1h -1h
Figma原型制作 4h 3.5h -0.5h
走查与修正 1h 2h +1h
博客撰写 1h 1h 0
合计 10h 9h -1h

七、个人总结

  • 本次结对作业实践了需求分析到原型设计的全流程，通过《构建之法》对应章节熟悉了需求模型分析的考量要点，以问题为导向对场景及其主体可能面对问题分析并提出解决方案，阶段产物包含用户角色表、典型场景表述、功能列表与流程图，运用mermaid绘制流程图.

  • 运用Figma作为原型设计工具，根据对应结果对原型设计研究其风格、功能、结构与要素，同时保持简洁性以便于后续扩展与编码，具体到设计稿，明确“页面类型 - 目标用户 - 内容模块 - 风格约束 - 组件约束 - 可编辑要求”。

  • 对于后续进一步开发，需要考虑数据库设计与路由设计