§06 原型设计
Prototype Design
页面布局、交互说明与线框图
6.1 设计原则
6.1.1 核心原则
- 简洁清晰：界面元素精简，信息层级分明
- 一致性：相同元素在不同页面保持统一
- 反馈及时：用户操作后给予明确反馈
- 容错设计：允许撤销，防止误操作
6.1.2 设计目标
| 目标 |
具体指标 |
测量方式 |
| 易用性 |
新用户5分钟内完成核心操作 |
用户测试 |
| 效率 |
核心任务3步内完成 |
任务分析 |
| 满意度 |
NPS ≥ 50 |
问卷调研 |
6.2 页面原型
6.2.1 P01 首页
页面目标：【如：展示核心内容，引导用户发现感兴趣的内容】
┌─────────────────────────┐
│ ≡ 首页 🔍 🔔 │ ← Header：菜单、搜索、通知
├─────────────────────────┤
│ ┌─────────────────────┐ │
│ │ │ │ ← Banner：轮播图（高度180px）
│ │ [Banner区域] │ │
│ │ │ │
│ └─────────────────────┘ │
├─────────────────────────┤
│ [分类1] [分类2] [分类3] │ ← 快捷分类入口
├─────────────────────────┤
│ 📌 推荐内容 │ ← 内容区块标题
│ ┌──────┐ ┌──────┐ │
│ │ 卡片1 │ │ 卡片2 │ │ ← 内容卡片（双列布局）
│ │ │ │ │ │
│ └──────┘ └──────┘ │
│ ┌──────┐ ┌──────┐ │
│ │ 卡片3 │ │ 卡片4 │ │
│ │ │ │ │ │
│ └──────┘ └──────┘ │
├─────────────────────────┤
│ [🏠] [🔍] [💬] [👤] │ ← 底部Tab导航
└─────────────────────────┘
交互说明：
| 元素 |
交互 |
效果 |
| Banner |
左右滑动/自动轮播 |
每5秒切换，显示指示器 |
| 内容卡片 |
点击 |
跳转详情页 |
| 下拉 |
下拉刷新 |
显示loading，刷新内容 |
| 上滑 |
上滑加载更多 |
分页加载内容 |
6.2.2 P02 详情页
页面目标：【如：展示内容详情，支持互动操作】
┌─────────────────────────┐
│ ← 详情标题 │ ← 返回+标题
├─────────────────────────┤
│ ┌─────────────────────┐ │
│ │ │ │ ← 封面图/视频
│ │ [多媒体展示区] │ │
│ │ │ │
│ └─────────────────────┘ │
├─────────────────────────┤
│ 📌 内容标题 │ ← 标题（24px，粗体）
│ ⭐ 4.9分 | 1000+人已看 │ ← 评分/观看数据
├─────────────────────────┤
│ 内容详情描述文字... │ ← 详情文本
│ 更多详情展开 > │ ← 展开按钮
├─────────────────────────┤
│ 💬 评论区 │
│ ┌─────────────────────┐ │
│ │ 👤 用户A：评论内容 │ │
│ │ ⭐⭐⭐⭐⭐ │ │
│ └─────────────────────┘ │
├─────────────────────────┤
│ ❤️ 收藏 | 💬 评论 | →分享 │ ← 底部操作栏
└─────────────────────────┘
6.2.3 P03 个人中心
┌─────────────────────────┐
│ 我的 │ ← 页面标题
├─────────────────────────┤
│ ┌──────┐ │
│ │ 👤 │ 用户昵称 │ ← 用户信息区
│ │头像 │ ID: 123456 │
│ └──────┘ ✏️ 编辑资料 │
├─────────────────────────┤
│ 【我的订单】 │ ← 功能模块
│ [待付款] [待使用] [已完成] [退款] │
├─────────────────────────┤
│ ⭐ 我的收藏 > │ ← 列表项
│ 📜 浏览历史 > │
│ 💰 钱包 > │
│ 🎫 优惠券 > │
├─────────────────────────┤
│ ⚙️ 设置 > │
│ ❓ 帮助与反馈 > │
│ 📢 关于我们 > │
└─────────────────────────┘
6.3 通用组件规范
6.3.1 按钮规范
| 类型 |
高度 |
圆角 |
使用场景 |
| 主按钮 |
48px |
8px |
主要操作（提交、确认） |
| 次按钮 |
48px |
8px |
次要操作（取消、返回） |
| 文字按钮 |
32px |
- |
辅助操作（编辑、更多） |
| 图标按钮 |
40px |
50% |
单一操作（分享、收藏） |
6.3.2 列表规范
| 类型 |
高度 |
分割线 |
使用场景 |
| 单行列表 |
56px |
1px #E5E5E5 |
设置、菜单 |
| 双行列表 |
72px |
1px #E5E5E5 |
消息、通知 |
| 卡片列表 |
自适应 |
8px间距 |
内容展示、商品 |
6.3.3 输入框规范
| 类型 |
高度 |
样式 |
说明 |
| 单行输入 |
48px |
下划线/边框 |
账号、手机号 |
| 多行输入 |
自适应 |
边框 |
评论、反馈 |
| 搜索框 |
40px |
圆角填充背景 |
全局搜索 |
6.4 交互说明
6.4.1 转场动画
| 场景 |
动画 |
时长 |
说明 |
| 页面跳转 |
从右向左滑入 |
300ms |
标准页面切换 |
| 返回上级 |
从左向右滑出 |
300ms |
与进入方向相反 |
| Modal弹出 |
从底部滑入 |
250ms |
操作菜单、分享 |
| Toast提示 |
淡入淡出 |
200ms |
轻量提示 |
6.4.2 手势操作
| 手势 |
场景 |
响应 |
| 点击 |
所有可点击元素 |
执行操作，有按压态反馈 |
| 长按 |
列表项、图片 |
弹出操作菜单 |
| 左滑 |
列表项 |
显示删除/编辑按钮 |
| 下拉 |
列表顶部 |
刷新数据 |
| 上滑 |
列表底部 |
加载更多 |
6.5 空状态设计
| 场景 |
图标 |
标题 |
描述 |
操作 |
| 无网络 |
📡 |
网络开小差了 |
请检查网络设置后重试 |
重新加载 |
| 无内容 |
📭 |
暂无内容 |
这里空空如也 |
去逛逛 |
| 搜索无结果 |
🔍 |
未找到相关内容 |
换个关键词试试吧 |
清除搜索 |
| 加载失败 |
⚠️ |
加载失败 |
点击重新加载 |
重新加载 |