弹框，一个让设计师和用户又爱又恨的控件。产品需要弹框传递信息，用户需要弹框接受反馈。但如果不经推敲，胡乱增添弹框设计，用户心流（Mental flow）频频被打断，很容易让用户产生沮丧情绪。我们在日常设计工作中，该如何设计合理的弹框？怎样的弹框设计是优秀的，而为什么有些弹框设计会让用户感到恼火？本文将为大家揭晓答案。

笔者将分两期来总结一下弹框的规范和进阶使用 *** 。欢迎持续跟进。之一期我们先梳理一下平台规范下的弹框究竟有哪些。

一、弹框的分类

在“弹框”的概念被泛化的当下，我相信连很多设计师本身都已经开始分不清弹框的具体分类了。好像任何情况下弹出的窗口都被统称为“弹框”，并且对于使用手法十分模糊。

实际上，纵观 iOS人机交互规范和Material Design，我们可以将弹框分为两大类：模态框和非模态框。

二、模态框

模态框：Modal Dialog。指代需要中断用户，用户必须完成对话框内任务（或主动关闭后）才能够继续主面板操作的弹框。“非模态”就是和“模态”对立的概念，指不需要中断用户操作的弹框。

良性的模态框其实可以辅助用户顺利完成任务。所以设计师务必要了解模态框究竟有哪些类型，以及它们的使用守则。

2.1 iOS – Alert 与 Material Design – Dialogs（对话框）

对话框的使用场合最为广泛，也是最容易打断用户心流的弹框，因为它直接出现在屏幕中心。所以双平台都明确提醒设计者要尽量克制对话框的使用频次。

正是因为对话框非常容易获取用户注意力，所以一般用于承载非常重要的附加操作或警示信息。

关于对话框值得一提的是：因为产品设计过程中可以直接调用系统原生的对话框控件，所以许多设计师常常会忘记提醒开发人员配置引导用户操作的高亮选项，导致我们经常看到一些与产品设计意愿相违背的对话框。

例如为了激活沉睡用户或采集一些用户个性化信息，产品往往是希望获取到用户提醒、访问等权限的，所以弹框中的操作引导通常应该是正向的。但我们总是能看到一些啼笑皆非的案例。

所以在设计者为了方便或者出于其他兼容性问题而不得不调用原生对话框控件时，也不要疏忽对细节的把控。有时一个疏忽很可能会导致用户和用户体验的流失。

2.2 iOS – Action Sheet（动作面板）

Action Sheet 是iOS规范下的控件，近些年来也在慢慢被安卓化。

Action Sheet 是一个响应控件，一般需要用户执行了某个操作才会弹出（某些危险情况下，不需要用户操作就直接弹出的模态框应该使用 Alert / Dialog），并显示一组与当前操作有关的两个或多个选项。Action Sheet 的出现方式是从屏幕底部向上滑出。

iOS 人机交互规范提醒设计者在使用 Action Sheet 时应注意以下几点：

（1）突出破坏性选项：对于用户执行破坏性或危险性操作的按钮，应当使用红色高亮显示，并且放置于在 Action Sheet 的顶部。

（2）“取消”按钮应始终存在于动作面板的底部：虽然用户可以点击屏幕任意空白区域取消 Action Sheet，但“取消”按钮可以在用户不想执行任何操作时，给予用户明确的操作指向，所以不应移除“取消”按钮；

（3）避免出现纵向滚动：滚动意味着操作项已经多到溢出控件可视区域，用户需要额外的时间来进行选择操作。但因为 Action Sheet 中每一个操作的横向热区都非常大，在滑动的过程当中很容易发生误触。这个时候选择使用 Activity Views 会更加合理。

2.3 iOS – Activity Views（活动试图）

Activity Views 是 iOS 10 引进的新规范控件。它的诞生是为了解决 Action Sheet 的滚动问题，所以也常被称作是 Action Sheet 的宫格模式。

众所周知，国内最常见的 Activity Views 使用场景就是在分享或者使用第三方App打开文件时。