底部彈出框控件，在移動端設(shè)備上呈現(xiàn)出來的時候，對于設(shè)計師而言，是一個不小的挑戰(zhàn)。在小屏幕上設(shè)計這類控件，需要做合理的取舍。

底部彈出框是一種部分覆蓋式的控件，特別適合移動端設(shè)備，它適合呈現(xiàn)臨時但是重要的信息。

定義：底部彈出控件，或者說底部彈出框/表單，是固定在屏幕底部邊緣的控件，它提供貼合上下文環(huán)境的詳細(xì)信息，或者疊加于頁面之上的交互。

底部彈出框是一種漸進(jìn)式的信息呈現(xiàn)方式，它們通常由用戶交互觸發(fā)，提供額外的詳細(xì)信息，它們通常會遮蓋掉部分屏幕內(nèi)容，因此不適合顯示始終都很重要的信息。

另一方面，它適合用來呈現(xiàn)額外的信息，對上下文環(huán)境進(jìn)行控制，或者兼顧兩者。底部彈出框的優(yōu)點在于，它無需跳轉(zhuǎn)到新的單獨(dú)頁面，讓用戶停留在當(dāng)前環(huán)境下進(jìn)行交互，用戶不會失去交互和獲取信息的語境。

底部彈出框和其他的彈出框控件類似，然而和其他的彈出框相比，他保留了更強(qiáng)的信息可見性，因此用戶在和底部彈出框呈現(xiàn)的信息進(jìn)行交互的時候，可能需要參考背景里的基礎(chǔ)信息，而兩者的呼應(yīng)也更加貼合用戶當(dāng)下的需求。

使用底部彈出框的一個常見的理由是，它們提高了移動端設(shè)備上用戶的交互可觸達(dá)性（也就是大家常說的，用戶更容易點擊到屏幕底部的內(nèi)容和控件）。不幸的是，在實際的測試當(dāng)中，由于用戶握持移動端設(shè)備的方式不同（單手、雙手以及握持位置上下差異），屏幕底部目前也不一定是最容易觸達(dá)的區(qū)域（屏幕中間一般才是用戶最容易點擊到的位置）。

模態(tài)和非模態(tài)底部彈出框
位于底部的彈出框可以是模態(tài)的，也可以是非模態(tài)的。

和經(jīng)典的模態(tài)控件設(shè)計類似，底部彈出框可以迫使用戶在采取其他交互之前，強(qiáng)制和底部彈出框交互，點擊其中的控件或者關(guān)閉它。即使背景的內(nèi)容可見，彈出框依然會阻止用戶與之進(jìn)行交互。通常，在底部彈出框出現(xiàn)的時候，通常背景內(nèi)容會被半透明的疊加層蓋住，作為背景內(nèi)容「不可交互」的視覺標(biāo)識。

高手總結(jié)！UI 界面底部彈出框設(shè)計指南

網(wǎng)絡(luò)管理工具 UniFi 的彈出框設(shè)計，當(dāng)用戶的手機(jī)未能正確連接到網(wǎng)絡(luò)上的時候，會彈出一個底部表單，背景內(nèi)容通常顯示的是一些可供識別的基本界面細(xì)節(jié)，以及頁面骨架布局。用戶需要解決網(wǎng)絡(luò)問題，才能接入網(wǎng)絡(luò)顯示背景的內(nèi)容，因此這一交互是合理的。

非模態(tài)的底部彈出框則不同，它們位于頁面的底部，用戶可以和背景內(nèi)容進(jìn)行交互，也能和彈出內(nèi)容交互。這個時候的底部彈出框控件適合呈現(xiàn)此時背景內(nèi)容相關(guān)的詳細(xì)信息。

高手總結(jié)！UI 界面底部彈出框設(shè)計指南

在 Google 地圖的 APP 當(dāng)中，非模態(tài)的底部彈出框會顯示和當(dāng)前選中地理區(qū)域相關(guān)的導(dǎo)航操作、圖片信息，同時，用戶可以和背景中的地圖進(jìn)行交互，詳細(xì)了解大致的環(huán)境信息。

有一些底部彈出框是可以展開的。用戶可以通過點擊或者上滑彈出框，將其擴(kuò)展為全屏模式（有時候是接近全屏）。通常，底部彈出框在最小化模式下，開始為非模態(tài)，展開后變?yōu)槟B(tài)。

高手總結(jié)！UI 界面底部彈出框設(shè)計指南

Apple 播客：底部彈出框可以顯示當(dāng)前播放內(nèi)容的相關(guān)信息（左），可以點擊或者拖動它至完整全屏尺寸，而點擊或者向下滑動頂部的把手控件，則可以將其縮小折疊起來。

底部彈出框的可用性指南
在我們的研究當(dāng)中，我們觀察到用戶在使用底部彈出框的時候，遭遇的困難和使用別的彈出框的時候是類似的，這些通常是由以下原因造成的：

缺少明確的關(guān)閉底部彈出框的指引
多個底部彈出框界面疊加在一起
底層相關(guān)的背景內(nèi)容被模糊了
下面我們針對性地來解決一下這些問題。

允許使用「返回」按鈕來關(guān)閉底部彈出框
底部彈出框所存在的一個常見問題，就是它看起來像是一個普通的界面控件，尤其當(dāng)他們擴(kuò)展為全屏的時候，一部分用戶可能還沒意識到他們所處的界面，其實是擴(kuò)展后的底部彈出框控件，而它通常是不遵循通常的交互邏輯的。用戶這個時候可能希望使用「后退」手勢或者按鈕來進(jìn)行交互，但是用戶這個時候點擊可能是不會得到預(yù)期中的反饋。

因此，在用戶歷程當(dāng)中，當(dāng)頁面當(dāng)中出現(xiàn)底部彈出框控件的時候，整個流程的交互模式可能會因此被破壞。但是，如果讓底部彈出框控件支持「后退」的按鈕和手勢，則可以規(guī)避這一問題，讓用戶無縫回到上一界面。

在控件中包含「關(guān)閉」按鈕
盡管絕大多數(shù)的底部彈出框可以通過向下滑動，或者點擊頂部手柄來關(guān)閉，但是這個組件本身就很容易被忽略。此外，還有一部分用戶壓根就不知道這個功能。而且，垂直滑動關(guān)閉本身就具備某種模糊性，在交互過程中，用戶可能會關(guān)閉面板，也可能不小心打開通知欄，或者打開手機(jī)的控制中心等。

Pocket 的底部彈出框控件非常高，需要向下滑動才能關(guān)閉，而因為控件的手柄位置在操作的時候很容易打開手機(jī)的通知欄或控制中心。即使用戶從正確的位置觸發(fā)關(guān)閉控件的手柄，也可能需要多次嘗試才能真正關(guān)閉這一面板。這種靈活性挑戰(zhàn)對于操作精度要求過高，對于多數(shù)用戶而言都是挑戰(zhàn)。

為了確保用戶可以快速關(guān)閉底部彈出框控件，最好在控件內(nèi)添加常見的「關(guān)閉」按鈕，或者「X」按鈕。我們建議將這個按鈕放置在在底部彈出框的右上方之類的位置，使用這一按鈕的另外一個好處是方便有視力障礙的用戶，使用屏幕閱讀器來關(guān)閉它。

高手總結(jié)！UI 界面底部彈出框設(shè)計指南

蘋果的備忘錄當(dāng)中的底部彈出框控件，就使用了「X」按鈕來方便用戶關(guān)閉它。

不要將多個底部彈出框堆疊起來
當(dāng) APP 內(nèi)將多個彈出框堆疊起來的時候，最大的麻煩就出現(xiàn)了。

當(dāng)多個底部彈出框堆疊在一起的時候，用戶不可避免會開始迷惑自己到底處于流程的哪個位置，并且可能還需要了解到底哪個是第一個彈出框，而哪個是最后一個。就像下面的案例。

我們強(qiáng)烈建議不要使用底部彈出框控件來替代用戶流程中應(yīng)有的頁面。底部彈出框是一個臨時的 UI 控件，它并不是穩(wěn)定的位置，它的存在旨在打斷用戶流程，告知用戶重要的信息和重要的操作，它本身并不是帶來愉悅感的「快樂路徑」。

高手總結(jié)！UI 界面底部彈出框設(shè)計指南

沃爾瑪?shù)?APP 當(dāng)中，產(chǎn)品詳情頁是用底部彈出框控件來承載的，而非單獨(dú)的頁面，而其中任何一個鏈接都會觸發(fā)另外一個底部彈出框，比如用戶評價。而用戶想要關(guān)閉退出則需要一層一層關(guān)閉。而頂上的返回和關(guān)閉按鈕兩者也同樣可能會讓人迷惑，有時候是后退，有時候是直接關(guān)閉彈出框，交互過程中可能會超出用戶原有的預(yù)期。

使用底部彈出框承載簡短交互
最后，當(dāng)用戶可能會花費(fèi)大量的時間查看底部彈出框所承載的信息時，我們建議不要使用底部彈出框來承載這類信息。它本質(zhì)上是一個瞬間狀態(tài)下的 UI 控件，快速交互是它存在的意義，而非承載復(fù)雜的內(nèi)容。

高手總結(jié)！UI 界面底部彈出框設(shè)計指南

這個名為 Soundbrenner 的 APP 會在頁面「1」 的 Learn 中打開「2」中的音樂教學(xué)列表，選擇特定課程時，會以底部彈出框的方式打開詳細(xì)課程信息，隨后，向下滾動「3」的時候，會意外將用戶帶回主頁「4」。這個 APP 的問題和之前沃爾瑪?shù)那闆r類似，存在多個底部彈出框交疊的問題。

總結(jié)
底部彈出框控件在 UI 設(shè)計當(dāng)中其實比較常見，它需要在保持上下文環(huán)境的情況下，提供額外的關(guān)鍵交互和信息說明，但是它不應(yīng)該承載復(fù)雜的交互和過多的內(nèi)容。

作者：陳子木
來源：優(yōu)設(shè)

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.lzhte.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。