原文鏈接：www.yannispang.com

移動端交互設(shè)計中ActionSheet和Dailog、Dailog和Toast是兩組容易混淆的交互組件。這里總結(jié)一下兩組交互控件的常見用法和區(qū)別。

多說一句：交互設(shè)計沒有恒定不變的標(biāo)準(zhǔn)，一切均應(yīng)根據(jù)實際的交互場景選擇適合的交互方案。

ActionSheet | 彈出式菜單

ActionSheet，彈出式菜單。先在iOS系統(tǒng)中廣泛使用，而后“蔓延”到Android和H5的交互設(shè)計中。

其常見樣式如下：

使用ActionSheet的常見情況：

1、作為行為觸發(fā)的多個邏輯分支選項時：通常擁有設(shè)計中的兩個或更多的邏輯分支，常表現(xiàn)在擁有一組兩個或更多的操作按鈕。需要用戶選擇執(zhí)行哪個操作分支。

2、作為潛在風(fēng)險的確認(rèn)時：通常只有一個菜單選項和對應(yīng)的文案說明。此警報強度較Dailog更弱。

使用ActionSheet的幾點注意：

1、在彈出層（Popover）以內(nèi)出現(xiàn)，此時建議提供過場動畫。在Popover以外出現(xiàn)時，建議不提供過場動畫。

2、iOS樣式的A.S.若在Popover內(nèi)出現(xiàn)，需要提供“取消”以方便收起操作。在Popover以外和Android樣式的A.S.，無需提供“取消”，但需要點擊浮出層以外區(qū)域收起操作。

3、建議對有破壞性的菜單項使用警惕色。

4、避免菜單項過多和菜單滾動

5、不要輕易嘗試級聯(lián)菜單

Dialog | 對話框

Dialog，對話框。和Web設(shè)計中的Modal近似，但也有不同之處（其他時候來總結(jié)Dialog和Modal的異同)。

其常見樣式如下：

使用Dialog的常見情況：

1、警告用戶會影響到使用的極重要的信息。用于告知用戶具體的問題以便他們作用重要的決定，或者是用于解釋接下來的動作的重要性及后果 。

2、讓用戶確認(rèn)/授權(quán)。通過使用Dialog來提示用戶去做一個些被安排好的決定 ，而這些決定可能是當(dāng)前任務(wù)的一部分或者是前至條件。

使用Dialog的幾點注意：

1、避免過多使用。由于Dialog“過分”強，且常常在用戶的預(yù)期之外，出現(xiàn)會打斷用戶預(yù)期，引起用戶的額外重視。故設(shè)計中則需要避免濫用。沒有用戶希望被頻繁打斷或是干擾。

2、Dialog提供的操作選擇不宜超過兩個（含取消）。傾向性操作建議靠右。

3、內(nèi)容要避免使用通用單詞或詞組，這幾乎無法為用戶接下來決策提供任何有用信息。比如：警告、錯誤、報警。

4、在信息表達(dá)清晰的情況下力求文案簡潔。能使用句子片段就不使用句子。尤其要避免需要復(fù)雜相關(guān)說明的操作使用Dialog。

5、和Web設(shè)計中的Modal不同，Dialog的使用過程中盡量盡量不要在Dialog中加入文本框、選擇等其他輸入型交互控件。盡可能讓Dialog主體定位在信息傳遞上。

6、盡量避免連續(xù)Dialog。

Toast | 彈出式提示

Toast，彈出式提示。在Web中也比較常見的交互控件，主要用于向用戶反饋交互結(jié)果。（另外在Web設(shè)計中Toast有一個重要“變種”——Notification Pop是在用戶無交互的情況下出現(xiàn)的，其出現(xiàn)時機、目的和常見UI位置有比較明顯的差異，這里不表）

常見的樣式如下：

使用Toast的常見情況：

1、需要中等強度的交互結(jié)果反饋時，又無法通過界面和動畫給予足夠明確的反饋時，常使用toast。例如保存、發(fā)布、提交等

2、當(dāng)前交互結(jié)果直接影響接下來的邏輯分支時，常用“加載中”提示，正在背景處理的行為。如：上傳中…

使用Toast的幾點注意：

1、結(jié)果類Toast的出現(xiàn)時間不宜超過5s以上。

2、除非交互結(jié)果是接下來邏輯分支的必備條件，否則不要使用等待類的Toast，因為此類Toast出現(xiàn)時，是無法做任何操作的。

3、緊急上條，如非必要，數(shù)據(jù)加載盡量使用背景加載或?qū)⒓虞d狀態(tài)放在界面上，如微博拉取新內(nèi)容等。

4、等待類操作一定要設(shè)置適合的超時時間，否則一旦背景行為耗時過長會造成前端操作等待過長，讓用戶誤以為“假死”，后果通常非常糟糕。

5、Toast顯示的文案要盡可能短。能使用短語使用短語，能使用句子段使用句子段。切勿超過1句話。