什么是 Material Design?
⭐️ 可用性:
无障碍
无障碍设计使任何人都能成功地浏览、理解和使用您的应用。
1. 原则
-
明确的
清晰可见的元素； 足够的对比度和尺寸； 明确的重要性级别； 使主要信息一目了然。 -
健全的
应用应该方便每位用户来：浏览，了解重要任务，访问。浏览：使用户清楚的知道他们现在在应用中的哪个位置，以及哪些是重要内容。
了解重要任务：通过多个视觉和文本提示来强化重要信息。使用颜色、形状、文本和动效来传达正在发生的事情。
访问你的应用：包含适当的内容标签，以适应那些使用纯文字版本的用户。 -
具体的
支持特定平台的辅助技术。辅助技术通过屏幕阅读器、放大设备、轮椅、助听器或记忆辅助设备等设备帮助增强、维持或改善残疾人的能力。
2. 颜色和对比度
为应用选择支持可用性的主色、辅助色和强调色。—— Material Design 在线配色工具
确保元素之间有足够的颜色对比度，以便视力低下的用户也可以使用你的应用。
基于亮度或发光强度，颜色和它的背景色的对比度范围为 1 - 21，和万维网联盟（W3C）一致。
- 文本，图标等关键性元素：
- Logo和装饰性的元素：
- 其他视觉提示：
3. 声音和动效
给视觉元素添加声音作为替代方案，反之亦然。添加可隐藏的字幕，或其他视觉元素来作为重要声音元素和声音警报的替代方案。
应避免使用以下声音：
- 通过屏幕阅读器播放不必要的声音，例如打开网页时自动播放的背景音乐。如果有背景音乐，请确保用户可以安全的暂停或停止背景音乐；
- 添加到原生元素上的额外的声音（屏幕阅读器能够正确的翻译原生元素）。
Material Design 运动规范：
- 如果内容持续移动、滚动或闪烁的时间超过
5 秒，则会暂停、停止或隐藏； - 在 1 秒内，内容的闪烁次数限制为
3 次，以满足闪烁和红色闪烁的阈值； - 避免
闪烁屏幕中较大的中心区域。
4. 样式
- 触摸目标
触摸目标应该至少为48 x 48 dp。不管屏幕有多大，这种尺寸的触摸目标都相当于大约 9mm 的物理尺寸。 - 触摸目标间距
在大多数情况下，触摸目标应该以8dp或更大的间距进行分隔，以确保均衡的信息密度和可用性。 - 分组项目
把相关的项目放在一起，对那些视力低下或者在屏幕上聚焦困难的用户是有帮助的。
5. 层次和焦点
导航应该具有清晰的任务流程，和最少的步骤。在频繁使用的任务上，应该实现聚焦控制、或控制键盘和读取焦点的功能。
-
层次
根据项目的相对重要性，将项目放置在屏幕上。
- 重要操作：将重要操作放在屏幕的顶部或底部（使用快捷方式即可访问）;
- 相关项目：将相似层级的相关项目放在彼此相邻的位置。
-
焦点顺序
输入焦点应该按照
视觉布局的顺序排列，从屏幕顶部到底部。它应该从最重要的项目到最不重要的项目进行遍历。
绿色圆圈表示屏幕中的元素接收焦点的顺序。
6. 书写
清晰且有帮助的无障碍文本是使 UI 更易访问的主要方法之一。
- 保持简洁；
- 避免在文本中包含控件类型和状态；
- ……
双向性
从右向左（RTL）阅读的语言，例如阿拉伯语和希伯来语，其 UI 应该被镜像，以确保内容易于理解。
| 元素 | LTR | RTL |
|---|---|---|
| 文本 | 句子从左向右阅读。 | 句子从右向左阅读。 |
| 时间线 | 事件序列从左向右进行。 | 事件序列从右向左进行。 |
| 图像 | 从左向右的箭头表示向前运动：→ | 从右向左的箭头表示向前运动：← |
当 UI 从 LTR 更改为 RTL 时（反之亦然），通常称为镜像。
当镜像一个 UI 时，这些元素会发生改变：
文本框图标显示在字段的另一侧；导航按钮以相反的顺序显示；表示方向的图标会被镜像，例如箭头；文本（如果它被翻译为 RTL 语言）右对齐。
这些元素不会被镜像：
不表示方向的图标，例如相机；数字，例如时钟和电话号码；图标和图解。
🔗 相关链接：
扫一扫
682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
