提示类控件之 l 模态&非模态弹窗类型及设计指南

I. 定义

1. 模态（modal）弹窗：很容易打断用户的操作行为，强制用户必须回应操作，否则不能进行其他操作。

2. 非模态（nonmodal）弹窗：不会影响用户的操作，用户可以不回应，非模态弹窗通常都有时间限制，出现一段时间后就会自动消失。

二者区别：非模态弹窗通知用户信息，而模态弹窗除了传达信息外还可进行功能操作。

II. 优缺点

优：

1.让用户感知未离开当前页面，没有丢失正在浏览或填写的内容，又能够清晰地预见接下来要去向哪里，给用户引导的同时让用户对操作有掌控感；

2.相对独立，不影响页面布局；

3.一次性操作，解决简单，较页面轻，易返回，不需要刷新整个页面，展开/收回速度快，整个过程流畅。

缺：

1.不在用户预期之内出现的、无用的、打断用户操作的提示、告警信息；

2.不断叠加的弹窗，在弹窗内启动弹窗。

III. 类型

i. 模态弹窗3种：Alerts／Dialogs、Action bar/Activity View/Action Sheets、Popovers/Popup

1. Alerts（iOS）/Dialogs（Android）：警告框/提示框

一般由标题、描述信息*、输入框、功能按钮*组成，用户点击某个功能按钮后弹窗消失，App执行该功能操作，进入相应流程。

Dialog包含了一个标题(可选)，内容 ，事件。

标题：主要是用于简单描述下选择类型。它是可选的，要需要的时候赋值即可。

内容：主要是描述要作出一个什么样的决定 。

事件：主要是允许用户通过确认一个具体操作来继续下一步活动。

作用：用户进行了敏感操作或状态改变，在该结果发生前以对话框形式传达重要信息，告知用户当前状况，让用户主动选择回应，适用于结果影响性较大的重要操作，如退出（APP/当前账号）、离开流程（确认订单/编辑地址）、删除、清空、开启消息通知等

Alerts Dialogs

2. Action bar/Action Sheets（iOS）/Activity View（iOS）：操作栏/工具栏、操作列表、活动视图

Actionbar比Dialog提供更多功能按钮选择，默认有“取消”功能按钮，点击该按钮或弹窗以外的区域关闭弹窗。

在iOS中常见样式是页面底部的文字列表框，以简洁的功能描述性文字展示功能按钮。形式为文字、文字+图标、图标（较少见）。

作用：提供一系列在当前情景下可以完成的任务操作，适用于分享功能

Action Sheets Activity View

3. Popovers(iPad) / Popup(Android)：弹出框/浮出框/浮层弹窗

提示工具Tooltip的插件，当用户轻点某个控件或页面中的某一区域时浮出的临时视图，大多浮动于顶层，弹出解释或操作气泡。

作用：可在当前页面进行更多操作，常用来显示/隐藏页面中折叠的额外信息，或呈现一些常用操作的快速入口。

Popovers(iPad)

iPhones避免使用popovers，所以在iOS端popovers的样式为iPads专用

ii. 非模态弹窗 2种：Toasts/HUD、Snackbars

1. Toasts/HUD：提示框

1）Toasts吐司提示（Android）

Toasts

轻量级弹窗，给予用户及时提醒或消息反馈，一般用来显示操作结果或应用状态的改变，确保用户知晓自己所处的状态。

常见Toasts为一句简短的描述性文字，可在页面顶部、中部或者在底部出现（通常在页面的中轴线上），具体的显示位置根据页面的整体设计进行设置，同一款产品尽量使用相同位置，让用户产生统一认知。

优点：

1.占用屏幕空间小; 2.不会打断用户操作; 3.使用简单适用范围广

缺点：

1.显示停留时间短，占用区域不大，易被用户忽略，不适合承载过多的文字和重要信息，尤其在碎片化时代注意力不集中容易错过提示

2.被滥用于加载、表单提示、状态变更反馈、断网消息等，不断出现的黑乎乎矩形样式上给人一种模态的错觉，阻塞感会打断心流。

3.遮盖其他控件，但不能对Toasts进行交互。

在Android规范中Toasts：

出现在屏幕底部；

只能放文字不能带图标，文字要精简；

短时间后会自动消失，系统默认停留时长2s（短）和3.5s（长）；

不可进行交互。

| 在iOS 将Toasts的位置由屏幕底部和中间改到顶部的尝试

好处：1.出现位置稳定：不会因为软键盘出现导致原本在屏幕底部或中间的Toast被遮盖或浮动到其他位置。2.更容易引起用户注意：iOS持续录音、GPS被使用、正在通话状态、活动指示器和系统推送通知都在屏幕顶部，符合用户在顶部感知反馈信息的习惯。3.不会遮挡主体内容，不干扰浏览。

2）HUD透明指示层（iOS官方无Toasts，只有HUD）

HUD可能来源于 平视显示器（Head Up Display），最初是运用在航空器上的飞行辅助仪器，飞行员不需要低头就能够看到需要的重要资讯。

Toasts和HUD不同之处：

1>Toasts一般出现在屏幕底部，HUD出现在屏幕中间。

2>Toasts一般是灰黑或黑色半透明，HUD一般是毛玻璃半透明。

3>每次产生的Toasts内容不可改变，HUD内容可以改变（比如调节音量时出现的HUD）

2. Snackbars（Android）：底部弹窗

Snackbars

Google MD规范中Toasts和Snackbars为一类。

由信息内容和一个功能按钮组成，位于屏幕最上层，可在屏幕上滑动关闭，或触控其他屏幕区域自动消失。

作用：反馈操作结果，点击功能按钮后弹窗消失，系统执行该操作，完成相应的功能流程。如删除任务时，屏幕底部出现“任务成功删除”并附带撤销操作，点击撤销任务可恢复；不进行操作Snackbars则消失，任务删除成功。

Snackbars与Toasts对比：

相同点：

1.都为小弹窗的形式，会自动消失；

2.显示停留时长可自定义（建议遵循系统标准）；

3.屏幕上只能有一个弹窗

不同点：

1.Snackbars一般都会有操作按钮，如撤销；Toasts无操作；

2.Snackbars一般出现在底部，Toasts一般出现在中部；

3.Snackbars可操作关闭，Toasts不可交互；

4.Snackbars打扰程度高于Toasts；

5.Snackbars运用未普及，可能造成用户理解负担

IV. 设计指导

1. 在使用弹窗的时候要尽量克制，要考虑信息内容的必要性和目的性（商业推广或者增值服务等目的），来选择是否使用弹窗和使用弹窗的方式和样式。

当弹窗中的内容太多、交互过于复杂时，已违背了弹窗的最初意义，使用跳转新页面更合适；业务流程是A-B-A时使用弹窗更好，A-B-C时，使用跳转更为合理。

2. 根据反馈优先级，采用不同的样式：

Alert（强提示性）：提示信息至关重要的，要用户做决定才能继续，非用户发起（系统自动发起）一般都用Alert；

Actionbar（次强提示性）：重要程度弱于Alert，一般用户主动发起任务，需要给用户更多的功能选择时，使用Actionbar；

Toast（弱提示性）：提示信息告知用户某个事情发生了，用户不需要对此做出响应时，使用Toast。

Snackbar：涉及到删除操作类的场景，Snackbar可能是撤销最好的选择。

3. Dialogs

1）标题和信息内容的文字描述都尽可能的简洁、表述清晰、无异义，也可省略标题只保留内容描述和功能按钮（大多数Dialogs都没有标题）；

2）功能按钮最好只有两个，让用户选择“是”或“非”的功能操作（“是”指对内容描述的确认操作，比如确认删除、确认付费；“非”一般指取消操作，然后关闭弹窗）；用清晰的措辞来准确表明操作（删除、撤销、前往的我个人信息界面），而不是使用模糊的文案，例如“是”或“否”；

3）只保留一个“确认”按钮，具有更强提示性，让用户阅读内容后，点击右上角提供的关闭操作或者点击非弹层区域关闭弹层，前提要确保信息内容非常重要，才打断用户的操作进行信息内容阅读确认（如新手提示）。

Alerts（iOS）

1）最小化使用Alerts，只应用于破坏性操作或通知重要问题的使用场景，避免用户养成忽略的习惯并认真对待；

2）在横屏和竖屏模式下保证Alerts可读性良好的自适应显示；

3）Alerts标题和信息尽量简短，具有描述性，避免滚动；语气避免指责和批判；

4）常见为双按钮Alerts，按钮文案简洁有逻辑；用户习惯点击右侧的按钮，所以取消应该在左侧；差异化标红显示以区隔破坏性按钮，取消按钮标记为默认以实现加粗效果；

5）允许用户通过退回主屏幕以取消Alerts

4. Action bars

1）敏感的功能操作用红色字体或其他颜色按钮，突出视觉差异

2）在安卓系统中，Actionbar多为“选择列表框”（选项代替了功能按钮），减少了流程中的页面跳转，若选项和描述文字较多，仍建议跳转选项详情页

3）功能按钮数量过多时，文字列表的形式不适合显示，可用图形加文字描述的形式来进行展示，同时注意弹窗内各功能按钮的ICON设计、排列布局、按钮滚动显示等，留有足够的视觉线索。

Action Sheets

1）提供取消按钮，并始终包含在Action Sheets的底部；

2）突出显示破坏性或危险操作，警示性选项标红色并置于选项顶端，推荐性选项标示蓝色，通常采用官方控件，也可以自定义设计；

3）尽量避免Action Sheets中的滑动操作，如果选项过多，需要滑动才能看到全部选项，增加额外的选择时间，而且很难在滑动的同时不触碰到其他选项按钮。

5.Popovers

1）仅用关闭按钮（如取消、完成）用来确认和引导操作；

2）自动关闭非模态的Popovers时，自动保存内容；

3）在屏幕的适当位置弹出，箭头直接指向点击即展示Popovers的元素（Popovers的来源地）

4）一次仅显示一个Popover，避免在Popover上再弹出一层Popover

5）避免Popovers占位过大，弹窗大小刚好显示完全内容即可

6）改变Popovers大小时，提供平滑的过渡动效

6. Snackbars

1）通常 Snackbar 的高度应该仅仅用于容纳所有的文本，而文本应该与执行的操作相关。Snackbar 中不能包含图标，操作只能以文本的形式存在。

2）为了保证可用性，Snackbar 不应该成为通往核心操作的唯一方式。Snackbar所有层的上方，不应持续存在或相互堆叠。

3）最多包含0-1个操作，不含取消按钮

7.减少使用方式：

1）采用多状态按钮，反馈明显，不需要额外用Toast进行提示。

2）动效，吸引用户注意力，情感化设计给用户留下深刻印象。事物之间的关系可以通过动效进行隐喻，例如电商App加入购物车，商品飞入购物车中，有趣流畅。

3）声音和震动，建议作为同步辅助反馈手段。

8. 系统操作引导类可使用插画等视觉效果更加友好的弹窗

图片来源：https://developer.apple.com/