The practice of inclusive design
Design 入门 15m

包容性设计的实践

The practice of inclusive design

2021年6月8日

在 Apple 官方观看视频

一句话判断

这不是一堂形而上的「政治正确」课，而是用真实案例告诉你：不做包容性设计 = 放弃用户 = 放弃收入。

这场 Session 讲了什么

这个 Session 从「为什么要做包容性设计」开始，但没有停留在口号层面，而是直接展示了具体的设计决策如何影响不同用户群体。苹果的设计团队分享了他们在开发 Apple 自家 App 时的思考过程：如何让色盲用户也能区分图表中的数据系列，如何在嘈杂环境中让听力障碍用户不依赖音频就能获取关键信息，如何让运动障碍用户不依赖精确触控也能完成操作。

Session 提出了一个核心框架：「设计的三层包容」。第一层是基础可达——所有用户都能使用核心功能；第二层是个性化——用户可以选择适合自己的交互方式；第三层是情感认同——让每个用户觉得这个产品是「为我做的」。苹果举了几个具体例子：Fitness+ 提供的「字幕 + 音频描述 + 手语」三重保障，Apple Watch 的「辅助触控」让单手操作成为可能，以及 App Store 的编辑推荐开始标注「辅助功能标签」让用户提前知道 App 是否适配了自己的需求。

值得深挖的点

「不是为残障用户设计，而是为所有用户设计」。 Session 反复强调一个观点：辅助功能不是「额外功能」，而是好的通用设计的副产品。比如你在阳光下看不清手机屏幕时，你就是一个「临时视觉障碍用户」；你抱着孩子单手操作手机时，你就是一个「临时运动障碍用户」。高对比度模式、语音控制、大按钮——这些「辅助功能」在特定场景下对所有人都有效。把辅助功能当作核心需求来设计，而不是事后补救，成本更低、效果更好。

辅助功能标签的商业价值。 App Store 在 iOS 15 中引入了辅助功能标签系统，开发者可以标注自己的 App 支持哪些辅助功能（VoiceOver、动态字体、Switch Control 等）。这些标签会直接展示在 App Store 产品页上，帮助有辅助功能需求的用户在下载前做出判断。对于开发者来说，这是一个新的差异化竞争点——标注了辅助功能标签的 App 在搜索结果中会吸引更多用户。

代码片段

// 为图表添加辅助功能标签，让 VoiceOver 用户也能理解数据
struct ChartView: View {
    let dataPoints: [DataPoint]

    var body: some View {
        HStack {
            ForEach(dataPoints) { point in
                RoundedRectangle(cornerRadius: 4)
                    .fill(point.color)
                    .frame(height: point.value)
                    // 为色盲用户：不要只依赖颜色区分
                    // 为 VoiceOver 用户：提供文字描述
                    .accessibilityLabel("\(point.label): \(point.value)")
                    .accessibilityValue("占比 \(point.percentage)%")
            }
        }
        .accessibilityElement(children: .contain)
        .accessibilityLabel("数据图表")
    }
}
// 支持动态字体——不要硬编码字号
struct ArticleView: View {
    let content: String

    var body: some View {
        ScrollView {
            Text(content)
                .font(.body)  // 使用语义化字体，系统会自动适配动态字体设置
                .padding()
        }
    }
}
// 检测辅助功能状态，据此调整 UI
if UIAccessibility.isVoiceOverRunning {
    // VoiceOver 开启时，简化动画，提供更多文字描述
    simplifiedView
} else {
    animatedView
}

最佳实践

  • 在设计阶段就考虑辅助功能，而不是开发完再补。在设计稿上标注每个元素在 VoiceOver 下应该读什么，比在代码里回过头想要高效得多
  • 用「不只是颜色」原则传达信息——图表用形状 + 颜色，按钮用图标 + 文字，状态用位置 + 颜色
  • 在 App Store Connect 中填写辅助功能标签，这对用户发现你的 App 有直接帮助
  • 每个版本发布前用 Accessibility Inspector 做一轮检查，它会自动发现缺失的标签和对比度不足的问题

还有什么值得关注

  • Apple 的辅助功能文档（Human Interface Guidelines - Accessibility）是业界最完善的设计参考之一
  • Xcode 的 Accessibility Inspector 工具可以模拟不同辅助功能场景，不需要真实设备
  • iOS 15 新增了「per-app 语言设置」，用户可以为每个 App 单独设置语言，这对多语言社区的用户非常实用
WWDC 2021