這個控制項叫：Popover/氣泡彈出框/彈出式氣泡/氣泡

鑒於國內交互設計名詞混亂不統一，很多設計師不知道如何用專業術語稱呼一個控制項，因此我開了《這個控制項叫什麼》專題，梳理控制項的名稱和使用事項，希望能為推動交互設計發展，做出一點微小的貢獻。

Popover（氣泡彈出框/彈出式氣泡/氣泡）是由一個矩形和三角箭頭組成的彈出窗口，箭頭指向的地方通常是導致Popover彈出的控制項或區域。通過點擊Popover內的按鈕或非Popover的屏幕其他區域可關閉Popover。

Popover

如何使用

點擊某控制項或區域彈出Popover後，Popover出現在使其觸發的控制項附近，箭頭的指向很好的表達了Popover和觸發控制項的潛在關係，用戶的注意力能馬上被吸引過來。而且把手指或滑鼠指針從觸發控制項移動到Popover的距離很近，操作非常順手、效率高。

• 快捷導航
  移動設備屏幕空間有限，有時不能把很多低頻但非常重要的功能直接呈現在屏幕上。將多個快捷功能入口收納到Popover中，通過「更多」、「加號」圖標觸發Popover，是國內主流App常見的做法。

Popover作為快捷導航

• 情境下的相關選項
  如果界面中有多個條目，而且每個條目都有多個相關選項，使用Popover承載多個情境下的相關選項是個不錯的方案。在手機上，相比於Action Sheet，Popover的三角箭頭能明確的指示當前操作的是哪個條目，不易出錯。Popover顯示區域較小呈現的選項有限，為了防止誤操作不建議在Popover里啟用滾動，如果選項很多，建議使用Action Sheet。
  需要注意的是，在屏幕邊緣需要轉換Popover的方向，例如在屏幕頂部，Popover應當顯示在觸發位置的下方，否則Popover會超出屏幕導致顯示不完整。

Popover作為情境下的相關選項

• 提示引導
  Popover的三角箭頭這一獨特特性，同樣適合作為提示引導或者展示附屬信息。每當上線新功能，用Popover能很好的吸引用戶注意力，引導用戶了解新功能。界面圖形較多的情況下，用Popover簡短的展示附屬文字信息，能幫助用戶很好的理解圖形的含義。

Popover作為提示引導、展示附屬信息

• 臨時視圖
  在iPad等大屏幕設備上，Popover可作為完成某個任務的臨時視圖。此時Popover就像是一個大容器，可將導航欄、標籤頁（Tabs）、輸入框、表格或者工具欄等等包含其中。建議實時保存Popover中的狀態，以防因誤點非Popover的其他區域關閉Popover，導致Popover中的修改結果前功盡棄。

iPad上的Popover

相關資料

• iOS規範對Popover用途的限定
  iOS的規範中限定Popover只能作為臨時視圖在iPad中使用，不能用在iPhone上。（詳見 https://developer.apple.com/ios/human-interface-guidelines/ui-views/popovers/ ）實際上，早在移動互聯網誕生之前，Popover作為快捷導航或者提示引導就在PC和Web里被廣泛運用。只要把握好Popover的特性，跨平台使用Popover並沒有什麼問題。
• Android平台類似Popover的控制項
  Material design中Contextual menus（情境菜單，詳見 https://material.io/guidelines/components/menus.html#menus-usage）和Popover用法類似，除了沒有三角箭頭指示觸發區域外，另一個不同是Contextual menus會根據App的當前狀態，來動態調整菜單選項的數量，例如文本選擇，文本編輯類App有全選、剪貼、複製和粘貼三個選項，但是在網頁選中文本只有複製一個選項，因為此時不能剪貼和粘貼。

Contextual menus（情境菜單）

在App bar點擊「更多」圖標展開的菜單被稱為Overflow menu（溢出菜單），App bar圖標太多放不下，其他圖標從App bar「溢出」到「更多」里去了，是個比較形象的命名。

Overflow menu（溢出菜單）

• Popover和Tooltips
  Tooltips（工具提示/文字提示）是滑鼠hover（懸停）或者觸摸長按（Material design規範有，但在移動端Tooltips不常見）在某元素上，出現的對此元素的附加解釋。有時Tooltips樣式是一個矩形，有時候是一個Popover。Popover是從樣式上命名的控制項，Tooltips是根據其用途命名的控制項，兩者不衝突。

Tooltips（工具提示/文字提示）

• Popover和Word balloons的區別
  Word balloons（Speech balloons/speech bubbles/dialogue balloons/文字氣泡/對話氣泡/聊天氣泡）是漫畫或者聊天App中表示人物說話內容的圖形，其三角箭頭指向說話的人物。Word balloons通常是界面內的圖形元素，而Popover是浮於界面上方的彈出窗口。兩者樣式相似，但是界面層級和用途有所區別。

Word balloons（文字氣泡）