模式 错误

错误

应用无法完成预期操作时会发生错误。

一些错误示例包括:

  • 用户的输入无法识别
  • 应用无法载入
  • 同时执行不兼容的操作
错误类型

用户输入错误
应用错误
不兼容的状态错误

具体的错误模式

表单
普通使用错误
同步错误
网络连接
权限

Material Design 中的错误提示说明

用法 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

应用无法完成操作时发生错误,例如:

  • 应用无法识别用户输入
  • 系统或应用失败
  • 用户试图同时进行不兼容的操作

通过优化设计,使用户能轻松地输入信息,最大限度地减少错误。应用应该使用通用数据格式,以帮助用户理解。

解决错误:

  • 清楚的告诉用户发生了什么
  • 告诉用户如何解决这个错误
  • 尽可能保留用户的输入

用户输入错误 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

在监测到用户输入错误后立即帮助用户进行修复。如果监测到错误,则禁用提交表单功能,如果仅在提交表单后才能监测到错误,清楚地说明错误原因和修复方式。

文本字段输入

帮助文本可以包含在用户与表单上的每个字段交互之前、期间和之后。

仅在用户与输入字段交互之后才显示错误文本。如果用户输入了不正确的数据,帮助文本可能会转换为错误文本。

缩减表单文本,只显示要点。不是所有文本输入框都需要帮助文本或错误文本。

规格:

在文本字段和下面的错误文本之间放置 16dp 的垂直间距。

Material Design 中的文本输入框示例

文本输入框示例

Material Design 的错误文本输入框示例

带有错误文本的文本输入框示例

表单提交

默认情况下,提交按钮应处于启用状态。

如果你正在进行内联表单验证,并且已清楚地标记出出现错误的字段,则可能会禁用提交按钮,直到错误被更正。

颜色

错误文本应该反映产品的色调。建议对错误状态使用对比度较高的颜色,例如像红色或橙色之类的暖色调。

错误文本应该清晰易读,与背景色有明显的对比。

网站webaim.org提供了颜色对比度检查工具。

浅色背景下的字体

  • 错误:Roboto Regular 12sp
  • 提示文本和帮助文本:#000000 带 28% 的不透明度
亮色主题中的 Material Design 状态提示和错误文本

浅色主题下的这些状态:带提示文本的正常状态,带错误文本的正常状态,带帮助文本的正常状态,带帮助文本和错误文本的正常状态

深色背景下的字体

  • 错误:Roboto Regular 12sp
  • 提示文本和帮助文本:#FFFFFF 带 50% 的不透明度
深色主题中的 Material Design 状态提示和错误文本

深色主题下的这些状态:带提示文本的正常状态,带错误文本的正常状态,带帮助文本的正常状态,带帮助文本和错误文本的正常状态

帮助和错误文本

Material Design 中的帮助文本示例

帮助文本示例

Material Design 中的错误文本示例

错误文本示例

Material Design 中的帮助文本示例

帮助文本示例

Material Design 中的错误文本示例

错误文本示例

Material Design 中的正常状态示例及错误文本展示

带帮助文本的正常状态,和带帮助文本和错误文本的正常状态示例

Material Design 中的输入与错误提示文本

输入文本和错误文本

瓦片高度:64dp
输入文本上方边距:16dp
输入文本下方边距:8dp
错误文本上下边距:4dp

带浮动文本标签的错误文本

Material Design 中的浮动文本标签示例

已有输入文字的浮动文本标签示例

Material Design 中的浮动文本标签示例

有错误文本的浮动文本标签示例

Material Design 的正常状态示例,包含提示文本、输入文本、标签和错误文本

带提示文本的正常状态,带输入文本,标签和错误文本的正常状态示例

Material Design 中的浮动文本标签规格

浮动文本标签规格

瓦片高度:80dp
标签文本上方边距:8dp
输入文本上下边距:8dp
错误文本上下边距:4dp

文本框输入 - 少于/超过字符数或词数

字符计数器可以在用户与字段交互之前、期间和之后显示。可以考虑在用户输入的字数接近字数限制之前不显示计数器。

  • 计数器字体是 Roboto Regular 12sp
  • 计数器字段有 16dp 的额外的底部边距

带字符计数器的单行输入框

Material Design 的单行输入框示例,带字符计数器

带有字符计数器和输入文本的单行输入框示例

Material Design 中的单行输入框示例,带字符计数器和错误文本

带字符计数器和错误文本的单行输入框示例

带字符计数器的多行输入框

Material Design 中的多行文本框示例,带字符计数器

带有字符计数器和已输入的文本的多行文本框示例

Material Design 多行输入框示例,带字符计数器和错误文本

带有字符计数器和错误文本的多行输入框示例

Material Design 中的单行和多行输入框示例

这些状态的示例:含已输入的文本的单行输入框,含错误文本的单行输入框,含已输入文本的多行输入框,含错误文本的多行输入框

Material Design 中的文本框输入

文本框输入

整个输入区域高度:88dp

单行文本框标签顶部边距:16dp
单行文本框输入文本的上下边距:8dp

计数器下方边距:8dp

不兼容的值

在用户与文本字段交互期间或之后显示不兼容值的错误。

如果有两个或多个字段存在不兼容的输入:

  • 在文本框中,指明需要修复。在下面添加错误信息。
  • 在表单或屏幕顶部显示一条消息,总结出所需进行的修复和任何其他说明。

表单提交时检测到错误

重新加载表单,显示所有的错误消息,并滚动到顶部。每个字段的错误消息都可以在用户处理完该字段后解决。

Material Design 中的表单示例

表单示例

Material Design 中的提交表单错误示例

提交表单后检测到错误的示例

未完成的表单

空的表单字段应该用文本框下面的错误文本指示。

显示未完成的表单错误,表示用户在填写表单时跳过了某个字段。如果无法通过表单检测到用户的输入进度,则在用户尝试提交表单后显示错误。

表单提交之前出现多个错误

为每一个表单字段单独添加错误消息。

Material Design 表单示例

表单示例

Material Design 中的未完成表单示例

未完成的表单示例

单行列表错误

Material Design 中的单行列表错误示例

单行列表错误示例

应用错误 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

应用错误和用户的输入无关。

一般的应用错误

当出现错误时,在显示错误消息之前应显示加载提示符。

不可用的功能可以在 UI 中用禁用状态表示。例如,按钮可能不能以禁用状态显示,则需要用匹配的文本来说明按钮不可用。不是每个错误都需要弹出一个新的组件。

如果有可能,请为用户提供一个操作,以帮助他们解决错误。

Material Design 中的警告框用于反馈错误信息

警告框:阻止了正常操作的错误,使用警告框来作为反馈

Material Design 中的 Snackbar 用于短暂显示次要错误

snackbar 可以显示次要的错误。Snackbars 是短暂显示的。不要把 snackbar 用于重要的、需要持续显示的、或大量的错误。

同步错误/加载失败

当遇到同步错误或加载失败时,应该让用户尽可能可以和应用的其余部分进行交互。

Material Design 中的内容加载失败提示

内容加载失败的空状态

Material Design 中的带操作容器组件特定错误

带操作的容器/组件的特定错误

网络连接

当连接断开时,用户应该尽可能多的能和应用的其余部分进行交互。

如果可以的话,提供一个链接来帮助用户完成任务。请提供真正能提供帮助的链接。例如,在已经检测到操作会失败的情况下,不要提供类似 “再试一次” 的选项。

Material Design 中的带操作 Snackbar 进行重试

带操作的 Snackbar 来重试

Material Design 中的在线状态空状态示例

只有在线状态才可用时,显示的空状态

不兼容的状态错误 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

当用户试图进行不兼容的操作时,会发生不兼容的状态错误,例如,在飞行模式下打电话、或在受限模式下进行截屏。让用户清楚的知道他们所选择的状态以及会造成的影响,以避免用户进入这些状态。当这些错误被触发时,并不代表是用户的错误。

一般的不兼容

澄清产生错误的原因。

例如,在受限模式下,不允许使用截屏和高级功能。

Material Design 的 Snackbar 和特定模式指示器

Snackbar + 特定模式的指示器

离线状态

当用户处于离线状态,但尝试执行需要联网的任务时,显示一个持续显示的、不显眼的指示符。

示例:

  • 在飞行模式下打电话
  • 离线时音乐仍然是可用的
Material Design 中的 Snackbar 消息提示

Snackbar

Material Design 中的飞行模式指示标志

指示设备已处于飞行模式。

请求权限

如果你的应用需要用户授予权限才能继续操作,请在应用流程中包含权限申请,而不是将其视为错误。

如果在首次运行应用之前需要获取权限,请考虑将请求权限的操作包含在应用的首次运行体验中。

示例:

  • 应用的权限已变更
  • 应用内购买已停用
Material Design 中的对话框

对话框