Dialogs - 對(duì)話框
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.
【翻譯】
對(duì)話框通知用戶有關(guān)特定任務(wù)，可能包含關(guān)鍵信息，需要決策或涉及多個(gè)任務(wù)。
對(duì)話框包含文本和UI控件。 他們保持關(guān)注，直到被取消或采取了必要的行動(dòng)。 謹(jǐn)慎使用對(duì)話框，因?yàn)樗鼈兪侵袛嗟摹?/p>
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.
【翻譯】
一些對(duì)話框類型包括：
警報(bào)是指通知情況并需要確認(rèn)的緊急中斷。
簡(jiǎn)單菜單顯示列表項(xiàng)的選項(xiàng)，而簡(jiǎn)單對(duì)話框可以提供有關(guān)列表項(xiàng)的詳細(xì)信息或操作。
確認(rèn)對(duì)話框要求用戶明確地確認(rèn)選擇。
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.
【翻譯】
對(duì)話框不能被其他元素或屏幕邊緣遮擋。對(duì)話框始終保持焦點(diǎn)，直到解除或采取所需的操作。
Full-screen dialogs (Mobile only) - 全屏對(duì)話框（僅限移動(dòng)版）
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.
【翻譯】
全屏對(duì)話框最適合于復(fù)雜任務(wù)，或者需要一個(gè)輸入法編輯器，因?yàn)樗鼈儗⒁幌盗腥蝿?wù)分組在一起，然后才能保存。
Behavior - 行為
Beyond standard dialogs - 超越標(biāo)準(zhǔn)對(duì)話框
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.)
【翻譯】
對(duì)話框是模態(tài)窗口的子類型，這里所述的示例用于標(biāo)準(zhǔn)材料系統(tǒng)對(duì)話框。 （其他模態(tài)窗口結(jié)構(gòu)不包括在這里，因?yàn)樗鼈冇刑嗟淖兓?，例如?gòu)買流程的品牌按鈕，非標(biāo)準(zhǔn)UI表單元素或獨(dú)特的布局）。
****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.
【翻譯】
謹(jǐn)慎使用對(duì)話框，因?yàn)樗鼈兪侵袛嗟摹?他們的突然出現(xiàn)迫使用戶停止他們當(dāng)前的任務(wù)，并專注于對(duì)話內(nèi)容。 不是每一個(gè)選擇，設(shè)置或細(xì)節(jié)都需要中斷。 對(duì)話框的替代選項(xiàng)包括菜單或內(nèi)聯(lián)展開，兩者都維護(hù)當(dāng)前上下文。
****Dialog prominence - 突出對(duì)話框****
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
【翻譯】
對(duì)話框絕不應(yīng)被其他元素遮擋或部分顯示在屏幕上。對(duì)話框始終保持焦點(diǎn)，直到被關(guān)閉或執(zhí)行了所需的操作（例如選擇設(shè)置）。
對(duì)話框應(yīng)避免：
在對(duì)話框中打開對(duì)話框
包含滾動(dòng)內(nèi)容
****Full-screen dialog exception - 全屏對(duì)話例外****
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.
【翻譯】
全屏對(duì)話框可以打開其他對(duì)話框，例如選擇器，因?yàn)樗鼈兊脑O(shè)計(jì)適應(yīng)額外的材料層，而不會(huì)顯著增加應(yīng)用程序的感知z深度或視覺噪聲。
[圖片上傳失敗...(image-7e324f-1552295575320)]
Example of dialog content
【翻譯】
對(duì)話內(nèi)容示例
[圖片上傳失敗...(image-300642-1552295575320)]
Example of a full-screen dialog
【翻譯】
全屏對(duì)話框示例
****Scrollable content exception - 可滾動(dòng)內(nèi)容例外****
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.
【翻譯】
某些對(duì)話內(nèi)容需要滾動(dòng)，例如鈴聲列表。
對(duì)于可滾動(dòng)的選項(xiàng)列表，對(duì)話框標(biāo)題保持固定在頂部。 這確保所選項(xiàng)目與標(biāo)題保持可見，而不管項(xiàng)目在列表中的位置。
否則，標(biāo)題將滾動(dòng)顯示內(nèi)容之外。 內(nèi)容滾動(dòng)時(shí)，操作始終保持不變。
對(duì)話框與底層父材料分開，不與其滾動(dòng)。
****Displaying additional content - 顯示其他內(nèi)容****
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.
【翻譯】
要在對(duì)話框中公開其他內(nèi)容，請(qǐng)使用內(nèi)容區(qū)域中的內(nèi)聯(lián)展開?；蛘呖紤]為大量?jī)?nèi)容優(yōu)化的替代組件。
****Dismissing dialogs - 關(guān)閉對(duì)話框****
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.
【翻譯】
可以通過觸摸/單擊對(duì)話框外部或使用系統(tǒng)后退按鈕（Android）來關(guān)閉對(duì)話框?；蛘?，可以覆蓋對(duì)話框行為，以便用戶必須顯式選擇其中一個(gè)操作。
[圖片上傳失敗...(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.
【翻譯】
在查看可滾動(dòng)的選項(xiàng)列表時(shí)使對(duì)話框標(biāo)題固定，確保標(biāo)題和所選項(xiàng)目同時(shí)可見。
Alerts - 警報(bào)
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.
【翻譯】
警報(bào)是緊急中斷，需要確認(rèn)，通知用戶有關(guān)情況。
從Snackbars消除歧義：Snackbars在操作之后提供可選信息，例如確認(rèn)草稿的丟棄。 它們通常允許用戶撤消剛剛采取的操作。
****Alerts without title bars - 沒有標(biāo)題欄的提醒****
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
【翻譯】
大多數(shù)警報(bào)不需要標(biāo)題。
他們總結(jié)一個(gè)句子或兩個(gè)句子的決定：
提出問題（例如“刪除此會(huì)話？”）
進(jìn)行與操作按鈕相關(guān)的語(yǔ)句
[圖片上傳失敗...(image-2c109c-1552295575320)]
Do.
The affirmative action text “Discard” clearly indicates the outcome of the decision.
【翻譯】
正確的示范
肯定行動(dòng)文本“Discard”清楚地表明了決定的結(jié)果。
[圖片上傳失敗...(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.”
【翻譯】
錯(cuò)誤的示范
拒絕行為文本“No”回答了問題，但不建議以后會(huì)發(fā)生什么。更好的動(dòng)作對(duì)將是顯式的“取消”和“刪除”。
****Alerts with title bars - 帶標(biāo)題欄的警報(bào)****
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?”
【翻譯】
僅在高風(fēng)險(xiǎn)情況下使用標(biāo)題欄警報(bào)，例如潛在的連接斷開。 用戶應(yīng)該能夠基于標(biāo)題和按鈕文本單獨(dú)理解選擇。
如果需要標(biāo)題：
在內(nèi)容區(qū)域中使用清楚的問題或含有解釋的語(yǔ)句，例如“擦除USB存儲(chǔ)設(shè)備？”。
避免道歉，歧義或問題，例如“警告！”或“您確定嗎？
[圖片上傳失敗...(image-50d335-1552295575320)]
Do.
This dialog poses a specific question, concisely elaborates on its impact, and provides clear actions.
【翻譯】
此對(duì)話提出了一個(gè)具體問題，簡(jiǎn)要闡述其影響，并提供明確的行動(dòng)。
[圖片上傳失敗...(image-33ccd3-1552295575320)]
Don't.
This dialog poses an ambiguous question and its scope of impact is unclear.
【翻譯】
錯(cuò)誤的示范
這個(gè)對(duì)話提出了一個(gè)模糊的問題，其影響范圍不清楚。
Simple menus - 簡(jiǎn)單的菜單
Mobile and tablet only - 僅限移動(dòng)和平板電腦
Simple menus display options for list items, and they immediately commit choices upon selection. See Simple Menus for more details.
【翻譯】
簡(jiǎn)單菜單顯示列表項(xiàng)的選項(xiàng)，并且它們?cè)谶x擇時(shí)立即提交選擇。有關(guān)詳細(xì)信息，請(qǐng)參閱簡(jiǎn)單菜單。
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.
【翻譯】
消歧：簡(jiǎn)單對(duì)話框顯示列表項(xiàng)的詳細(xì)選項(xiàng)或提供相關(guān)操作。 簡(jiǎn)單對(duì)話框可以顯示與簡(jiǎn)單菜單相同的內(nèi)容。 然而，簡(jiǎn)單的菜單是優(yōu)選的，因?yàn)樗鼈儗?duì)用戶的當(dāng)前上下文的破壞較小。
[圖片上傳失敗...(image-e16f53-1552295575320)]
[圖片上傳失敗...(image-9bcb5c-1552295575320)]
Examples of a simple menu
【翻譯】
一個(gè)簡(jiǎn)單的菜單示例
Simple dialogs - 簡(jiǎn)單對(duì)話框
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
【翻譯】
簡(jiǎn)單對(duì)話框可以提供有關(guān)列表項(xiàng)的其他詳細(xì)信息或操作。 例如，他們可以顯示頭像，圖標(biāo)，澄清子文本或正交操作（例如添加帳戶）。
觸摸力學(xué)：
選擇一個(gè)選項(xiàng)將立即提交該選項(xiàng)并關(guān)閉菜單
觸摸對(duì)話框外部，或按后退，取消操作并關(guān)閉對(duì)話框
****Reduce interruption - 減少中斷****
Simple dialogs are more interruptive than simple menus and should be used sparingly.
【翻譯】
簡(jiǎn)單的對(duì)話框比簡(jiǎn)??單的菜單更具有中斷性，應(yīng)謹(jǐn)慎使用。
[圖片上傳失敗...(image-6b43d0-1552295575320)]
Example of a simple dialog
【翻譯】
一個(gè)簡(jiǎn)單對(duì)話框的示例
[圖片上傳失敗...(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
【翻譯】
移動(dòng)設(shè)備上對(duì)話框的寬度定義為單位的倍數(shù)。
每個(gè)單位是56dp寬
手機(jī)最小寬度= 56dp * 5 = 280dp
****No explicit cancel button - 沒有顯式的取消按鈕****
Simple dialogs do not have explicit buttons that accept or cancel an operation.
【翻譯】
簡(jiǎn)單對(duì)話框沒有顯式按鈕來接受或取消操作。
Don't.
This simple dialog has an explicit “Cancel” button.
【翻譯】
錯(cuò)誤的示范
這個(gè)簡(jiǎn)單的對(duì)話框有一個(gè)明確的“取消”按鈕。
Don't.
This simple dialog has an explicit “Cancel” button.
【翻譯】
錯(cuò)誤的示范
這個(gè)簡(jiǎn)單的對(duì)話框有一個(gè)明確的“取消”按鈕。
****Specifications - 規(guī)格****
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.
【翻譯】
行高在簡(jiǎn)單對(duì)話框中可以不同。
簡(jiǎn)單對(duì)話框在屏幕上垂直和水平顯示。
對(duì)話框距屏幕邊緣的距離至少為40dp左右，在頂部和底部至少為24dp。
對(duì)話框的內(nèi)容是從對(duì)話框邊緣開始的24dp。
****Avoid text wrapping - 避免文本換行****
If any text in a simple menu wraps to another line, use a simple dialog instead.
【翻譯】
如果簡(jiǎn)單菜單中的任何文本換行到另一行，請(qǐng)改用簡(jiǎn)單的對(duì)話框。
[圖片上傳失敗...(image-cb60ad-1552295575320)]
Do.
This simple dialog has varying row heights.
【翻譯】
正確的示范
這個(gè)簡(jiǎn)單的對(duì)話框有不同的行高。
Confirmation dialogs - 確認(rèn)對(duì)話框
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.
【翻譯】
確認(rèn)對(duì)話框要求用戶在提交選項(xiàng)之前明確地確認(rèn)他們的選擇。 例如，用戶可以收聽多個(gè)鈴聲，但只有在觸摸“確定”時(shí)進(jìn)行最終選擇。
在確認(rèn)對(duì)話框中點(diǎn)擊“取消”，或按“返回”取消操作，放棄所有更改，然后關(guān)閉對(duì)話框。
Avoid dialogs launching dialogs - 避免對(duì)話框啟動(dòng)對(duì)話框
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.
【翻譯】
確認(rèn)對(duì)話框應(yīng)避免啟動(dòng)其他簡(jiǎn)單對(duì)話框或簡(jiǎn)單菜單，因?yàn)樗鼈冊(cè)黾恿藦?fù)雜性，并增加了應(yīng)用程序的高度。 如果需要完成任務(wù)，請(qǐng)考慮使用全屏對(duì)話框。
The ringtone choice in the following confirmation dialog will not be set until the user taps “OK.”
【翻譯】
在用戶點(diǎn)擊“確定”之前，將不會(huì)設(shè)置以下確認(rèn)對(duì)話框中的鈴聲選擇。
[圖片上傳失敗...(image-7f5003-1552295575320)]
Example of a confirmation dialog with controls positioned on the left side of text.
【翻譯】
具有位于文本左側(cè)的控件的確認(rèn)對(duì)話框示例。
**Confirm a single value - 確認(rèn)單個(gè)值 **
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).
【翻譯】
確認(rèn)對(duì)話框可以使用除列表之外的布局，例如日期選擇器，但仍然專注于指定單個(gè)值（選擇日期，但不選擇時(shí)間和日期）。
[圖片上傳失敗...(image-e4ceb2-1552295575320)]
The date choice is set by the user tapping a date and the “OK” button.
【翻譯】
日期選擇由用戶點(diǎn)擊日期和“確定”按鈕設(shè)置。
The user selects the hour by moving the clock hand and tapping “OK.”
【翻譯】
用戶通過移動(dòng)時(shí)鐘指針并點(diǎn)擊“確定”來選擇小時(shí)。
**Cancel and confirmation buttons - 取消和確認(rèn)按鈕 **
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.
【翻譯】
確認(rèn)對(duì)話框提供顯式確認(rèn)按鈕和顯式取消按鈕。點(diǎn)擊取消按鈕，返回按鈕或離開確認(rèn)對(duì)話框?qū)G棄更改。
[圖片上傳失敗...(image-a29ee3-1552295575320)]
Do.
Provide explicit confirmation and cancel buttons.
【翻譯】
正確的示范
提供明確的確認(rèn)和取消按鈕。
[圖片上傳失敗...(image-e4c2b1-1552295575320)]
Don't.
A single dialog button makes the system Back action ambiguous: does Back cancel or confirm?
【翻譯】
錯(cuò)誤的示范
單個(gè)對(duì)話按鈕使系統(tǒng)返回動(dòng)作模糊：是否取消或確認(rèn)？
Full-screen dialogs - 全屏對(duì)話框
Mobile only: Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens.
【翻譯】
僅限移動(dòng)設(shè)備：由于空間有限，全屏對(duì)話框可能更適合移動(dòng)設(shè)備，而不是在具有較大屏幕的設(shè)備上使用的對(duì)話框。
****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
【翻譯】
全屏對(duì)話框?qū)⒁幌盗腥蝿?wù)（例如創(chuàng)建日歷條目）分組，然后可以提交或丟棄這些任務(wù)。 在觸摸“保存”之前，不保存任何選擇。 觸摸“X”將丟棄所有更改并退出對(duì)話框。
全屏對(duì)話用復(fù)雜的布局，盡量減少材料的堆積紙張的出現(xiàn)（上述對(duì)話對(duì)話框），以及應(yīng)用程序的感知高度臨時(shí)重置到一個(gè)更高的基準(zhǔn)。 它們?cè)试S任務(wù)啟動(dòng)簡(jiǎn)單菜單或簡(jiǎn)單對(duì)話框作為復(fù)雜操作的一部分。
全屏對(duì)話框可用于符合以下任何條件的內(nèi)容或任務(wù)：
對(duì)話框包含需要輸入法編輯器（IME）的組件（如選擇器或表單字段），例如鍵盤。
當(dāng)更改沒有實(shí)時(shí)保存時(shí)
當(dāng)應(yīng)用程序中沒有草稿能力時(shí)
在提交之前執(zhí)行批處理操作或?qū)Ω倪M(jìn)行排隊(duì)
[圖片上傳失敗...(image-330082-1552295575320)]
The full-screen dialog supports a simple dialog used to pick dates.
【翻譯】
全屏對(duì)話框支持用于選擇日期的簡(jiǎn)單對(duì)話框。
Date picker opened from full-screen dialog
【翻譯】
從全屏對(duì)話框中打開日期選擇器
****Actions - 操作****
Place confirmation and dismissive actions for full-screen dialogs at the top of the screen.
【翻譯】
在屏幕頂部為全屏對(duì)話框放置確認(rèn)和忽略操作。
****Confirmation - 確認(rèn)****
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.
【翻譯】
屏幕右上角的確認(rèn)操作使用描述性動(dòng)詞，例如：保存，發(fā)送，共享，更新或創(chuàng)建。 不要使用模糊動(dòng)作來確認(rèn)操作，例如：done，ok或close。
在對(duì)話框中的所有必填字段都滿足之前，將禁用確認(rèn)操作。
****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”）和“后退”按鈕都會(huì)關(guān)閉全屏對(duì)話框并放棄更改。
如果未進(jìn)行任何更改，則會(huì)關(guān)閉對(duì)話框，不需要丟棄確認(rèn)。
如果用戶進(jìn)行了任何更改，系統(tǒng)將提示用戶確認(rèn)丟棄操作。
Don't.
Don’t use vague terms like “Close” for confirmation actions.
【翻譯】
錯(cuò)誤的示范
不要使用模糊的術(shù)語(yǔ)，如“關(guān)閉”確認(rèn)操作。
[圖片上傳失敗...(image-d1d4ac-1552295575320)]
Do.
Prompt users to confirm the discard action if they have made any changes.
【翻譯】
正確的示范
如果他們進(jìn)行了任何更改，則提示用戶確認(rèn)丟棄操作
****Navigation - 導(dǎo)航****
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.
【翻譯】
在全屏對(duì)話框中使用的“X”不同于向上箭頭，表示視圖的狀態(tài)不斷被保存。 例如，“設(shè)置”中使用的向上箭頭表示立即提交所有更改，而不明確確認(rèn)或取消操作。
[圖片上傳失敗...(image-2d8b5-1552295575320)]
The up arrow in this Settings example indicates that any changes will be immediately saved upon selection.
【翻譯】
此設(shè)置示例中的向上箭頭表示任何更改將在選擇后立即保存。
[圖片上傳失敗...(image-7c9fff-1552295575320)]
Touching the “X” in this Settings example will discard all changes. Changes will be saved only upon touching Save.
【翻譯】
觸摸此設(shè)置示例中的“X”將放棄所有更改。更改只有在觸摸保存時(shí)才會(huì)保存。
****Titles - 標(biāo)題****
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.
【翻譯】
全屏對(duì)話框標(biāo)題不使用動(dòng)態(tài)類型。
標(biāo)題應(yīng)當(dāng)簡(jiǎn)潔。 如果需要，他們可以換行到第二行，然后應(yīng)該被截?cái)唷?br> 如果全屏對(duì)話框使用可變長(zhǎng)度的標(biāo)題或預(yù)期長(zhǎng)標(biāo)題（例如，因?yàn)槟承┰~在不同語(yǔ)言中更長(zhǎng)），請(qǐng)將標(biāo)題文本放在對(duì)話框的內(nèi)容區(qū)域而不是應(yīng)用欄中。
Don't.
Avoid using titles of variable length in the app bar.
【翻譯】
錯(cuò)誤的示范
避免在應(yīng)用欄中使用可變長(zhǎng)度的標(biāo)題。
Do.
Place long titles in the content area of the full-screen dialog.
【翻譯】
正確的示范
在全屏對(duì)話框的內(nèi)容區(qū)域中放置標(biāo)題。
Specs - 規(guī)格
Dialogs contain content, actions, and an optional title.
【翻譯】
對(duì)話框包含內(nèi)容，操作和可選標(biāo)題。
****Optional title - 可選標(biāo)題****
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.
【翻譯】
標(biāo)題簡(jiǎn)要描述了選擇的類型。 標(biāo)題應(yīng)始終以整體顯示，僅在必要時(shí)使用。 例如，標(biāo)題可以指示對(duì)話框與任務(wù)的哪個(gè)部分相關(guān)，或者識(shí)別將受到該決定影響的內(nèi)容。
****Content - 內(nèi)容****
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.
【翻譯】
對(duì)話內(nèi)容通常由文本和/或UI控制元素組成。它專注于特定任務(wù)，例如確認(rèn)項(xiàng)目刪除或選擇設(shè)置。
[圖片上傳失敗...(image-7b8c3-1552295575320)]
This dialog contains a title, content, and actions.
【翻譯】
此對(duì)話框包含標(biāo)題，內(nèi)容和操作。
****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”/”O(jiān)K” or specific active verbs or verb phrases that indicate the outcome of the decision.
【翻譯】
對(duì)話框是一組集中和有限的行動(dòng)，通常是肯定的或不屑一顧的。
肯定行動(dòng)放在右側(cè)，并繼續(xù)進(jìn)行。 肯定動(dòng)作可能具有破壞性，例如“刪除”或“刪除”。
拒絕操作直接放置在肯定操作的左側(cè)，并將用戶返回到原始屏幕或過程中的步驟。
拒絕和肯定動(dòng)作文本可以是“取消”/“OK”或指示決定結(jié)果的特定活動(dòng)動(dòng)詞或動(dòng)詞短語(yǔ)。
Don't.
Dismissive actions are always placed directly to the left of affirmative actions.
【翻譯】
錯(cuò)誤的示范
拒絕行為總是直接放在肯定行動(dòng)的左邊。
Dialog actions should present a clear choice directly related to the dialog’s title and content.
【翻譯】
對(duì)話框動(dòng)作應(yīng)該提供一個(gè)與對(duì)話框的標(biāo)題和內(nèi)容直接相關(guān)的明確選擇。
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.
【翻譯】
錯(cuò)誤的示范
避免向用戶顯示模糊或不清楚的選擇。在此示例中，“取消”與標(biāo)題無關(guān)，因?yàn)闆]有提出明確的操作。
****Acknowledgement actions - 確認(rèn)操作****
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.
【翻譯】
在需要用戶確認(rèn)要繼續(xù)的對(duì)話框內(nèi)容的情況下，警報(bào)可以僅包含一個(gè)動(dòng)作。 謹(jǐn)慎使用此類警報(bào)，因?yàn)樗侵袛嗟摹?考慮將信息傳遞給用戶的其他方法，例如與視圖的內(nèi)容一致。
****Number of actions - 操作數(shù)****
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.
【翻譯】
對(duì)話框不應(yīng)包含兩個(gè)以上的動(dòng)作。 第三個(gè)操作，例如“了解更多”，導(dǎo)航離開對(duì)話框，可能會(huì)留下任務(wù)未完成。
避免使用“了解詳情”操作來訪問幫助文檔; 應(yīng)該使用對(duì)話框內(nèi)的在線擴(kuò)展。 如果需要更廣泛的信息，請(qǐng)?jiān)谶M(jìn)入對(duì)話框之前提供。
Don't.
The “Learn more” action navigates away from this dialog, leaving it in an indeterminate state.
【翻譯】
錯(cuò)誤的示范
“了解詳情”操作將導(dǎo)航離開此對(duì)話框，使其處于不確定狀態(tài)
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.
【翻譯】
對(duì)話框操作默認(rèn)使用系統(tǒng)顏色，但它們應(yīng)該反映您的產(chǎn)品的調(diào)色板。使用對(duì)比顏色（如調(diào)色板的強(qiáng)調(diào)顏色）將對(duì)話框操作與對(duì)話框內(nèi)容區(qū)分開來。
****Languages without capitalization - 沒有大寫字母的語(yǔ)言****
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.
【翻譯】
對(duì)于沒有大寫字母的語(yǔ)言（例如中文，日語(yǔ)或韓語(yǔ)），重要的是保持一致的位置，間距和顏色，以便將它們與常規(guī)文本區(qū)分開來。
[圖片上傳失敗...(image-bcb392-1552295575320)]
The consistent placement of actions and text color helps distinguish actions from regular text even when the affirmative action is disabled.
【翻譯】
即使在禁用肯定操作時(shí)，操作和文本顏色的一致放置也有助于區(qū)分操作與常規(guī)文本。
Affirmative actions are more likely to be disabled until a choice is made. Dismissive actions are never disabled.
【翻譯】
肯定行動(dòng)更有可能被禁用，直到做出選擇。絕對(duì)禁止操作。
****Content guidelines - 內(nèi)容指南****
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
【翻譯】
內(nèi)容區(qū)域周圍的填充：24dp
標(biāo)題和正文之間的填充：20dp
按鈕周圍的填充：8dp
按鈕高度：36dp
動(dòng)作區(qū)高度：52dp
對(duì)話框高度：24dp
[圖片上傳失敗...(image-8de246-1552295575320)]
Content padding
【翻譯】
內(nèi)容填充
[圖片上傳失敗...(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
【翻譯】
在內(nèi)容區(qū)域中，內(nèi)容下面的24dp填充有助于將其與操作分離。
對(duì)話框內(nèi)容底部填充：24dp
按鈕高度：36dp
按鈕邊距：8dp
Content padding for a dialog in a scrolled state
【翻譯】
滾動(dòng)狀態(tài)下的對(duì)話框的內(nèi)容填充
****Button width and padding - 按鈕寬度和填充****
Button height: 36dp
Minimum button width: 64dp
Internal button padding: 8dp
Padding between buttons: 8dp
【翻譯】
按鈕高度：36dp
最小按鈕寬度：64dp
內(nèi)部按鈕填充：8dp
按鈕之間的填充：8dp
[圖片上傳失敗...(image-6d9542-1552295575320)]
Detail of button widths and padding
【翻譯】
按鈕寬度和填充的詳細(xì)信息
Button height: 36dp
Button area height: 52dp
Left button padding: 24dp
Right button padding: 8dp
Padding between buttons: 8dp
【翻譯】
按鈕高度：36dp
按鈕區(qū)高度：52dp
左按鈕填充：24dp
右鍵填充：8dp
按鈕之間的填充：8dp
[圖片上傳失敗...(image-100c72-1552295575320)]
Detail of button area
【翻譯】
按鈕區(qū)域細(xì)節(jié)
[圖片上傳失敗...(image-fbf151-1552295575320)]
In a scrolled state, a stroke delineates the dialog’s content area from actions.
【翻譯】
在滾動(dòng)狀態(tài)下，描邊從動(dòng)作描繪對(duì)話框的內(nèi)容區(qū)域。
****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
【翻譯】
當(dāng)每個(gè)標(biāo)簽的文本不超過最大按鈕寬度時(shí)，建議使用并排按鈕，例如常用的“確定/取消”按鈕。
使用以下公式計(jì)算給定對(duì)話框的最大按鈕寬度：
對(duì)話框中的按鈕的最大寬度=
（對(duì)話框?qū)挾?8dp-8dp-8dp）/ 2
例如：
280dp寬對(duì)話框中的按鈕的最大寬度=
（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
文本和動(dòng)作區(qū)域之間的填充：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.
【翻譯】
當(dāng)文本標(biāo)簽超出最大按鈕寬度時(shí)，使用堆疊按鈕來容納文本?？隙ㄐ袆?dòng)被堆疊在輕蔑的行動(dòng)之上。
[圖片上傳失敗...(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
【翻譯】
每個(gè)按鈕可觸摸的目標(biāo)高度：48dp
文字和觸摸目標(biāo)之間的間距：24dp
觸摸目標(biāo)下的填充到對(duì)話邊緣：8dp
按鈕文本右邊緣和對(duì)話邊緣之間的填充：16dp
****Simple dialog keylines - 簡(jiǎn)單的對(duì)話框基線****
Vertical keyline at 24dp from the left and right edges. Content associated with an icon or avatar aligns 80dp from the left edge.
【翻譯】
從左邊緣和右邊緣在24dp處的垂直關(guān)鍵線。與圖標(biāo)或頭像相關(guān)聯(lián)的內(nèi)容從左邊緣開始對(duì)齊80dp。
Keylines for a simple dialog
【翻譯】
一個(gè)簡(jiǎn)單的對(duì)話框的基線
****Simple dialog content guidelines - 簡(jiǎn)單的對(duì)話內(nèi)容指南****
It is recommended that simple dialogs have titles, but titles can be omitted based on your product’s needs.
【翻譯】
建議簡(jiǎn)單的對(duì)話框有標(biāo)題，但可以根據(jù)產(chǎn)品的需要省略標(biāo)題。
Title - 標(biāo)題
Top padding: 24dp
Bottom padding: 20dp
Text size: Roboto Medium 20sp
Text line height: 28dp
【翻譯】
頂部填充：24dp
底部填充：20dp
文字大?。篟oboto Medium 20sp
文字行高：28dp
Content - 內(nèi)容
Row height of single-line list with avatars: 56dp
Bottom edge padding: 8dp
【翻譯】
單行列表的行高：56dp
底邊填充：8dp
[圖片上傳失敗...(image-4c7ca7-1552295575320)]
redlines for a simple dialog
【翻譯】
一個(gè)簡(jiǎn)單的對(duì)話框的紅線
****Full-screen dialog titles - 全屏對(duì)話框標(biāo)題****
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
【翻譯】
如果需要，全屏對(duì)話框標(biāo)題可以換行到第二行，然后應(yīng)該截?cái)唷?標(biāo)題應(yīng)該簡(jiǎn)潔，但在某些情況下，例如當(dāng)單詞在不同語(yǔ)言中更長(zhǎng)時(shí)，標(biāo)題可能需要包裝。
應(yīng)用欄高度與一行文本：56dp
應(yīng)用欄高度，兩行文本：80dp
標(biāo)題文本keyline：72dp
標(biāo)題文本：20sp
標(biāo)題文本頂部和底部填充：20dp
從左邊緣的拒絕行動(dòng)padding：16dp
肯定行動(dòng)文本：14SP
在左邊和右邊的肯定行動(dòng)文本填充：16dp
[圖片上傳失敗...(image-5c4d08-1552295575320)]
Detail of a full-screen dialog app bar
【翻譯】
全屏對(duì)話應(yīng)用欄的詳細(xì)信息
Full-screen dialog with an app bar containing a single line of text.
【翻譯】
帶有包含單行文本的應(yīng)用欄的全屏對(duì)話框。
Note that this image is for illustration purposes only. Long titles should be placed in the content area of the full-screen dialog.
【翻譯】
請(qǐng)注意，此圖片僅供參考。長(zhǎng)標(biāo)題應(yīng)放置在全屏對(duì)話框的內(nèi)容區(qū)域中。
