ActionSheet、Dailog、Toast傻傻分不清楚？

原文链接：www.yannispang.com

---

移动端交互设计中ActionSheet和Dailog、Dailog和Toast是两组容易混淆的交互组件。这里总结一下两组交互控件的常见用法和区别。

多说一句：交互设计没有恒定不变的标准，一切均应根据实际的交互场景选择适合的交互方案。

---

ActionSheet | 弹出式菜单

ActionSheet，弹出式菜单。先在iOS系统中广泛使用，而后“蔓延”到Android和H5的交互设计中。

其常见样式如下：

使用ActionSheet的常见情况：

1、作为行为触发的多个逻辑分支选项时：通常拥有设计中的两个或更多的逻辑分支，常表现在拥有一组两个或更多的操作按钮。需要用户选择执行哪个操作分支。

2、作为潜在风险的确认时：通常只有一个菜单选项和对应的文案说明。此警报强度较Dailog更弱。

使用ActionSheet的几点注意：

1、在弹出层（Popover）以内出现，此时建议提供过场动画。在Popover以外出现时，建议不提供过场动画。

2、iOS样式的A.S.若在Popover内出现，需要提供“取消”以方便收起操作。在Popover以外和Android样式的A.S.，无需提供“取消”，但需要点击浮出层以外区域收起操作。

3、建议对有破坏性的菜单项使用警惕色。

4、避免菜单项过多和菜单滚动

5、不要轻易尝试级联菜单

---

Dialog | 对话框

Dialog，对话框。和Web设计中的Modal近似，但也有不同之处（其他时候来总结Dialog和Modal的异同)。

其常见样式如下：

使用Dialog的常见情况：

1、警告用户会影响到使用的极重要的信息。用于告知用户具体的问题以便他们作用重要的决定，或者是用于解释接下来的动作的重要性及后果 。

2、让用户确认/授权。通过使用Dialog来提示用户去做一个些被安排好的决定 ，而这些决定可能是当前任务的一部分或者是前至条件。

使用Dialog的几点注意：

1、避免过多使用。由于Dialog“过分”强，且常常在用户的预期之外，出现会打断用户预期，引起用户的额外重视。故设计中则需要避免滥用。没有用户希望被频繁打断或是干扰。

2、Dialog提供的操作选择不宜超过两个（含取消）。倾向性操作建议靠右。

3、内容要避免使用通用单词或词组，这几乎无法为用户接下来决策提供任何有用信息。比如：警告、错误、报警。

4、在信息表达清晰的情况下力求文案简洁。能使用句子片段就不使用句子。尤其要避免需要复杂相关说明的操作使用Dialog。

5、和Web设计中的Modal不同，Dialog的使用过程中尽量尽量不要在Dialog中加入文本框、选择等其他输入型交互控件。尽可能让Dialog主体定位在信息传递上。

6、尽量避免连续Dialog。

---

Toast | 弹出式提示

Toast，弹出式提示。在Web中也比较常见的交互控件，主要用于向用户反馈交互结果。（另外在Web设计中Toast有一个重要“变种”——Notification Pop是在用户无交互的情况下出现的，其出现时机、目的和常见UI位置有比较明显的差异，这里不表）

常见的样式如下：

使用Toast的常见情况：

1、需要中等强度的交互结果反馈时，又无法通过界面和动画给予足够明确的反馈时，常使用toast。例如保存、发布、提交等

2、当前交互结果直接影响接下来的逻辑分支时，常用“加载中”提示，正在背景处理的行为。如：上传中…

使用Toast的几点注意：

1、结果类Toast的出现时间不宜超过5s以上。

2、除非交互结果是接下来逻辑分支的必备条件，否则不要使用等待类的Toast，因为此类Toast出现时，是无法做任何操作的。

3、紧急上条，如非必要，数据加载尽量使用背景加载或将加载状态放在界面上，如微博拉取新内容等。

4、等待类操作一定要设置适合的超时时间，否则一旦背景行为耗时过长会造成前端操作等待过长，让用户误以为“假死”，后果通常非常糟糕。

5、Toast显示的文案要尽可能短。能使用短语使用短语，能使用句子段使用句子段。切勿超过1句话。