五、交互模式

（一）交互原则

一致性

• 相同操作产生相同结果。
• 统一交互反馈方式。
• 保持视觉一致性。

可预测性

• 操作结果可预期。
• 状态变化可见。
• 错误可恢复。

效率优先

• 减少操作步骤。
• 提供快捷方式。
• 使用智能默认值。

容错性

• 操作可撤销。
• 危险操作确认。
• 错误友好提示。

（二）页面流转

导航模式

• 层级导航。
• 平级导航。
• 混合导航。

页面跳转

• 页面内跳转。
• 新开页面。
• 模态展示。
• 抽屉展开。

返回策略

• 面包屑返回。
• 返回按钮。
• 浏览器返回。

（三）手势操作

移动端手势

手势	操作	场景
点击	选择、确认	按钮、列表项
长按	更多操作	列表项
滑动	删除、切换	列表、轮播
下拉	刷新	列表页面
上拉	加载更多	列表页面
捏合	缩放	图片、地图

手势反馈

• 触觉反馈。
• 视觉反馈。
• 声音反馈（可选）。

（四）动效规范

动效原则

• 有目的：每个动效都有明确意图。
• 有节奏：符合物理规律。
• 有节制：不过度使用。

动效时长

类型	时长	场景
快速	100ms	按钮反馈、小元素
正常	200ms	弹窗、下拉菜单
慢速	300ms	页面切换、抽屉
复杂	400-500ms	多元素动画

常用动效

• 淡入淡出。
• 滑动进入。
• 缩放展开。
• 骨架屏加载。

（五）微交互

按钮交互

• 悬停状态。
• 点击反馈。
• 加载状态。
• 成功状态。

表单交互

• 聚焦高亮。
• 输入提示。
• 校验反馈。
• 自动保存。

列表交互

• 悬停效果。
• 选中状态。
• 拖拽排序。
• 左滑操作。