Dialogs - 对话框

Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.

Dialogs contain text and UI controls. They retain focus until dismissed or a required action has been taken. Use dialogs sparingly because they are interruptive.

【翻译】
对话框通知用户有关特定任务，可能包含关键信息，需要决策或涉及多个任务。
对话框包含文本和UI控件。 他们保持关注，直到被取消或采取了必要的行动。 谨慎使用对话框，因为它们是中断的。

Some dialog types include:
Alerts are urgent interruptions that inform about a situation and require acknowledgement.
Simple menus display options for list items, whereassimple dialogs can provide details or actions about a list item.
Confirmation dialogs require users to explicitly confirm a choice.

【翻译】
一些对话框类型包括：
警报是指通知情况并需要确认的紧急中断。
简单菜单显示列表项的选项，而简单对话框可以提供有关列表项的详细信息或操作。
确认对话框要求用户明确地确认选择。

Behavior - 行为

Dialogs should never be obscured, either by other elements or the screen edge. Dialogs always retain focus until dismissed or a required action has been taken.

【翻译】
对话框不能被其他元素或屏幕边缘遮挡。对话框始终保持焦点，直到解除或采取所需的操作。

Full-screen dialogs (Mobile only) - 全屏对话框（仅限移动版）

Full-screen dialogs are best suited to complex tasks, or require an input method editor, as they group a series of tasks together before they can be saved.

【翻译】
全屏对话框最适合于复杂任务，或者需要一个输入法编辑器，因为它们将一系列任务分组在一起，然后才能保存。

Behavior - 行为

Beyond standard dialogs - 超越标准对话框

Dialogs are a sub-type of modal windows, and the examples covered here are for standard material system dialogs. (Other modal window constructions aren’t covered here because they have too much variation, such as branded buttons for purchasing flows, non-standard UI form elements, or unique layouts.)

【翻译】
对话框是模态窗口的子类型，这里所述的示例用于标准材料系统对话框。 （其他模态窗口结构不包括在这里，因为它们有太多的变化，例如购买流程的品牌按钮，非标准UI表单元素或独特的布局）。

****Reduce interruption - 减少中断****
Use dialogs sparingly because they are interruptive. Their sudden appearance forces users to stop their current task and focus on the dialog content. Not every choice, setting, or detail warrants interruption. Alternatives to dialogs include menus or inline expansion, both of which maintain the current context.

【翻译】
谨慎使用对话框，因为它们是中断的。 他们的突然出现迫使用户停止他们当前的任务，并专注于对话内容。 不是每一个选择，设置或细节都需要中断。 对话框的替代选项包括菜单或内联展开，两者都维护当前上下文。

****Dialog prominence - 突出对话框****
Dialogs should never be obscured by other elements or appear partially on screen. Dialogs always retain focus until dismissed or a required action has been taken, such as choosing a setting.
Dialogs should avoid:
Opening dialogs from within a dialog
Containing scrolling content

【翻译】
对话框绝不应被其他元素遮挡或部分显示在屏幕上。对话框始终保持焦点，直到被关闭或执行了所需的操作（例如选择设置）。
对话框应避免：
在对话框中打开对话框
包含滚动内容

****Full-screen dialog exception - 全屏对话例外****
Full-screen dialogs may open additional dialogs, such as pickers, because their design accommodates additional layers of material without significantly increasing the app’s perceived z-depth or visual noise.

【翻译】
全屏对话框可以打开其他对话框，例如选择器，因为它们的设计适应额外的材料层，而不会显着增加应用程序的感知z深度或视觉噪声。

[图片上传失败...(image-7e324f-1552295575320)]
Example of dialog content

【翻译】
对话内容示例

[图片上传失败...(image-300642-1552295575320)]
Example of a full-screen dialog

【翻译】
全屏对话框示例

****Scrollable content exception - 可滚动内容例外****
Some dialog content requires scrolling, such as lists of ringtones.
For scrollable lists of options, the dialog title remains pinned to the top. This ensures that a selected item remains visible with the title, regardless of the item’s position in the list.
Otherwise, the title scrolls off with the content. Actions always remain in place when content scrolls.

Dialogs are separate from the underlying parent material and do not scroll with it.

【翻译】
某些对话内容需要滚动，例如铃声列表。
对于可滚动的选项列表，对话框标题保持固定在顶部。 这确保所选项目与标题保持可见，而不管项目在列表中的位置。
否则，标题将滚动显示内容之外。 内容滚动时，操作始终保持不变。
对话框与底层父材料分开，不与其滚动。

****Displaying additional content - 显示其他内容****
To disclose additional content in a dialog, do so using inline expansion within the content area. Or consider alternative components that are optimized for large amounts of content.

【翻译】
要在对话框中公开其他内容，请使用内容区域中的内联展开。或者考虑为大量内容优化的替代组件。

****Dismissing dialogs - 关闭对话框****
Dialogs can be dismissed by touching/clicking outside of a dialog or by using the system back button (Android). Alternatively, dialog behavior can be overridden so that users must explicitly choose one of the actions.

【翻译】
可以通过触摸/单击对话框外部或使用系统后退按钮（Android）来关闭对话框。或者，可以覆盖对话框行为，以便用户必须显式选择其中一个操作。

[图片上传失败...(image-139b90-1552295575320)]
Make the dialog title fixed when viewing a scrollable list of options ensures that both the title and the selected item are simultaneously visible.

【翻译】
在查看可滚动的选项列表时使对话框标题固定，确保标题和所选项目同时可见。

Alerts - 警报

Alerts are urgent interruptions, requiring acknowledgement, that inform the user about a situation.
Disambiguation from Snackbars: Snackbars present optional information after an action, such as confirming the discarding of a draft. They often allow a user to undo an action just taken.

【翻译】
警报是紧急中断，需要确认，通知用户有关情况。
从Snackbars消除歧义：Snackbars在操作之后提供可选信息，例如确认草稿的丢弃。 它们通常允许用户撤消刚刚采取的操作。

****Alerts without title bars - 没有标题栏的提醒****
Most alerts don't need titles.
They summarize a decision in a sentence or two by either:
Asking a question (e.g. "Delete this conversation?")
Making a statement related to the action buttons

【翻译】
大多数警报不需要标题。
他们总结一个句子或两个句子的决定：
提出问题（例如“删除此会话？”）
进行与操作按钮相关的语句

[图片上传失败...(image-2c109c-1552295575320)]
Do.
The affirmative action text “Discard” clearly indicates the outcome of the decision.

【翻译】
正确的示范
肯定行动文本“Discard”清楚地表明了决定的结果。

[图片上传失败...(image-b22f3f-1552295575320)]
Don't.
The dismissive action text “No” answers the question, but does not suggest what will happen afterwards. A better action pair would be an explicit “Cancel” and “Delete.”

【翻译】
错误的示范
拒绝行为文本“No”回答了问题，但不建议以后会发生什么。更好的动作对将是显式的“取消”和“删除”。

****Alerts with title bars - 带标题栏的警报****
Use title bar alerts only for high-risk situations, such as the potential loss of connectivity. Users should be able to understand the choices based on the title and button text alone.
If a title is required:
Use a clear question or statement with an explanation in the content area, such as "Erase USB storage?".
Avoid apologies, ambiguity, or questions, such as “Warning!” or “Are you sure?”

【翻译】
仅在高风险情况下使用标题栏警报，例如潜在的连接断开。 用户应该能够基于标题和按钮文本单独理解选择。
如果需要标题：
在内容区域中使用清楚的问题或含有解释的语句，例如“擦除USB存储设备？”。
避免道歉，歧义或问题，例如“警告！”或“您确定吗？

[图片上传失败...(image-50d335-1552295575320)]
Do.
This dialog poses a specific question, concisely elaborates on its impact, and provides clear actions.

【翻译】
此对话提出了一个具体问题，简要阐述其影响，并提供明确的行动。

[图片上传失败...(image-33ccd3-1552295575320)]
Don't.
This dialog poses an ambiguous question and its scope of impact is unclear.

【翻译】
错误的示范
这个对话提出了一个模糊的问题，其影响范围不清楚。

Simple menus - 简单的菜单

Mobile and tablet only - 仅限移动和平板电脑
Simple menus display options for list items, and they immediately commit choices upon selection. See Simple Menus for more details.

【翻译】
简单菜单显示列表项的选项，并且它们在选择时立即提交选择。有关详细信息，请参阅简单菜单。

Disambiguation: Simple dialogs display detailed options for list items or provide related actions. Simple dialogs can display the same content as simple menus. However, simple menus are preferred because they are less disruptive to the user’s current context.

【翻译】
消歧：简单对话框显示列表项的详细选项或提供相关操作。 简单对话框可以显示与简单菜单相同的内容。 然而，简单的菜单是优选的，因为它们对用户的当前上下文的破坏较小。

[图片上传失败...(image-e16f53-1552295575320)]

[图片上传失败...(image-9bcb5c-1552295575320)]
Examples of a simple menu

【翻译】
一个简单的菜单示例

Simple dialogs - 简单对话框

Simple dialogs can provide additional details or actions about a list item. For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account).
Touch mechanics:
Choosing an option immediately commits the option and closes the menu
Touching outside of the dialog, or pressing Back, cancels the action and closes the dialog

【翻译】
简单对话框可以提供有关列表项的其他详细信息或操作。 例如，他们可以显示头像，图标，澄清子文本或正交操作（例如添加帐户）。
触摸力学：
选择一个选项将立即提交该选项并关闭菜单
触摸对话框外部，或按后退，取消操作并关闭对话框

****Reduce interruption - 减少中断****
Simple dialogs are more interruptive than simple menus and should be used sparingly.

【翻译】
简单的对话框比简​​单的菜单更具有中断性，应谨慎使用。

[图片上传失败...(image-6b43d0-1552295575320)]
Example of a simple dialog

【翻译】
一个简单对话框的示例

[图片上传失败...(image-bd9ea2-1552295575320)]
The width of a dialog on mobile is defined as a multiple of a unit.
Each unit is 56dp wide
Minimum width on mobile = 56dp * 5 = 280dp

【翻译】
移动设备上对话框的宽度定义为单位的倍数。
每个单位是56dp宽
手机最小宽度= 56dp * 5 = 280dp

****No explicit cancel button - 没有显式的取消按钮****
Simple dialogs do not have explicit buttons that accept or cancel an operation.

【翻译】
简单对话框没有显式按钮来接受或取消操作。

错误的示范

Don't.
This simple dialog has an explicit “Cancel” button.

【翻译】

错误的示范
这个简单的对话框有一个明确的“取消”按钮。

错误的示范

Don't.
This simple dialog has an explicit “Cancel” button.

【翻译】
错误的示范
这个简单的对话框有一个明确的“取消”按钮。

****Specifications - 规格****
Row heights can vary in simple dialogs.
Simple dialogs are displayed centered vertically and horizontally on the screen.
The dialog's distance from the screen edge is at least 40dp on the left and right, and at least 24dp on the top and bottom.
The dialog's content is 24dp from the dialog edge.

【翻译】
行高在简单对话框中可以不同。
简单对话框在屏幕上垂直和水平显示。
对话框距屏幕边缘的距离至少为40dp左右，在顶部和底部至少为24dp。
对话框的内容是从对话框边缘开始的24dp。

****Avoid text wrapping - 避免文本换行****
If any text in a simple menu wraps to another line, use a simple dialog instead.

【翻译】
如果简单菜单中的任何文本换行到另一行，请改用简单的对话框。

[图片上传失败...(image-cb60ad-1552295575320)]
Do.
This simple dialog has varying row heights.

【翻译】
正确的示范
这个简单的对话框有不同的行高。

Confirmation dialogs - 确认对话框

Confirmation dialogs require users to explicitly confirm their choice before an option is committed. For example, users can listen to multiple ringtones but only make a final selection upon touching “OK.”
Tapping “Cancel” in a confirmation dialog, or pressing “Back,” cancels the action, discards any changes, and closes the dialog.

【翻译】
确认对话框要求用户在提交选项之前明确地确认他们的选择。 例如，用户可以收听多个铃声，但只有在触摸“确定”时进行最终选择。
在确认对话框中点击“取消”，或按“返回”取消操作，放弃所有更改，然后关闭对话框。

Avoid dialogs launching dialogs - 避免对话框启动对话框
Confirmation dialogs should avoid launching additional simple dialogs or simple menus, as they add complexity and appear to increase an app’s elevation. If they are needed to complete a task, consider using a full-screen dialog instead.

【翻译】
确认对话框应避免启动其他简单对话框或简单菜单，因为它们增加了复杂性，并增加了应用程序的高度。 如果需要完成任务，请考虑使用全屏对话框。

image

The ringtone choice in the following confirmation dialog will not be set until the user taps “OK.”

【翻译】
在用户点击“确定”之前，将不会设置以下确认对话框中的铃声选择。

[图片上传失败...(image-7f5003-1552295575320)]
Example of a confirmation dialog with controls positioned on the left side of text.

【翻译】
具有位于文本左侧的控件的确认对话框示例。

**Confirm a single value - 确认单个值 **
Confirmation dialogs can use layouts other than lists, such as a date picker, but remain focused on specifying a single value (picking the date, but not picking the time and date).

【翻译】
确认对话框可以使用除列表之外的布局，例如日期选择器，但仍然专注于指定单个值（选择日期，但不选择时间和日期）。

[图片上传失败...(image-e4ceb2-1552295575320)]
The date choice is set by the user tapping a date and the “OK” button.

【翻译】
日期选择由用户点击日期和“确定”按钮设置。

image

The user selects the hour by moving the clock hand and tapping “OK.”

【翻译】
用户通过移动时钟指针并点击“确定”来选择小时。

**Cancel and confirmation buttons - 取消和确认按钮 **

Confirmation dialogs provide both an explicit confirmation button and explicit cancel button. Tapping the cancel button, Back button, or leaving the confirmation dialog will discard changes.

【翻译】
确认对话框提供显式确认按钮和显式取消按钮。点击取消按钮，返回按钮或离开确认对话框将丢弃更改。

[图片上传失败...(image-a29ee3-1552295575320)]
Do.
Provide explicit confirmation and cancel buttons.

【翻译】
正确的示范
提供明确的确认和取消按钮。

[图片上传失败...(image-e4c2b1-1552295575320)]
Don't.
A single dialog button makes the system Back action ambiguous: does Back cancel or confirm?

【翻译】
错误的示范
单个对话按钮使系统返回动作模糊：是否取消或确认？

Full-screen dialogs - 全屏对话框

Mobile only: Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens.

【翻译】
仅限移动设备：由于空间有限，全屏对话框可能更适合移动设备，而不是在具有较大屏幕的设备上使用的对话框。

****Usage - 用法****
Full-screen dialogs group a series of tasks (such as creating a calendar entry) before they may be committed or discarded. No selections are saved until “Save” is touched. Touching the “X” discards all changes and exits the dialog.
Full-screen dialogs enable complex layouts, minimize the appearance of stacked sheets of material (dialogs above dialogs), and temporarily reset the app’s perceived elevation to a higher baseline. They allow tasks to launch simple menus or simple dialogs as part of a complex operation.
Full-screen dialogs may be used for content or tasks that meet any of these criteria:
The dialog includes components (like pickers or form fields) that require an input method editor (IME), such as a keyboard.
When changes are not saved in real time
When there is no draft capability in the app
When performing batch operations or queuing changes prior to submitting them

【翻译】
全屏对话框将一系列任务（例如创建日历条目）分组，然后可以提交或丢弃这些任务。 在触摸“保存”之前，不保存任何选择。 触摸“X”将丢弃所有更改并退出对话框。
全屏对话用复杂的布局，尽量减少材料的堆积纸张的出现（上述对话对话框），以及应用程序的感知高度临时重置到一个更高的基准。 它们允许任务启动简单菜单或简单对话框作为复杂操作的一部分。
全屏对话框可用于符合以下任何条件的内容或任务：
对话框包含需要输入法编辑器（IME）的组件（如选择器或表单字段），例如键盘。
当更改没有实时保存时
当应用程序中没有草稿能力时
在提交之前执行批处理操作或对更改进行排队

[图片上传失败...(image-330082-1552295575320)]
The full-screen dialog supports a simple dialog used to pick dates.

【翻译】
全屏对话框支持用于选择日期的简单对话框。

image

Date picker opened from full-screen dialog

【翻译】
从全屏对话框中打开日期选择器

****Actions - 操作****
Place confirmation and dismissive actions for full-screen dialogs at the top of the screen.

【翻译】
在屏幕顶部为全屏对话框放置确认和忽略操作。

****Confirmation - 确认****
The confirmation action in the top right of the screen uses descriptive verbs, such as: save, send, share, update or create. Don’t use vague actions for confirming action, such as: done, ok or close.
The confirmation action is disabled until all mandatory fields in the dialog are met.

【翻译】
屏幕右上角的确认操作使用描述性动词，例如：保存，发送，共享，更新或创建。 不要使用模糊动作来确认操作，例如：done，ok或close。
在对话框中的所有必填字段都满足之前，将禁用确认操作。

****Discard - 取消****
Both the discard action (the “X” at the top left of the screen) and the Back button close the full-screen dialog and discard changes.
If no changes have been made, the dialog closes and no discard confirmation is required.
If the user has made any changes, they are prompted to confirm the discard action.

【翻译】
丢弃操作（屏幕左上角的“X”）和“后退”按钮都会关闭全屏对话框并放弃更改。
如果未进行任何更改，则会关闭对话框，不需要丢弃确认。
如果用户进行了任何更改，系统将提示用户确认丢弃操作。

错误的示范

Don't.
Don’t use vague terms like “Close” for confirmation actions.

【翻译】
错误的示范
不要使用模糊的术语，如“关闭”确认操作。

[图片上传失败...(image-d1d4ac-1552295575320)]
Do.
Prompt users to confirm the discard action if they have made any changes.

【翻译】

正确的示范
如果他们进行了任何更改，则提示用户确认丢弃操作

****Navigation - 导航****
The “X” used in a full-screen dialog differs from an up arrow, which indicates the view’s state is constantly being saved. For example, an up arrow used in Settings indicates all changes are committed immediately without explicit confirmation or cancel actions.

【翻译】
在全屏对话框中使用的“X”不同于向上箭头，表示视图的状态不断被保存。 例如，“设置”中使用的向上箭头表示立即提交所有更改，而不明确确认或取消操作。

[图片上传失败...(image-2d8b5-1552295575320)]
The up arrow in this Settings example indicates that any changes will be immediately saved upon selection.

【翻译】
此设置示例中的向上箭头表示任何更改将在选择后立即保存。

[图片上传失败...(image-7c9fff-1552295575320)]
Touching the “X” in this Settings example will discard all changes. Changes will be saved only upon touching Save.

【翻译】
触摸此设置示例中的“X”将放弃所有更改。更改只有在触摸保存时才会保存。

****Titles - 标题****
Full-screen dialog titles don’t use dynamic type.
Titles should be succinct. They can wrap to a second line if necessary, and should then be truncated.
If the full-screen dialog uses titles of variable length or anticipates long titles (for example, because certain words are longer in different languages), place title text in the content area of the dialog instead of the app bar.

【翻译】
全屏对话框标题不使用动态类型。
标题应当简洁。 如果需要，他们可以换行到第二行，然后应该被截断。
如果全屏对话框使用可变长度的标题或预期长标题（例如，因为某些词在不同语言中更长），请将标题文本放在对话框的内容区域而不是应用栏中。

错误的示范

Don't.
Avoid using titles of variable length in the app bar.

【翻译】
错误的示范
避免在应用栏中使用可变长度的标题。

正确的示范

Do.
Place long titles in the content area of the full-screen dialog.

【翻译】
正确的示范
在全屏对话框的内容区域中放置标题。

Specs - 规格

Dialogs contain content, actions, and an optional title.

【翻译】
对话框包含内容，操作和可选标题。

****Optional title - 可选标题****
The title briefly describes the type of choice being made. Titles should always be displayed in their entirety and only used when necessary. For example, a title may indicate to which part of a task the dialog relates, or identify what will be affected by the decision.

【翻译】
标题简要描述了选择的类型。 标题应始终以整体显示，仅在必要时使用。 例如，标题可以指示对话框与任务的哪个部分相关，或者识别将受到该决定影响的内容。

****Content - 内容****
Dialog content typically consists of text and/or UI control elements. It is focused on a specific task, such as confirming item deletion or choosing a setting.

【翻译】
对话内容通常由文本和/或UI控制元素组成。它专注于特定任务，例如确认项目删除或选择设置。

[图片上传失败...(image-7b8c3-1552295575320)]
This dialog contains a title, content, and actions.

【翻译】
此对话框包含标题，内容和操作。

****Actions - 操作****
Dialogs present a focused and limited set of actions, which are generally affirmative or dismissive.
Affirmative actions are placed on the right side and continue the process. Affirmative actions may be destructive, like “Delete” or “Remove.”
Dismissive actions are placed directly to the left of affirmative actions and return the user to the originating screen or step in the process.
Dismissive and affirmative action text can be “Cancel”/”OK” or specific active verbs or verb phrases that indicate the outcome of the decision.

【翻译】
对话框是一组集中和有限的行动，通常是肯定的或不屑一顾的。
肯定行动放在右侧，并继续进行。 肯定动作可能具有破坏性，例如“删除”或“删除”。
拒绝操作直接放置在肯定操作的左侧，并将用户返回到原始屏幕或过程中的步骤。
拒绝和肯定动作文本可以是“取消”/“OK”或指示决定结果的特定活动动词或动词短语。

错误的示范

Don't.
Dismissive actions are always placed directly to the left of affirmative actions.

【翻译】
错误的示范
拒绝行为总是直接放在肯定行动的左边。

Dialog actions should present a clear choice directly related to the dialog’s title and content.

【翻译】
对话框动作应该提供一个与对话框的标题和内容直接相关的明确选择。

错误的示范

Don't.
Avoid presenting users with ambiguous or unclear choices. In this example, “Cancel” doesn't make sense in relation to the title because there's no clear action being proposed.

【翻译】
错误的示范
避免向用户显示模糊或不清楚的选择。在此示例中，“取消”与标题无关，因为没有提出明确的操作。

****Acknowledgement actions - 确认操作****
In situations where users are required to acknowledge the dialog’s content to proceed, an alert may contain only one action. Use this type of alert sparingly as it is interruptive. Consider other methods of communicating the information to users, such as in-line with a view’s content.

【翻译】
在需要用户确认要继续的对话框内容的情况下，警报可以仅包含一个动作。 谨慎使用此类警报，因为它是中断的。 考虑将信息传递给用户的其他方法，例如与视图的内容一致。

****Number of actions - 操作数****
Dialogs should not include more than two actions. A third action, such as “Learn more,” navigates away from the dialog, potentially leaving the task unfinished.
Avoid using a “Learn more” action to access help documentation; in-line expansion within the dialog should be used instead. If more extensive information is needed, provide it prior to entering the dialog.

【翻译】
对话框不应包含两个以上的动作。 第三个操作，例如“了解更多”，导航离开对话框，可能会留下任务未完成。
避免使用“了解详情”操作来访问帮助文档; 应该使用对话框内的在线扩展。 如果需要更广泛的信息，请在进入对话框之前提供。

错误的示范

Don't.
The “Learn more” action navigates away from this dialog, leaving it in an indeterminate state.

【翻译】
错误的示范
“了解详情”操作将导航离开此对话框，使其处于不确定状态

Color - 颜色
Dialog actions use system colors by default, but they should reflect your product's color palette. Use a contrasting color, such as the palette’s accent color, to distinguish dialog actions from dialog content.

【翻译】
对话框操作默认使用系统颜色，但它们应该反映您的产品的调色板。使用对比颜色（如调色板的强调颜色）将对话框操作与对话框内容区分开来。

****Languages without capitalization - 没有大写字母的语言****
For languages without capitalization (such as Chinese, Japanese or Korean), it is important to maintain consistent placement, spacing, and colors for actions to distinguish them from regular text.

【翻译】
对于没有大写字母的语言（例如中文，日语或韩语），重要的是保持一致的位置，间距和颜色，以便将它们与常规文本区分开来。

[图片上传失败...(image-bcb392-1552295575320)]
The consistent placement of actions and text color helps distinguish actions from regular text even when the affirmative action is disabled.

【翻译】
即使在禁用肯定操作时，操作和文本颜色的一致放置也有助于区分操作与常规文本。

image

Affirmative actions are more likely to be disabled until a choice is made. Dismissive actions are never disabled.

【翻译】
肯定行动更有可能被禁用，直到做出选择。绝对禁止操作。

****Content guidelines - 内容指南****
Padding around content area: 24dp
Padding between title and body text: 20dp
Padding around buttons: 8dp
Button height: 36dp
Action area height: 52dp
Dialog elevation: 24dp

【翻译】
内容区域周围的填充：24dp
标题和正文之间的填充：20dp
按钮周围的填充：8dp
按钮高度：36dp
动作区高度：52dp
对话框高度：24dp

[图片上传失败...(image-8de246-1552295575320)]
Content padding

【翻译】
内容填充

[图片上传失败...(image-3c0eaf-1552295575320)]
Within the content area, the 24dp of padding below the content helps separate it from the actions.
Dialog content bottom padding: 24dp
Button height: 36dp
Button margin: 8dp

【翻译】
在内容区域中，内容下面的24dp填充有助于将其与操作分离。
对话框内容底部填充：24dp
按钮高度：36dp
按钮边距：8dp

image

Content padding for a dialog in a scrolled state

【翻译】
滚动状态下的对话框的内容填充

****Button width and padding - 按钮宽度和填充****
Button height: 36dp
Minimum button width: 64dp
Internal button padding: 8dp
Padding between buttons: 8dp

【翻译】
按钮高度：36dp
最小按钮宽度：64dp
内部按钮填充：8dp
按钮之间的填充：8dp

[图片上传失败...(image-6d9542-1552295575320)]
Detail of button widths and padding

【翻译】
按钮宽度和填充的详细信息

Button height: 36dp
Button area height: 52dp
Left button padding: 24dp
Right button padding: 8dp
Padding between buttons: 8dp

【翻译】
按钮高度：36dp
按钮区高度：52dp
左按钮填充：24dp
右键填充：8dp
按钮之间的填充：8dp

[图片上传失败...(image-100c72-1552295575320)]
Detail of button area

【翻译】
按钮区域细节

[图片上传失败...(image-fbf151-1552295575320)]
In a scrolled state, a stroke delineates the dialog’s content area from actions.

【翻译】
在滚动状态下，描边从动作描绘对话框的内容区域。

****Side-by-side buttons - 并排按钮****
Side-by-side buttons are recommended when the text of each label does not exceed the maximum button width, such as the commonly used OK/Cancel buttons.
Use the following formula to calculate maximum button width for a given dialog:
The maximum width for buttons in a dialog =
(Dialog width - 8dp - 8dp - 8dp)/2
For example:
The maximum width for buttons in a 280dp wide dialog =
(280dp - 8dp - 8dp - 8dp)/2 = 128dp

【翻译】
当每个标签的文本不超过最大按钮宽度时，建议使用并排按钮，例如常用的“确定/取消”按钮。
使用以下公式计算给定对话框的最大按钮宽度：
对话框中的按钮的最大宽度=
（对话框宽度-8dp-8dp-8dp）/ 2
例如：
280dp宽对话框中的按钮的最大宽度=
（280dp-8dp-8dp-8dp）/ 2 = 128dp

[图片上传失败...(image-2d7817-1552295575320)]
Button height: 36dp
Padding between text and action area: 24dp
Padding around buttons is: 8dp

【翻译】
按钮高度：36dp
文本和动作区域之间的填充：24dp
按钮周围的填充是：8dp

****Stacked full-width buttons - 堆叠全宽按钮****
When text labels exceed the maximum button width, use stacked buttons to accommodate the text. Affirmative actions are stacked above dismissive actions.

【翻译】
当文本标签超出最大按钮宽度时，使用堆叠按钮来容纳文本。肯定行动被堆叠在轻蔑的行动之上。

[图片上传失败...(image-bac502-1552295575320)]
Touchable target height for each button: 48dp
Padding between text and touch target: 24dp
Padding below touch target to dialog edge: 8dp
Padding between button text right edge and dialog edge: 16dp

【翻译】
每个按钮可触摸的目标高度：48dp
文字和触摸目标之间的间距：24dp
触摸目标下的填充到对话边缘：8dp
按钮文本右边缘和对话边缘之间的填充：16dp

****Simple dialog keylines - 简单的对话框基线****
Vertical keyline at 24dp from the left and right edges. Content associated with an icon or avatar aligns 80dp from the left edge.

【翻译】
从左边缘和右边缘在24dp处的垂直关键线。与图标或头像相关联的内容从左边缘开始对齐80dp。

image

Keylines for a simple dialog

【翻译】
一个简单的对话框的基线

****Simple dialog content guidelines - 简单的对话内容指南****
It is recommended that simple dialogs have titles, but titles can be omitted based on your product’s needs.

【翻译】
建议简单的对话框有标题，但可以根据产品的需要省略标题。

Title - 标题
Top padding: 24dp
Bottom padding: 20dp
Text size: Roboto Medium 20sp
Text line height: 28dp

【翻译】
顶部填充：24dp
底部填充：20dp
文字大小：Roboto Medium 20sp
文字行高：28dp

Content - 内容
Row height of single-line list with avatars: 56dp
Bottom edge padding: 8dp

【翻译】
单行列表的行高：56dp
底边填充：8dp

[图片上传失败...(image-4c7ca7-1552295575320)]
redlines for a simple dialog

【翻译】
一个简单的对话框的红线

****Full-screen dialog titles - 全屏对话框标题****
Full-screen dialog titles can wrap to a second line if necessary, and then should be truncated. Titles should be succinct, but in some situations, such as when words are longer in different languages, titles may need to wrap.
App bar height with a single line of text: 56dp
App bar height with two lines of text: 80dp
Title text keyline: 72dp
Title text: 20sp
Title text top and bottom padding: 20dp
Dismissive action padding from left edge: 16dp
Affirmative action text: 14sp
Affirmative action text padding on the left and right: 16dp

【翻译】
如果需要，全屏对话框标题可以换行到第二行，然后应该截断。 标题应该简洁，但在某些情况下，例如当单词在不同语言中更长时，标题可能需要包装。
应用栏高度与一行文本：56dp
应用栏高度，两行文本：80dp
标题文本keyline：72dp
标题文本：20sp
标题文本顶部和底部填充：20dp
从左边缘的拒绝行动padding：16dp
肯定行动文本：14SP
在左边和右边的肯定行动文本填充：16dp

[图片上传失败...(image-5c4d08-1552295575320)]
Detail of a full-screen dialog app bar

【翻译】
全屏对话应用栏的详细信息

image

Full-screen dialog with an app bar containing a single line of text.

【翻译】
带有包含单行文本的应用栏的全屏对话框。

image

Note that this image is for illustration purposes only. Long titles should be placed in the content area of the full-screen dialog.

【翻译】
请注意，此图片仅供参考。长标题应放置在全屏对话框的内容区域中。