Material Design — 提示框（ Dialogs）

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

提示框（ Dialogs）

Material Design链接：提示框

提示框

提示框告知用户特定的任务，并可能包含重要信息，需要用户做出决定或使其参与多项任务。

对话框包含文本和UI控件。 他们保持视觉焦点直到被关闭或被完成了其中需要的行动。 谨慎使用对话，因为它们是打扰用户的。

分类

·警告（Alerts）是紧急中断，通知有关情况并要求确认。

·简单菜单（Simple Menus）显示列表项的选项，而简单提示框（Simple Dialogs）可以提供有关列表项的详细信息或操作。

·确认提示框（Confirmation dialogs）要求用户明确确认选择。

行为

对话框不应该被其他元素或屏幕边缘遮挡。 提示框始终保持视觉聚焦，直到被关闭或被完成了其中需要的行动。

全屏提示框（仅限手机）

全屏对话框最适合于复杂的任务，或需要输入法编辑器，因为它可以在保存之前将一系列任务组合在一起。

行为

提示框的前身

提示框是模态窗口的子类型，这里所涉及的示例用于标准材质的系统提示框。 （其他模态窗口结构在这里没有涉及，因为它们有太多的变化，例如购买流程的品牌按钮，非标准的UI表单元素或独特的布局。）

减少打扰

谨慎使用提示框，因为它们是中断性的。 他们的突然出现迫使用户停止当前的任务并专注于提示框内容。 并非所有的选择，设置或细节都准许这种中断。 提示框的替代选项包括Menus与内联扩展，这两个都能保持当前的环境。

全屏幕提示框例外

全屏对话框可能会打开其他对话框，例如选择器，因为它们的设计可以容纳额外的材料层，而不会显着增加app深度的感知与视觉干扰。

左：提示框内容    右：全屏提示框

可滚动内容例外

一些提示框内容需要滚动，例如铃声列表。

对于可滚动的选项列表，提示标题仍固定在顶部。 这可保证了无论项目在列表中什么位置，被选项与标题均保持可见。

否则，标题会随内容一起滚动离开视野。 内容滚动时，操作始终保持原位。

提示框与底层父级材料是分开的，不会随其滚动。

标题与被选操作均保持可见

显示额外内容

要在提示框中展示额外内容，请在内容区域内使用内联展开。 或者考虑能对大量的内容进行优化的可替代的组件。

关闭提示框

提示框可以通过点击提示框外部或点击系统后退按钮（在Android上）来关闭。 有时候，用户必须做出选择动作后才能关闭提示框。

警告（Alerts）

警报是紧急中断，需要确认，通知用户有关情况。

Snackbars消除歧义：Snackbars在行动后提供可选信息，例如确认放弃草稿。 他们经常允许用户撤消刚刚采取的操作。

警告没有标题栏

大多数警告不需要标题。

他们用以下的方式以一两句话来总结一个决定，例如：

·提出问题（例如“删除此对话？”）

·做出与操作按钮有关的声明

按钮文案要明确说明接下来将发生的操作

带有标题的警告

仅对高风险情况使用带标题的警告，例如连接可能丢失。 用户应该能够仅根据标题和按钮文本来理解选择。

如果需要标题：

·在内容区域使用明确的问题或陈述，例如“擦除USB存储器？”

·避免道歉，模棱两可或提问，例如“警告！”或“你确定吗？”

标题要明确告知结果

简单菜单

仅限手机和平板电脑

消除歧义：简单提示框显示列表项目的详细选项或提供相关操作。 简单提示框可以显示与简单菜单相同的内容。 但是，简单菜单是首选，因为它们对用户当前的上下文影响较小。

简单菜单的样式

简单提示框（用于选择）

简单的提示框可以提供有关列表项的额外详细信息或操作。 例如，他们可以显示头像，图标，提示语或正交行为（例如添加帐户）。

操作机制：

·立即选择一个选项，提交选项并关闭菜单；

·触摸提示框外部或按下后退键，取消操作并关闭对话框。

减少打扰

简单提示框比简单菜单更具中断性，应该谨慎使用。

简单提示框样式

没有明确的取消按钮

简单提示框没有明确的按钮来接受或取消操作。

不该有明确的取消按钮

明确说明

·在简单提示框中，行高可以变化；

·简单的对话框在屏幕上垂直和水平都居中显示；

·提示框与屏幕左右边缘的距离应该至少为40dp，距离顶部和底部至少为24dp；

·该对话框的内容距离提示框边缘为24dp。

允许文字换行

如果简单菜单中的文本需要换行，则使用简单提示框。

文案要换行时使用简单提示框

确认提示框（Confirmation dialogs）

确认提示框要求用户在提交选项之前明确确认他们的选择。 例如，用户可以聆听多个铃声，但只能在触摸“ok”时进行最终选择。

点击确认对话框中的“取消”，或按Android的“后退”，取消操作，放弃所有更改并关闭对话框。

左图为带选择控件的提示框

避免使用提示框启动提示框

确认提示框应避免启动其他简单提示框或简单菜单，因为它们增加了页面复杂性并会增加了app的海拔。 如果需要完成任务，可以使用全屏提示框。

确认单个值

确认提示框可以使用列表以外的布局，例如日期选择器，但仍然专注于选定单个值（选择日期，但不选择时间和日期）。

左：选择日期    右：选择时间

取消与确定按钮

确认提示框需要提供明确的确认按钮和明确的取消按钮。 点击取消按钮、返回按钮或离开确认提示框将放弃之前的更改。

要提供明确的“取消”与“确定”按钮

全屏提示框（Full-screen Dialogs）

仅限手机：由于空间有限，全屏幕对话框可能更适合使用在手机，而不是屏幕较大的设备上。

用法

全屏幕提示框在一系列任务（例如创建日历入口）被提交或取消之前分组，并在点击“保存”后保存选择。 触摸“X”会放弃所有更改并退出提示框。

全屏对话框可实现复杂的布局，将多个材料堆积的情况简化（提示框上层的提示框），并暂时将app可感知的海拔重置为更高。 全屏对话框允许任务在复杂操作时开启简单菜单或简单提示框。

全屏提示框可用于满足以下标准的内容或任务：

·该提示框包含需要输入编辑器（IME）的组件（如选择器或form fields），例如键盘

·当没有实时保存更改时

·当app中没有草稿功能时（无法自动存到草稿）

·在提交之前执行批量处理操作或排队更改时

全屏提示框支持日期选择器

操作

在屏幕顶部放置全屏对话框的确认和离开操作。

确认

屏幕右上角的确认按钮使用描述性动词，例如：保存，发送，分享，更新或创建。 不要使用模糊的动作来确认动作，如：完成，确定或关闭。

确认按钮将被禁用，直到满足对话框中的所有必填字段都完成时，确认操作才会被激活

丢弃（离开）

丢弃操作（屏幕左上角的“X”）和后退按钮均会关闭全屏对话框并放弃之前所做的更改。

·如果没有更改，对话框关闭，不需要丢弃确认

·如果用户进行了任何更改，则会提示他们确认放弃操作

左：不要用“关闭”这样的词作为确认    右：离开时进行提示

导航

全屏幕对话框中使用的“X”不同于向返回箭头，箭头能表示视图的状态实时被保存。 例如，设置中使用的返回箭头表示所有更改立即提交，无需明确的确认或取消操作。

两种形式：返回箭头；“X”+确认按钮

标题

全屏提示框的标题不使用动态类型。

标题应该简洁。 如有必要，他们可以换行到第二行，若长于第二行应该加上省略号。

如果全屏对话框使用长度可变的标题或预期到可能会有长标题（例如，因为某些单词在不同的语言中较长），请将标题文本置于对话框的内容区域而不是最上面的导航栏。

不该在导航栏中使用长标题