上篇《交互實戰(zhàn)｜覆蓋層設(shè)計：對話框&浮層（上）》討論了“對話框”和“浮層”兩種覆蓋層中最為常見的樣式：對話框主要分為提示型和輸入型兩大類；浮層主要分為Toast和Snackbar兩類。在下篇中，想要討論一些不那么常用的覆蓋層交互形式：彈出式半屏頁面和彈出式氣泡。

1. 彈出式半屏頁面

彈出式半屏頁面其實并不是一種官方既有的交互形式，而是本文對iOS和Android平臺中相似交互形式的統(tǒng)稱。顧名思義，它通過彈出的半屏覆蓋層來反饋用戶操作，彈出式半屏頁面優(yōu)勢在于它既能承載較多內(nèi)容，又能保持上下文關(guān)系。

1.1 ActionSheets

ActionSheets是iOS平臺上的交互形式，在使用場景上與提示型對話框相似（提示型對話框的相關(guān)介紹見覆蓋層設(shè)計上篇），它可以用于二次確認(rèn)或呈現(xiàn)與當(dāng)前操作相關(guān)的多個選擇等。

觸發(fā)時，ActionSheets從下往上彈出；操作完成后從上往下收起。需要注意的是雖然點擊空白處也能夠退出ActionSheets，但iOS規(guī)范仍然建議始終為ActionSheet提供取消按鈕。

優(yōu)點：相比對話框而言，Action Sheets對用戶打擾程度較小。一般的對話框要求用戶必須做出選擇，當(dāng)用戶點擊了某功能按鍵或取消后對話框才消失；而ActionSheets 允許用戶點擊空白處取消操作。

建議盡量減少對話框的使用，如二次確認(rèn)和選擇菜單等場景，ActionSheets是很好的代替品。

1.1.1 二次確認(rèn)提示

（1）使用場景

通常用于在執(zhí)行毀滅性操作前，讓用戶進行二次確認(rèn)。

（2）內(nèi)容

一般由操作會造成的結(jié)果描述，繼續(xù)執(zhí)行操作的按鈕和取消按鈕構(gòu)成。點擊空白區(qū)域和取消都等同于取消操作。

（3）設(shè)計Tips

一般用紅色等警惕顏色來體現(xiàn)毀滅性操作的確認(rèn)按鈕；當(dāng)按鈕本身的描述清晰明確時，可以不需要額外相關(guān)描述。

1.1.2 選項列表

（1）使用場景

通常用于展示上下文相關(guān)的2個或多個選項，每個選項可以幫助用戶執(zhí)行對應(yīng)的任務(wù)；

（2）內(nèi)容

在界面中可以通過“一個功能鍵”或“更多按鈕”承載多個相關(guān)且使用頻率不高的選項。點擊對應(yīng)功能鍵后通過ActionSheets彈出全部選項，一般ActionSheets由選項列表+取消按鈕構(gòu)成。點擊空白區(qū)域和取消都等同于取消操作。

（3）設(shè)計Tips

• 選項數(shù)量不宜過多，AnctionSheets中不能出現(xiàn)滾動操作；
• iOS規(guī)范建議菜單項居中顯示且不帶圖標(biāo)；

1.1.3 選項網(wǎng)格

（1）使用場景

主要有以下4種場景，網(wǎng)格比列表更適合：

1. 更多選項相互之間的相關(guān)性不大；
2. 選項分別屬于多種類別；
3. 選項數(shù)量過多，一般多于5個時；
4. 需要強調(diào)選項的圖標(biāo)，如分享時強調(diào)第三方平臺logo等。

（2）內(nèi)容

在網(wǎng)格式的ActionSheets中，每個選項以icon+標(biāo)題的形式展示；當(dāng)選項較多時，以相關(guān)性分行展示，最多不超過2行為宜，當(dāng)選項有2行時，每行可以單獨橫向滑動。

（3）設(shè)計Tips

每項的標(biāo)題最好簡介明了、不宜過長，當(dāng)標(biāo)題較長時可以通過縮小字體的形式展示，若仍然過長則截斷標(biāo)題。

1.1.4 小結(jié)

針對3種不同的ActionSheets類型，主要有以下差異：

1.2 BottomSheets

BottomSheets是Android Material Design規(guī)范中建議的一種交互形式。嚴(yán)格來講BottomSheets分為兩類，一類是模態(tài)Bottomsheets，其滑出時在頁面內(nèi)容上方；一類是內(nèi)嵌式，其與頁面內(nèi)容在同一層級，滑出時會將頁面內(nèi)容往上推移；由于本文主要討論覆蓋層設(shè)計，所以此處也只考慮模態(tài)BottomSheets的應(yīng)用場景。

1.2.1 常規(guī)的BottomSheets

（1）使用場景

BottomSheets的使用場景與iOS中選項列表和選項網(wǎng)格的使用場景相同。BottomSheets也既可以通過列表和網(wǎng)格兩種形式展示。

（2）設(shè)計Tips

在設(shè)計BottomSheets時最需要注意的是與iOS端ActionSheets的區(qū)別：

• Android 端的BottomSheets中不需要展示“取消”選項，因為Android軟鍵盤中的返回按鈕等效于取消；
• ActionSheets中不能出現(xiàn)滾動操作，但BottomSheets中可以，由于沒有“取消選項”，BottomSheets底部是與屏幕聯(lián)通的，所以在實際應(yīng)用中BottomSheets也有更大的發(fā)揮空間。

1.2.2 更多BottomSheets

（1）使用場景

當(dāng)頁面中操作涉及到更多上下文信息時，則適合通過這種類似BottomSheets的形式進行展示。適用于展開篩選項、更深層級分類等場景。

這類交互形式并不算是嚴(yán)格的BottomSheets，而是借用了BottomSheets理念的一種自定義樣式。它既能保證用戶在使用過程中的上下文連貫性，又能展示大量信息。

（2）設(shè)計Tips

• 與常規(guī)的BottomSheets類似，點擊空白處時等效于取消操作，菜單需要收起；
• BottomSheets高度不宜過高，頂部不應(yīng)超過標(biāo)題欄。

2. 彈出式氣泡

彈出式氣泡在iOS規(guī)范中稱為“Popover”，它在使用方式上與ActionSheets/BottomSheets類似，彈出時處于頁面層級的最上方，點擊氣泡外任意地方收起。

其實iOS規(guī)范中并不建議在手機端使用Popover，這種交互形式更適合在iPad等大屏應(yīng)用中使用，它相當(dāng)于分割了頁面中部分視圖用于完成一個臨時任務(wù)，完成后關(guān)閉氣泡并在當(dāng)頁進行刷新。

但由于國內(nèi)大量主流App都使用了Popover，似乎又為這種交互形式賦予了新的生命?，F(xiàn)在常用Popover的形式來呈現(xiàn)頁面中折疊的一些額外信息，或在首頁位置呈現(xiàn)一些常用操作的快速入口。如下圖所示。

設(shè)計Tips：

• Popover彈出時是模態(tài)的，需要將用戶的注意力聚焦到氣泡上，并向用戶傳達“請先選擇氣泡中的內(nèi)容再進行其它操作”的意思，所以最好在氣泡下方增加蒙層。
• 氣泡不易過長且不能滾動，當(dāng)內(nèi)容實在很多時應(yīng)當(dāng)考慮采用BottomSheets或全屏彈層的形式。

3. 上下文菜單篇小結(jié)

本篇主要討論了“彈出式半屏頁面”和“彈出式氣泡”兩類覆蓋層樣式，它們最大的應(yīng)用場景即是“展示更多上下文相關(guān)信息”。

既然氣泡和ActionSheets / BottomSheets都能承載展示頁面中更多信息的功能，那么什么時候用哪個更合適呢？

但總的來說這點并沒有定論，主要以尊重應(yīng)用的統(tǒng)一性和設(shè)計風(fēng)格為準(zhǔn)。

參考文獻：

1. iOS Human Interface Guidelines https://developer.apple.com/ios/human-interface-guidelines
2. Google Material design https://material.google.com/

圖片來源：主要來自手機截圖和以上文獻，少量來自google搜索

相關(guān)文章

交互實戰(zhàn)｜覆蓋層設(shè)計：對話框&浮層（上）

作者：蔣蕊遙（Jerria），網(wǎng)易UEDC ToB業(yè)務(wù)交互設(shè)計師，商業(yè)目標(biāo)與用戶體驗就像美食與身材，要找到其中的平衡點才能完美！對，我就是愛吃又想瘦！所以，學(xué)習(xí)奮斗吧！

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