13、iOS应用的无障碍设计与外观定制

iOS应用的无障碍设计与外观定制

1. 界面设计基础

在设计应用的用户界面时，保持界面的一致性是非常重要的，使用内置技术（如SF Symbols）就是实现这一目标的一个好方法。

1.1 字体选择

字体的选择对应用的用户体验有着重要影响。难以阅读的字体不仅会让所有人在读取文本时感到困难，还会降低应用的易用性。以下是选择字体时的一些最佳实践：
- 使用常规或粗体字体 ：为了提供最佳的用户体验，应避免使用细体或轻体字体，而选择常规或粗体字体，因为这些字体更易于阅读。
- 确保粗体文本可读 ：用户可以在“辅助功能”偏好设置面板的“显示与文字大小”部分启用粗体文本。因此，要确保应用中的文本在启用此功能后依然美观可读。

1.2 VoiceOver功能

VoiceOver是iOS内置的屏幕阅读器，它利用屏幕上用户界面元素中存储的无障碍信息，大声朗读屏幕的描述。通过VoiceOver，你可以实现以下操作：
- 朗读元素名称 ：在屏幕上拖动手指，VoiceOver会朗读你当前触摸的项目名称。
- 使用手势交互 ：由于与元素的主要交互会触发VoiceOver朗读名称，因此你可以使用特殊的VoiceOver手势与元素进行交互。
- 调整语速和音调 ：你可以根据自己的喜好调整VoiceOver使用的语音的语速和音调。

后续你将学习如何确保应用包含VoiceOver所需的信息，以及如何使用“无障碍检查器”预览VoiceOver对每个元素的朗读内容。

1.3 导航设计

用户在应用的不同屏幕之间进行导航的能力对于任何应用来说都是至关重要的，尤其是在考虑无障碍设计时。以下是一些导航设计的最佳实践：
- 确保导航可行 ：要保证VoiceOver能够导航到应用中的每个元素。
- 提供替代文本 ：通过为用户界面元素添加替代文本标签，你可以确保VoiceOver为用户提供该元素更详细的描述。自定义元素和系统提供的控件都支持替代文本标签。
- 支持VoiceOver转子 ：VoiceOver转子允许用户在文档或网页的各种部分类型之间进行导航。要使这些元素对转子可见，以便VoiceOver能够将它们呈现给用户。

1.4 颜色与对比度

应用中颜色的使用可以向用户传达大量信息。在日常生活中，我们对不同颜色有特定的联想，例如红色表示停止，绿色表示通行。然而，大约8%的男性患有红绿色盲，这意味着他们难以区分红色和绿色。虽然交通灯有全球通用的范式（垂直交通灯中，红色在顶部，绿色在底部，黄色在中间），但iOS开发中并没有这样的通用范式。不过，有一些最佳实践可供参考：
- 使用符号 ：除了颜色之外，你可以使用可识别的符号（如SF Symbols中的符号）来传达信息。
- 使用文本标签 ：即使没有颜色，文本也很重要，你仍然可以使用它来传达信息。
- 使用标准颜色 ：要充分利用iOS的内置功能，系统颜色能够正确响应诸如“反转颜色”等无障碍功能。
- 响应反转颜色 ：如果你使用了自定义颜色，要确保当用户启用“反转颜色”功能时，应用能够做出适当的响应。

颜色之间的对比度也是使应用用户界面某些部分突出显示的有力工具。如果前景对象和背景对象的颜色过于相似，就会难以区分它们。当前的指南（Apple也在《人机界面指南》中推荐）要求：
- 普通文本（<= 17磅） ：对比度比率应确保为4.5:1。
- 大文本（> 17磅） ：对比度比率应确保为3:1。

你可以使用犹他州立大学残疾研究、政策与实践研究所的在线对比度检查器来检查对比度值。

2. 无障碍检查器的使用

学习iOS无障碍功能的最佳方法是将其应用到实际的应用中。以下是使用“无障碍检查器”的具体步骤：
1. 运行并构建起始项目。
2. 在Xcode菜单中，选择“Xcode” -> “打开开发者工具” -> “无障碍检查器”。
3. 将模拟器和“无障碍检查器”窗口并排摆放。
4. 在左上角选择模拟器作为要检查的项目，然后点击右上角的目标选择器，并点击动物列表。

“无障碍检查器”有三个可用于测试应用的区域，其中第一个是“检查工具”。

2.1 检查工具

“检查工具”是“无障碍检查器”启动时的默认工具。十字准线按钮用于选择屏幕上的特定元素，而检查器底部的层次结构则可以深入查看屏幕上的元素。选择第一行，向下滚动层次结构并选择该行中的第一个元素，然后点击元素右侧的箭头进行深入查看。“朗读”按钮可以让你听到VoiceOver对该元素的朗读内容。顶部的“基本”部分列出了有关正在检查的元素的一些信息，其中“标签”部分显示了文本视图的文本。

然而，对于那些无法看到屏幕、依赖VoiceOver描述的用户来说，仅仅朗读文本元素的内容可能并不够有信息量。后续你将学习如何改进这个标签，为VoiceOver提供更丰富的内容。

如果应用比较复杂，手动检查每个元素会非常耗时，这时“审核工具”就能派上用场了。

2.2 审核工具

你可以使用“审核工具”生成当前屏幕上用户界面元素可能存在的无障碍违规报告。具体操作如下：
1. 选择“审核工具”（“无障碍检查器”右上角中间的按钮）。
2. 在显示“附近动物”视图时运行审核。

审核结果可能会显示一些与对比度相关的警告。你可以通过使用更深的文本颜色来解决这些问题，使文本在背景中更加突出。以下是具体的代码实现：

extension Color {
  func darken(_ amount: Double) -> Color {
    let uiColor = UIColor(self)
    var red: CGFloat = 0
    var green: CGFloat = 0
    var blue: CGFloat = 0
    var alpha: CGFloat = 0
    uiColor.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
    let darkenedUIColor =
      UIColor(
        red: min(red - amount / 100, 1.0),
        green: min(green - amount / 100, 1.0),
        blue: min(blue - amount / 100, 1.0),
        alpha: 1.0)
    return Color(darkenedUIColor)
  }
}

在后续的代码中，使用更暗的颜色：

.foregroundColor(color.darken(40.0))

同时，你还可以通过在文本字段中添加 .accessibility 修饰符来解决审核报告中“潜在不可访问文本”的警告。例如，在 AnimalContactLink.swift 中，为标题的文本元素添加修饰符：

Text(title)
  .font(.callout)
  .accessibility(label: Text("The contact information for this pet: " + title))

完成这些修正后，重新构建并运行应用，然后再次运行审核。虽然大部分对比度警告可能会消失，但仍可能存在一些来自原生iOS元素（如披露指示器）的警告，这可能需要Apple进一步改进。此外，即使添加了无障碍标签，“潜在不可访问文本”的警告可能仍然存在，这可能是“无障碍检查器”的一个bug，也许是因为它不完全理解SwiftUI。

3. Xcode无障碍检查器

除了“无障碍检查器”应用，Xcode 13和macOS Monterey还提供了一个类似的“无障碍检查器”属性面板。要查看 AnimalRow 视图的无障碍信息，可按以下步骤操作：
1. 打开 AnimalRow.swift 文件。
2. 点击文件底部预览结构体中的 AnimalRow(animal: animal) 。
3. 点击检查器标签中从右数第二个图标（显示一个圆圈中的人）。

“无障碍检查器”属性面板会显示 AnimalRow 中所有相关的无障碍元素，并按照VoiceOver朗读的顺序列出这些元素。当VoiceOver朗读这个视图时，内容可能会比较冗长。为了简化VoiceOver的详细信息，你可以按照以下三个步骤进行操作：
1. 合并无障碍信息 ：从无障碍的角度将整行视为一个单元。

HStack {
//...
}
.accessibilityElement(children: .combine)

确保将此修饰符添加到包含所有子视图的最顶层 HStack 上。

2. 隐藏现有标签 ：隐藏一些无障碍标签，使默认情况下只显示特定的标签。除了名称和性别之外，在整个视图的文本视图中添加以下修饰符：

.accessibilityHidden(true)

3. 添加自定义字段 ：将其余的无障碍标签作为自定义无障碍条目添加。

.accessibilityCustomContent("Age", animal.age.rawValue,
  importance: .high)
.accessibilityCustomContent("Breed", animal.breed)
.accessibilityCustomContent("Type", animalType)
.accessibilityCustomContent("Description", animalDescription)

需要注意的是，Xcode 13可能存在一个bug，在“无障碍检查器”中最多只能显示三个自定义内容元素，但在设备上运行时，所有字段都能被正确检测到。

要在设备上正确测试这些功能，可按以下步骤操作：
1. 启用VoiceOver ：在“设置”中通过“辅助功能” -> “VoiceOver”菜单项启用VoiceOver。
2. 打开应用 ：让Siri打开应用。
3. 选择一行 ：在“附近动物”视图中选择一行，VoiceOver会朗读重要部分并提示还有更多内容。
4. 激活VoiceOver转子 ：用两根手指在屏幕上做扭转动作，VoiceOver转子会出现，继续扭转直到显示“更多内容”。
5. 向上轻扫听取更多内容 ：选择“更多内容”后，抬起手指，然后立即向上轻扫以听取第一个自定义无障碍元素，继续轻扫以听取更多内容。
6. 关闭VoiceOver ：完成测试后，让Siri打开“设置”，通过双击开关关闭VoiceOver。

4. 无障碍设置

在完成审核修正后，你仍然需要做一些工作。有些项目只有在启用无障碍功能后才能进行正确评估。“无障碍检查器”的“设置”面板可以帮助你完成这一任务。该面板允许你直接在“无障碍检查器”中切换设置，而无需进入模拟器的设置。你可以根据应用及其支持的功能，充分利用这些设置的无障碍特性，对应用进行全面测试。

5. 关键要点总结

• 扩大受众群体 ：在应用中使用无障碍技术可以使应用对更多用户具有更高的可访问性。
• 早期融入无障碍设计 ：在应用设计的早期阶段就应考虑并融入无障碍设计。
• 利用内置功能 ：充分利用iOS用户界面元素的内置无障碍功能，通过修改文本、颜色和无障碍标签，向尽可能广泛的用户群体传达信息。
• 重视测试 ：测试在使用无障碍技术时至关重要，因为你可能在日常使用应用时不会主动使用这些功能。要利用VoiceOver和“无障碍检查器”等技术确保无障碍信息的正确性。

6. 外观与感觉的定义

在拥有了大量用户基础之后，让应用在数百万的应用中脱颖而出就显得尤为重要。应用的外观和感觉通常可以从以下两个方面来定义：
- 品牌塑造 ：应用的名称、标志和设计方案可以帮助应用在众多应用中脱颖而出。
- 设计语言 ：定义应用风格设计系统的总体方案。你可能熟悉iOS的设计语言，同样，你也可以为自己的应用创建一种设计语言。

这两个方面可能存在一定的重叠，品牌塑造和设计语言都涉及到一个底层的设计方案。这个设计方案在应用的标志或启动屏幕中更为明显，也可以在应用的控件中微妙地体现出来，以底层用户界面语言为基础，就像给现有界面穿上一层“皮肤”。

iOS应用的无障碍设计与外观定制

7. 定制应用外观的重要性

有了庞大的用户基础后，让应用在众多应用中脱颖而出至关重要。在进行广告宣传、口碑传播或寻求热门网站评测之前，先让应用拥有独特的外观是很关键的。接下来将介绍一些打造应用外观和感觉的最佳实践，以及如何利用各种iOS功能让应用风格出众。

8. 品牌塑造与设计语言

品牌塑造和设计语言是定义应用外观和感觉的两个重要方面，具体内容如下表所示：
|方面|描述|体现示例|
| ---- | ---- | ---- |
|品牌塑造|应用名称、标志和设计方案可助应用在众多应用中突出|应用的logo、名称|
|设计语言|定义应用风格设计系统的总体方案|应用内控件的设计风格|

品牌塑造和设计语言有重叠之处，它们都依赖于底层的设计方案。该方案在应用logo或启动屏幕上更明显，也会在应用控件中微妙呈现，依托底层用户界面语言作为基础。

9. 其他定制要点分析

苹果的人机界面指南（HIG）涵盖了多个有助于确立应用风格的方面，如品牌塑造、暗黑模式的使用、启动屏幕和排版等。以下是对这些方面的详细分析：
- 暗黑模式 ：支持暗黑模式可以为用户提供更多的视觉选择，尤其在低光环境下能提升用户体验。开发者需要确保应用在暗黑模式下的颜色对比度、文字可读性等方面都符合要求。
- 启动屏幕 ：启动屏幕是用户打开应用时看到的第一个界面，它应该简洁明了，同时能够体现应用的品牌特色。可以在启动屏幕中展示应用的logo和名称，给用户留下良好的第一印象。
- 排版 ：合适的字体和文字排版可以提高应用的可读性和专业性。在选择字体时，要考虑到不同设备和屏幕尺寸的兼容性，确保文字在各种情况下都能清晰显示。

10. 定制流程总结

以下是定制应用外观和感觉的流程：

graph LR
    A[明确品牌定位] --> B[设计品牌元素（名称、标志等）]
    B --> C[定义设计语言]
    C --> D[设计启动屏幕]
    D --> E[选择合适的排版]
    E --> F[适配暗黑模式]
    F --> G[测试与优化]

具体步骤如下：
1. 明确品牌定位 ：确定应用的目标用户群体、核心功能和独特卖点，以此为基础进行品牌塑造。
2. 设计品牌元素 ：包括应用的名称、标志和设计方案，确保这些元素能够体现应用的特色和价值。
3. 定义设计语言 ：制定一套统一的设计规则，涵盖颜色、字体、图标等方面，使应用的各个界面保持一致的风格。
4. 设计启动屏幕 ：打造一个简洁而有吸引力的启动屏幕，展示应用的品牌形象。
5. 选择合适的排版 ：根据应用的风格和内容，选择合适的字体和文字排版方式，提高可读性。
6. 适配暗黑模式 ：确保应用在暗黑模式下也能正常显示，并且保持良好的视觉效果。
7. 测试与优化 ：在不同的设备和环境下对应用进行测试，收集用户反馈，对外观和感觉进行优化。

11. 总结与展望

定制应用的外观和感觉是一个综合性的过程，需要从品牌塑造、设计语言、暗黑模式、启动屏幕和排版等多个方面进行考虑。通过遵循苹果的人机界面指南，结合应用的特点和用户需求，开发者可以打造出具有独特风格和良好用户体验的应用。

未来，随着技术的不断发展和用户需求的不断变化，应用的外观和感觉定制也将面临新的挑战和机遇。开发者需要不断学习和创新，紧跟设计趋势，为用户带来更加优质的应用体验。同时，也要注重应用的无障碍设计，确保应用能够被更广泛的用户群体所使用。