當(dāng)你打開 app 想要查找某個常用功能時，你是否常常習(xí)慣性的點擊頁面中的小加號去查找想要的功能？

又或者作為設(shè)計師的你，是否常常為如何將 app 中繁雜的功能安排妥當(dāng)而苦惱？

“popover”，一種交互過程中的浮層卡片，猶如電子屏幕中的隱藏式收納柜，將額外的文字內(nèi)容收納其中。這些組件極大的便利了用戶的使用體驗，在產(chǎn)品功能不縮減的情況下也能保持頁面的信息表達(dá)清晰，將頁面的功能屏效最大化。接下來，我們將從它的起源開始，拆解這個精巧的“電子抽屜”。

基礎(chǔ)科普：

一、考古 Popover

Popover 的老家在哪？——從電腦右鍵菜單說起

Popover 的“祖先”最早能追溯到桌面端的右鍵菜單，比如 90 年代的 Windows 系統(tǒng)里，右鍵點擊文件會彈出「復(fù)制 / 粘貼 / 刪除」菜單。這其實就是 Popover 的早期形態(tài)！只不過那時它主要靠鼠標(biāo)操作，而且長得方方正正，像個嚴(yán)肅的小表格。

關(guān)鍵轉(zhuǎn)折點——移動端的「屏幕革命」

2007 年 iPhone 出世后，手機(jī)屏幕變小了，但功能變多了！于是，Popover 作為輕量化交互容器應(yīng)運而生！它就像從電腦里「偷師」了右鍵菜單的位置精準(zhǔn)和即點即走，又針對手機(jī)屏幕做了優(yōu)化：

1. 用「點擊圖標(biāo)」代替右鍵，手指輕松觸發(fā)；
2. 懸浮在觸發(fā)位置附近，不擋主界面；
3. 既能顯示文字，又能加按鈕、輸入框，甚至小工具面板

為什么現(xiàn)在人人都愛用 Popover？

隨著智能手機(jī)和大屏平板普及，設(shè)計師們發(fā)現(xiàn)：

1. 小屏幕需要「精準(zhǔn)打擊」：在幾寸的屏幕上，Popover 能像「激光筆」一樣，在用戶需要的位置快速調(diào)出功能，不干擾主任務(wù)。
2. 多任務(wù)時代的「輕量級助手」：用戶不想被全屏彈窗打斷，Popover 就像耳邊的小提示，說完就走
3. 設(shè)計師的「偷懶神器」：相比開發(fā)復(fù)雜的新頁面，用 Popover 承載簡單操作更高效！

總結(jié)：從「右鍵菜單」到「萬能小泡泡」

Popover 的進(jìn)化史，本質(zhì)是人機(jī)交互從「鼠標(biāo)精準(zhǔn)操作」向「手指便捷交互」的妥協(xié)與創(chuàng)新～ 它帶著桌面端的「位置精準(zhǔn)」基因，又在移動端長出了「輕量化交互」的翅膀，最終成為現(xiàn)在我們每天都在用的「萬能小彈窗」

二、定義 Popover

當(dāng)這個始于電腦桌面的小元素成為移動端數(shù)字界面的“標(biāo)配”時，我們不禁要問：在當(dāng)下的設(shè)計語境中，popover 究竟被賦予了哪些核心特征？又該如何定義 popover 呢？

想要定義 popover，我們首先要理清楚 popover、tooltips、popmenu 的區(qū)別。

理論上來講，Popover 的概念是一種容器，它可以承載任何內(nèi)容。比如在 Figma 中它承載一些臨時工具的操作，在小紅書網(wǎng)頁中為用戶提供創(chuàng)作者的信息，在 IOS 系統(tǒng)中為用戶提供一些 app 的快捷操作。在 web 端中，它可以通過鼠標(biāo)懸停、鼠標(biāo)點擊甚至滾動鼠標(biāo)觸發(fā)，而在移動端中，主要通過手指點擊或長按觸發(fā)。

而 Popmenu、Tooltip 都是前端交互設(shè)計中用于展示額外信息的兩種組件，它們都依賴由容器（Popover）承載內(nèi)容，都是由浮層卡片承載信息提示和一些操作選項，他們的核心區(qū)別在于內(nèi)容復(fù)雜度、交互方式和用戶體驗。

三者的關(guān)系可理解為是一個包含關(guān)系：

需要極簡提示時：選 Tooltip（如圖標(biāo)解釋、術(shù)語說明）。

需要輕量交互或補(bǔ)充信息時：選 Popmenu（如操作菜單、表單提示）。

而 Popover 作為浮層容器，承載著 Tooltip 和 Popmenu

那么在移動端中，靈活地使用 Popover 能有怎樣的好處呢？

1. 減少頁面占用空間：移動端屏幕空間有限，直接展示所有信息會導(dǎo)致界面擁擠，而 Popover 作為一種輕量化的懸浮容器組件，能夠分擔(dān)頁面中的部分操作選項或信息提示，而且非模態(tài)的交互形式即點即走，既能幫用戶快速完成任務(wù)，又不會打斷主界面的操作流程。
2. 降低認(rèn)知負(fù)擔(dān)：頁面中過多信息同時呈現(xiàn)會使用戶注意力分散，而 Popover 將低頻操作（如設(shè)置、分享功能）以及用戶需要時顯示關(guān)鍵信息（如術(shù)語解釋）收納起來。研究表明，界面非關(guān)鍵元素減少 20% 可使轉(zhuǎn)化率提升 10-15%。

總而言之，合理地運用 Popover 可以顯著提升用戶體驗和界面效率。

三、使用 Popover

如何在不同場景中靈活地使用 Popover 呢？

popover 作為容器，理論上可以承載任何內(nèi)容。在搭建組件庫的過程中，為了增強(qiáng)組件的靈活性與可擴(kuò)展性，支持自定義尺寸，以應(yīng)對未來業(yè)務(wù)需求的變化，避免頻繁解組和二次開發(fā)，我們將容器與內(nèi)容分離，調(diào)用時可以自定義容器中的內(nèi)容：

需要極簡提示時：選 Tooltip（如圖標(biāo)解釋、術(shù)語說明）。

需要輕量交互或補(bǔ)充信息時：選 Popmenu（如操作菜單、表單提示）。

對于 Popover 而言，視覺層級清晰非常重要。在 Popover 中不建議塞太多內(nèi)容，就像小賣鋪里的貨架，擺太多東西反而會找不到，反而降低了 Popover 的便捷性。像 Tooltip 的類型，一般使用單行文本或者短段落，像 Popmenu，十個已經(jīng)是極限。

顏色類型

Popover 的表現(xiàn)形式要與頁面場景相適配，一般選淺色或半透明深色。在組件庫中設(shè)置了四種不同的氣泡顏色，分別是 White solid、Transblack、Primary solid、Primary soft。在調(diào)用內(nèi)容時，記得調(diào)整顏色類型與容器保持一致。

容器布局

組件庫中對于容器的角標(biāo)一共分為 13 種情況，可以根據(jù)按鈕在屏幕中不同的位置進(jìn)行靈活的選擇。

結(jié)語

Popover 就像 UI 設(shè)計里的萬能小助手，用輕盈的姿態(tài)連接著用戶與功能。

它是觸發(fā)時的驚喜彈窗，是信息傳遞的精準(zhǔn)氣泡，更是提升體驗的細(xì)節(jié)魔法。無論是系統(tǒng)規(guī)范里的標(biāo)準(zhǔn)組件，還是創(chuàng)意網(wǎng)站中的趣味彩蛋，它始終用恰到好處的存在感，讓交互變得高效又親切。下次點擊屏幕時，不妨留意這些悄悄登場的小窗口，感受設(shè)計如何在方寸之間藏滿巧思～