Interaction Design
页面逻辑与交互细节
| 导航类型 | 使用场景 | 交互说明 |
|---|---|---|
| 底部导航 | 一级页面切换 | 固定底部，点击切换页面，当前项高亮 |
| 顶部导航 | 返回/标题/操作 | 左侧返回，中间标题，右侧操作按钮 |
| 侧边导航 | 功能分类（Web端） | 可折叠，当前选中的菜单高亮 |
| 状态类型 | 视觉表现 | 交互说明 |
|---|---|---|
| 加载中 | Loading动画/骨架屏 | 异步请求时显示，完成后消失 |
| 空状态 | 插图+文案+操作按钮 | 无数据时展示，引导用户操作 |
| 错误状态 | 错误插图+重试按钮 | 加载失败时展示，支持重试 |
| 禁用状态 | 置灰，不可点击 | 条件不满足时禁用，满足后启用 |
| 反馈类型 | 使用场景 | 持续时间 |
|---|---|---|
| Toast | 轻量级提示（成功/失败/警告） | 2-3秒 |
| Dialog | 需要用户确认的操作 | 等待用户操作 |
| Snackbar | 带操作的提示（如撤销） | 4-5秒 |
| 页面提示 | 表单校验错误 | 常驻，修正后消失 |
页面入口：【从哪些页面可以进入】
页面出口：【可以跳转到哪些页面】
页面元素：
| 元素 | 位置 | 交互 | 备注 |
|---|---|---|---|
| 【元素1】 | 【位置】 | 【点击/滑动等交互效果】 | 【特殊说明】 |
| 【元素2】 | 【位置】 | 【点击/滑动等交互效果】 | 【特殊说明】 |
交互流程：
异常流程：
【参照上述结构描述其他页面】
| 动画场景 | 动画类型 | 时长 | 缓动函数 |
|---|---|---|---|
| 页面切换 | 左右滑动 | 300ms | ease-in-out |
| 列表加载 | 渐显+上移 | 200ms | ease-out |
| 按钮点击 | 缩放0.95 | 100ms | ease-in |
| Toast显示 | 渐显 | 200ms | ease-out |
| 手势 | 使用场景 | 触发效果 |
|---|---|---|
| 下拉刷新 | 列表页面顶部 | 刷新列表数据 |
| 上拉加载 | 列表页面底部 | 加载更多数据 |
| 左滑 | 列表项 | 显示删除/更多操作 |
| 右滑返回 | 任意页面左侧边缘 | 返回上一页 |
| 双击 | 图片 | 放大/缩小 |
| 长按 | 列表项/图片 | 弹出操作菜单 |