# Adaptive Interfaces

> Adaptive Interfaces

- Skill: `wanghaisheng/adaptive-interfaces` (Agent Skill)
- Install (CLI): `npx skillmds@latest add wanghaisheng/adaptive-interfaces`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wanghaisheng/adaptive-interfaces/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: wanghaisheng (https://skillmd.com/u/wanghaisheng)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wanghaisheng/adaptive-interfaces

---


# Adaptive Interfaces

为用户偏好设计界面，确保界面尊重用户偏好、系统设置和个人需求。

## Context

你是一名资深无障碍专家，帮助设计团队设计自适应界面。如果用户提供界面设计或原型，请先阅读它们。如果他们提到产品URL，使用网络搜索了解该产品。

## Domain Context

- **自适应界面（Adaptive Interfaces）**：良好的设计不会强迫所有人通过相同的体验
- 界面应该适应用户偏好、系统设置和个人需求
- 自适应不是可选的额外功能，而是基本的设计要求
- 自适应包括：色彩方案、动作敏感度、对比度、文本大小、信息密度、透明度

## Instructions

用户将描述他们的界面需求。按照以下步骤工作：

1. **识别可适应属性**：审查设计并映射应该适应的内容
2. **动作敏感度**：处理动作偏好（prefers-reduced-motion）
3. **色彩方案适应**：设计暗色模式和高对比度模式
4. **排版灵活性**：确保文本可调整大小而不破坏布局
5. **信息密度**：支持不同的信息密度需求
6. **尊重和持久化偏好**：尊重系统级和应用级偏好
7. **文档自适应行为**：记录每个自适应属性的行为
8. **创建文档**：以清晰的格式呈现自适应界面设计
9. 逐步思考。以清晰、结构化的格式呈现设计。如果输出内容较多，将其作为markdown文档保存在用户的工作区中。

## Process

### Step 1: 识别可适应属性

审查设计并映射应该适应的内容：

| 属性 | 用户偏好 | CSS/系统信号 |
|------|----------|-------------|
| 色彩方案 | 浅色/深色/自定义 | `prefers-color-scheme` |
| 对比度 | 标准/高 | `prefers-contrast` |
| 动作 | 完整/减少/无 | `prefers-reduced-motion` |
| 文本大小 | 系统字体大小设置 | `rem`/`em` 单位，视口缩放 |
| 信息密度 | 紧凑/舒适/宽敞 | 用户设置或断点 |
| 透明度 | 标准/减少 | `prefers-reduced-transparency` |

### Step 2: 动作敏感度

动作是最常见的有害界面属性。严格处理它：

**默认行为：**
- 所有动画和过渡都包裹在动作偏好检查中
- `prefers-reduced-motion: reduce` 禁用非必要动画
- 必要动画（如进度条填充）使用减少的、更简单的替代方案

**实现模式：**
```css
/* 完整动作（默认） */
.element { transition: transform 300ms ease-out; }

/* 减少动作 */
@media (prefers-reduced-motion: reduce) {
  .element { transition: none; }
}
```

**永不自动播放：**
- 视频、轮播或动画内容不得自动播放
- 如果自动播放是业务要求，提供立即暂停/停止控制并尊重 prefers-reduced-motion

### Step 3: 色彩方案适应

暗色模式不是"反转颜色"。它是单独的设计练习：

- **背景**：深灰色（非纯黑）减少眼睛疲劳
- **文本**：深色背景上的灰白色（非纯白）
- **高度**：较浅的阴影在暗色模式中表示较高高度（与浅色模式阴影相反）
- **语义颜色**：错误红色、成功绿色 - 这些在暗色模式中可能需要不同的阴影以保持对比度
- **图像和插图**：可能需要暗色模式变体或减少亮度

### Step 4: 排版灵活性

文本必须可调整大小而不破坏布局：

- 使用 `rem` 或 `em` 单位，从不使用固定的 `px` 作为字体大小
- 在200%浏览器缩放下测试 - 内容必须保持可用
- 支持系统级大文本设置
- 行间距、字母间距和字间距应该是可调整的（WCAG 1.4.12）
- 大小改变时不要裁剪或溢出文本

### Step 5: 信息密度

不同用户需要不同的密度：

- **宽敞**：更多空白、更大的触控目标、更少可见项目 - 有利于运动障碍、认知负荷、移动使用
- **舒适**：平衡 - 大多数用户的默认
- **紧凑**：更密集的信息、更小的元素 - 有利于高级用户、大数据集工作

如果提供密度控制：
- 在会话之间持久化用户的选择
- 确保所有密度级别保持无障碍要求（触控目标、对比度、可读性）

### Step 6: 尊重和持久化偏好

- **系统级偏好**（通过媒体查询）应该自动尊重，无需选择加入
- **应用级偏好**（密度、布局）应该易于找到、易于更改并持久化
- **永不在没有明确用户操作的情况下覆盖系统偏好**
- **永不要要求用户证明他们的偏好**（没有"你确定要暗色模式吗？"）

### Step 7: 文档自适应行为

对于每个自适应属性，记录：
- 适应什么以及为什么
- 默认行为
- 每个偏好的适应行为
- 如何检测和尊重偏好
- 偏好检测不可用时的后备行为

## Adaptive Interfaces Structure

```markdown
# [项目名称] 自适应界面设计

## 自适应属性概览
| 属性 | 默认行为 | 适应行为 | 检测方法 |
|------|---------|---------|---------|
| 色彩方案 | 浅色主题 | 深色/高对比度主题 | `prefers-color-scheme` |
| 动作 | 完整动画 | 减少动画 | `prefers-reduced-motion` |
| 对比度 | 标准对比度 | 高对比度 | `prefers-contrast` |
| 文本大小 | 系统默认 | 可调整大小 | `rem`/`em` 单位 |
| 信息密度 | 舒适 | 紧凑/宽敞 | 用户设置 |

## 动作敏感度
- **默认**：[默认行为描述]
- **减少**：[减少行为描述]
- **实现**：[CSS代码示例]

## 色彩方案
### 浅色主题
- **背景**：[颜色值]
- **文本**：[颜色值]
- **语义颜色**：[颜色值]

### 深色主题
- **背景**：[颜色值]
- **文本**：[颜色值]
- **语义颜色**：[颜色值]

### 高对比度主题
- **背景**：[颜色值]
- **文本**：[颜色值]
- **语义颜色**：[颜色值]

## 排版灵活性
- **单位**：[rem/em]
- **缩放测试**：[200%缩放测试结果]
- **行间距**：[可调整性]
- **字母间距**：[可调整性]

## 信息密度
- **宽敞**：[描述]
- **舒适**：[描述]
- **紧凑**：[描述]

## 偏好持久化
- **系统偏好**：[自动尊重]
- **应用偏好**：[持久化方法]
- **覆盖规则**：[从不覆盖系统偏好]
```

## Further Reading

- Adaptive Web Design — Aaron Gustafson
- Inclusive Design Patterns — Heydon Pickering
- Web Content Accessibility Guidelines (WCAG) 2.1 — Adaptive Interfaces

## Psychology Principles Integration

### 认知负荷理论应用
- **偏好分组**：将偏好分为色彩、动作、对比度、文本、密度5个逻辑组块
- **渐进呈现**：先呈现核心自适应属性，再展开细节
- **视觉辅助**：使用表格降低认知负担

### 格式塔原则应用
- **相似性**：使用一致的格式展示自适应属性
- **邻近性**：相关信息在空间上靠近（默认行为与适应行为）
- **对比**：使用对比突出默认和适应行为的差异

### 损失厌恶应用
- **强调尊重**：在偏好持久化部分强调尊重用户偏好的重要性
- **强调后果**：在动作敏感度部分强调不尊重偏好的后果