（翻译）模态窗口最佳实践

  你是否正在考虑在界面中使用模态窗口？模态窗口能够提示用户在返回主窗口前选择需要执行的操作。
  正确使用模态窗口可以提高用户的任务效率，反之会妨碍用户的任务进度。以下最佳实践有助于设计用户友好的模态窗口。

模态窗口

  模态窗口是在主窗口上方打开的辅助窗口，用户完成任务前必须与其交互才能返回主窗口。
  需要用户执行多个步骤才能完成任务时应使用模态窗口。用模态窗口替代整个页面，让用户能维护其任务的上下文[1]。

窗口标题清晰可见，且与点击的按钮内容匹配

  打开模态窗口时，重要的是让用户知道它的出处。模态窗口的标题应与使之出现的按钮内容匹配。这不仅保持行为一致，同时能让用户了解正在执行的操作。

窗口右上角提供高对比度的关闭按钮

  按需关闭模态窗口。将惯用的X图标作为关闭按钮。高对比度的关闭按钮让用户更方便地找到退出功能。关闭按钮在形状和颜色上应该比较显眼。

允许用户按ESC键关闭窗口

  出于可访问性原因，用户按ESC键时应能关闭模态窗口。如果模态窗口中包含多个控件，应允许用户使用tab键在控件间切换。这样可以支持使用屏幕阅读器和键盘的用户操作窗口。

用户点击窗口范围之外区域时关闭窗口

  万一用户找不到模态窗口的关闭按钮，应支持用户点击窗口范围之外区域来关闭模态窗口。这使退出操作简单直观，用户经常通过点击主窗口区域返回主窗口。但如果用户是在填写表单，就不能允许他们以这种方式退出表单，否则就会丢失信息。

必要时使用“取消”按钮

  如果用户是在模态窗口中填写信息，则窗口应提供“取消”按钮。模态窗口中包含表单的话，就不能允许用户点击窗口范围之外区域来关闭模态窗口。为避免出现这种情况，只支持用户点击“取消”按钮退出模态窗口。

窗口使用阴影或透明覆盖图版

  打开模态窗口时，用户需要知道它是主窗口之上的辅助窗口。模态窗口使用阴影或透明覆盖图版，便于用户识别所处的模式。[2]

  确保透明层不能太模糊，用户还是能够看到主窗口。如果透明度太差，会让用户误以为他们已经离开了主窗口。[3]

窗口不要太高或太宽

  如果模态窗口比用户屏幕高或宽，用户得滚动屏幕才能看到窗口全貌，移动用户感触尤深。使模态窗口尺寸匹配用户屏幕大小，让用户不用滚动屏幕。

非模态窗口

  非模态窗口也是出现在主窗口内的辅助窗口，它与模态窗口的区别在于，用户返回主窗口之前不必与其进行交互，他们可以持续操作打开的非模态窗口，不用尽快处理[4]。

当用户需要参考主窗口信息时使用

  当用户需要比较或参考主窗口信息时，模态窗口作用有限。此时应使用非模态窗口，它占用屏幕尺寸小，窗口开着时允许用户查看并操作主窗口。用户可以同时与非模态窗口和模态窗口交互。

窗口尺寸越小越好

  非模态窗口应该占用主窗口很小的空间，并且样式越简洁越好，以便用户与主窗口交互。主窗口始终是用户执行任务的主要焦点所在。

附在主窗口边缘

  非模态窗口应该一直显示，直到用户关闭为止。将非模态窗口附在主窗口边缘，使其对用户可见。即使用户滚动屏幕，也能在需要时与非模态窗口交互。

用X图标按钮代替关闭按钮

  非模态窗口的退出方式不用与模态窗口一样多，只需使用X图标按钮关闭窗口即可。将按钮放在非模态窗口右上角，并且使其可见。

结语

  如果能正确设计及使用模态窗口，它们会是十分高效的界面元素，能够帮助用户更便捷地完成任务。但是使用不当也会给用户造成困扰。
  了解模态窗口的设计方式能让你用起来更顺手。将上述最佳实践牢记于心，这样你设计的模态窗口会使用户距离成功更进一步。

原文地址：https://uxmovement.com/forms/best-practices-for-modal-windows/

[1]原文：Using a modal window instead of a full page allows users to maintain the context of their task.
[2]原文：When a modal window opens, users need to know that it’s a secondary window overlaid on the main one. Make it easy for users to recognize that they are in a mode by using a shadow or transparent overlay behind your window.
[3]原文：Make sure the transparent sheet is not too opaque so that users can still see the main window. If it’s too dark, then users could make the mistake of thinking they have left the main window.
[4]原文：However, the difference is that users don’t have to interact with it before returning to the main window. Users can continue working with the modeless window opened. It doesn’t require their immediate attention.