常用控件介绍

弹窗的分类

模态弹窗

除了告诉用户信息内容外还需要用户进行功能操作，会打断用户的操作行为，强制用户必须进行操作，否则不可以进行其他操作。

(Alerts/ dialog，Actionbar，Popover)

非模态弹窗

一般被设计成用来告诉用户信息内容，不会影响用户操作，用户可以不与回应，通常有时间限制,出现一段时间就会自动消失。

(Toast/HUD,Snackbar)

Alerts/Dialog：警告框与对话框

含义：英文意为警告、对话，跟弹窗属性非常吻合，就是紧急状况，打扰用户的行为。

剖析：IOS中警告框称之为Alerts，作用是用来传达重要信息，并伴随着需要用户进行操作。

作用：告知用户当前发生的状况，让用户主动选择回应。

适用：重要性较高的操作时，如退出、删除、清空等。

iOS规范中，警告框包含的元素如下：

标题(必选)、描述信息(可选)、输入框(可选)、按钮(必选)

必须包含标题、包含一个或多个按钮。

Android规范中，弹窗交互按钮需结合实际情况，不用“是/否”原则进行设计。

Actionbar (Sheets、Acitivity View) ：操作栏、操作列表、活动视图

含义：英译为工具栏、操作栏

剖析：当用户激发一个操作的时候，出现此窗口。一般会给用户提供更多的功能选择，一般可采用官方控件。一般都设计有一个默认的“取消”按钮，点击取消可以关闭弹窗。

Aciton Sheets和Activity Views是IOS上特有的交互形式。

特性：用户触发、包含两个或以上的按钮。

作用：操作列表提供一系列在当前情景下可以完成当前任务的操作，而这样的形式不会永久占用页面UI的空间。

适用：如分享功能等。

Popover/Popup:浮出框/浮层弹窗

含义：英意为弹出窗口，浮动于顶层窗口，气泡。

剖析：当用户点击某个控件或者某个区域时浮出的半透明或者不透明的弹窗窗口。不会对用户所在位置进行跳转。

作用：可以在当前页面进行更多的操作行为，显示/隐藏页面中的折叠信息。

适用：首页位置呈现一些常用操作的快捷入口。

Toast/HUD：提示框（IOS没有Toast，只有HUD)

含义: Toast也被称为吐司提示，Toast是安卓系统的一个控件名词，现也应用于iOS系统中。

剖析：提示框属于―种轻量级的弹窗反馈形式，常以小弹框的形式出现，持续1-2秒自动消失，可以出现在屏幕任意位置,但是建议同一款产品尽量使用相同位置，让用户产生统一认知，成为习惯。提示信息能给予用户及时反馈，确保用户知晓自己所处的状态，并可以做出相应的措施。iOS用户更习惯于在顶部感知反馈信息，不干扰用户浏览主体内容，Toast出现在屏幕顶部不会遮挡主体内容。

作用：无论是Toast还是HUD，都属于轻量提示，对用户干扰小。由于载体体积小，出现时间短，承载的信息不可过多。适用于不中断用户当前操作，并反馈由操作引起的状态变化的情况。

适用：页面加载、网络异常、操作成功、操作失败、调试音量等等。

Snackbar：底部弹窗

Android特有的交互形式，在Google的MD规范中，将Toast和Snackbars归为一类，有些时候也有应用在iOS系统中。

含义：英译为快餐、小吃。

剖析：Snackbars常规是从屏幕底部向上出现（但在应用过程中可以不必拘谨，也可从上方弹出，如下图2。了解规则，在运用改变规则），但是Snackbar可以经过用户进行其他操作而消失。它除了可以告诉用户信息内容，还可以与用户进行对话交互（用户可以点击功能按钮进行回应），也被称为加强版的toast。

适用：多用于撤销操作和功能引导、支持用户操作主动滑动关闭。

其他常用控件