弹弹弹~弹出好体验！必备弹框UI设计经验

静电说：由于弹框与当下流行的卡片式设计在表现形式上十分接近，同时弹框也逐渐承载了更多功能性需求，不再是简单的内容堆砌，因此弹框设计正在被越来越多设计师关注。

什么是弹框?

弹框是一种交互方式，用作提醒，做决定或者解决某个任务。弹框一般包含一个蒙版，一个主体及一个关闭入口，常见于网页及移动端。其好处是让用户更聚焦，且不用离开当前页面，更快更容易完成任务。

弹框也有对话框、弹窗等叫法，最初是应用于PC端网页和软件中的基础元素，随着移动端APP的发展，现在也在移动端得到了非常广泛的应用。

弹框的分类

从大的类别上来说，弹框可以分为两种类型：模态弹框和非模态弹框。

模态弹框通常用于向用户传递信息或获取用户反馈。其基本元素主要有三个：半透明遮罩层、包含文字和UI控件的子窗口、关闭按钮。

两大移动端平台规范对模态弹框都进行了解释，在iOS的HID中，主要描述了Alert的规范，而在Android平台，Material Design规范里主要指dialog（具体区别可参考官方解释）。

不同平台规范有所差异，比如，视觉样式不同，按钮位置不同等等，但总体上模态弹框都有如下三个特点：

因为模态弹框的这些特点，很多情况下使用非常有效。

1、因为处于独占模式，弹框能够迅速抓住用户的注意力；

2、层级清晰，半透明遮罩能让用户感觉自己没有离开原页面，清楚当前在哪里，接下来要去哪里；

3、由于在当前页面弹出，所以可以避免新页面加载和页面跳转，能够快速向用户展示信息。

非模态弹框一般用于告知用户一些轻量信息，不需要或需要少量用户反馈。与模态弹框正好相反，当一个非模态弹框被激活时，页面不会出现透明遮盖层，APP的主界面仍然处于激活状态，用户可以与其他内容进行其他交互。移动端中非模态弹框主要指Toast和snackbar。由于篇幅有限，这里不再赘述。

设计好模态弹框的原则有哪些？

1

选择恰当的弹框类型和使用场景

随着移动端的发展，弹框的种类和使用场景越来越丰富，我们该如何判断什么情况下使用哪种弹框呢？

a）根据功能选择合适的弹框类型

弹框按照功能可以分为：系统提示、操作反馈、用户引导、信息输入、广告通知这五大类。不同的弹框类型适合不同的设计方法，对用户的作用也相差甚远。设计师在工作中需要根据目的和场景选择合适的类型。下图展示的是5个不同类型的弹框：

b）考虑使用场景正确引导

相同的弹框如果在不同场景下出现所达到的效果截然不同，而在同一条件下，结合场景上下文优化内容，用户也会容易受引导内容的影响而进一步操作。

2

避免过度干扰

必要、积极、有效的弹框能够帮助用户了解当前的状态、下一步的行为、以及操作的后果，但过度出现或者错误的形式则会严重干扰用户的操作，给用户带来困扰。

a）合适的弹出方式

对于模态弹框来说，弹出的方式有两种：自动弹出、用户主动操作后弹出。很多系统类提示及广告通知会在用户打开APP或打开某个频道时自动弹出。

还有一种弹框会在用户操作过程中随时弹出网页上有错误无法弹出，这种弹框会对用户的行为造成强干扰，只适用于系统级的提示或有非常严重结果的行为。iPhone中在操作时会收到系统级的附近WiFi提示，普通产品不要轻易尝试这种弹出方式。

b）避免使用多重弹框

一次只展示一个弹框，任何情况下都不要多个弹框同时叠加出现。

c）只有一个模态控件占据视觉焦点

模态弹框本身是具有强干扰特征的控件，多种控件形式的叠加好似在正常页面前添加了多道门槛，用户需要一一破除，才能继续想做的任务，这也不是我们想看到的吧？

3

使弹框易于理解

弹框作为临时的过渡控件，应该在有限的空间内让用户高效获得信息，堆积太多内容、描述不清楚、信息误导等都是很差的体验。

a）清晰准确的描述

b）提供内容的视觉层次，确保关键信息的简洁

遵循视觉设计的亲密性、对比、对齐等基础原则，并尽量简化内容。

c）根据用户心理引导用户做决定

设计师们或多或少都了解，我们可以利用用户的心理来设计弹框的内容，从而影响用户的决定，而专业的设计师也有责任通过设计平衡商业和用户行为之间的关系。

d）不要给用户过多的选择，控制操作的数量

4

始终提供明显安全的退出模式

a）保持清晰可见的关闭按钮

b）关闭按钮行为一致

以往的弹框一般会在右上角有关闭按钮，随着弹框形式的多样，关闭按钮的行为也变多了，比如系统弹框的取消按钮、弹框底部的关闭按钮。在同一个产品中，最好同一类型弹框的关闭行为保持一致，让用户习惯其位置，并能准确定位。

5

减少使用频率

弹框容易打断用户，一定要控制一个产品中弹框出现的频率，当重要的信息可能丢失或用户的行为将造成无法挽回的后果时，才考虑使用模态弹窗。

a）优先考虑使用非模态提示

对于不是非常紧急和重要的信息，优先考虑是否有非模态提示的方式。比如在输入表单信息的时候，输入信息错误最好不要用弹框提示，可以使用toast或者在页面内提示。

b）将提示与内容和页面融合在一起

一些我们习惯的弹框内容我们也可以考虑是否有更好的方式。比如获取用户通知权限，可以将内容与页面信息融合在一起，对于有需要的用户会自动去打开权限。

适合使用弹框的场景及案例

1

新手引导

第一感觉是非常重要的。Google+及Carbonmade的新手引导采用了弹框，配上漂亮的插图。这种处理手法美观，不影响页面布局，卡片式的表现手法还能贯穿网页及移动的一致体验。

Google Photos的新手引导更结合了微动画，效果非常惊艳，让人过目不忘。

2

选择器

选择器的特点是用一个内滚区域来承载一个很长的页面，而该内滚区域的高度是可以根据浏览器的高度拉伸的。其好处是除了能放下很长的页面，同时能保留一些操作一直停留在屏幕上。这裡可以选择性的为弹框设置一个最大及最小高度，但要注意的是必须把背景锁定，否则出现2条滚动条的体验是很糟糕的。以QQ公众平台的图文选择器为例:

3

任务

有时候某些任务只是一些简单的操作，并不特地需要一个页面来表现，弹框是一个很好的方法。

Duolingo用插图和icon等视觉元素来丰富任务弹框的表现形式网页上有错误无法弹出，减轻枯燥感。

Trello的任务弹框虽然信息较多，但好处是能快速切换到不同的任务，增加效率。

4

提示

提示是最基础的弹框应用，设计时需记往保持统一性。视觉上的统一性: 颜色，间距，文案风格等。交互的统一性: 主要操作是左边还是右边按钮，关闭是点击蒙版还是点击叉叉。

腾讯企点的提示弹框整理：