ux-interaction

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