抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

Accessibility 辅助功能

无障碍设计使具有不同能力的用户能够浏览、理解和享受 UI。

Overview

默认情况下,Accessibility 是 Material 的基本设计值。 了解和预测广泛的人类经验和残疾可以建立产品基础,从而防止代价高昂的重新设计、减少技术和设计债务并预先节约资源。

Material 组件中内置的 Accessibility 标准旨在为包容性产品设计提供基础。 了解您的产品的 Accessibility 可以提高所有用户的可用性,包括那些有低视力、失明、听力障碍、认知障碍、运动障碍或情境障碍(例如手臂骨折)的用户。

Get started

跨组件页面和指南记录了 Accessibility 要求和目标。 在组件指南中,Accessibility 标准既是隐式的(内置于设计和代码中),也是显式的(在需要判断的地方讨论注意事项。)

使用此页面作为了解材料指南中应用的 Accessibility 标准的起点,以及在整个设计和开发阶段继续检查的参考。

Accessibility 设计原则

以下 Accessibility 设计原则是有助于预测、包含和响应个人需求的方法。 它们是设计、开发、协作和共同创造的考虑因素,鼓励包容和公平的结果。

Honor individuals

通用的默认体验很少能满足每个人的需求。 在默认体验中引入可定制的功能为个人适应留出了空间。 尊重任何人不断变化的需求可能意味着给予更多自由来为自己选择事物

因为一个人在一天、一年或一生中的经历会不断变化,它有助于支持不同的偏好和选择,使个人能够解决他们不断变化的条件、个人知识和不同需求的满足方式。

Learn before, not after

在定义解决方案之前,花时间了解具有各种能力和生活经验的用户的需求。 正式和非正式的研究可以开辟新的思维方式,减少偏见,并鼓励创造性的方式来提供访问权限,尤其是对那些不符合现行规范的人。

Accessible 设计流程尽可能多地预先预测潜在的产品或体验结果。 当设计问题出现时,对结果的探索可以作为深思熟虑地学习和恢复的研究基础。

Requirements as a starting point

WCAG 制定的最低要求支持特定的人类需求。 使用 Accessibility 标准进行设计是一个创造性的机会,可以扩展和改进改善人与技术关系的要求的应用。

历史表明,源自对特定访问需求(暗模式、文本到语音、语音到文本)的响应的功能是在指定约束内创造性地解决问题的结果。 将需求视为机遇而非约束,已被证明可以带来最终为许多人服务的解决方案。

Accessibility 基础

Assistive technology 辅助技术

辅助技术有助于增加、维持或改善残障人士的功能能力。 通过键盘、屏幕阅读器和盲文显示器等设备以及跟踪输入、放大镜和语音输入等技术,人们可以更独立地生活。

Layout and typography

Material Design 目标指南可以帮助无法看到屏幕或难以触摸小目标的用户点击应用中的元素。

Adaptive design

自适应布局对来自用户、设备和屏幕元素的输入做出反应。 材料指南描述了如何针对从手机和平板电脑到台式机等各种屏幕尺寸进行设计。

定制 Material

动态色彩让个人设备更具个性

M3 为品牌颜色和个人颜色偏好开辟了新的可能性,以融合一种独一无二的体验。 颜色系统满足了对颜色的需求,以反映应用程序的设计敏感性,同时也尊重个人为自己选择的设置。

通过启用动态颜色,应用程序可以保留定义和区分产品的颜色,同时还可以让用户更好地控制对他们最重要的样式。

应用品牌色彩系统

借助动态颜色和 M3 配色方案,您的应用程序的颜色会自动适应并与用户设置集成。

M3 支持自定义参数的系统应用,以帮助定义和维护传达您品牌的风格。

颜色系统自动处理关键调整,提供可访问的颜色对比度、易读性、交互状态和组件结构。 动态颜色也适用于自定义(非材料)组件。

Get started

要利用个性化功能,您需要使用 M3 颜色系统构建自定义配色方案。

为了让您的应用尊重用户的设备和应用级设置,您将实现一个自定义主题,用户生成的配色方案可以映射到该主题。

此外,使用自定义主题可确保您的应用程序具有可供未启用动态颜色的用户使用的后备配色方案。

设置和教程

动态颜色既是用户设置,也是开发人员的选择。 您可以有选择地应用动态颜色以与您的品牌配色方案一起使用。 例如,您应用中的个人资料或帐户屏幕可以反映用户的配色方案设置,从而为应用中的个人空间增添个性。

定制颜色方案

Material Theme Builder 有助于创建自定义颜色体验,无论您是使用已建立的品牌参数还是尚未定义应用程序的颜色。

在 Material Theme Builder 中,您可以识别并输入一种或多种颜色来定义您的配色方案。 添加第二种或第三种颜色是可选的,并且会影响最终的配色方案。

将您的应用程序颜色映射到自定义方案的源颜色,使 M3 中动态颜色的角色和逻辑保持一致。

品牌颜色可以作为一次性颜色添加到工具中,也可以作为具有一系列色调的完整品牌调色板添加到该工具中,从而在您的应用程序中提供一致、全面的颜色表达。

如果您的应用程序使用单一品牌颜色或有限的品牌调色板,您可以输入主要品牌颜色作为自定义配色方案的源颜色。 输入颜色将用于生成一个方案,为您提供互补色调以完善方案。

Color roles

根据 UI 中的用途,关键颜色被分配映射到组件中元素的角色。 具有角色分配的五个基本颜色组是:

  • Primary
  • Secondary
  • Tertiary
  • Neutral
  • Neutral Variant

输入颜色会生成一个色调调色板,用于填充所需的颜色角色范围,例如 primary, on-primary, and primary 容器。

Design tokens

token 存储颜色和字体等样式值,因此可以在设计、代码、工具和平台中使用相同的值。

使用设计令牌而不是硬编码值可以简化使用设计系统构建、维护和扩展产品的工作。

2021 年秋季:Material Design 现在包括颜色和排版值的系统和参考 token。 用于组件、高程和尺寸测量的其他标记正在开发中。

  • 令牌是一种与平台无关的格式,但它们可以用于特定于平台的代码。
  • 共有三种令牌:reference, system, and component。 Material Design 目前使用reference和system令牌; component令牌正在开发中。
  • 令牌有助于在设计系统中保持对齐和一致性。

Interaction states

状态是用于传达组件或交互元素状态的视觉指示器。

State layers

状态层是元素上的半透明覆盖层,指示其状态。 状态层提供了一种通过使用不透明度来可视化状态的系统方法。 一个层可以应用到整个元素或以圆形形状应用,并且在给定时间只能应用一个状态层。

要从启用样式转换为有状态样式,需要添加状态层。

状态层是一个叠加层,每个状态具有固定的不透明度,并使用与内容相同的颜色。

例如,如果启用的样式对容器使用辅助容器颜色,对内容使用辅助容器颜色,则状态层将是使用辅助容器颜色的叠加层。

如果启用的样式对容器使用表面角色,对内容使用原色角色,则状态层将是使用原色的叠加层。

“On” colors

默认情况下,组件的状态层颜色源自其内容,如果没有图标,则可以是图标的颜色或标签文本的颜色。

on color 是内容使用的颜色角色。 每个容器颜色都有自己对应的颜色。

例如,如果容器颜色是辅助容器,则内容将使用辅助容器颜色角色。

State layer tokens & values

状态层对每个状态使用固定百分比的不透明度。 状态层使用内容使用的颜色(通常是颜色)及其各自状态的不透明度百分比。

Selected and activated states

与使用状态层的悬停、焦点、按下和拖动状态不同,使用激活或选定状态的组件会直接更改容器和内容颜色。

Disabled states

当组件或元素不可交互且不应在 UI 中强调时,禁用状态会进行通信。 禁用状态在其内容和容器上使用 38%(内容)和 12%(容器)不透明度。

评论