对话框气泡，气泡提示框

泡泡卡是由矩形和三角形箭头组成的弹出窗口，可以用来提示和引导，或者耦合一些页面，等等。但是，任何交互组件的使用都是有限的，泡泡卡也不例外。在这篇文章中，作者总结了泡泡卡的交互意义和设计中的注意事项，大家来看看吧。

前几篇短文介绍了一系列与表单相关的交互组件，如“单选按钮”和“复选框”。我相信观众大师们已经对表单的页面布局有了一个基本的概念。现在我们打开“popover”的世界，简单说一下泡泡卡的交互性质。

一、「Popover气泡卡片」的交互含义

“Popover”又称“泡泡卡/泡泡弹出框/弹出泡泡/泡泡”，是由一个矩形和三角形箭头组成的弹出窗口，箭头指向的地方通常是导致泡泡卡弹出的控件或区域。您可以通过单击气泡卡中的按钮或非气泡卡屏幕的其他区域来关闭气泡卡。

1. 「Popover气泡卡片」的交互结构

1)箭头

箭头：“泡泡卡”起到方向指示的作用，位置不固定，随所要指向的内容方向而变化。

2)容器

容器：文本信息或操作信息的载体。

3)内容(Content)

内容：泡泡卡最重要的部分，可以是描述信息，也可以是操作功能。

这里需要强调的是，我们在使用“泡泡卡”的时候，通常会用一些视觉上的方法来强调它浮在原有的操作界面上，比如笔画、投影等等。由于“泡泡卡”具有指向好、吸引眼球、运行效率高、信息量大等特点，一般用于以下三种场景：快速导航、提示引导、界面解耦。

2. 快捷导航

由于移动终端受限于物理尺寸，设计者不得不将大量低频但重要的功能操作放入泡泡卡中，通过“更多”、“厎”、“等方式调出泡泡卡。

3. 提示引导

基于“泡泡卡”自带箭头的方向性特点，我们现在可以把它用在一些需要引导的功能设计中，比如版本迭代后的新功能提示，让用户非常清楚的知道页面中某个新功能产品更新了什么。降低用户认知的成本。

4. 界面解耦

当你不想破坏原有界面中用户的节奏和信息密度时，可以利用“泡泡卡”信息承载量大的特点，解耦一些页面，达到屏幕空间复用的目的(这种方法适用于大尺寸界面)。

二、「Popover气泡卡片」的注意点

1. 注意与「Edit Menus 编辑菜单」的区别

在iOS规范中，“编辑菜单编辑菜单”和“Popover泡泡卡”被明确划分为两个不同的交互组件，使用场景差异较大。

编辑菜单用于承载文本信息、视图信息等的编辑功能。比如复制粘贴，它的交互动作一般是长按或者双击。

https://developer . apple.com/design/human-interface-guidelines/IOs/controls/edit-menus/

“Popover泡泡卡”不是苹果推荐在iPhone上使用，而是在屏幕尺寸更大的iPad上使用。

/p>

2. 避免使用时面积过大

不应该把气泡卡片面积做得过大，更不应该占据整个屏幕，这样会造成对原本信息的遮盖。说到底气泡卡片还是一种中等提醒的形式，设计师不应该贪心，设计时应对承载信息做减法，并且要注意不同屏幕下的适配问题。

3. 谨慎考虑弹出位置

气泡卡片的箭头应尽可能直接指向目标的元素。由于无法在屏幕上拖动气泡卡片，因此气泡卡片不应覆盖重要信息。需要注意的是，在屏幕边缘需要转换气泡卡片的方向，例如在屏幕顶部，气泡卡片应当显示在触发位置的下方，否则气泡卡片会超出屏幕导致显示不完整。

4. 请考虑实时保存

基于它的关闭原理“通过点击气泡卡片内的按钮或非气泡卡片的屏幕其他区域可关闭气泡卡片”，造成它极其容易被误触关闭，所以在它内部进行操作时建议采用实时保存的机制，可以有效地给用户进行防错。

5. 每次只使用一个气泡卡片

在同个窗体当中每次只能出现一个气泡卡片，当出现第二个的时候前一个必须关闭。因为从初衷来看气泡卡片就是想让用户进行内容聚焦，暂时屏蔽一些信息，如果多个同时使用的话就变的自相矛盾。并且除了弹窗之外，气泡卡片层之上不该有任何其他元素。

6. 注意存在时间

气泡卡片是一个中等量级的提醒组件，它不像「toast」自动出现自动消失，也不像弹窗绝对的模态强提醒，切换用户当下操作。它的出现时间与模态与非模态是可以由设计师根据业务属性自行把控，所以与前端开发进行沟通时需要把设计需求传递到位。

三、文末小结

早在移动互联网诞生之前，气泡卡片作为快捷导航或者提示引导就在PC和Web里被广泛运用。

在某些设计规范当中（比如iOS的移动端）并不提倡使用气泡卡片，但在移动互联网发展多年的当下，用户使用习惯已经培养完毕，只要把握好气泡卡片的特性，跨平台使用现在也挺常见。同时基于气泡卡片承载信息灵活的特点，在平常的设计工作当中饱受欢迎。