(翻译)模态窗口(Modal)

问题概述

  如果想继续浏览之前的页面,用户需要执行某种操作或者取消当前页面。[1]

示例

用途

  • 用于中断用户当前任务,促使其关注更重要的事项;
  • 不要在显示错误信息、成功信息或者警告信息时使用本模式。

解决方案

  引入一种模式,除非关闭该模式,否则用户无法使用应用程序。打断用户的注意力,除非其处理或驳回给出的信息,否则其它一切操作都无法进行。[2]

匹配标题

  模态窗口中的按钮文字要与标题匹配,增加熟悉感。本模式引入了一种新的中断模式,一旦模态窗口出现,用户就不能执行正在进行的操作,必须确保用户知道模态窗口从哪里弹出的。

允许退出

  必要时,允许用户关闭模态窗口,退出当前模式。常见做法是在窗口右上角提供”X”按钮,同时(或者)在窗口下方提供”关闭”或者”退出”按钮,ESC键也可用作为快捷键退出当前模式,用鼠标点击模态窗口之外的区域亦可。

说明

  引入多种模式虽然能够增强注意力、提高效率,但是会造成用户难以记住接口的状态,从而按照错误的模式进行操作。[3]

讨论

  本模式被视为UI反模式,其主要原因是模态窗口:除非用户关闭该窗口,否则无法与应用程序进行交互。模态窗口中断用户动作,强制要求他们执行特定的操作。按理说,大多数情况下不需要强制用户执行特定的操作,引入模态窗口反而给用户带来不必要的痛点。
  另一种模式是非模态窗口,用户可以随时切换该窗口,该窗口不强制用户执行特定的操作。[4]
  模态窗口在移动设备上也不好用,它们占据太多屏幕空间,并且引入了额外的用户界面元素。[5]

原文地址:http://ui-patterns.com/patterns/modal-windows
[1]原文:The user needs to take an action or cancel the overlay until he can continue interacting with the original page
[2]原文:Introduce a mode in which users cannot interact with your application until the mode is closed. Interrupt the user’s attention and halt all other actions until a message is dealt with or dismissed.
[3]原文:Although effective in focusing attention, introducing multiple modes comes with the risk of introducing mode errors where the user forgets the state of the interface and tries to perform actions appropriate to a different mode.
[4]原文:The alternative is modeless interfaces. Interfaces that allow users to change their mind at any point. Interfaces that do not force users into a specific set of actions.
[5]原文:Also, modals do not work well on mobile devices as they take up screen space and introduce additional user interface elements.

你可能感兴趣的:(程序设计)