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.
【翻譯】
確認對話框應避免啟動其他簡單對話框或簡單菜單,因為它們增加了復雜性,并增加了應用程序的高度。 如果需要完成任務,請考慮使用全屏對話框。
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.
【翻譯】
日期選擇由用戶點擊日期和“確定”按鈕設置。
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.
【翻譯】
全屏對話框支持用于選擇日期的簡單對話框。
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.
【翻譯】
即使在禁用肯定操作時,操作和文本顏色的一致放置也有助于區分操作與常規文本。
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
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。
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
【翻譯】
全屏對話應用欄的詳細信息
Full-screen dialog with an app bar containing a single line of text.
【翻譯】
帶有包含單行文本的應用欄的全屏對話框。
Note that this image is for illustration purposes only. Long titles should be placed in the content area of the full-screen dialog.
【翻譯】
請注意,此圖片僅供參考。長標題應放置在全屏對話框的內容區域中。