一、原型设计工具对比分析(墨刀、Axure、Mockplus)
(1)墨刀(MockingBot)
适用领域:移动端APP原型、快速Demo、产品演示、团队协作
优点:
- 上手极快,拖拽式操作,零基础10分钟可做出可演示原型
- 云端协作,支持一键分享、在线评论,适合学生/小团队
- 移动端预览流畅,支持真机实时同步查看效果
缺点: - 复杂交互与逻辑能力弱
- 自定义样式与组件自由度有限
- 大型项目页面过多时加载与管理略卡
(2)Axure RP
适用领域:产品经理高保真原型、B端系统、复杂交互、需求文档输出
优点:
- 交互逻辑极强,支持变量、函数、条件判断,可高度仿真
- 组件库强大,支持自定义母版,适合大型项目
- 可直接生成带批注的PRD文档,一站式交付
缺点: - 学习成本高,新手入门慢
- 桌面客户端,云端协作弱
- 移动端预览体验一般
(3)Mockplus
适用领域:全平台原型、中高保真原型、团队协作、设计交付
优点:
- 兼顾简单与专业,操作比Axure简单,功能比墨刀强
- 支持矢量绘图、自动标注、切图,一站式设计协作
- 云端存储,团队版本管理清晰
缺点: - 极复杂交互不如Axure
- 部分高级功能需要付费
- 社区资源与模板相对较少
(4)总结
快速做移动端Demo、课程作业 → 墨刀
复杂系统、高保真、PRD → Axure
全平台、协作、设计交付 → Mockplus
二、原型设计说明
1.主题名称
校园失物招领系统
- 核心功能
- 用户注册/登录
- 发布失物信息
- 发布招领信息
- 物品搜索与筛选
- 消息通知
- 个人中心(我的发布/我的收藏)
- 界面设计考虑因素
- 简洁清晰,学生易操作
- 信息层级明确:物品照片 > 物品名称 > 时间地点 > 联系方式
- 配色以校园蓝为主,清爽友好
- 适配手机端,单手可操作
- 关键按钮突出,引导用户发布与查看
三、原型界面详情(共4个核心界面)
界面1:首页(失物招领列表)
界面功能:展示最新失物/招领信息,提供搜索与分类入口
界面组成:顶部搜索栏、分类Tab(失物/招领)、物品卡片列表、底部导航
前置条件:用户已登录
后置条件:点击卡片进入详情页
操作步骤:
- 进入首页
- 可搜索物品关键词
- 切换失物/招领分类
- 点击任意卡片查看详情

界面2:发布页面(发布失物/招领)
界面功能:用户提交丢失或捡到的物品信息
界面组成:类型选择(失物/招领)、照片上传、名称、描述、时间、地点、联系方式
前置条件:用户已登录
后置条件:发布成功,返回首页并显示新内容
操作步骤:
- 点击底部“+”进入发布页
- 选择类型、上传照片
- 填写物品信息
- 提交发布

界面3:详情页面
界面功能:查看物品完整信息,可联系发布者
界面组成:物品图片、详细信息、返回按钮
前置条件:从首页点击卡片进入
后置条件:可返回列表拨打电话/复制联系方式
操作步骤:
- 查看完整信息
- 获取联系方式
- 可收藏或返回列表

界面4:个人中心
界面功能:管理个人信息与发布记录
界面组成:头像昵称、我的发布、我的收藏、退出登录
前置条件:用户已登录
后置条件:可进入我的发布列表,或退出登录
操作步骤:
- 点击底部“我的”进入
- 查看/删除我的发布
- 查看收藏
- 退出登录

四、界面切换流程说明
- 启动 → 登录/注册 → 首页
- 首页 → 点击卡片 → 详情页 → 返回 → 首页
- 首页 → 点击“+” → 发布页 → 提交 → 首页
- 首页 → 点击“我的” → 个人中心 → 返回 → 首页
- 个人中心 → 我的发布 → 对应详情页
整体流程:以首页为中心,四大页面互相跳转,逻辑清晰、操作闭环。
五、总结
本次原型使用墨刀完成,围绕校园失物招领真实场景设计,满足学生寻物需求。
页面简洁、功能完整、切换逻辑清晰,适合作为校园小程序/APP的初步原型方案。
