有人告訴你「Popover氣泡卡片」這么好用嗎

2 評(píng)論 6931 瀏覽 27 收藏 9 分鐘

編輯導(dǎo)語:氣泡卡片是一個(gè)由矩形和三角箭頭組成的彈出窗口,可用來做提示引導(dǎo),或者實(shí)現(xiàn)一些頁面的耦合,等等。不過任何一種交互組件的使用都有限度,氣泡卡片也不例外。本篇文章里,作者對(duì)氣泡卡片的交互含義、以及設(shè)計(jì)時(shí)的注意事項(xiàng)做了總結(jié),一起來看一下。

前幾篇短文小編介紹了「radio button」「check box」等一系列與表單相關(guān)等交互組件,相信觀眾老爺們對(duì)表單的頁面編排已經(jīng)有基本的概念?,F(xiàn)在我們開啟「popover」的世界,簡(jiǎn)單聊一聊氣泡卡片的交互性質(zhì)是怎么樣的。

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

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

1. 「Popover氣泡卡片」的交互結(jié)構(gòu)

有人告訴你「Popover氣泡卡片」這么好用嗎

1)箭頭(Arrow)

箭頭:「氣泡卡片」內(nèi)承擔(dān)方向指示作用,位置不固定,隨著需要指向的內(nèi)容方向而改變。

2)容器(Container)

容器:文字信息或者操作信息的承載物。

3)內(nèi)容(Content)

內(nèi)容:「氣泡卡片」內(nèi)最重要的部分,可以是說明信息也可以是操作功能。

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

2. 快捷導(dǎo)航

由于移動(dòng)端局限于物理尺寸,設(shè)計(jì)師不得不將大量的低頻但又重要的功能操作塞入「氣泡卡片」內(nèi),通過“更多”、“···”、“+”的方式呼出「氣泡卡片」。

有人告訴你「Popover氣泡卡片」這么好用嗎

3. 提示引導(dǎo)

基于「氣泡卡片」自帶箭頭這一方向性特質(zhì),我們?cè)诳梢园阉褂迷谝恍┬枰龑?dǎo)的功能設(shè)計(jì)上面,比如版本迭代后的新功能提示,這樣做可以讓用戶非常明確地知道針對(duì)對(duì)頁面中某項(xiàng)新功能產(chǎn)品方更新了哪些東西。降低用戶認(rèn)知成本。

有人告訴你「Popover氣泡卡片」這么好用嗎

4. 界面解耦

當(dāng)不想破壞原界面用戶使用節(jié)奏與信息密度的情況下,可以利用「氣泡卡片」信息承載量大的特點(diǎn)來進(jìn)行一些頁面的解耦,達(dá)到屏幕空間復(fù)用的目的(此做法適用于大尺寸界面 )。

有人告訴你「Popover氣泡卡片」這么好用嗎

二、「Popover氣泡卡片」的注意點(diǎn)

1. 注意與「Edit Menus 編輯菜單」的區(qū)別

在iOS規(guī)范當(dāng)中明確把「Edit Menus 編輯菜單」與「Popover氣泡卡片」分為兩種不同的交互組件,使用場(chǎng)景也存在不小差異。

「Edit Menus 編輯菜單」用在對(duì)文本信息、視圖信息等內(nèi)容編輯功能的承載,如復(fù)制和粘貼,其交互動(dòng)作通常為長按或者雙擊。

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

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

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

有人告訴你「Popover氣泡卡片」這么好用嗎

有人告訴你「Popover氣泡卡片」這么好用嗎

2. 避免使用時(shí)面積過大

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

3. 謹(jǐn)慎考慮彈出位置

氣泡卡片的箭頭應(yīng)盡可能直接指向目標(biāo)的元素。由于無法在屏幕上拖動(dòng)氣泡卡片,因此氣泡卡片不應(yīng)覆蓋重要信息。需要注意的是,在屏幕邊緣需要轉(zhuǎn)換氣泡卡片的方向,例如在屏幕頂部,氣泡卡片應(yīng)當(dāng)顯示在觸發(fā)位置的下方,否則氣泡卡片會(huì)超出屏幕導(dǎo)致顯示不完整。

有人告訴你「Popover氣泡卡片」這么好用嗎

4. 請(qǐng)考慮實(shí)時(shí)保存

基于它的關(guān)閉原理“通過點(diǎn)擊氣泡卡片內(nèi)的按鈕或非氣泡卡片的屏幕其他區(qū)域可關(guān)閉氣泡卡片”,造成它極其容易被誤觸關(guān)閉,所以在它內(nèi)部進(jìn)行操作時(shí)建議采用實(shí)時(shí)保存的機(jī)制,可以有效地給用戶進(jìn)行防錯(cuò)。

有人告訴你「Popover氣泡卡片」這么好用嗎

5. 每次只使用一個(gè)氣泡卡片

在同個(gè)窗體當(dāng)中每次只能出現(xiàn)一個(gè)氣泡卡片,當(dāng)出現(xiàn)第二個(gè)的時(shí)候前一個(gè)必須關(guān)閉。因?yàn)閺某踔詠砜礆馀菘ㄆ褪窍胱層脩暨M(jìn)行內(nèi)容聚焦,暫時(shí)屏蔽一些信息,如果多個(gè)同時(shí)使用的話就變的自相矛盾。并且除了彈窗之外,氣泡卡片層之上不該有任何其他元素。

有人告訴你「Popover氣泡卡片」這么好用嗎

6. 注意存在時(shí)間

氣泡卡片是一個(gè)中等量級(jí)的提醒組件,它不像「toast」自動(dòng)出現(xiàn)自動(dòng)消失,也不像彈窗絕對(duì)的模態(tài)強(qiáng)提醒,切換用戶當(dāng)下操作。它的出現(xiàn)時(shí)間與模態(tài)與非模態(tài)是可以由設(shè)計(jì)師根據(jù)業(yè)務(wù)屬性自行把控,所以與前端開發(fā)進(jìn)行溝通時(shí)需要把設(shè)計(jì)需求傳遞到位。

三、文末小結(jié)

早在移動(dòng)互聯(lián)網(wǎng)誕生之前,氣泡卡片作為快捷導(dǎo)航或者提示引導(dǎo)就在PC和Web里被廣泛運(yùn)用。

在某些設(shè)計(jì)規(guī)范當(dāng)中(比如iOS的移動(dòng)端)并不提倡使用氣泡卡片,但在移動(dòng)互聯(lián)網(wǎng)發(fā)展多年的當(dāng)下,用戶使用習(xí)慣已經(jīng)培養(yǎng)完畢,只要把握好氣泡卡片的特性,跨平臺(tái)使用現(xiàn)在也挺常見。同時(shí)基于氣泡卡片承載信息靈活的特點(diǎn),在平常的設(shè)計(jì)工作當(dāng)中飽受歡迎。

 

作者:月亮與六便士;公眾號(hào):月亮體驗(yàn)設(shè)計(jì)坊

本文由 @月亮與六便士 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 國內(nèi)叫法比較混亂啦

    回復(fù)
  2. 原來這個(gè)東西叫Popover氣泡卡片,一直以為叫氣泡彈窗之類的,有用的知識(shí)增加了

    來自北京 回復(fù)