模式 出错

出错

当应用无法完成预期操作时会出错。

出错示例:

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

出错类型

用户输入时出错
应用出错
兼容性错误

具体的出错模式

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

用法 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

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

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

设计时最小化出错来帮助用户更灵活的输入信息,应用应当接受通用的数据格式,以利用可见性来帮助用户理解。

处理错误:

  • 清楚的告知用户发生了什么
  • 告知用户如何解决
  • 尽可能保留用户输入的内容

用户输入错误 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

一旦发现用户的输入错误,就应当帮助用户解决,并且禁止表单提交。如果在提交表单后才检测到错误,清楚地说明出错原因和解决方案。

文本输入

帮助文本可以出现在用户触发表单某个字段之前、期间和之后。

仅在用户触发字段之后才显示出错提示。如果用户输入了不正确的数据,帮助文本可以转换为出错提示。

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

规格:

输入框与错误提示之间有 16dp 的垂直间距。

输入框示例

带错误提示的输入框示例

表单提交

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

如果正在进行行内表单验证,并且已清楚地标记了出错的字段,那么在错误修正前可以禁用提交按钮。

颜色

错误提示的颜色可以参考产品的调色板。建议对错误状态使用对比色,例如红色或橙色之类的暖色调。

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

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

浅色背景下的字体

  • 错误提示文本:12sp Roboto Regular
  • 提示文本和帮助文本:#000000 和 38% 不透明度

浅色主题的普通状态:带提示文本的,带出错提示的,带帮助文本的,帮助文本当作出错提示的

深色背景下的字体

  • 错误提示文本:12sp Roboto Regular
  • 提示文本和帮助文本:#FFFFFF 和 50% 不透明度

深色主题的普通状态:带提示文本的,带出错提示的,带帮助文本的,帮助文本当作出错提示的

帮助和错误提示文本

帮助文本示例

错误提示文本示例

帮助文本示例

出错提示示例

带帮助文本的普通状态以及带帮助文本和出错提示的普通状态

输入文本和出错提示

磁帖高度:64dp
输入文本上边距:16dp
输入文本下边距:8dp
出错提示上下边距:4dp

带浮动标签的出错状态

带输入文本的浮动标签

带出错提示的浮动标签

带提示文本的普通状态;带输入文本、标签和出错提示的普通状态

浮动标签规格

磁帖高度:80dp
标签文本上边距:8dp
输入文本上下边距:8dp
错误提示上下边距:4dp

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

在用户输入前、输入中和输入后均可以展示字符计数器。也可以在用户输入的字数接近限制时才显示计数器。

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

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

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

带字符计数器和出错提示的单行输入框

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

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

带字符计数器和出错提示的多行输入框

状态示例:带输入文本的单行输入框,带出错提示的单行输入框,带输入文本的多行输入框,带出错提示的多行输入框

文本框输入

整个输入区域高度:88dp

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

计数器下边距:8dp

不兼容的数值

在用户输入时或输入后展示数据不兼容的出错信息。

如果有两个或多个字段都有不兼容的数据:

  • 在文本框中指明需要修正,并在文本框下方显示出错信息。
  • 在表单或屏幕顶部显示出错信息,对出错的地方进行统一说明。

提交表单时检测到错误

重新加载表单并显示所有的出错信息,滚动到表单顶部。字段的出错信息可以在用户处理完该字段后消失。

表单示例

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

未完成的表单

空的表单字段应当在标记出文本框的同时显示出错信息。

当用户在填写表单时,标记出用户跳过的字段,并显示出错提示。如果无法通过表单检测到用户的输入进度,则在用户尝试提交表单后显示错误。

提交前多处出错

为每个表单字段标记出错信息。

表单示例

未完成的表单示例

单行列表出错

单行列表出错示例

应用出错 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

应用错误和用户的输入无关。 App errors occur independent of user input.

一般的应用错误

出错时应当在显示出错信息前先展示加载指示器。

在 UI 中使用禁用状态来指示该功能暂不可用。例如,如果按钮可以不显示禁用状态,则需要通过文本来说明按钮不可以。并不是每次出错都要弹出对话框。

如果有可能,向用户提供一个操作来帮助他们处理错误。

警告框:出错导致进程无法继续时

Snackbar 是临时展示,可以用来显示次要的错误。不要用 Snackbar 显示重要错误、需要持续显示的错误以及大量的错误。

同步出错/加载失败

当同步出错或加载失败时,让用户可以尽可能多的与应用的其余部分进行交互。

内容加载失败时的空状态

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

网络连接

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

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

带重试操作的 Snackbar

离线时显示的空状态

兼容性错误 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

当用户试图执行有冲突的操作时,会发生兼容性错误,例如,在飞行模式下打电话、或在受限模式下进行截屏。让用户清楚的知道他们所选择的状态以及会造成的影响,以避免用户遇到此类问题。当出错时,不要暗示这是用户的错。

一般的兼容性错误

澄清产生错误的原因。

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

Snackbar + 特殊指示器

离线状态

当处于离线状态的用户尝试执行需要联网的操作时,通过持久但不显眼的指示器来告知用户。

示例:

  • 在飞行模式下打电话
  • 离线时音乐仍然是可用的

Snackbar

指示设备已处于飞行模式

权限请求

如果应用需要用户授予权限才能继续操作,请在应用流程中包含权限请求,不要当成错误对待。

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

示例:

  • 应用的权限已变更
  • 应用内购买已停用

对话框