软件工程课程第一次结对作业：生成小程序原型

一、作业信息

项目	内容
这个作业属于哪个课程	软件工程
这个作业要求在哪里	作业要求
这个作业的目标	结对完成小程序原型设计
姓名	张陈雨菲刘俊延
学号	102401208 102401133

二、作业之前：阅读《构建之法》

通过阅读《构建之法》第3章和第8章，我对软件工程师成长、结对合作、需求分析以及原型设计有了更深入的理解。第3章让我认识到，软件工程师不仅需要具备技术能力，还需要培养沟通能力、团队协作能力和解决问题的能力。在合作过程中，成员之间应该相互交流、及时反馈，通过复审等方式提高工作质量。第8章主要介绍了需求分析的方法，软件开发前需要充分了解用户需求，分析不同用户的实际问题，并对功能进行合理划分和优先级排序。原型设计则可以帮助团队提前展示软件功能和界面效果，验证需求是否符合用户期望。通过学习这些内容，我认识到一个优秀的软件项目不仅需要实现功能，更需要从用户角度出发，经过需求分析、设计和不断优化来完成。

三、原型介绍

3.1 原型图（高保真）

3.2 界面设计

原型包含以下界面：

首页：作为小程序的主要入口，展示“拾光校园”标题、搜索栏以及“我要寻物”“我要招领”两个核心入口，下方设置固定导航栏，方便用户快速进入不同功能。
我要寻物页面：展示用户发布的寻物信息以及已有招领信息，帮助丢失物品的用户优先查看是否有人发现自己的物品，如果没有找到，可以进入发布页面发布寻物信息。
我要招领页面：用户可以通过关键词搜索物品信息，并结合类型、地点等筛选条件，提高查找失物的效率。
搜索页面：棋盘、爱心、剩余箭头、用时、菜单按钮、提示按钮；
信息详情页面：展示单条失物或招领信息的详细内容，包括物品图片、名称、描述、时间、地点以及当前状态等信息。
发布信息页面：用户可以选择发布寻物或招领信息，并填写物品名称、图片、描述、时间、地点等相关内容，提交后生成对应信息。
发布成功页面：用于反馈用户信息发布完成，提示用户发布成功，并可以返回首页或查看自己的发布内容。
广场页面：集中展示校园内所有失物和招领信息，用户可以浏览不同类型的信息，并通过筛选查看对应内容。
我的页面：用户可以查看自己发布的寻物和招领信息，同时管理个人相关内容。
加载页面：模拟网络加载过程中的等待状态，在数据加载较慢时给予用户提示，提高使用体验。

3.3 流程演示

e.g.寻物流程

招领流程

底部导航栏进入发布页流程

3.4 主要用户及需求

本软件主要面向校园内的学生用户，主要包括物品丢失者和物品拾取者两类用户。

对于物品丢失者来说，他们需要快速查找自己遗失的校园卡、书籍、耳机、水杯等物品的信息，希望能够通过物品名称、类型等关键词进行搜索，并查看相关招领信息。如果暂时没有找到自己的物品，也需要一个方便的平台发布寻物信息。

对于物品拾取者来说，他们需要一个集中发布招领信息的平台，将捡到的物品信息发布出来，帮助失主及时找到丢失物品。

目前校园中的失物招领信息主要分散在班级群、宿舍群、朋友圈等渠道中，容易被聊天消息覆盖，导致信息难以查找，失主和拾取者之间难以及时匹配。

3.4 主要解决的问题

本软件主要解决校园失物信息分散、查找困难、信息匹配效率低等问题。通过提供信息发布、分类浏览、关键词搜索、详情查看等功能，将失物和招领信息集中管理，提高校园物品寻找和归还的效率。

3.5 主要功能

（1）浏览失物与招领信息

用户可以在“我要寻物”“我要招领”和“广场”页面浏览校园内发布的失物和招领信息，了解物品名称、图片、描述等内容，寻找自己丢失或拾取的物品。

（2）发布寻物信息

用户丢失物品后，可以通过发布页面填写物品名称、图片、描述、丢失时间、地点等信息，发布寻物信息，帮助其他同学发现并联系自己。

（3）发布招领信息

用户拾取到物品后，可以发布招领信息，填写物品相关内容，让丢失物品的同学能够通过搜索或浏览找到对应信息。

（4）搜索物品信息

用户可以在搜索页面输入物品关键词，并通过分类筛选等方式查找相关的寻物或招领信息，提高信息查找效率。

（5）查看物品详情

用户点击信息卡片后，可以进入详情页面查看物品的具体信息，包括物品图片、名称、描述、时间、地点以及当前状态等内容。

（6）信息分类筛选

系统提供寻物、招领等分类筛选功能，帮助用户快速区分不同类型的信息，减少查找时间。

（7）管理个人发布信息

用户可以通过“我的”页面查看自己发布过的寻物和招领信息，方便后续查看和管理。

（8）修改信息状态

当物品已经找到或归还后，用户可以修改信息状态，例如标记为“已完成”，避免其他用户重复查看无效信息。

四、PSP 表格

任务	预估耗时（小时）	实际耗时（小时）	差异（小时）
明确作业要求，确定整体设计方向	0.5	0.5	0
分析场景，确定需求和主要功能	0.5	0.5	0
UI设计	2	1	-1
设计页面结构和界面布局	3	5	+1
检查页面设计，优化页面流程和交互设计	2	1	-1
README 与博客撰写	2	1	-1
合计	10	9	-1

五、结对过程

在发布作业当天及第二天的上午，我们进行了初步的设计，首先了解了作业需求，其次共同在平板上讨论得出了流程图以及大概的原型设计图（手绘粗制滥造版）；在确定整体功能后，我们对小程序页面结构进行了设计。讨论确定首页采用简洁入口式设计，即不采用普通的小程序直接展示广场的功能，而是首先明确需求，通过搜索栏、我要寻物和我要招领两个主要入口帮助用户快速完成目标操作。同时，对发布信息功能进行了细化，确定用户可以填写物品名称、图片、描述、时间、地点等信息；对于搜索功能，设计了关键词搜索和分类筛选方式，方便用户快速查找相关信息。

流程图初步设计

初次设计概览

后期共享屏幕讨论会议记录

第一次设计效果不尽如人意，在保留大功能的前提下我们重点优化了以下内容：

优化UI以及界面展示；
首页信息布局，使用户能够快速找到核心功能；
信息卡片展示方式，使失物和招领信息更加清晰；
页面跳转流程，使用户能够完成“浏览信息→查看详情”和“发布信息→发布成功”等主要操作。

在设计过程中，队友主要负责UI板块的设计，由我提出布局想法，再经过队友设计UI，最后我们再在同一台电脑上完成figma设计。通过多次讨论和修改，最终完成了较为完整的小程序原型设计。

六、个人总结

通过本次校园失物招领小程序的设计，我对软件开发前期的需求分析和原型设计过程有了更加深入的理解。在开始设计之前，我们首先从校园中常见的失物问题出发，分析学生在寻找物品和发布信息时遇到的困难，再根据用户需求确定软件的主要功能。

在原型设计过程中，我参与了页面结构规划、具体功能设计以及界面优化等工作。通过设计首页、搜索页面、发布页面、详情页面等模块，我认识到一个软件不仅需要实现功能，还需要考虑用户的使用习惯和操作流程。例如，在设计发布信息页面时，我们将地点和时间设置为可选项，降低用户填写信息的难度；在首页设计中，通过设置搜索栏和主要功能入口，让用户能够更快速地完成操作。

本次作业也让我认识到需求分析的重要性。如果没有提前明确用户需求，后续的页面设计容易出现功能混乱的问题。同时，通过使用 Figma 进行原型设计，我进一步熟悉了产品设计流程，提高了将想法转化为具体界面的能力。

在完成过程中，也遇到了一些问题，例如如何使用figma（），话说这种0汉化的英文界面是真实存在的吗。。。刚进入figma界面就完全晕字了，在反复拷打ai我该怎么做以及在b站小红书疯狂查阅相关资料之后终于得到大结果。！结果做完所有界面开始连线之后才发现很多问题，比如说完全没有给某些界面加上返回键，导致点进去就再也出不来了。而且因为做的时候很多界面都是纯复制粘贴导致改的时候要一个一个改，后面才知道可以把通用素材加component，只用改main component就好了...

总之开发的过程还是很有意思的！从0开始思考客户需求和页面定制完全戳在我的喜好点上了，加上ui设计更是狠狠吸引我，，不过我觉得最好玩的还是连线部分，真的非常好玩，有一种设计的每个小按钮都有他的工作的感觉嗯！同时也感谢队友能配合我做很多天马行空的想法哈哈哈哈哈，很期待我们的小程序有最终上线的那一天U·ェ·U