认识达内从这里开始

相信大家在使用一些移动端app软件的时候应该都见过软件内部的对话框等弹窗设计。今天，我们就一起来了解一下这些弹窗设计都是如何来完成的。

一、移动端的模态弹框

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

弹框的分类

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

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

两大移动端平台规范对模态弹框都进行了解释，在iOS的HID中，主要描述了Alert的规范，而在Android平台，Material Design规范里主要指dialog

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

首先，因为处于独占模式，弹框能够迅速抓住用户的注意力;

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

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

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

二、模态弹框的缺点

虽然模态弹框有很多优点，但如果不恰当的使用，将对产品的用户体验造成很大的影响。那么模态弹窗有哪些问题呢?

1、模态弹框打断了用户的操作流。

好的体验应该能让用户在无意识的情况下进入“流”的状态。模态弹框正好相反，除非用户主动关闭或处理弹框，否则不能继续之前的操作，而关闭和处理这个有意识的处理过程则打断了用户的操作流。

2、过多的弹框会养成用户直接关闭或忽略的习惯。

不少APP很喜欢用弹框，处处用弹框提示，但当弹框频繁出现时，用户可能已经习惯了这种方式，感觉烦躁的同时习惯性的迅速关闭，而完全忽略内容。因此，当真正的危险情况出现时，用户可能根本注意不到;

3、模态弹框有可能屏蔽内容的上下文。

移动端屏幕尺寸有限，虽然仍停留在当前页面，但弹窗也占据了页面很大一块主要部分，而突然出现的弹框很可能让用户忘记了刚才的内容，被遮挡的信息也可能正好与弹框内容有强关联性。

三、设计好模态弹框的原则有哪些?

接下来我们看看，在做弹框设计时可以参考的原则具体有哪些。

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

随着移动端的发展，弹框的种类和使用场景越来越丰富，任何一个弹框都不应该是随机出现的，那么我们该如何判断什么情况下使用哪种弹框呢?

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

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

考虑使用场景正确引导

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

2、避免过度干扰

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

合适的弹出方式

对于模态弹框来说，弹出的方式有两种：自动弹出、用户主动操作后弹出。很多系统类提示及广告通知会在用户打开APP或打开某个频道时自动弹出，比如，打开APP时弹出发现新版本的弹框，用户对这类弹框已经熟悉了，因此，适量的弹框不会引起用户反感。

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

另外则是基于用户的某些操作给予反馈，这种情况下是必要的弹框，需要基于当时用户的操作设计好弹框的内容，帮助用户进一步操作。比如用户在填写后的表单中点击退出，弹框提示用户退出行为会造成的结果，让用户有控制感。

避免使用多重弹框

一次只展示一个弹框，任何情况下都不要多个弹框同时叠加出现。模态弹框本身会消耗用户的认知资源，双重弹框只会增加用户的困惑，并且需要用户进行认知-决策-再认知-再决策的复杂过程，再有耐心的用户都会恼火。

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

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

3、使弹框易于理解

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

清晰准确的描述

弹框内容应该以用户熟悉的语言传达准确的信息，不要使用模棱两可或大段模糊描述，如果是对错误信息的反馈，应该明确的提示具体有哪些错误。如果是为了获取某种权限，应该描述为何需要用户打开权限，以免用户产生疑惑。

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

iOS和android系统类弹框已经规范了信息层次，对于更多定制化的弹框，尤其是广告通知类弹框，也需要注意信息的主次。遵循视觉设计的亲密性、对比、对齐等基础原则，并尽量简化内容。

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

设计师们或多或少都了解，我们可以利用用户的心理来设计弹框的内容，从而影响用户的决定，而专业的设计师也有责任通过设计平衡商业和用户行为之间的关系。比如，通过利用人们对潜在损失恐惧的这一心理，在弹框内容中可以设置用户不继续操作便会产生损失的描述。(具体可参考这篇文章：如何通过设计让用户更准确地做出选择?)

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

人们多数情况下都有选择障碍，给用户更多的选择意味着没有选择。当选择的复杂程度越高，用户做决策的难度越大，也会带来满意度下降、选择延迟等负面效果。因此，弹框设计中，也要遵循只有一个主要任务的原则。

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

iOS规范中明确规定模态控件需要始终提供明显安全的退出模式。确保用户想退出模态弹框的时候能轻易找到出路。

保持清晰可见的关闭按钮

有些产品希望通过隐藏或减弱关闭按钮强制用户点击操作按钮来达到运营目的，可能短时间内会有一定效果，但长期来看，这是非常愚蠢的行为，遭遇这种强制行为的用户如果不卸载APP，那绝对是真爱了。所有弹框一定要保持清晰的关闭按钮，通过其他方式去引导用户行为才是正确做法。

关闭按钮行为一致

以往的弹框一般会在右上角有关闭按钮，随着弹框形式的多样，关闭按钮的行为也变多了，比如系统弹框的取消按钮、弹框底部的关闭按钮。在同一个产品中，最好同一类型弹框的关闭行为保持一致，让用户习惯其位置，并能准确定位。另外，MD的dialog相关原则中有一条是：也可以通过点击弹框旁边背景处关闭弹框，这也是一个很好的方法。

5、减少使用频率

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

优先考虑使用非模态提示

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

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

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

6、视觉美化，增强品牌感

以品牌元素定制化弹框体系

直接应用系统的弹框虽然方便但却缺乏吸引力，在某些场景下，对弹框进行个性化定制、视觉上的美化会更容易吸引用户的好奇心，进而达到设计的目的。另外，弹框虽小，但也可以通过增加品牌的视觉元素，无时无刻向用户传达品牌信息。

保持弹框风格与比例的一致性

同一个产品中的弹框风格最好保持一致性，如果风格过于多样，或者弹框尺寸忽大忽小，会给人非常凌乱的感觉。

同一个产品中，弹框的风格和比例尽量保持统一

考虑设备的通用性

弹窗的设计要考虑设备的通用性。比如，iOS和MD中的默认弹框是不同的，所以需要考虑同时应用于两个平台的h5弹框形式如何去统一。另外，重新检查和判断每个弹框的使用是否合适。如果是，也要检查每个设备上是否得到了正常渲染。

7、情感化、更生动

弹框虽然是功能性控件，但我们也可以尝试增加各种情感化的元素使其更生动，以吸引人的设计打动用户。

增加情感化微动效

合理的动效能使产品更加生动有趣。人们都喜欢眼前一亮的效果，弹框中增加几处动效细节，愉悦用户也很重要。

增加引导性动效

功能性动效能以生动的方式教育用户，比如通过增加弹框打开或关闭的效果，增进用户对弹框的上下文理解，或者通过动效提示信息错误，以及通过动效缓解用户焦虑等都是非常有效的方式。

4、弹框的进化

移动端设计在不断进化，弹框的设计也同时在发展，很多新产品或设计案例中，我们能够发现新的玩法，可能未来弹框不一定是黑色遮罩上的一个小窗口而已，各种流畅的动效、细腻的动画会让弹框以更多样形式出现。

5、结语

弹框虽小，体验事大，一个产品体验的好坏往往体现在这类细节的点上，对这些点的思考也体现了设计师的能力。当然，任何规范、原则和技巧都只是参考，设计师应结合自家产品的实际情况，考虑应出于什么目的而采用何种弹框，进行何种形式的优化。因为，好的体验才是最终目标。

作者：三三

来源：众安ZED (微信号zhongan_zed)

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!