校园失物招领系统原型设计

软件工程专业课程作业 | 原型设计工具：墨刀（MockingBot） | 设计主题：校园失物招领小程序

---

一、原型设计工具对比分析

以下从适用领域、优点、缺点三个维度，对墨刀、Axure、Mockplus三款主流原型设计工具进行对比分析。

1.1 Axure RP

适用领域

• 大中型APP、Web管理系统、后台平台高保真交互原型设计
• 互联网产品商用项目、产品经理正式项目输出
• 金融、B端系统等需要深度交互逻辑的复杂产品原型

优点

1. 交互逻辑强大：支持复杂页面跳转、变量、条件判断、动态面板，可实现高度贴近成品的交互效果
2. 元件库自定义程度高：可复用组件，适合长期迭代的大型项目，建立团队统一设计规范
3. 输出格式丰富：支持导出HTML、PDF、Word等多种规格文档，方便对接开发团队和UI设计师
4. 行业标准工具：产品经理行业广泛认可，学习资料和社区支持丰富

缺点

1. 学习门槛高：软件体量大、安装包笨重，对电脑配置有一定要求，零基础短期难以熟练使用
2. 付费成本高：正版软件收费高昂，免费试用功能受限，不适合学生长期使用
3. 云端协作薄弱：多人同步编辑原型不方便，协作效率远低于基于云端的工具

---

1.2 墨刀（MockingBot）

适用领域

• 移动端APP、微信小程序、轻量化H5等移动端产品快速原型设计
• 初创团队、个人设计师快速制作低保真/中保真原型演示
• 高校课程设计、学生作业、校园类轻应用原型开发

优点

1. 上手简单：网页端+客户端双端使用，开箱即用，拖拽式操作零基础快速上手
2. 素材丰富：自带海量免费组件库、页面模板，移动端适配完善，拥有大量校园场景UI素材
3. 协作便捷：云端自动保存，多人实时协作评论，一键生成分享链接与H5预览，方便老师在线查看
4. 免费版够用：免费版基本功能完整，满足课程作业和小型项目需求

缺点

1. 复杂交互受限：变量、高级逻辑能力远弱于Axure，不适合大型后台系统和复杂业务流程
2. 免费版限制：项目数量、页面页数有上限，商用需开通会员
3. 导出格式少：本地文件导出格式选择较少，不支持导出Word等规格文档

---

1.3 Mockplus（摹客 RP）

适用领域

• 中小型Web网站、移动端APP、政企轻量化项目原型设计
• 教学实训原型开发、新手学生群体快速入门原型设计
• 中等复杂度产品原型，兼顾轻量化与中等交互需求

优点

1. 操作难度适中：全中文操作界面，拖拽式设计无需代码，学习曲线平缓
2. 一站式协作平台：配套摹客协作平台，原型、标注、需求文档一站式完成，方便对接设计与开发
3. 模板丰富：自带海量行业模板和预制组件（表单、按钮、导航等），免费版基础功能完整
4. 预览便捷：一键生成分享链接与预览二维码，原型预览方便快捷

缺点

1. 复杂交互不如Axure：极致复杂动态交互能力有限，大型系统开发局限性明显
2. 部分功能付费：高级组件、插件需要付费解锁，免费版功能有一定限制
3. 移动端细节适配略逊：移动端细节适配优化略逊于墨刀，特别是小程序场景

---

1.4 三款工具综合对比总表

对比维度	Axure RP	墨刀（MockingBot）	Mockplus（摹客 RP）
学习难度	高（英文界面）	低（中文界面）	中（中文界面）
交互能力	强（变量/条件判断）	中（基础跳转）	中偏上（中等交互）
协作方式	本地为主，协作薄弱	云端实时协作	一站式协作平台
费用	付费（正版贵）	免费+会员	免费+付费插件
适合场景	商用大型复杂项目	校园/小程序/快速原型	中小型项目/教学实训

1.5 工具选型说明

本项目《校园失物招领系统》为校园小程序轻量化应用，综合考虑上手难度、素材丰富度、预览便捷度以及免费版功能完整性，最终选用墨刀完成原型设计。墨刀的云端协作、海量校园场景模板和一键生成预览链接的特点，非常适合本项目的需求。

---

二、校园失物招领系统原型设计

2.1 项目基础说明

主题名称

校园失物招领小程序系统

目标用户

面向全体在校师生，解决校园物品遗失、捡拾后信息不对称问题，提高物品找回概率。

核心功能

• 寻物发布：物品丢失用户填写物品信息、丢失地点、联系方式，发布寻物启事
• 招领发布：捡到物品用户上传物品照片、拾取位置，发布招领信息
• 信息检索浏览：按照物品分类、校区筛选查看全部失物与招领信息
• 详情查看与联系：查看启事完整信息，私信发布人沟通认领事宜
• 个人中心：管理自己发布的启事、已完成认领记录、修改个人资料

2.2 界面设计考虑因素

• 用户层面：使用人群为在校大学生，界面简洁直观，减少冗余输入，支持学号快捷登录，降低使用门槛
• 使用场景：手机移动端使用为主，按钮尺寸适配手机点击操作，页面布局符合小程序使用习惯
• 校园场景：地点选项预设图书馆、教学楼、食堂、宿舍区、操场等校园常用点位，减少手动输入
• 配色风格：选用校园蓝白简约风，字体偏大，操作按钮醒目，提升视觉体验
• 实用优化：首页置顶校园卡、身份证等重要证件紧急遗失信息，提高物品找回概率
• 功能分层：底部导航分首页、发布、消息、我的四大模块，降低学习成本

2.3 四大核心界面详细设计说明

本次原型选定4个关键页面：系统首页、发布启事页、消息聊天页、个人中心页，分别从功能、页面组成、前置条件、后置条件、操作步骤五个维度说明。

---

界面1：系统首页

项目	说明
界面功能	展示最新失物/招领信息流、顶部搜索物品、分类筛选（证件/电子产品/生活用品），提供快速发布入口
界面组成	顶部搜索框 + 校区筛选栏；中部【我要寻物】【我要招领】两大快捷按钮；下方最新寻物、最新招领信息流卡片；底部导航栏（首页/发布/消息/我的）
前置条件	用户在微信打开小程序链接，无论是否登录均可进入首页
后置条件	点击【我要寻物】跳转发布页面；点击信息流卡片跳转启事详情页；点击底部导航切换页面
操作步骤	打开小程序 → 默认进入首页 → 点击顶部筛选标签切换物品分类 → 点击物品卡片查看详情

界面原型图：

---

界面2：发布启事页

项目	说明
界面功能	选择发布类型（丢东西/捡到东西），填写物品信息、上传图片，提交发布启事
界面组成	左上角返回首页按钮；发布类型单选框；表单区域（物品名称、物品分类、丢失/拾取时间、地点、详情描述、联系电话、图片上传）；底部【提交发布】按钮
前置条件	用户在系统首页点击【我要寻物】或【我要招领】按钮，或点击底部导航【发布】
后置条件	必填信息填写完整后点击提交，数据上传，自动跳转首页，新发布内容出现在首页信息流；点击返回按钮撤回填写，回到首页
操作步骤	首页点【发布】 → 选择失物/招领类型 → 逐项填写表单 → 上传物品实拍图 → 点击提交发布

界面原型图：

---

界面3：消息聊天页

项目	说明
界面功能	查看沟通会话列表，进入对话框和对方私信聊天，对接物品归还细节
界面组成	会话列表页：对方头像昵称 + 最新消息预览；聊天页：顶部返回按钮 + 对方昵称，中部聊天气泡记录区域，底部文字输入框 + 发送按钮
前置条件	用户点击底部导航【消息】，或在物品详情页点击【私信对方】
后置条件	发送消息实时刷新聊天记录，新增会话自动保存到消息列表；点击返回回到会话列表
操作步骤	首页点击【消息】 → 查看会话列表 → 选中已有会话进入聊天 → 输入文字发送；或在物品详情页点私信，新建会话

界面原型图：

---

界面4：个人中心页

项目	说明
界面功能	查看本人发布全部启事、收藏帖子、修改头像昵称、退出登录
界面组成	顶部个人信息展示区（头像、昵称、学号）；功能菜单列表（我的发布、我的收藏、个人设置、关于我们、退出登录），每个菜单项前有图标；底部导航栏
前置条件	底部导航点击【我的】进入页面，用户已登录
后置条件	点击我的发布跳转历史启事列表；点击设置跳转资料修改页；点击退出登录返回登录页
操作步骤	底部导航点击【我的】 → 查看个人信息 → 按需点击我的发布/收藏，查看对应内容

界面原型图：

---

2.4 界面切换流程说明

以下为校园失物招领小程序各页面之间的整体跳转业务流程：

主流程

用户打开小程序 → 进入【系统首页】
    ↓
首页点击【我要寻物】或【我要招领】 → 进入【发布启事页】 → 填写信息提交 → 自动返回【系统首页】
    ↓
首页信息流点击物品卡片 → 进入【启事详情页】 → 点击【私信联系】 → 进入【消息聊天页】

导航流程

底部导航栏四个按钮可在任意页面快速切换：
    首页 ⇄ 发布页 ⇄ 消息页 ⇄ 个人中心页
各页面左上角均设置返回按钮，可返回上一级页面

辅助流程

个人中心 → 我的发布 → 查看历史启事列表 → 点击卡片进入详情页
个人中心 → 个人设置 → 修改头像昵称、联系方式

---

三、作业总结

通过本次原型设计课程作业，我对原型设计工具有了更深入的理解和实践体验。

3.1 工具对比收获

在对比分析墨刀、Axure、Mockplus三款工具的过程中，我认识到不同工具适用于不同的项目场景：

• Axure RP 适合专业产品经理进行复杂商用项目的原型设计，功能强大但学习成本高
• 墨刀 适合快速原型设计和团队协作，上手简单、素材丰富，非常适合学生作业和轻量级项目
• Mockplus 介于两者之间，兼顾了易用性和功能性，适合中小型项目

针对本次校园失物招领系统这一轻量化小程序项目，墨刀的云端协作、海量模板和一键预览功能使其成为最优选择。

3.2 原型设计实践收获

通过校园失物招领系统的原型设计，我掌握了以下核心技能：

• 需求分析能力：从用户场景出发，梳理出寻物发布、招领发布、信息浏览、私信联系、个人管理等核心功能
• 界面设计思维：学会了从用户层面、使用场景、功能分层等角度思考界面设计
• 流程设计能力：梳理了页面之间的跳转逻辑，确保用户操作流程顺畅自然
• 工具使用能力：熟练使用墨刀完成页面布局、组件搭建和交互设置

3.3 不足与展望

本次原型设计仍存在一些不足之处：

• 界面设计较为基础，缺乏高保真的视觉细节
• 交互逻辑相对简单，未涉及复杂的状态管理和数据联动
• 缺少用户测试环节，未能验证设计的可用性

未来可以进一步学习高保真原型设计、用户研究方法，提升原型设计的专业水平。

---

声明：本文为软件工程专业原型设计课程作业，仅供学习交流使用。