3个章节轻松掌握！超全面的Popover设计手册

当你打开 app 想要查找某个常用功能时，你是否常常习惯性的点击页面中的小加号去查找想要的功能？

又或者作为设计师的你，是否常常为如何将 app 中繁杂的功能安排妥当而苦恼？

“popover”，一种交互过程中的浮层卡片，犹如电子屏幕中的隐藏式收纳柜，将额外的文字内容收纳其中。这些组件极大的便利了用户的使用体验，在产品功能不缩减的情况下也能保持页面的信息表达清晰，将页面的功能屏效最大化。接下来，我们将从它的起源开始，拆解这个精巧的“电子抽屉”。

基础科普：

一、考古 Popover

Popover 的老家在哪？——从电脑右键菜单说起

Popover 的“祖先”最早能追溯到桌面端的右键菜单，比如 90 年代的 Windows 系统里，右键点击文件会弹出「复制 / 粘贴 / 删除」菜单。这其实就是 Popover 的早期形态！只不过那时它主要靠鼠标操作，而且长得方方正正，像个严肃的小表格。

关键转折点——移动端的「屏幕革命」

2007 年 iPhone 出世后，手机屏幕变小了，但功能变多了！于是，Popover 作为轻量化交互容器应运而生！它就像从电脑里「偷师」了右键菜单的位置精准和即点即走，又针对手机屏幕做了优化：

1. 用「点击图标」代替右键，手指轻松触发；
2. 悬浮在触发位置附近，不挡主界面；
3. 既能显示文字，又能加按钮、输入框，甚至小工具面板

为什么现在人人都爱用 Popover？

随着智能手机和大屏平板普及，设计师们发现：

1. 小屏幕需要「精准打击」：在几寸的屏幕上，Popover 能像「激光笔」一样，在用户需要的位置快速调出功能，不干扰主任务。
2. 多任务时代的「轻量级助手」：用户不想被全屏弹窗打断，Popover 就像耳边的小提示，说完就走
3. 设计师的「偷懒神器」：相比开发复杂的新页面，用 Popover 承载简单操作更高效！

总结：从「右键菜单」到「万能小泡泡」

Popover 的进化史，本质是人机交互从「鼠标精准操作」向「手指便捷交互」的妥协与创新～ 它带着桌面端的「位置精准」基因，又在移动端长出了「轻量化交互」的翅膀，最终成为现在我们每天都在用的「万能小弹窗」

二、定义 Popover

当这个始于电脑桌面的小元素成为移动端数字界面的“标配”时，我们不禁要问：在当下的设计语境中，popover 究竟被赋予了哪些核心特征？又该如何定义 popover 呢？

想要定义 popover，我们首先要理清楚 popover、tooltips、popmenu 的区别。

理论上来讲，Popover 的概念是一种容器，它可以承载任何内容。比如在 Figma 中它承载一些临时工具的操作，在小红书网页中为用户提供创作者的信息，在 IOS 系统中为用户提供一些 app 的快捷操作。在 web 端中，它可以通过鼠标悬停、鼠标点击甚至滚动鼠标触发，而在移动端中，主要通过手指点击或长按触发。

而 Popmenu、Tooltip 都是前端交互设计中用于展示额外信息的两种组件，它们都依赖由容器（Popover）承载内容，都是由浮层卡片承载信息提示和一些操作选项，他们的核心区别在于内容复杂度、交互方式和用户体验。

三者的关系可理解为是一个包含关系：

需要极简提示时：选 Tooltip（如图标解释、术语说明）。

需要轻量交互或补充信息时：选 Popmenu（如操作菜单、表单提示）。

而 Popover 作为浮层容器，承载着 Tooltip 和 Popmenu

那么在移动端中，灵活地使用 Popover 能有怎样的好处呢？

1. 减少页面占用空间：移动端屏幕空间有限，直接展示所有信息会导致界面拥挤，而 Popover 作为一种轻量化的悬浮容器组件，能够分担页面中的部分操作选项或信息提示，而且非模态的交互形式即点即走，既能帮用户快速完成任务，又不会打断主界面的操作流程。
2. 降低认知负担：页面中过多信息同时呈现会使用户注意力分散，而 Popover 将低频操作（如设置、分享功能）以及用户需要时显示关键信息（如术语解释）收纳起来。研究表明，界面非关键元素减少 20% 可使转化率提升 10-15%。

总而言之，合理地运用 Popover 可以显著提升用户体验和界面效率。

三、使用 Popover

如何在不同场景中灵活地使用 Popover 呢？

popover 作为容器，理论上可以承载任何内容。在搭建组件库的过程中，为了增强组件的灵活性与可扩展性，支持自定义尺寸，以应对未来业务需求的变化，避免频繁解组和二次开发，我们将容器与内容分离，调用时可以自定义容器中的内容：

需要极简提示时：选 Tooltip（如图标解释、术语说明）。

需要轻量交互或补充信息时：选 Popmenu（如操作菜单、表单提示）。

对于 Popover 而言，视觉层级清晰非常重要。在 Popover 中不建议塞太多内容，就像小卖铺里的货架，摆太多东西反而会找不到，反而降低了 Popover 的便捷性。像 Tooltip 的类型，一般使用单行文本或者短段落，像 Popmenu，十个已经是极限。

颜色类型

Popover 的表现形式要与页面场景相适配，一般选浅色或半透明深色。在组件库中设置了四种不同的气泡颜色，分别是 White solid、Transblack、Primary solid、Primary soft。在调用内容时，记得调整颜色类型与容器保持一致。

容器布局

组件库中对于容器的角标一共分为 13 种情况，可以根据按钮在屏幕中不同的位置进行灵活的选择。

结语

Popover 就像 UI 设计里的万能小助手，用轻盈的姿态连接着用户与功能。

它是触发时的惊喜弹窗，是信息传递的精准气泡，更是提升体验的细节魔法。无论是系统规范里的标准组件，还是创意网站中的趣味彩蛋，它始终用恰到好处的存在感，让交互变得高效又亲切。下次点击屏幕时，不妨留意这些悄悄登场的小窗口，感受设计如何在方寸之间藏满巧思～