操作确认:用户在执行重要操作前需要询问用户是否执行操作;
通知确认:用户在执行完操作后,系统通知用户操作结果,用户可以有选择性地进行确认。

Confirmation and acknowledgement communications ask for confirmation before taking an action and acknowledge successful actions.


用法

操作确认与通知确认提高了用户操作前后的容错性。

Confirming and acknowledging user actions can reduce uncertainty about an action that a user has taken, or is about to take. They also prevent users from making mistakes.

行动类型

  • 操作确认 要求用户验证他们是否要继续执行操作。
  • 通知确认 提供文本提示以让用户知道他们选择的操作是否已完成。

并不是用户的所有行动都需要进行确认。

  • Confirming actions ask the user to verify that they want to proceed with an action.
  • Acknowledging actions provide text to let the user know whether an action they chose has been completed.

Not all actions warrant a confirmation or an acknowledgment.


操作确认

用法

当用户的操作造成的后果是不可逆的或会造成一定的影响时,系统需要询问用户是否要继续采取操作。

例如,当用户在对图像进行多选操作时,被选中的图片可以取消勾选,那么这个操作无需进行确认。

When a UI requests confirmation from a user, it asks if they want to proceed with the action they just took. It may be paired with a warning or critical information related to that action.

Confirmation isn’t necessary when the consequences of an action are reversible or negligible. For example, if a check mark shows an image has been selected, further confirmation is unnecessary.


对话框

优先使用对话框进行确认。

Confirmation is best delivered using an alert dialog.
image.png
An alert dialog confirming deletion and two actions a user can take to leave the dialog.

An alert dialog confirms the user action and informs the user of what will happen as a result.


通知确认

用法

通知确认会告知用户在后台发生的系统操作,不强制用户对操作进行确认。

通知确认的存在时间通常很短,可能会包含撤消操作的选项。

An acknowledgement notifies the user about system actions occurring in the background. It appears for a short amount of time and may include an option to undo the action.
image.png

图例(左):快捷通知栏会在几秒后自动消失。 An acknowledgment in the form of a snackbar appears, then fades after a few seconds.

图例(右):若通知确认中包含撤销操作,那么它会一直存在到用户采取与其无关的操作为止,例如滑动屏幕。 An acknowledgment appears with an undo option. It remains until the user takes an unrelated action, such as scrolling through a list.


通知确认组件

通知确认可以由各种组件提供。以下为各种组件选择的标准:

Acknowledgements can be delivered by a variety of components. Criteria for choosing the right acknowledgement component includes:

  • 紧急程度
  • 是否包含修正行为的操作
  • 屏幕上的持续时间(自动消失、手动消除或两者兼有)

  • Urgency level

  • Inclusion of an action to correct a problem
  • Duration on screen (transient, dismissable, or both)

自动消失条件下的组件将在出现之后自动小时。
手动消除条件下的组件若通知确认包含修正用户行为的操作(如撤回),用户可以通过对应的操作消除通知。

Acknowledgements that are transient mean the component will exit on its own within a few seconds of appearing. Dismissable acknowledgements can be dismissed by selecting an action to dismiss the component.

Component Urgency Content Behavior Number of
actions to dismiss
Snackbar Low Informational Transient & dismissable 0-1
Alert Medium Correct a problem;
Awareness of state
Persistent, non-blocking,
and dismissable
1-2
Dialog High Require a choice;
Acknowledge
Persistent, blocking
(interruptive)
1-2
Empty State Medium Informational Persistent, blocking 0-2

横幅对话框

横幅对话框可以一直存在于应用内,通知用户一些特殊的信息。

Use alerts to deliver a persistent, in-app message that informs users of a particular change state.
image.png

快捷对话框

快捷对话框可以推送一些简要的反馈。

Use a snackbar to provide brief feedback about an operation.
image.png

空状态

当应用场景仅在线可用且内容无法加载或同步时,请使用空状态。

空状元可以提供重新加载的链接以帮助用户继续完成他们的任务。

When a UI is only available online and content has failed to load or sync, use an empty state. The user should be able to interact with as much of the rest of the app as possible. A link to reload can be presented to help a user accomplish their task.
image.png
An empty state