中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

鑒于國內(nèi)交互設(shè)計(jì)名詞混亂不統(tǒng)一，很多設(shè)計(jì)師不知道如何用專業(yè)術(shù)語稱呼一個(gè)控件，因此我開了《這個(gè)控件叫什么》專題，梳理控件的名稱和使用事項(xiàng)，希望能為推動(dòng)交互設(shè)計(jì)發(fā)展，做出一點(diǎn)微小的貢獻(xiàn)。

Popover（氣泡彈出框/彈出式氣泡/氣泡）是由一個(gè)矩形和三角箭頭組成的彈出窗口，箭頭指向的地方通常是導(dǎo)致Popover彈出的控件或區(qū)域。通過點(diǎn)擊Popover內(nèi)的按鈕或非Popover的屏幕其他區(qū)域可關(guān)閉Popover。

Popover

如何使用

點(diǎn)擊某控件或區(qū)域彈出Popover后，Popover出現(xiàn)在使其觸發(fā)的控件附近，箭頭的指向很好的表達(dá)了Popover和觸發(fā)控件的潛在關(guān)系，用戶的注意力能馬上被吸引過來。而且把手指或鼠標(biāo)指針從觸發(fā)控件移動(dòng)到Popover的距離很近，操作非常順手、效率高。

Popover常見用法有以下幾種：

快捷導(dǎo)航

移動(dòng)設(shè)備屏幕空間有限，有時(shí)不能把很多低頻但非常重要的功能直接呈現(xiàn)在屏幕上。將多個(gè)快捷功能入口收納到Popover中，通過“更多”、“加號(hào)”圖標(biāo)觸發(fā)Popover，是國內(nèi)主流App常見的做法。

Popover作為快捷導(dǎo)航

情境下的相關(guān)選項(xiàng)

如果界面中有多個(gè)條目，而且每個(gè)條目都有多個(gè)相關(guān)選項(xiàng)，使用Popover承載多個(gè)情境下的相關(guān)選項(xiàng)是個(gè)不錯(cuò)的方案。在手機(jī)上，相比于Action Sheet，Popover的三角箭頭能明確的指示當(dāng)前操作的是哪個(gè)條目，不易出錯(cuò)。Popover顯示區(qū)域較小呈現(xiàn)的選項(xiàng)有限，為了防止誤操作不建議在Popover里啟用滾動(dòng)，如果選項(xiàng)很多，建議使用Action Sheet。

需要注意的是，在屏幕邊緣需要轉(zhuǎn)換Popover的方向，例如在屏幕頂部，Popover應(yīng)當(dāng)顯示在觸發(fā)位置的下方，否則Popover會(huì)超出屏幕導(dǎo)致顯示不完整。

Popover作為情境下的相關(guān)選項(xiàng)

提示引導(dǎo)

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

Popover作為提示引導(dǎo)、展示附屬信息

臨時(shí)視圖

在iPad等大屏幕設(shè)備上，Popover可作為完成某個(gè)任務(wù)的臨時(shí)視圖。此時(shí)Popover就像是一個(gè)大容器，可將導(dǎo)航欄、標(biāo)簽頁（Tabs）、輸入框、表格或者工具欄等等包含其中。建議實(shí)時(shí)保存Popover中的狀態(tài)，以防因誤點(diǎn)非Popover的其他區(qū)域關(guān)閉Popover，導(dǎo)致Popover中的修改結(jié)果前功盡棄。

iPad上的Popover

相關(guān)資料

iOS規(guī)范對(duì)Popover用途的限定

iOS的規(guī)范中限定Popover只能作為臨時(shí)視圖在iPad中使用，不能用在iPhone上。（詳見?https://developer.apple.com/ios/human-interface-guidelines/ui-views/popovers/?）實(shí)際上，早在移動(dòng)互聯(lián)網(wǎng)誕生之前，Popover作為快捷導(dǎo)航或者提示引導(dǎo)就在PC和Web里被廣泛運(yùn)用。只要把握好Popover的特性，跨平臺(tái)使用Popover并沒有什么問題。

Android平臺(tái)類似Popover的控件

Material design中Contextual menus（情境菜單，詳見?https://material.io/guidelines/components/menus.html#menus-usage）和Popover用法類似，除了沒有三角箭頭指示觸發(fā)區(qū)域外，另一個(gè)不同是Contextual menus會(huì)根據(jù)App的當(dāng)前狀態(tài)，來動(dòng)態(tài)調(diào)整菜單選項(xiàng)的數(shù)量，例如文本選擇，文本編輯類App有全選、剪貼、復(fù)制和粘貼三個(gè)選項(xiàng)，但是在網(wǎng)頁選中文本只有復(fù)制一個(gè)選項(xiàng)，因?yàn)榇藭r(shí)不能剪貼和粘貼。

Contextual menus（情境菜單）

在App bar點(diǎn)擊“更多”圖標(biāo)展開的菜單被稱為Overflow menu（溢出菜單），App bar圖標(biāo)太多放不下，其他圖標(biāo)從App bar“溢出”到“更多”里去了，是個(gè)比較形象的命名。

Overflow menu（溢出菜單）

Popover和Tooltips

Tooltips（工具提示/文字提示）是鼠標(biāo)hover（懸停）或者觸摸長按（Material design規(guī)范有，但在移動(dòng)端Tooltips不常見）在某元素上，出現(xiàn)的對(duì)此元素的附加解釋。有時(shí)Tooltips樣式是一個(gè)矩形，有時(shí)候是一個(gè)Popover。Popover是從樣式上命名的控件，Tooltips是根據(jù)其用途命名的控件，兩者不沖突。

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

Popover和Word balloons的區(qū)別

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

Word balloons（文字氣泡）

作者：龍爪槐守望者，微信公眾號(hào)：龍爪槐守望者

本文由 @龍爪槐守望者 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議