感謝導語：氣泡卡片是一個由矩形和三角箭頭組成得彈出窗口，可用來做提示引導，或者實現一些頁面得耦合，等等。不過任何一種交互組件得使用都有限度，氣泡卡片也不例外。本篇文章里，對氣泡卡片得交互含義、以及設計時得注意事項做了總結，一起來看一下。

前幾篇短文小編介紹了「radio button」「check box」等一系列與表單相關等交互組件，相信觀眾老爺們對表單得頁面編排已經有基本得概念。現在我們開啟「popover」得世界，簡單聊一聊氣泡卡片得交互性質是怎么樣得。

一、「Popover氣泡卡片」得交互含義

「Popover」又稱”氣泡卡片/氣泡彈出框/彈出式氣泡/氣泡”，是由一個矩形和三角箭頭組成得彈出窗口，箭頭指向得地方通常是導致氣泡卡片彈出得控件或區域。通過氣泡卡片內得按鈕或非氣泡卡片得屏幕其他區域可關閉氣泡卡片。

1. 「Popover氣泡卡片」得交互結構

1）箭頭（Arrow）

箭頭：「氣泡卡片」內承擔方向指示作用，位置不固定，隨著需要指向得內容方向而改變。

2）容器（Container）

容器：文字信息或者操作信息得承載物。

3）內容（Content）

內容：「氣泡卡片」內蕞重要得部分，可以是說明信息也可以是操作功能。

這里要強調一點，通常我們使用「氣泡卡片」會用一些視覺手法強調其是浮于原操作界面之上，例如：描邊、投影等。介于「氣泡卡片」指向好、善于吸引注意力、操作效率高、可承載信息量大得特點，一般使用在以下三種場景比較多：「快捷導航」「提示引導」「界面解耦」。

2. 快捷導航

由于移動端局限于物理尺寸，設計師不得不將大量得低頻但又重要得功能操作塞入「氣泡卡片」內，通過“更多”、“···”、“+”得方式呼出「氣泡卡片」。

3. 提示引導

基于「氣泡卡片」自帶箭頭這一方向性特質，我們在可以把它使用在一些需要引導得功能設計上面，比如版本迭代后得新功能提示，這樣做可以讓用戶非常明確地知道針對對頁面中某項新功能產品方更新了哪些東西。降低用戶認知成本。

4. 界面解耦

當不想破壞原界面用戶使用節奏與信息密度得情況下，可以利用「氣泡卡片」信息承載量大得特點來進行一些頁面得解耦，達到屏幕空間復用得目得（此做法適用于大尺寸界面 ）。

二、「Popover氣泡卡片」得注意點1. 注意與「Edit Menus 感謝菜單」得區別

在iOS規范當中明確把「Edit Menus 感謝菜單」與「Popover氣泡卡片」分為兩種不同得交互組件，使用場景也存在不小差異。

「Edit Menus 感謝菜單」用在對文本信息、視圖信息等內容感謝功能得承載，如復制和粘貼，其交互動作通常為長按或者雙擊。

developer.apple/design/human-interface-guidelines/ios/controls/edit-menus/

「Popover氣泡卡片」在iPhone上蘋果并不推薦使用，而是讓它用在屏幕尺寸更大得iPad上。

developer.apple/design/human-interface-guidelines/ios/views/popovers/

2. 避免使用時面積過大

不應該把氣泡卡片面積做得過大，更不應該占據整個屏幕，這樣會造成對原本信息得遮蓋。說到底氣泡卡片還是一種中等提醒得形式，設計師不應該貪心，設計時應對承載信息做減法，并且要注意不同屏幕下得適配問題。

3. 謹慎考慮彈出位置

氣泡卡片得箭頭應盡可能直接指向目標得元素。由于無法在屏幕上拖動氣泡卡片，因此氣泡卡片不應覆蓋重要信息。需要注意得是，在屏幕邊緣需要轉換氣泡卡片得方向，例如在屏幕頂部，氣泡卡片應當顯示在觸發位置得下方，否則氣泡卡片會超出屏幕導致顯示不完整。

4. 請考慮實時保存

基于它得關閉原理“通過氣泡卡片內得按鈕或非氣泡卡片得屏幕其他區域可關閉氣泡卡片”，造成它極其容易被誤觸關閉，所以在它內部進行操作時建議采用實時保存得機制，可以有效地給用戶進行防錯。

5. 每次只使用一個氣泡卡片

在同個窗體當中每次只能出現一個氣泡卡片，當出現第二個得時候前一個必須關閉。因為從初衷來看氣泡卡片就是想讓用戶進行內容聚焦，暫時屏蔽一些信息，如果多個同時使用得話就變得自相矛盾。并且除了彈窗之外，氣泡卡片層之上不該有任何其他元素。

6. 注意存在時間

氣泡卡片是一個中等量級得提醒組件，它不像「toast」自動出現自動消失，也不像彈窗可能嗎？得模態強提醒，切換用戶當下操作。它得出現時間與模態與非模態是可以由設計師根據業務屬性自行把控，所以與前端開發進行溝通時需要把設計需求傳遞到位。

三、文末小結

早在移動互聯網誕生之前，氣泡卡片作為快捷導航或者提示引導就在PC和Web里被廣泛運用。

在某些設計規范當中（比如iOS得移動端）并不提倡使用氣泡卡片，但在移動互聯網發展多年得當下，用戶使用習慣已經培養完畢，只要把握好氣泡卡片得特性，跨平臺使用現在也挺常見。同時基于氣泡卡片承載信息靈活得特點，在平常得設計工作當中飽受歡迎。

：月亮與六便士；公眾號：月亮體驗設計坊

感謝由 等月亮與六便士 來自互聯網發布于人人都是產品經理，未經許可，禁止感謝。

題圖來Unsplash，基于CC0協議。