ui-designerinteraction-specification

# 交互规范 ## 适用场景 定义用户与界面交互的细节，包括加载状态、空状态、反馈机制、动效、无障碍等，确保交互流畅、友好、可访问。 ## 交互设计原则 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. 空状态 #### 空状态场景 | 场景 | 展示内容 | 操作引导 | |------|----------|----------| | 无数据 | 插图 + "暂无数据" | "创建第一个项目" 按钮 | | 搜索无结果 | 插图 + "未找到相关内容" | "尝试其他关键词" 提示 | | 网络错误 | 插图 + "网络连接失败" | "重试" 按钮 | | 权限不足 | 插图 + "无权访问" | "返回首页" 按钮 | | 404页面 | 插图 ...