| name | ux-interaction |
| description | B 端管理台 UX 交互与信息架构原则。提供导航设计、表单交互、数据展示、操作反馈等场景的交互规范，以及无障碍性基线要求。当设计或实现前端交互逻辑时使用。 |
UX Interaction
B 端管理台的 UX 交互原则，源自 Cursor Designer 和 UI Design Brain 的 B 端适配精华。
本 Skill 关注"怎么交互"，具体组件怎么写请参考 antd-design-system Skill。
信息架构
导航层级
一级导航（Sidebar） → 二级页面 → 页面内 Tab/锚点
- 一级导航 5-9 项，超出分组折叠
- 当前页面在 Sidebar 有明确的 active 态（高亮背景 + 主色文字）
- 深层页面通过面包屑回溯，而非在 Sidebar 展开多层树
页面结构
每个管理页面遵循统一骨架：
页面标题 [+ 描述] [+ 主操作按钮]
─────────────────────────────
筛选/搜索区
─────────────────────────────
内容区（表格 / 卡片列表 / 详情）
─────────────────────────────
分页（如有）
规则：
- 主操作按钮（"创建""新增"）放页面标题右侧，一个页面最多一个主操作
- 筛选区水平排列，超过 4 个筛选项支持"展开更多"
- 内容区和筛选区间距 16px
表单交互
验证时机
| 时机 | 场景 |
|---|
| 失焦校验 (onBlur) | 单字段格式校验（邮箱、手机号） |
| 提交校验 | 跨字段关联校验、必填校验 |
| 实时校验 | 仅密码强度提示、字符计数等正向引导 |
不要在每次按键时都校验——用户还没输完就报错，体验很差。
表单布局
- 单列垂直布局（label 在上），扫描效率最高
- 表单宽度
max-width: 600px，不要撑满整行
- 相关字段分组（用
Form.Item 组或 Divider），组间距 24px
- 只读字段和可编辑字段视觉区分明确
- 长表单分步骤（Steps + 分步表单），每步 3-7 个字段
操作按钮
- "保存/提交" 在左，"取消" 在右
- 提交后按钮进入 loading 态，防止重复提交
- 表单有未保存变更时离开页面要提示确认
- 破坏性操作（删除）用二次确认 Modal，按钮红色
数据展示
表格
- 固定表头，数据区域可滚动
- 数字列右对齐，文字列左对齐
- 操作列固定右侧，最多 3 个常用操作 + "更多" Dropdown
- 行 hover 高亮（antd 默认支持）
- 空表格显示 Empty 组件 + 引导操作
- 超长文本 ellipsis + Tooltip 显示完整内容
- 排序列有明确的升降序图标
列表/卡片
- 提供列表和卡片两种视图切换（如果适用）
- 卡片悬停 hover 态提升（微弱阴影变化）
- 卡片信息层级：标识（图标/头像） → 标题 → 描述 → 标签 → 操作
- 卡片点击区域 = 整张卡片（进入详情），操作按钮需
stopPropagation
统计数据
- 关键指标放页面顶部，使用大字号 + 辅助描述
- 趋势用折线图，占比用饼图/环形图，对比用柱状图
- 图表有标题和单位说明
- 数据加载中使用 Skeleton 占位，不要空白闪烁
操作反馈
| 操作类型 | 反馈方式 | 消失时机 |
|---|
| 创建/更新成功 | message.success | 3s 自动消失 |
| 删除成功 | message.success | 3s，可 undo 更好 |
| 操作失败 | message.error 或 notification.error | 手动关闭 |
| 后台任务提交 | message.info + 轮询/WebSocket 更新 | 任务完成后通知 |
| 表单校验失败 | 字段内联红色提示 | 修正后消失 |
| 危险操作确认 | Modal.confirm | 用户操作后关闭 |
原则：
- 成功反馈轻量、不阻断流程
- 失败反馈要说明原因和解决方式
- 不要用 alert()，不要用 confirm()
搜索与筛选
- 搜索输入框 debounce 300ms
- 搜索支持 Enter 触发 + 搜索按钮
- 搜索清空按钮（
allowClear）
- 筛选条件变更后自动刷新列表（不需要"查询"按钮）
- 已选筛选条件可视化（Tag 或高亮标记），支持一键清除
无障碍性基线
B 端也需要基本无障碍支持：
| 项目 | 要求 |
|---|
| 键盘导航 | Tab 顺序合理，Modal 内焦点锁定 |
| 焦点可见 | 保留 outline（antd 默认支持），不要 outline: none |
| 语义化 HTML | 用 <button> 不用 <div onClick>，用 <a> 处理链接 |
| alt 文本 | 功能性图片必须有 alt；装饰性图片 alt="" |
| 颜色不单独传达信息 | 状态除了颜色还要有文字/图标辅助 |
| ARIA 标签 | 图标按钮需要 aria-label；动态区域用 aria-live |
渐进式展示
- 默认显示最常用的功能，高级选项收起
- 详情信息用"展开/收起"而非一次性全部显示
- 设置页面分组（tabs 或 collapse），不要一个超长表单
- 首次使用引导用 Tour（antd Tour 组件），不要 Modal 弹窗轰炸
反模式
- Modal 里开 Modal — 复杂流程用新页面或 Drawer
- 删除无确认 — 所有破坏性操作必须二次确认
- 超长 Select 下拉无搜索 — 超过 10 项必须支持搜索
- 点击后无反馈 — 所有异步操作必须有 loading 态
- 禁用按钮无说明 — Tooltip 说明禁用原因
- "点击这里"链接 — 链接文字要描述目标
- 桌面端用汉堡菜单 — 空间足够时直接显示导航
- 自动轮播 — 让用户控制切换
- Placeholder 当 Label — 始终使用可见的 Label
