对话框

对话框 用于显示其他内容以及吸引用户注意特定的操作或场景。该对话框会阻止用户与父页面进行交互，直到父页面关闭或执行此窗口中指定的操作。

§切入点

对话框的入口点可以是点击特定的触发器（例如界面中的按钮），也可以是界面中的某些操作或条件（例如，尝试在不保存数据的情况下离开页面，或者在另一个选项卡中更改帐户）。

§尺码

对话框的大小由其内容决定。

尺寸 S-480 像素：用于小型通知/确认和表单。

尺寸 M — 720 像素：用于小型和中型表格

尺寸 L — 900 像素：用于模态窗口内的大量数据和流量。

自定义尺寸：在三个选项（S、M 或 L）都不合适时使用。

§内容区域

对话框窗口可以包含任何类型的内容。布局是根据用户的要求选择的。

如果对话框包含表单，则建议使用以下两种元素布局之一：

§纽扣

在大多数情况下，操作按钮是必需的。如果用户未完成对话框中指定的操作，则该按钮处于禁用状态。 左侧有一个自定义控件部分，你可以在其中放置辅助按钮和链接。例如，参考文献。

在某些情况下，可以使用危险按钮来代替操作按钮（例如，在删除实体的对话框中）。

如果没有目标操作，则不需要操作按钮，该对话框仅供参考。在这种情况下，你可以使用普通风格的关闭按钮。

辅助按钮始终用作取消按钮。可用于执行其他操作（例如，在不进行更改的情况下继续操作）。

可能根本没有按钮。通常，必须在内容区域本身内进行选择；否则，父界面将不可用。

§对话框内导航

如果对话框包含多个步骤，请使用返回按钮返回上一个步骤。

如果对话框是嵌套的，但步骤不是线性的，则可以在窗口的内容区域使用痕迹。

§在页面上定位对话框

对话框在垂直和水平方向上均与屏幕中心对齐。

缩放视口时，其位置保持不变，只要不影响内容，对话框窗口的大小就可以减小。

屏幕顶部和左侧边缘的最小允许间距为 20px。

如果窗口无法容纳在视区内，则上下间距保持不变，而对话框窗口的右边缘和底部边缘延伸到屏幕边缘以外。但是，不建议这样做。这就是为什么对话框的设计应使其适合视口，并且所有边的间距距屏幕边缘至少为20px。

§关闭窗口

除了目标操作外，还可以通过以下方式关闭模态窗口**：**

如果窗口不是模态窗口，则可以使用以下方法之一将其关闭：

• 在模态窗口外单击
• 按下 Esc 按钮

“取消” 和 “X” 按钮是熟悉的元素，因为它们广泛用于对话框中。在模态窗口之外单击使用户可以更轻松地将其关闭，因为他们不必将鼠标光标对准特定元素。按下 Esc 键可以在不使用鼠标的情况下关闭窗口。

由于预计只能与对话框进行交互，因此不应滚动父页面的内容。

§防止用户数据丢失

由于关闭模态窗口很容易，因此总有机会意外关闭。如果用户仅在模态窗口中选择复选框，则与用户花费大量时间编写代码或重新键入车辆的 12 位 VIN 码相比，恢复丢失的数据要容易得多。因此，最好避免这种情况。但是，我们不应阻止用户以通常的方式关闭模态窗口。

为避免数据丢失的风险，我们建议使用 额外的确认窗口进行数据删除。在这种情况下，操作必须得到用户的确认。

关闭模态窗口时，使用常识来确定是否需要另一个确认窗口。在安全与提出过多可能会让用户烦恼的问题之间取得平衡非常重要。确认的目的是防止丢失用户的输入，同时仍允许他们执行脚本。