對話框

對話框是告知使用者重要通知或讓他們完成單個操作的一種方式。

Dialogs should be unambiguous and concise in their wording. Only the most common, or main, action should be highlighted with color. The main action should be placed topmost in vertical dialogs or rightmost in horizontal dialogs.

Main actions may be positive, negative, or neutral. Positive actions add something to their subjects. Negative actions remove, delete, or otherwise make changes that can’t be easily undone. Neutral actions do not add or remove from the subject, but still make a change.

The main action should be highlighted using theme.palette.normal.negative if it is destructive, theme.palette.normal.positive if it is positive, or theme.palette.normal.focus if it is neutral. The remaining options should be gray, without defining a color theme property.

../../_images/40.png

Dialogs should resume actions, not ask a yes or no question. For example, the user has selected an option to delete a contact. Your dialog should ask, 「Are you sure you would like to delete this contact?」 The options should then be 「Delete」, a negative action colored in red, and 「Cancel」, colored in gray.

The title should contain useful information. Continuing the contact deletion example, using the contact’s name as the title makes it clear and easy to see what is being deleted. A good rule of thumb is to look at your dialog with and without the title - the latter should clearly be missing some data about what is happening.

要避免的設計提示

../../_images/39.png

左鍵:」下載」按鈕使用舊的焦點顏色,」取消」按鈕(第二動作)使用舊的灰色。

右鍵:對話框使用通用答案,兩個按鈕都被塗為主要動作,並且具有令人困惑的顏色含義:」「否」會導致不可逆的動作,「是」會導致相加的動作嗎?」