提示框(Dialogs)

Dialogs提示框)用于提示用戶作一些決定,或者是完成某個任務時需要的一些其它額外的信息。 Dialog可以是用一種 取消/確定 的簡單應答模式,也可以是自定義布局的復雜模式,比如說一些文本設置或者是文本輸入 。

用途

Dialog最典型的應用場景是提示用戶去做一個些被安排好的決定 ,而這些決定可能是當前任務的一部分或者是前至條件。 Dialog可以用于告知用戶具體的問題以便他們作用重要的決定(話外音:起到一個確認作用),或者是用于解釋
接下來的動作的重要性及后果 。(話外音:起到一個警示作用)。

一些復雜的操作,尤其是每個決策都需要相關解釋說明的情況下是不適合使用Dialog形式的。

contact chips

Dialog包含了一個標題(可選),內容 ,事件。

標題:主要是用于簡單描述下選擇類型。它是可選的,要需要的時候賦值即可。

內容:主要是描述要作出一個什么樣的決定 。

事件:主要是允許用戶通過確認一個具體操作來繼續下一步活動。

contact chips

按鈕的寬度及邊框示例

contact chips

contact chips

contact chips

加寬型豎排按鈕(Stacked full-width buttons)

當按鈕的文本超過了通常的按鈕寬度時,你就可以使用這種豎向疊模式來呈現我們的按鈕文字信息。

contact chips

并排按鈕(Side-by-side buttons)

在每個按鈕的文本信息都沒有超過通常的按鈕寬度時,推薦使用并排模式。比如說最常用的 確定/取消 按鈕

contact chips

contact chips

內容

提示框標題

提示框的標題是可選的,用于說明提示的類型。可以是與之相關的程序名,或者是選擇后會影響到的內容 。例如:設置

提示框標題應該作為提示框的一部分被整體地顯示出來。

提示框內容

提示框的內容是變化多樣的。但是通常情況下由文本 和(或) 其它UI元素組成的,并且主要是用于聚焦于某個任務或者是某個步驟。比如說"確認"、"刪除"或選擇某個選項。

contact chips contact chips

事件

提示框事件

提示框呈現的是一組聚焦和有限的事件,通常是一個肯定的事件和否定(與肯定的事件對立)的事件組成。

肯定的事件是放于提示框的右邊并且可以繼續接下來的步驟。肯定的事件可以是據有破壞性的,比如:"刪除","移除"。(話外音:肯定的事件主要是指產品期望用戶的一個決策。與按鈕文字呈現的語意無關)

否定的事件是放于提示框的左邊。用于返回用戶原始的屏幕或者是步驟。(話外音:一般就是關閉提示框作用)

事件的按鈕排列類型可以是并列的,也可以是豎向疊加加寬型的。這取決于事件按鈕里面的文字長短。

肯定事件和否定事件除了可以使用"確認"/"取消"外,也可以是其它一些動詞或者是動詞短語來表明決策后的結果。

contact chips

表現(Behavior)

滾動

提示框是與父視圖是分隔開的。不會隨著父視圖滾動。

如果可以,請盡量保持提示框里面的內容不需要滾動 。如果滾動的內容太多了,那么可以考慮使用其它的容器或者是呈現方式。然而,如果內容是滾動的,那么請使用較明顯的方式來提示用戶。比如說被讓文字或者是控件露一截出來。 contact chips

手勢

觸摸提示框外面的區域可以關閉提示框

提示框焦點

提示框的焦點是整個屏幕。提示框在關閉前或者是用戶選擇了一個事件(比如說選擇了一個選項)前都會持有焦點。

原文:Dialogs 翻譯:Kris 校對:huanglizhuo

两码中特期期