UI设计中，弹窗设计规范总结【百科全说】

设计师和产品经理在进行设计的时候，往往会更加专注于界面长什么样，界面和界面之间怎么跳转，给予用户什么样的操作反馈。但在采用何种方式给予用户反馈就没有很系统的了解了，在大部分人眼里，弹窗就是toast和dialog这两种。其实弹窗不仅仅只有这两种，那么，下面我们就来一起探索一下弹窗吧。

首先，什么是弹窗？

弹窗是一个为激起用户的回应而被设计、需要用户去与之交互的浮层。它可以告知用户关键的信息，要求用户去做决定，或者是涉及到多个操作。弹窗越来越广泛地被应用于软件、网页、以及移动设备中，它可以在不把用户从当前页面带走的情况下，指引用户去完成一个特定的操作。（以下我们主要研究下App中的弹窗如何使用）

模态与非模态

我们从两个方面来解读弹窗：模态和非模态弹窗。模态弹窗主要包括Dialog、Actionbar、Popover；非模态弹窗主要包括Snackbar、Toast（HUD）、Tips。

模态弹窗会打断用户的正常操作，要求用户必须对其进行回应，否则不能继续其它操作行为；非模态弹窗则不会影响用户的操作，用户可以不对其进行回应，非模态弹窗通常都有时间限制，出现一段时间后就会自动消失。

非模态弹窗一般被设计成用来告诉用户信息内容，而模态弹窗除了告诉用户信息内容外还需要用户对其进行功能操作。

1.1 模态－Dialog

Dialog对话框是一种模态弹窗，需要用户对此弹框进行操作后才能继续执行其他任务。当用户进行了敏感操作，或者当App内部发生了较为严重的状态改变，这种操作和改变会带来影响性比较大的行为结果，在该结果发生前应以Dialog的弹窗形式告知用户且让用户进行功能选择。可以分为系统型Dialog和自定义型Dialog。

系统型Dialog一般情况下Dialog由标题、信息内容和功能按钮组成，只有当用户点击了某个功能按钮后弹窗才会消失，App随即执行该功能操作，进入相应的功能流程。信息内容必须非常有必要以至于需要打断用户的操作进行信息内容阅读确认，否则请用Toast进行非模态弹窗提示。

若Dialog对话框出现三个或以上的功能按钮，将会增加用户的功能选择负担，所以需要使用多个功能按钮选择的时候请考虑使用Actionbar。

警告框在iOS中称之为Alerts。iOS的Alerts（警告框）主要用来传达重要信息，并且常常需要用户来进行操作。使用Dialog（Alert）的时候需谨慎，尽量不要给用户带来糟糕的体验感

自定义型用的场景比较广泛，由于普通的系统弹窗无法满足运营活动的需求，则需要更有趣、更有吸引力的弹窗来吸引用户眼球。常见的有新手引导、活动引导等。自定义弹窗时，要注意聚焦，不要随意分散操作功能，以免给用户造成不必要的操作。比如摩拜单车，用户未登录的时候，扫码开锁帮助和登录按钮分散的比较远。造成用户常常忽略“立即登录”这个按钮。