Popover(氣泡彈出框/彈出式氣泡/氣泡)是由一個矩形和三角箭頭組成的彈出窗口,箭頭指向的地方通常是導(dǎo)致Popover彈出的控件或區(qū)域。通過點擊Popover內(nèi)的按鈕或非Popover的屏幕其他區(qū)域可關(guān)閉Popover雳灵。
如何使用
點擊某控件或區(qū)域彈出Popover后,Popover出現(xiàn)在使其觸發(fā)的控件附近闸盔,箭頭的指向很好的表達(dá)了Popover和觸發(fā)控件的潛在關(guān)系悯辙,用戶的注意力能馬上被吸引過來。而且把手指或鼠標(biāo)指針從觸發(fā)控件移動到Popover的距離很近迎吵,操作非常順手躲撰、效率高。
常見用法
1.快捷導(dǎo)航:移動設(shè)備屏幕空間有限击费,有時不能把很多低頻但非常重要的功能直接呈現(xiàn)在屏幕上拢蛋。將多個快捷功能入口收納到Popover中,通過“更多”蔫巩、“加號”圖標(biāo)觸發(fā)Popover谆棱,是國內(nèi)主流App常見的做法快压。
2.情境下的相關(guān)選項:如果界面中有多個條目,而且每個條目都有多個相關(guān)選項垃瞧,使用Popover承載多個情境下的相關(guān)選項是個不錯的方案蔫劣。在手機上,相比于Action Sheet个从,Popover的三角箭頭能明確的指示當(dāng)前操作的是哪個條目脉幢,不易出錯。Popover顯示區(qū)域較小呈現(xiàn)的選項有限嗦锐,為了防止誤操作不建議在Popover里啟用滾動嫌松,如果選項很多,建議使用Action Sheet意推。
需要注意的是豆瘫,在屏幕邊緣需要轉(zhuǎn)換Popover的方向,例如在屏幕頂部菊值,Popover應(yīng)當(dāng)顯示在觸發(fā)位置的下方外驱,否則Popover會超出屏幕導(dǎo)致顯示不完整。
3.提示引導(dǎo):Popover的三角箭頭這一獨特特性腻窒,同樣適合作為提示引導(dǎo)或者展示附屬信息昵宇。每當(dāng)上線新功能,用Popover能很好的吸引用戶注意力儿子,引導(dǎo)用戶了解新功能瓦哎。界面圖形較多的情況下,用Popover簡短的展示附屬文字信息柔逼,能幫助用戶很好的理解圖形的含義蒋譬。
4.臨時視圖:在iPad等大屏幕設(shè)備上愉适,Popover可作為完成某個任務(wù)的臨時視圖犯助。此時Popover就像是一個大容器,可將導(dǎo)航欄维咸、標(biāo)簽頁(Tabs)剂买、輸入框、表格或者工具欄等等包含其中癌蓖。建議實時保存Popover中的狀態(tài)瞬哼,以防因誤點非Popover的其他區(qū)域關(guān)閉Popover,導(dǎo)致Popover中的修改結(jié)果前功盡棄租副。
相關(guān)資料
iOS規(guī)范對Popover用途的限定:iOS的規(guī)范中限定Popover只能作為臨時視圖在iPad中使用坐慰,不能用在iPhone上。(詳見https://developer)實際上用僧,早在移動互聯(lián)網(wǎng)誕生之前讨越,Popover作為快捷導(dǎo)航或者提示引導(dǎo)就在PC和Web里被廣泛運用两残。只要把握好Popover的特性,跨平臺使用Popover并沒有什么問題把跨。
Android平臺類似Popover的控件
1.Material design中Contextual menus(情境菜單,詳見https://material)和Popover用法類似沼死,除了沒有三角箭頭指示觸發(fā)區(qū)域外着逐,另一個不同是Contextual menus會根據(jù)App的當(dāng)前狀態(tài),來動態(tài)調(diào)整菜單選項的數(shù)量意蛀,例如文本選擇耸别,文本編輯類App有全選、剪貼县钥、復(fù)制和粘貼三個選項秀姐,但是在網(wǎng)頁選中文本只有復(fù)制一個選項,因為此時不能剪貼和粘貼若贮。
2.在App bar點擊“更多”圖標(biāo)展開的菜單被稱為Overflow menu(溢出菜單)省有,App bar圖標(biāo)太多放不下,其他圖標(biāo)從App bar“溢出”到“更多”里去了谴麦,是個比較形象的命名蠢沿。
3.Popover和Tooltips:Tooltips(工具提示/文字提示)是鼠標(biāo)hover(懸停)或者觸摸長按(Material design規(guī)范有,但在移動端Tooltips不常見)在某元素上匾效,出現(xiàn)的對此元素的附加解釋舷蟀。有時Tooltips樣式是一個矩形,有時候是一個Popover面哼。Popover是從樣式上命名的控件野宜,Tooltips是根據(jù)其用途命名的控件,兩者不沖突魔策。
4.Popover和Word balloons的區(qū)別:Word balloons(Speech balloons/speech bubbles/dialogue balloons/文字氣泡/對話氣泡/聊天氣泡)是漫畫或者聊天App中表示人物說話內(nèi)容的圖形匈子,其三角箭頭指向說話的人物。Word balloons通常是界面內(nèi)的圖形元素代乃,而Popover是浮于界面上方的彈出窗口旬牲。兩者樣式相似,但是界面層級和用途有所區(qū)別搁吓。