跳到主内容

UI 设计和样式

关于 Flutter 无障碍支持的信息。

为了创建易于访问的应用程序,请在设计 UI 时考虑无障碍性。本页面涵盖了易于访问的 UI 设计和样式的关键方面。

大字体

#

Android 和 iOS 系统都包含用于配置应用程序所需字体大小的系统设置。Flutter 文本组件在确定字体大小时会遵循此操作系统设置。

字体大小由 Flutter 根据操作系统设置自动计算。然而,作为开发者,你应该确保当字体大小增加时,你的布局有足够的空间来渲染所有内容。例如,你可以在配置为最大字体设置的小屏幕设备上测试应用程序的所有部分。

要调整字体大小:在 iOS 上,转到“设置”>“辅助功能”>“显示与文字大小”;在 Android 上,转到“设置”>“字体大小”。

示例

#

以下两张截图显示了使用默认 iOS 字体设置和在 iOS 辅助功能设置中选择最大字体设置时呈现的标准 Flutter 应用程序模板。

Default font setting

默认字体设置

Largest accessibility font setting

最大辅助功能字体设置

充足的对比度

#

充足的色彩对比度使文本和图像更易于阅读。除了使各种视力受损的用户受益外,充足的色彩对比度还能在极端照明条件下(例如暴露在直射阳光下或在低亮度显示器上)帮助所有用户查看界面。

W3C 建议:

  • 小号文本(低于 18 点常规或 14 点粗体)的对比度至少为 4.5:1
  • 大号文本(18 点及以上常规或 14 点及以上粗体)的对比度至少为 3.0:1

你可以使用 Flutter 的 Accessibility Guideline API 来测试对比度。有关测试的更多详细信息,请查看无障碍测试页面

点击目标大小

#

太小的控件对许多人来说难以交互和选择。请确保交互元素具有足够大的点击目标,以便用户可以轻松点击。

AndroidiOS 均建议最小点击目标大小分别为 48x48 dp 和 44x44 pts。

W3C 建议最小目标大小为 44x44 CSS 像素。

你可以使用 Flutter 的 Accessibility Guideline API 来测试点击目标大小。有关测试的更多详细信息,请查看无障碍测试页面

其他无障碍功能

#

你可以查看 AccessibilityFeatures 类,了解平台可能启用的其他无障碍功能,例如粗体文本、高对比度和反色显示。