ui-designer-interaction-specification

name	ui-designer/interaction-specification
description	交互规范，定义加载状态、空状态、反馈机制、动效、无障碍等交互细节
version	1.0.0
agent	ui-designer
type	guideline
user-invocable	false
agent-invocable	true
dependencies	["ui-designer/design-system"]
triggers	["需要定义交互行为时","需要处理边界情况时","需要确保无障碍访问时"]

交互规范

适用场景

定义用户与界面交互的细节，包括加载状态、空状态、反馈机制、动效、无障碍等，确保交互流畅、友好、可访问。

交互设计原则

1. 及时反馈：用户操作后立即给予反馈
2. 清晰引导：明确告诉用户下一步该做什么
3. 容错性：允许用户撤销、修改操作
4. 一致性：相同操作在不同场景下行为一致
5. 可访问性：支持键盘、屏幕阅读器等辅助技术

交互规范

1. 加载状态

加载场景

场景	处理方式	时机	视觉表现
页面首次加载	骨架屏	首次进入页面	灰色占位块，模拟内容结构
页面刷新	顶部进度条	刷新页面	蓝色进度条，从左到右
按钮提交	按钮内 spinner	点击提交按钮后	按钮内显示旋转图标，文字隐藏
列表加载更多	底部 spinner	滚动到底部	底部显示"加载中..."
局部刷新	区域内 spinner	刷新某个区域	区域内显示旋转图标
搜索	输入框内 spinner	输入后延迟搜索	输入框右侧显示旋转图标

骨架屏设计

┌─────────────────────────────────────┐
│  ████████                            │  ← 标题占位
│  ████████████                        │  ← 描述占位
│                                     │
│  ████  ████████████████              │  ← 列表项占位
│  ████  ████████████████              │
│  ████  ████████████████              │
└─────────────────────────────────────┘

骨架屏原则：

• 模拟真实内容的结构和布局
• 使用灰色占位块（Gray-200）
• 添加微妙的动画（shimmer效果）
• 不要显示真实数据的占位符

Spinner设计

尺寸	大小	线宽	用途
sm	16px	2px	按钮内、输入框内
md	24px	2.5px	卡片内、区域内
lg	32px	3px	页面级加载

颜色：

• 主色（Primary）：主要操作的加载
• 灰色（Gray-400）：次要操作的加载
• 白色（White）：深色背景上的加载

2. 空状态

空状态场景

场景	展示内容