想提高可用性？看谷歌Material Design 的官方教程是怎么做的！

荣超：本节是谷歌Material Design可用性部分的中文完整译本，非常完整地阐述了提高可用性的方法和技巧。

一.?无障碍/可访问（Accessibility）

无障碍设计能够使用户成功浏览、理解和使用您的UI。

原则

让无论是视力低下、失明、听力障碍、认知障碍或运动障碍的用户都可以使用产品。提高产品的可访问性就是提高面向所有用户产品的可用性。这也是正确的事情。

Material design的内置无障碍注意事项将帮助你的产品适应所有用户。本节所讲主要适用于移动端UI设计。有关设计和开发无障碍产品的详细信息，请访问 Google accessibility site

清晰

设计清晰的布局和调用不同的操作来帮助用户导航。每一个额外添加的按钮、图像和文本行都会使页面变得更加复杂。所以你需要简化你应用的UI：

• 清晰可见的元素
• 足够的对比度和尺寸大小
• 明确的优先级关系
• 关键信息一目了然

直接明了

设计你的应用来适应不同情况的用户。实际场景中，面对使用新产品注意力相对分散，或使用纯文本屏幕阅读器（一个使用语音合成朗读或使用盲文显示的软件）的用户，你的应用应该让其中每个用户都能轻松地：

导航：给予用户信心，让用户知道自己在应用中所处的位置以及当下最重要的任务是什么。

了解重要的任务：通过视觉和文字提示加强重要的信息。使用颜色、形状、文本和动效来向用户传达正在发生的事情。

访问你的应用：使用合适的内容标签去提升纯文本版本应用的用户体验。

具体

适配不同平台的辅助技术，就像支持触摸屏、键盘或鼠标输入方式一样。例如，你的Android应用需要支持Google屏幕阅读器，TalkBack

辅助技术通过屏幕阅读器、放大设备、轮椅、助听器或记忆辅助设备来帮助残障人士提高、维持或改善自身功能性的能力。

颜色和对比

使用颜色和对比度帮助用户浏览和理解你应用的内容，同时了解操作并与正确的元素进行交互。

无障碍调色板

选择支持可用性的应用主色、辅色和强调色。确保元素颜色之间有足够的对比度，以便视力低下的用户可以正常浏览和使用你的应用。

对比度

根据万维网联盟（W3C），颜色与其背景之间的对比度基于明度或发出的光的强度不同分成1-21。

对比度表示颜色与另一种颜色之间的区分，通常写成1：1或21：1。比值中两个数之间的差值越大， 颜色间的相对明度的差值就越高。

W3C建议正文文本和图像文本的对比度：

小文本相对其背景应有至少4.5：1的对比度。

大文本（14 pt bold/18 pt regular及以上字重）相对其背景应有至少3：1的对比度。

可行

以上文本行遵循了颜色对比度建议，因此相对其背景颜色是可读的。

不可行

以上文本行不符合颜色对比度建议，并且很难根据从其背景颜色中进行读取文字

Icons或其他关键元素也应使用上述对比度建议。

可行

这些icons遵循了颜色对比度建议，因此可以能够从其背景中突显出来。

不可行

这些icons没有遵循颜色对比度建议，所以从其背景中很难辨别。

Logos和装饰元素

装饰元素（如logos或插图）虽然不需要满足上述对比度建议，但如果它们在应用中具备重要功能时，那它们必须能够被用户辨识。

可行

可区分、辨识的装饰logos不需要满足对比度。

不可行

没必要为了满足对比度让你的logo失真

其他视觉提示

面对色盲或看不到颜色差异的用户，除了颜色外，还需要包含设计元素，以此确保这类用户能够与其他人一样接收到相同数量的信息。

色盲有不同的形式（如红-绿、蓝-黄、单色）。面对这类用户你需要使用多个视觉提示来传达重要的状态。例如使用路径、指示器、图案、纹理或文本等元素来描述操作和内容。

可行

文本字段的错误状态使用了多个提示进行传递：标题颜色、字段路径和字段下面的错误消息提示。

不可行

文本字段的错误状态只通过红色路径进行传递，但是色盲用户是无法感知路径颜色的。

声音和动效

声音

声音是视觉的替代物，反之亦然。为关键的音频元素和声音警告提供隐藏字幕（CC）、文字副本或其他可视化选项。

允许用户向UI元素添加描述性标签来使用声音进行应用内导航。当使用屏幕阅读器（如TalkBack和触摸探索导航）时，当用户用指尖触摸到UI元素时，标签会大声朗读。

应避免下列声音：

在屏幕阅读器上播放不必要的声音，如在进入网页时自动播放的背景音乐。如果有背景声音，请确保用户可以安全的暂停或停止。
添加到本地元素上的额外声音（屏幕阅读器能够正确解读本地元素）。

标记用户界面元素（Add audible des criptions to input controls and other elements）

动效

Material design利用动效来引导不同视图间的焦点，这有助于减少用户分心。用户跟随页面焦点变化，为了避免分散用户注意力，那些不重要的元素会被移除。

为了让对运动和视觉敏感的用户能够舒适地使用界面，请遵循Material design动效规范，同时它支持以下W3C的动效准则：

• 如果启用自动移动、滚动或闪烁的内容的持续时间超过5s的话将被暂停、停止或隐藏。
• 闪烁内容限制在1/2时间内允许三次闪烁, 以满足闪烁和红色闪烁阈值。
• 避免在屏幕中央大面积闪烁。

定时控件

应用中的控件可能会被设置为在一定时间后自动消失。例如，启动视频五秒后，播放控件会从屏幕上淡出。

高优先级控件：

避免在高优先级功能的控件上使用计时器，因为用户很可能还没注意到这些控件时就已经消失不见。例如，TalkBack阅读控件被用户激活朗读时，如果控件设置了定时将会阻止控件完成任务。

对于启用其他重要功能的控件，请确保用户可以再次打开控件或以其他方式执行相同的功能。了解更多的层次结构和焦点。详情见以下 层级与焦点 。

自动发声文本（Read about placing text in a live region.）

样式

布局

Material design的触发目标指南能够帮助那些无法看到屏幕或有手脚不便问题的用户可以在你的应用中正常触发元素。

触发目标

触发目标是屏幕上响应用户输入的区域。这个区域超出了元素的可视界限。例如，一个24x24dp大小的icon，它周围存在48x48dp的触发区域。

触发目标应至少48x48dp大小。无论屏幕大小是多少，该范围大小的触发目标的物理大小约等于9mm。触摸屏元素的推荐目标大小为7-10mm。为了容纳更大范围的用户（如发展运动能力的儿童），可以适当使用更大范围的触发目标区域。

触发目标间距

在大多数情况下，触发目标之间应该间隔8dp或更多的空间以确保信息密度的平衡和可用性。

• 头像：40dp
• Icon：24dp
• 触发目标：48dp