提示框(Dialogs)
Dialogs提示框)用于提示用戶作一些決定,或者是完成某個任務時需要的一些其它額外的信息。 Dialog可以是用一種 取消/確定 的簡單應答模式,也可以是自定義布局的復雜模式,比如說一些文本設置或者是文本輸入 。
用途
Dialog最典型的應用場景是提示用戶去做一個些被安排好的決定 ,而這些決定可能是當前任務的一部分或者是前至條件。 Dialog可以用于告知用戶具體的問題以便他們作用重要的決定(話外音:起到一個確認作用),或者是用于解釋
接下來的動作的重要性及后果 。(話外音:起到一個警示作用)。
一些復雜的操作,尤其是每個決策都需要相關解釋說明的情況下是不適合使用Dialog形式的。
Dialog包含了一個標題(可選),內容 ,事件。
標題:主要是用于簡單描述下選擇類型。它是可選的,要需要的時候賦值即可。
內容:主要是描述要作出一個什么樣的決定 。
事件:主要是允許用戶通過確認一個具體操作來繼續下一步活動。
按鈕的寬度及邊框示例
加寬型豎排按鈕(Stacked full-width buttons)
當按鈕的文本超過了通常的按鈕寬度時,你就可以使用這種豎向疊模式來呈現我們的按鈕文字信息。
并排按鈕(Side-by-side buttons)
在每個按鈕的文本信息都沒有超過通常的按鈕寬度時,推薦使用并排模式。比如說最常用的 確定/取消 按鈕
內容
提示框標題
提示框的標題是可選的,用于說明提示的類型??梢允桥c之相關的程序名,或者是選擇后會影響到的內容 。例如:設置
提示框標題應該作為提示框的一部分被整體地顯示出來。
提示框內容
提示框的內容是變化多樣的。但是通常情況下由文本 和(或) 其它UI元素組成的,并且主要是用于聚焦于某個任務或者是某個步驟。比如說"確認"、"刪除"或選擇某個選項。
事件
提示框事件
提示框呈現的是一組聚焦和有限的事件,通常是一個肯定的事件和否定(與肯定的事件對立)的事件組成。
肯定的事件是放于提示框的右邊并且可以繼續接下來的步驟??隙ǖ氖录梢允菗衅茐男缘?,比如:"刪除","移除"。(話外音:肯定的事件主要是指產品期望用戶的一個決策。與按鈕文字呈現的語意無關)
否定的事件是放于提示框的左邊。用于返回用戶原始的屏幕或者是步驟。(話外音:一般就是關閉提示框作用)
事件的按鈕排列類型可以是并列的,也可以是豎向疊加加寬型的。這取決于事件按鈕里面的文字長短。
肯定事件和否定事件除了可以使用"確認"/"取消"外,也可以是其它一些動詞或者是動詞短語來表明決策后的結果。
表現(Behavior)
滾動
提示框是與父視圖是分隔開的。不會隨著父視圖滾動。
如果可以,請盡量保持提示框里面的內容不需要滾動 。如果滾動的內容太多了,那么可以考慮使用其它的容器或者是呈現方式。然而,如果內容是滾動的,那么請使用較明顯的方式來提示用戶。比如說被讓文字或者是控件露一截出來。
手勢
觸摸提示框外面的區域可以關閉提示框
提示框焦點
提示框的焦點是整個屏幕。提示框在關閉前或者是用戶選擇了一個事件(比如說選擇了一個選項)前都會持有焦點。
原文:Dialogs 翻譯:Kris 校對:huanglizhuo