Popover 彈出框

視頻及原型文件下載：https://study.163.com/course/courseMain.htm?courseId=1209770824&share=2&shareId=400000000540015

定義：

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

交互原則：

1、不要用Tooltip來獲取任務(wù)完成的關(guān)鍵信息;

2、在Tooltip中提供簡短有用的內(nèi)容；

3、支持鼠標(biāo)和鍵盤懸停顯示；

4、如果附近有多個元素，使用工具提示箭頭；

5、用則始終用，保持一致性并為所有視覺元素都提供Tooltip很重要；

6、確保工具提示和背景形成適度的對比；

7、定位工具提示，以免擋住相關(guān)內(nèi)容

交互說明：

1、【文案】：說明提示的文案內(nèi)容，例如：相機(jī)，鼠標(biāo)懸浮顯示文案：點(diǎn)擊調(diào)取系統(tǒng)相機(jī)

2、【觸發(fā)條件】：顯示的觸發(fā)條件，鼠標(biāo)懸?；螯c(diǎn)擊，也可以鍵盤懸停顯示，例如：鼠標(biāo)和鍵盤懸停顯示Popover 彈出框；

3、【觸發(fā)后的流程】：需要說明觸發(fā)Popover 彈出框，后續(xù)有哪些流程，例如：

用戶點(diǎn)擊【刪除】按鈕后，顯示商品刪除確認(rèn)提示框，當(dāng)客戶點(diǎn)擊【確定】按鈕后刪除該商品，點(diǎn)擊取消按鈕時，關(guān)閉Popover 彈出框，取消刪除操作；

4、【顯示位置】:說明Popover 彈出框提示的位置，例如：當(dāng)前窗口居中顯示；

3、【顯示位置】:說明Popover 彈出框文字提示的位置，例如：顯示在當(dāng)前按鈕的右上方，如果是按鈕在右側(cè)不滿足顯示位置，則顯示在左上方；

使用場景：

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

2、情境下的相關(guān)選項：如果界面中有多個條目，而且每個條目都有多個相關(guān)選項，使用Popover承載多個情境下的相關(guān)選項是個不錯的方案。

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

4、臨時視圖：在iPad等大屏幕設(shè)備上，Popover可作為完成某個任務(wù)的臨時視圖。