屏幕|有人告诉你「Popover气泡卡片」这么好用吗( 二 )

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

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

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

6. 注意存在时间气泡卡片是一个中等量级的提醒组件，它不像「toast」自动出现自动消失，也不像弹窗绝对的模态强提醒，切换用户当下操作。它的出现时间与模态与非模态是可以由设计师根据业务属性自行把控，所以与前端开发进行沟通时需要把设计需求传递到位。
三、文末小结早在移动互联网诞生之前，气泡卡片作为快捷导航或者提示引导就在PC和Web里被广泛运用。
在某些设计规范当中（比如iOS的移动端）并不提倡使用气泡卡片，但在移动互联网发展多年的当下，用户使用习惯已经培养完毕，只要把握好气泡卡片的特性，跨平台使用现在也挺常见。同时基于气泡卡片承载信息灵活的特点，在平常的设计工作当中饱受欢迎。
作者：月亮与六便士；公众号：月亮体验设计坊
本文由 @月亮与六便士原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来Unsplash，基于CC0协议。