Skip to content
返回质量保障

包容性设计

从一开始为人类多样性全范围设计——能力、语言、年龄、设备和上下文。

为什么

包容性设计是认无"平均用户"——每用户有不同能力、语言、设备、网络和上下文组合。为平均设计（30 岁桌面宽带）排斥每个非平均: 需更大文本的 60 岁老花、需简语言的非母语者、慢 CPU 的 3 年老 Android、火车上不稳 wifi 的用户。包容性设计非末加"无障碍模式"；是设计一个对全范围工作的体验，使产品对每个人更好——帮非母语者的简语言也帮母语者略读、帮运动障碍的大触控目标也帮颠簸公交上手机用户。路缘斜坡效应: 为边缘情况设计改善主流。

何时使用

从设计过程最开始。包容性设计是心态非阶段——它指导布局、语言、颜色、交互和内容的每个决定。

如何做

1. 为全范围用户设计非平均
   - 能力: 盲、低视力、运动障碍、认知、聋
   - 语言: 非母语者、低识字、不同阅读级
   - 年龄: 老用户（老花、慢处理）、儿童（短注意）
   - 设备: 桌面、手机、平板、屏幕阅读器、仅键盘
   - 上下文: 亮阳光、慢网络、单手用、公共环境

2. 用简语言
   - 短句、常用词、主动语态、无行话
   - 阅读级: 目标 8 级（Hemingway app、readable.com）
   - 首次用定义必要技术术语
   - 长内容提供摘要

3. 设计灵活布局
   - 响应式: 320px（小手机）到 1920px（大桌面）工作
   - 重流: 320px 单列重流（WCAG 1.4.10）
   - 缩放: 200% 可用（WCAG 1.4.4）、400% 重流（WCAG 1.4.10）
   - 触控目标: 至少 44x44px（WCAG 2.5.5）供运动精度

4. 提供多种方式感知信息
   - 标签文本 + 图标（非仅文本或仅图标）
   - 状态文本 + 颜色（非仅颜色——色盲）
   - 视频文本 + 音频（字幕）、音频 + 文本（转录）
   - 错误: 文本 + 图标 + 颜色，非仅红边框

5. 用多样用户测
   - 跨范围招用户: 不同年龄、能力、语言、设备
   - 观他们在真实上下文中用产品（非实验室）
   - 他们反馈揭示"平均用户"设计创的障碍

示例

// 简语言: 前后
// 前（14 级、行话、被动语态）:
// "为促进物品采购，用户须在结账流程启动前认证自身。"
// 后（6 级、主动语态、常用词）:
// "登录买物品。"

// 多方式感知状态
// 坏: 仅颜色表状态
<div className={status === "error" ? "red" : "green"}>{message}</div>

// 好: 颜色 + 图标 + 文本
<div className={status === "error" ? "error" : "success"}>
  <Icon name={status === "error" ? "alert" : "check"} />
  <span>{status === "error" ? "错误: " : "成功: "}{message}</span>
</div>

// 触控目标: 至少 44x44px
// 坏: 20x20px 关按钮（手机难点、运动障碍不可能）
<button className="close" style={{ width: 20, height: 20 }}>×</button>

// 好: 44x44px 最低
<button className="close" style={{ width: 44, height: 44 }} aria-label="关">×</button>

// 响应式 + 重流: 320px 工作
// CSS: 内容单列重流，无水平滚
@media (max-width: 320px) {
  .grid { display: block; }
  .sidebar { display: none; } /* 或移到底 */
}

// 字幕和转录
<video controls>
  <source src="intro.mp4" type="video/mp4" />
  <track kind="captions" src="intro.vtt" srclang="en" label="English" />
</video>
<!-- 加下方转录供屏幕阅读器用户和略读者 -->
<details>
  <summary>视频转录</summary>
  <p>欢迎来到我们产品。本视频我们将涵盖...</p>
</details>

常见问题

  • ⚠为桌面设计"响应式"时手机堆列——手机体验是桌面拥挤难用版非考虑手机上下文（单手、触控、小屏）的设计。
  • ⚠因受众是"专业人士"用行话和复杂句——专业非母语者和手机上略读的专业人士都需简语言，简语言非变笨。
  • ⚠仅用颜色表状态（红错、绿成功）——8% 色盲男两者见同棕，状态对他们不可见。
  • ⚠"如有预算"末加字幕和转录——聋用户无字幕不能访问视频，这是基线要求非好有。

最佳实践

  • ✓移动优先设计大屏增强——这强本质内容适最小屏，大屏得更好体验非反过来。
  • ✓用 8 级阅读级简语言——帮非母语者、低识字者和手机上略读的每个人，不变笨内容。
  • ✓多模态提供信息（文本 + 图标 + 颜色、字幕 + 音频、转录 + 视频）——无单模态对所有人工作，组合确保每人能感知信息。
  • ✓招多样用户（不同年龄、能力、语言、设备）测——他们反馈揭示为平均设计创的障碍，路缘斜坡改进惠及每人。