宠乐圈 · 宠物领养互助平台原型设计
第一部分：原型设计工具对比分析
原型设计工具是产品经理和UI/UX设计师将抽象需求转化为可视化界面的核心工具。当前主流的墨刀、Axure RP和Mockplus三款工具在功能定位、使用场景和学习成本上存在显著差异，合理选择可大幅提升设计效率。
1.1 适用领域对比
对比维度 墨刀 Axure RP Mockplus
适用领域 互联网创业团队、移动端APP设计、小程序原型、敏捷开发流程 大型企业级系统、政府项目、金融医疗等高保真需求场景 高校教学场景、个人作品集制作、跨平台设计初体验
典型用户 产品经理、交互设计师、全栈设计师 资深产品经理、用户体验专家、系统架构师 设计专业学生、转行学习者、小型工作室
项目类型 中低保证明概念、MVP快速验证 完整商业级交付、开发文档输出 学习练习项目、竞品分析演示
1.2 核心优缺点分析
墨刀——云端协作的敏捷先锋
优点：
无需安装软件，浏览器即可完成全部设计工作
内置海量移动端组件和模板，拖拽式组装效率极高
一键生成二维码分享预览，手机扫码真机体验
多人实时协作编辑，适合远程团队配合
缺点：
复杂条件判断、变量运算等高级交互能力薄弱
网络不稳定时影响操作流畅度
免费账户存在项目数量和页面数量限制
导出静态HTML后交互功能可能失效
Axure RP——工业级的交互标杆
优点：
支持动态面板、中继器、函数变量等专业交互功能
可实现几乎任何复杂的业务逻辑模拟
自动生成需求规格说明书，减少文档撰写工作量
离线使用，数据安全性有保障
缺点：
学习成本高，新手需要1-2周系统学习才能熟练使用
软件体量大，低配置电脑运行卡顿
正版授权费用较高，个人版约$25/月
内置组件样式偏老旧，需要额外设计润色
Mockplus——轻量级的入门助手
优点：
界面简洁直观，上手时间短，适合设计零基础
支持Windows和macOS双平台，文件格式互通
内置图标库和组件资源较为丰富
提供从原型设计到设计标注的一站式服务
缺点：
复杂交互动效支持能力有限，无法模拟精细交互
素材和模板库相比墨刀仍有差距
高级协作功能需要付费解锁
社区生态和教程资源不如墨刀成熟
1.3 工具选择建议
根据项目特点选择合适的工具：对于本“宠乐圈”校园作业项目，因需快速产出中保真界面且无需复杂逻辑，推荐使用墨刀完成设计；若为企业级后台管理系统，则应选用Axure RP；若为个人入门练习，Mockplus是不错的选择。
第二部分：宠乐圈宠物领养互助平台原型设计
2.1 主题名称与定位
主题名称： 宠乐圈 · 领养互助驿站
核心定位： 以“帮助流浪动物找到归宿”为使命，打造一个集领养匹配、救助资源对接、养宠经验分享于一体的校园周边公益平台。
目标用户： 在校大学生、校园周边社区居民、动物救助志愿者
设计理念： 不同于传统领养平台仅做信息中介，宠乐圈强调“互助”属性——救助人可获得平台流量支持，领养人可获得养宠指导，形成“领养-适应-分享”的良性循环。
2.2 界面设计考虑因素
设计要素 具体考虑
色彩体系 主色调选用墨绿色（#2D6A4F）搭配暖黄色（#FFB703），象征自然生命与温暖关怀的融合
视觉风格 毛绒质感图标 + 圆润卡片设计，营造宠物友好氛围
操作便利 单手持握优化：核心按钮放置在屏幕下半区，减少手指移动距离
信息层级 采用F型浏览模式，重要操作（申请领养、联系救助人）采用高对比色突出显示
无障碍设计 图片均配备alt文字说明，字体大小适配老年用户阅读需求
2.3 四大核心界面详细说明
界面一：发现广场（信息流浏览页）
项目 详细内容
界面功能 聚合展示平台全部待领养宠物和寻主信息，支持热度排序和附近筛选
界面组成 顶部定位栏 + 搜索入口 + 四个快捷入口卡片（领养/寻主/科普/求助）+ 双列瀑布流信息卡片 + 底部导航栏
前置条件 用户已完成账号注册与登录
后置条件 点击卡片跳转详情页；点击快捷入口进入对应功能模块
操作步骤 ① 打开应用进入发现广场 ② 浏览宠物卡片内容 ③ 点击“附近”查看校内及周边宠物 ④ 下滑加载更多内容 ⑤ 点击感兴趣的卡片查看详情
界面二：领养申请页（救助匹配流程）
项目 详细内容
界面功能 领养人填写详细申请资料，向救助人发起正式领养请求
界面组成 标题栏“填写领养申请” + 宠物基本信息摘要卡片 + 个人情况表单（住房/养宠经验/家庭成员态度）+ 承诺声明复选框 + 提交申请按钮
前置条件 用户已在宠物详情页点击“申请领养”按钮
后置条件 提交成功后跳转至“申请记录”页面，救助人收到待审核通知
操作步骤 ① 确认申请宠物信息 ② 逐项填写个人领养条件 ③ 勾选“我已阅读并同意领养协议” ④ 点击提交申请 ⑤ 系统弹窗提示“申请已发送” ⑥ 自动跳转至申请记录页
界面三：救助物资站（资源对接页）
项目 详细内容
界面功能 展示救助物资需求清单，用户可在线认捐宠物食品、药品、笼具等物资
界面组成 顶部banner（本月救助数据） + 物资分类标签（粮食/医疗/用品/资金）+ 物资需求列表（进度条+认捐按钮）+ 个人认捐记录入口
前置条件 用户已登录账号
后置条件 确认认捐后生成捐赠订单，等待平台统一配送至救助点
操作步骤 ① 点击底部导航“救助”进入物资站 ② 按分类浏览物资需求 ③ 查看物资详情和所需数量 ④ 点击“支持一份” ⑤ 确认数量并支付认捐 ⑥ 查看个人认捐记录
界面四：成长日记（养宠记录页）
项目 详细内容
界面功能 领养人或救助人记录宠物日常，形成宠物成长时间轴，社区用户可点赞评论互动
界面组成 顶部用户头像区 + 时间轴（按月分组）+ 图文动态卡片（点赞/评论数）+ 悬浮发布按钮 + 底部导航栏
前置条件 用户已成功领养宠物或有宠物在养记录
后置条件** 发布新动态后刷新时间轴，好友收到动态推送通知
操作步骤 ① 进入“我的”页面点击成长日记 ② 查看历史记录时间线 ③ 点击悬浮“+”按钮 ④ 上传图片填写今日趣事 ⑤ 点击发布 ⑥ 返回时间轴查看新动态
2.4 界面切换流程图
text
┌─────────────────────────────────────────────────────────┐
│ 应用启动页（加载） │
└───────────────────────┬─────────────────────────────────┘
▼
┌─────────────────────────────────────────────────────────┐
│ 登录/注册页 │
└───────────────────────┬─────────────────────────────────┘
▼
┌───────────────┴───────────────┐
│ 底部导航栏主控切换 │
└───────────────┬───────────────┘
│
┌───────────────┼───────────────┬───────────────┐
▼ ▼ ▼ ▼
┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ 发现广场 │ │ 领养申请 │ │ 救助物资站 │ │ 成长日记 │
│ （首页） │ │ （匹配） │ │ （资源） │ │ （记录） │
└──────┬───────┘ └──────┬───────┘ └──────┬───────┘ └──────┬───────┘
│ │ │ │
▼ ▼ ▼ ▼
┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ 宠物详情页 │ │ 申请记录页 │ │ 物资详情页 │ │ 发布动态页 │
│ │ │ │ │ │ │ │
│ 操作：联系 │ │ 操作：查看 │ │ 操作：认捐 │ │ 操作：记录 │
│ 申请 │ │ 进度 │ │ 分享 │ │ 发布 │
└──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘
主要跳转路径说明
跳转路径 触发动作 跳转方式
发现广场 → 宠物详情页 点击宠物卡片 右滑进入
宠物详情页 → 领养申请页 点击“申请领养”按钮 底部弹出表单
发现广场 ↔ 救助物资站 点击底部导航“救助” 标签切换
救助物资站 → 物资详情页 点击物资卡片“查看详情” 模态弹出
成长日记 → 发布动态页 点击悬浮“+”按钮 从底部上滑
领养申请页 → 申请记录页 提交成功后自动跳转 右滑进入
任意页面 → 发现广场 点击底部导航“首页” 标签切换
典型用户路径举例
场景： 大学生小李想领养一只小猫
打开宠乐圈APP → 进入发现广场
浏览宠物卡片，发现一只橙色小猫
点击卡片进入宠物详情页，查看健康信息和救助人要求
点击“申请领养” → 进入领养申请页
填写个人情况和领养承诺 → 提交申请
提交成功后跳转申请记录页，等待救助人审核
领养成功后进入成长日记记录小猫成长点滴
第三部分：设计总结与反思
3.1 设计亮点
特色功能创新： 增设“救助物资站”模块，将单纯的领养信息平台升级为资源互助平台，帮助救助人解决物资短缺痛点
用户体验优化： 申请流程分步引导，降低用户填写心理负担；提交即弹窗提示确认，减少误操作
视觉风格统一： 墨绿色象征自然生命，配合温暖辅助色，传递“动物友好”的品牌调性
移动端适配： 底部导航采用“发现-消息-救助-我的”四大模块，符合主流用户习惯
3.2 工具使用心得
本次原型设计采用墨刀完成，主要体会如下：
墨刀的智能布局功能大幅提升了卡片式信息的排列效率
云端实时保存机制避免了因软件崩溃导致的内容丢失
组件复用功能使得底部导航栏等公共元素一次修改全局生效
分享预览链接可直接在手机微信打开，真机测试体验真实
3.3 改进方向
后续可增加用户评价体系，对救助人和领养人进行双向信用评分
可对接校园卡认证系统，保障在校师生用户身份真实性
考虑加入LBS地图功能，直观展示宠物所在地和救助点位置