包容性设计Inclusive Design
不依赖单一颜色或精细动作传达信息：符号 + 文字 + 图案多重编码，提供动效开关、语音与键盘路径。是规范约束，而非视觉流派。
典型场景公共服务 · 医疗健康 · 老龄用户产品
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
不依赖单一颜色或精细动作传达信息：符号 + 文字 + 图案多重编码，提供动效开关、语音与键盘路径。是规范约束，而非视觉流派。
关键词
效果与动效
Haptic feedback (vibration), voice guidance, focus indicators (4px+ ring), motion options, alt content, semantic
设计系统变量
--contrast-ratio7:1--font-size16px+--keyboard-accessibletrue--sr-test-requiredtrue--wcag-targetenhanced--color-symbolstrue--hapticenabled配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Measured contrast pairs targeting 7:1 for normal text, avoid red-green only, symbol-based indicators, high contrast primary
辅色 / Secondary
Supporting patterns (stripes, dots, hatch), symbols, combinations, clear non-color indicators
强调色在页面底色上的对比度约 6.7:1，可用于正文与图标。
适用场景
适合 / Best For
- Public services
- education
- healthcare
- finance
- government
- accessible consumer
- inclusive
避开 / Do Not Use For
- None - accessibility universal
框架兼容
能力矩阵
实现要点
落地清单
- complete-page conformance tested against the chosen target,
- 7:1+ contrast all text,
- Keyboard accessible (Tab/Enter),
- Screen reader tested,
- Focus visible 3-4px,
- No color-only indicators,
- Haptic fallback
CSS / 技术关键词
aria-* attributes complete, role attributes semantic, focus-visible: 3-4px ring, color-contrast: 7:1+, @media (prefers-reduced-motion), alt text on all images, form labels properly associated
AI 提示词
Design for universal accessibility: high contrast (7:1+), large text (16px+), keyboard-only navigation, screen reader optimization, enhanced accessibility criteria with complete-page verification, symbol-based color indicators (not color-only), haptic feedback, voice interaction support, reduced motion options.