三亩地 三亩地SAN MU DI · CODE DIARY
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天,欢迎挑你感兴趣的翻一翻。

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

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

一、原型设计工具对比分析(墨刀、Axure、Mockplus)

(1)墨刀(MockingBot)
适用领域:移动端APP原型、快速Demo、产品演示、团队协作
优点:

  1. 上手极快,拖拽式操作,零基础10分钟可做出可演示原型
  2. 云端协作,支持一键分享、在线评论,适合学生/小团队
  3. 移动端预览流畅,支持真机实时同步查看效果
    缺点:
  4. 复杂交互与逻辑能力弱
  5. 自定义样式与组件自由度有限
  6. 大型项目页面过多时加载与管理略卡

(2)Axure RP
适用领域:产品经理高保真原型、B端系统、复杂交互、需求文档输出
优点:

  1. 交互逻辑极强,支持变量、函数、条件判断,可高度仿真
  2. 组件库强大,支持自定义母版,适合大型项目
  3. 可直接生成带批注的PRD文档,一站式交付
    缺点:
  4. 学习成本高,新手入门慢
  5. 桌面客户端,云端协作弱
  6. 移动端预览体验一般

(3)Mockplus
适用领域:全平台原型、中高保真原型、团队协作、设计交付
优点:

  1. 兼顾简单与专业,操作比Axure简单,功能比墨刀强
  2. 支持矢量绘图、自动标注、切图,一站式设计协作
  3. 云端存储,团队版本管理清晰
    缺点:
  4. 极复杂交互不如Axure
  5. 部分高级功能需要付费
  6. 社区资源与模板相对较少

(4)总结
快速做移动端Demo、课程作业 → 墨刀
复杂系统、高保真、PRD → Axure
全平台、协作、设计交付 → Mockplus

二、原型设计说明

1.主题名称
校园失物招领系统

  1. 核心功能
  • 用户注册/登录
  • 发布失物信息
  • 发布招领信息
  • 物品搜索与筛选
  • 消息通知
  • 个人中心(我的发布/我的收藏)
  1. 界面设计考虑因素
  • 简洁清晰,学生易操作
  • 信息层级明确:物品照片 > 物品名称 > 时间地点 > 联系方式
  • 配色以校园蓝为主,清爽友好
  • 适配手机端,单手可操作
  • 关键按钮突出,引导用户发布与查看

三、原型界面详情(共4个核心界面)

界面1:首页(失物招领列表)
界面功能:展示最新失物/招领信息,提供搜索与分类入口
界面组成:顶部搜索栏、分类Tab(失物/招领)、物品卡片列表、底部导航
前置条件:用户已登录
后置条件:点击卡片进入详情页
操作步骤:

  1. 进入首页
  2. 可搜索物品关键词
  3. 切换失物/招领分类
  4. 点击任意卡片查看详情

home

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

  1. 点击底部“+”进入发布页
  2. 选择类型、上传照片
  3. 填写物品信息
  4. 提交发布

publish

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

  1. 查看完整信息
  2. 获取联系方式
  3. 可收藏或返回列表

detail

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

  1. 点击底部“我的”进入
  2. 查看/删除我的发布
  3. 查看收藏
  4. 退出登录

campus_profile

四、界面切换流程说明

  1. 启动 → 登录/注册 → 首页
  2. 首页 → 点击卡片 → 详情页 → 返回 → 首页
  3. 首页 → 点击“+” → 发布页 → 提交 → 首页
  4. 首页 → 点击“我的” → 个人中心 → 返回 → 首页
  5. 个人中心 → 我的发布 → 对应详情页

整体流程:以首页为中心,四大页面互相跳转,逻辑清晰、操作闭环。

五、总结
本次原型使用墨刀完成,围绕校园失物招领真实场景设计,满足学生寻物需求。
页面简洁、功能完整、切换逻辑清晰,适合作为校园小程序/APP的初步原型方案。

← 返回列表