交互说明文档
文档编号: SYS-UX-IX-003
版本: 1.0
日期: 2026-03-09
编制: UI/UX设计师
审核: 产品经理
批准: 项目总监
状态: ✓ 已批准
一、文档概述
1.1 文档目的
本文档详细定义系统的交互规范，包括交互手势、操作反馈、状态变化、动画效果等，确保交互体验的一致性和可用性。
1.2 参考文档
二、交互设计原则
2.1 核心原则
| 原则 | 描述 | 设计体现 |
|---|---|---|
| 即时反馈 | 用户操作后立即给予反馈 | 按钮点击效果、加载状态 |
| 操作可逆 | 重要操作支持撤销 | 删除确认、操作撤销 |
| 防错设计 | 预防错误发生 | 输入验证、操作确认 |
| 一致性 | 相同操作相同反馈 | 统一的交互模式 |
| 效率优先 | 减少操作步骤 | 快捷操作、批量处理 |
2.2 交互层级
| 层级 | 交互类型 | 示例 |
|---|---|---|
| L1 | 即时反馈 | 按钮悬停、点击效果 |
| L2 | 状态反馈 | 加载中、成功/失败提示 |
| L3 | 页面反馈 | 页面切换、弹窗 |
| L4 | 系统反馈 | 通知、邮件提醒 |
三、通用交互规范
3.1 按钮交互
3.1.1 按钮状态
| 状态 | 视觉效果 | 交互说明 |
|---|---|---|
| 默认 | 正常颜色 | 可点击 |
| 悬停 | 颜色加深/变浅 | 鼠标移入，提示可点击 |
| 点击 | 颜色变化+轻微缩放 | 鼠标按下，即时反馈 |
| 加载 | 显示加载图标 | 操作处理中，禁用点击 |
| 禁用 | 灰色，无悬停效果 | 不可点击 |
3.1.2 按钮类型
主要按钮: [ 确认创建 ] ← 蓝色背景，白色文字，用于主要操作
次要按钮: [ 取消 ] ← 白色背景，灰色边框，用于次要操作
危险按钮: [ 删除 ] ← 红色背景，用于删除等危险操作
链接按钮: 查看详情 ← 文字形式，用于跳转
图标按钮: [⚙️] ← 图标形式，用于设置等操作3.1.3 按钮交互细节
css
/* 按钮交互规范 */
.button {
/* 默认状态 */
background: #1890ff;
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
cursor: pointer;
transition: all 0.3s ease;
/* 悬停状态 */
&:hover {
background: #40a9ff;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}
/* 点击状态 */
&:active {
background: #096dd9;
transform: translateY(0);
box-shadow: none;
}
/* 禁用状态 */
&:disabled {
background: #f5f5f5;
color: #bfbfbf;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* 加载状态 */
&.loading {
opacity: 0.7;
cursor: wait;
}
}3.2 表单交互
3.2.1 输入框交互
| 状态 | 视觉效果 | 说明 |
|---|---|---|
| 默认 | 灰色边框 | 等待输入 |
| 聚焦 | 蓝色边框+阴影 | 当前输入框 |
| 填写 | 绿色边框 | 验证通过 |
| 错误 | 红色边框+错误提示 | 验证失败 |
| 禁用 | 灰色背景 | 不可编辑 |
3.2.2 表单验证时机
| 验证类型 | 触发时机 | 反馈方式 |
|---|---|---|
| 实时验证 | 输入过程中 | 即时显示验证结果 |
| 失焦验证 | 离开输入框时 | 显示验证结果 |
| 提交验证 | 点击提交按钮时 | 汇总显示所有错误 |
3.2.3 表单交互示例
┌─────────────────────────────────────┐
│ 用户名 * │
│ ┌─────────────────────────────┐ │
│ │ zhangs │ │ ← 聚焦状态：蓝色边框
│ └─────────────────────────────┘ │
│ ✓ 用户名可用 │ ← 验证通过提示
├─────────────────────────────────────┤
│ 手机号 * │
│ ┌─────────────────────────────┐ │
│ │ 1380000 │ │ ← 错误状态：红色边框
│ └─────────────────────────────┘ │
│ ⚠ 请输入完整的11位手机号 │ ← 错误提示
├─────────────────────────────────────┤
│ 邮箱 │
│ ┌─────────────────────────────┐ │
│ │ │ │ ← 默认状态：灰色边框
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘3.3 表格交互
3.3.1 行操作
| 操作 | 触发方式 | 效果 |
|---|---|---|
| 悬停 | 鼠标移入行 | 行背景变色 |
| 选中 | 点击复选框 | 行高亮，记录选中状态 |
| 编辑 | 点击编辑按钮 | 进入编辑页面/弹窗 |
| 删除 | 点击删除按钮 | 弹出确认对话框 |
3.3.2 排序交互
表头: 创建时间 [↑↓]
状态说明:
- [↑↓]: 默认状态，点击升序
- [↑ ]: 升序状态，点击降序
- [ ↓]: 降序状态，点击取消排序3.3.3 分页交互
共 128 条记录 [<] [1] [2] [3] ... [13] [>]
↑
上一页（当前为第1页时禁用）
交互规则:
- 点击页码：跳转到对应页
- 点击上一页/下一页：翻页
- 快速跳转：输入页码直接跳转
- 每页条数：支持切换 10/20/50/100 条/页3.4 弹窗交互
3.4.1 弹窗类型
| 类型 | 用途 | 关闭方式 |
|---|---|---|
| 确认框 | 确认操作 | 点击确认/取消按钮 |
| 提示框 | 信息提示 | 点击确定按钮或关闭图标 |
| 表单弹窗 | 填写信息 | 提交或取消 |
| 详情弹窗 | 查看详情 | 点击关闭图标或蒙层 |
3.4.2 弹窗交互规则
┌─────────────────────────────────────────────────┐
│ 弹窗标题 [×] │
├─────────────────────────────────────────────────┤
│ │
│ 弹窗内容区域 │
│ │
├─────────────────────────────────────────────────┤
│ [取消] [确认] │
└─────────────────────────────────────────────────┘
↑
点击蒙层关闭（可配置）
交互规则:
1. 打开弹窗：淡入 + 轻微缩放动画 (200ms)
2. 关闭弹窗：淡出动画 (150ms)
3. 蒙层点击：可配置是否关闭
4. ESC键：关闭弹窗
5. 打开时：背景禁止滚动四、页面交互
4.1 页面切换
4.1.1 路由切换动画
| 切换类型 | 动画效果 | 时长 |
|---|---|---|
| 同级切换 | 淡入淡出 | 200ms |
| 下级进入 | 从右向左滑入 | 300ms |
| 返回上级 | 从左向右滑出 | 300ms |
| 首次加载 | 淡入 | 400ms |
4.1.2 页面加载状态
┌─────────────────────────────────────┐
│ │
│ │
│ │
│ ┌─────────┐ │
│ │ 加载中... │ │
│ │ ◠◡◠ │ │
│ └─────────┘ │
│ │
│ │
│ │
└─────────────────────────────────────┘
加载状态说明:
- 显示加载动画
- 显示加载提示文字
- 内容区域半透明遮罩
- 加载完成后淡入显示内容4.2 导航交互
4.2.1 菜单交互
默认状态: 用户管理 [▶]
悬停状态: 用户管理 [▶] ← 背景变色
展开状态: 用户管理 [▼]
├─ 用户列表 ← 子菜单展开
├─ 用户创建
└─ 批量导入
选中状态: 用户管理 [▼]
├─ 用户列表 ✓ ← 高亮显示
├─ 用户创建
└─ 批量导入
交互规则:
- 点击父菜单：展开/收起子菜单
- 点击子菜单：导航到对应页面
- 悬停父菜单（桌面端）：显示子菜单浮层
- 当前页面菜单：高亮显示4.2.2 侧边栏折叠
展开状态: 折叠状态:
┌────────┐ ┌────┐
│ Logo │ │Logo│
├────────┤ ├────┤
│ 首页 │ │ 🏠 │ ← 图标形式
│ 用户 │ │ 👤 │
│ 组织 │ │ 🏢 │
│ ... │ │ ...│
└────────┘ └────┘
交互规则:
- 点击折叠按钮切换状态
- 折叠时显示图标+Tooltip
- 动画过渡：300ms
- 记住用户偏好五、反馈交互
5.1 消息提示
5.1.1 提示类型
| 类型 | 图标 | 颜色 | 用途 | 自动关闭 |
|---|---|---|---|---|
| 成功 | ✅ | 绿色 | 操作成功 | 3秒 |
| 错误 | ❌ | 红色 | 操作失败 | 不关闭 |
| 警告 | ⚠️ | 黄色 | 警告信息 | 5秒 |
| 信息 | ℹ️ | 蓝色 | 普通信息 | 3秒 |
5.1.2 消息位置
┌─────────────────────────────────────┐
│ [信息提示] │ ← 顶部居中
│ │
│ │
│ │
│ │
│ [成功提示] │ ← 右上角
│ │
│ │
└─────────────────────────────────────┘
位置规则:
- 全局消息：顶部居中
- 操作反馈：右上角
- 表单错误：字段下方5.1.3 消息交互
成功提示示例:
┌─────────────────────────────────────┐
│ ✅ 用户创建成功 │
│ [查看详情] [继续创建] [×] │
└─────────────────────────────────────┘
交互规则:
- 自动关闭倒计时
- 鼠标悬停暂停倒计时
- 点击关闭按钮立即关闭
- 支持操作按钮5.2 加载状态
5.2.1 加载类型
| 类型 | 适用场景 | 效果 |
|---|---|---|
| 全局加载 | 页面切换 | 全屏加载动画 |
| 局部加载 | 数据加载 | 内容区域加载动画 |
| 按钮加载 | 提交操作 | 按钮内加载图标 |
| 骨架屏 | 列表加载 | 骨架屏占位 |
5.2.2 加载动画
全局加载:
┌─────────────────────────────────────┐
│ │
│ │
│ ╭──────╮ │
│ │ ◠◡◠ │ 加载中... │
│ ╰──────╯ │
│ │
│ │
└─────────────────────────────────────┘
按钮加载:
┌─────────────────┐
│ ⟳ 提交中... │ ← 按钮内旋转图标
└─────────────────┘
骨架屏:
┌─────────────────────────────────────┐
│ ████████████ ████████████████ │
│ ████████ ████████████████ │
│ ████████████ ████████████████ │
│ ████████ ████████████████ │
└─────────────────────────────────────┘5.3 确认对话框
5.3.1 确认类型
| 类型 | 场景 | 按钮配置 |
|---|---|---|
| 普通确认 | 一般操作确认 | 取消 + 确认 |
| 危险确认 | 删除等危险操作 | 取消 + 危险操作 |
| 输入确认 | 需要输入确认 | 取消 + 确认（带输入框） |
5.3.2 确认对话框交互
删除确认:
┌─────────────────────────────────────┐
│ ⚠️ 确认删除 [×] │
├─────────────────────────────────────┤
│ │
│ 确定要删除用户"张三"吗？ │
│ 删除后数据将无法恢复。 │
│ │
│ [取消] [删除] │
│ │
└─────────────────────────────────────┘
输入确认:
┌─────────────────────────────────────┐
│ ⚠️ 危险操作确认 [×] │
├─────────────────────────────────────┤
│ │
│ 此操作将删除所有数据，不可恢复。 │
│ 请输入"DELETE"确认操作： │
│ ┌─────────────────────────────┐ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ [取消] [确认删除] │
│ │
└─────────────────────────────────────┘
交互规则:
- 危险操作需要二次确认
- 输入确认需要输入指定文字
- 确认按钮在输入正确后才可点击六、手势交互（移动端）
6.1 手势定义
| 手势 | 操作 | 效果 |
|---|---|---|
| 点击 | 单指点击 | 选中/进入 |
| 长按 | 长按1秒 | 显示操作菜单 |
| 滑动 | 左右滑动 | 切换/删除 |
| 下拉 | 向下滑动 | 刷新 |
| 上拉 | 向上滑动 | 加载更多 |
| 捏合 | 双指捏合 | 缩放 |
6.2 移动端交互
6.2.1 列表滑动操作
列表项左滑:
┌─────────────────────────────────────┐
│ 张三 [编辑][删除]│ ← 左滑显示操作按钮
│ 技术部 · 前端工程师 │
└─────────────────────────────────────┘
列表项右滑:
┌─────────────────────────────────────┐
│[标记已读] 系统通知 │ ← 右滑显示快捷操作
│ 您有一条新的审批消息 │
└─────────────────────────────────────┘
交互规则:
- 滑动距离超过50%触发操作
- 滑动速度过快直接触发
- 支持快速滑动删除6.2.2 下拉刷新
下拉状态:
┌─────────────────────────────────────┐
│ ↓ 下拉刷新 │
│ │
│ ┌─────────────────────────────┐ │
│ │ 列表项1 │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ 列表项2 │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
释放刷新:
┌─────────────────────────────────────┐
│ ⟳ 刷新中... │
│ │
│ ┌─────────────────────────────┐ │
│ │ 列表项1 │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
交互规则:
- 下拉距离超过80px触发刷新
- 释放后显示刷新动画
- 刷新完成后回弹七、动画规范
7.1 动画时长
| 动画类型 | 时长 | 缓动函数 |
|---|---|---|
| 微交互 | 150ms | ease-out |
| 组件动画 | 200ms | ease-in-out |
| 页面切换 | 300ms | ease-in-out |
| 弹窗动画 | 200ms | cubic-bezier(0.4, 0, 0.2, 1) |
7.2 动画效果
7.2.1 淡入淡出
css
/* 淡入 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 淡出 */
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* 应用 */
.element {
animation: fadeIn 200ms ease-in-out;
}7.2.2 滑动动画
css
/* 从右滑入 */
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* 应用 */
.page-enter {
animation: slideInRight 300ms ease-in-out;
}7.2.3 缩放动画
css
/* 弹窗缩放 */
@keyframes modalScale {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* 应用 */
.modal {
animation: modalScale 200ms cubic-bezier(0.4, 0, 0.2, 1);
}八、键盘交互
8.1 快捷键
| 快捷键 | 功能 | 适用场景 |
|---|---|---|
| Ctrl + S | 保存 | 表单页面 |
| Ctrl + F | 搜索 | 列表页面 |
| Ctrl + N | 新建 | 列表页面 |
| Esc | 关闭弹窗/取消 | 全局 |
| Enter | 确认/提交 | 表单、弹窗 |
| Tab | 切换焦点 | 表单 |
| ↑/↓ | 上下选择 | 下拉框、列表 |
8.2 焦点管理
焦点顺序:
┌─────────────────────────────────────┐
│ 用户名 │
│ [输入框1] ←── Tab ──→ [输入框2] │
│ 密码 │
│ [输入框2] ←── Tab ──→ [按钮] │
│ │
│ [登录按钮] ←── Tab ──→ [链接] │
└─────────────────────────────────────┘
焦点样式:
- 输入框：蓝色边框 + 阴影
- 按钮：蓝色边框
- 链接：下划线九、无障碍交互
9.1 键盘无障碍
- 所有功能支持键盘操作
- 焦点顺序符合逻辑
- 提供焦点指示器
9.2 屏幕阅读器
- 图片提供alt文本
- 表单提供label关联
- 动态内容提供aria-live
9.3 视觉无障碍
- 支持高对比度模式
- 文字可缩放至200%
- 不依赖颜色传递信息
十、修订记录
| 版本 | 日期 | 作者 | 变更内容 |
|---|---|---|---|
| 1.0 | 2026-03-09 | UI/UX设计师 | 初始版本，创建交互说明文档 |
文档状态: ⏳ 进行中
最后更新: 2026-03-09
文档作者: UI/UX设计师