2023-6-29 博博
底部彈出框控件，在移動端設備上呈現出來的時候，對于設計師而言，是一個不小的挑戰。在小屏幕上設計這類控件，需要做合理的取舍。
底部彈出框是一種部分覆蓋式的控件，特別適合移動端設備，它適合呈現臨時但是重要的信息。
定義：底部彈出控件，或者說底部彈出框/表單，是固定在屏幕底部邊緣的控件，它提供貼合上下文環境的詳細信息，或者疊加于頁面之上的交互。
底部彈出框是一種漸進式的信息呈現方式，它們通常由用戶交互觸發，提供額外的詳細信息，它們通常會遮蓋掉部分屏幕內容，因此不適合顯示始終都很重要的信息。
另一方面，它適合用來呈現額外的信息，對上下文環境進行控制，或者兼顧兩者。底部彈出框的優點在于，它無需跳轉到新的單獨頁面，讓用戶停留在當前環境下進行交互，用戶不會失去交互和獲取信息的語境。
底部彈出框和其他的彈出框控件類似，然而和其他的彈出框相比，他保留了更強的信息可見性，因此用戶在和底部彈出框呈現的信息進行交互的時候，可能需要參考背景里的基礎信息，而兩者的呼應也更加貼合用戶當下的需求。
使用底部彈出框的一個常見的理由是，它們提高了移動端設備上用戶的交互可觸達性（也就是大家常說的，用戶更容易點擊到屏幕底部的內容和控件）。不幸的是，在實際的測試當中，由于用戶握持移動端設備的方式不同（單手、雙手以及握持位置上下差異），屏幕底部目前也不一定是最容易觸達的區域（屏幕中間一般才是用戶最容易點擊到的位置）。
模態和非模態底部彈出框
位于底部的彈出框可以是模態的，也可以是非模態的。
和經典的模態控件設計類似，底部彈出框可以迫使用戶在采取其他交互之前，強制和底部彈出框交互，點擊其中的控件或者關閉它。即使背景的內容可見，彈出框依然會阻止用戶與之進行交互。通常，在底部彈出框出現的時候，通常背景內容會被半透明的疊加層蓋住，作為背景內容「不可交互」的視覺標識。
高手總結！UI 界面底部彈出框設計指南
網絡管理工具 UniFi 的彈出框設計，當用戶的手機未能正確連接到網絡上的時候，會彈出一個底部表單，背景內容通常顯示的是一些可供識別的基本界面細節，以及頁面骨架布局。用戶需要解決網絡問題，才能接入網絡顯示背景的內容，因此這一交互是合理的。
非模態的底部彈出框則不同，它們位于頁面的底部，用戶可以和背景內容進行交互，也能和彈出內容交互。這個時候的底部彈出框控件適合呈現此時背景內容相關的詳細信息。
高手總結！UI 界面底部彈出框設計指南
在 Google 地圖的 APP 當中，非模態的底部彈出框會顯示和當前選中地理區域相關的導航操作、圖片信息，同時，用戶可以和背景中的地圖進行交互，詳細了解大致的環境信息。
有一些底部彈出框是可以展開的。用戶可以通過點擊或者上滑彈出框，將其擴展為全屏模式（有時候是接近全屏）。通常，底部彈出框在最小化模式下，開始為非模態，展開后變為模態。
高手總結！UI 界面底部彈出框設計指南
Apple 播客：底部彈出框可以顯示當前播放內容的相關信息（左），可以點擊或者拖動它至完整全屏尺寸，而點擊或者向下滑動頂部的把手控件，則可以將其縮小折疊起來。
底部彈出框的可用性指南
在我們的研究當中，我們觀察到用戶在使用底部彈出框的時候，遭遇的困難和使用別的彈出框的時候是類似的，這些通常是由以下原因造成的：
缺少明確的關閉底部彈出框的指引
多個底部彈出框界面疊加在一起
底層相關的背景內容被模糊了
下面我們針對性地來解決一下這些問題。
允許使用「返回」按鈕來關閉底部彈出框
底部彈出框所存在的一個常見問題，就是它看起來像是一個普通的界面控件，尤其當他們擴展為全屏的時候，一部分用戶可能還沒意識到他們所處的界面，其實是擴展后的底部彈出框控件，而它通常是不遵循通常的交互邏輯的。用戶這個時候可能希望使用「后退」手勢或者按鈕來進行交互，但是用戶這個時候點擊可能是不會得到預期中的反饋。
因此，在用戶歷程當中，當頁面當中出現底部彈出框控件的時候，整個流程的交互模式可能會因此被破壞。但是，如果讓底部彈出框控件支持「后退」的按鈕和手勢，則可以規避這一問題，讓用戶無縫回到上一界面。
在控件中包含「關閉」按鈕
盡管絕大多數的底部彈出框可以通過向下滑動，或者點擊頂部手柄來關閉，但是這個組件本身就很容易被忽略。此外，還有一部分用戶壓根就不知道這個功能。而且，垂直滑動關閉本身就具備某種模糊性，在交互過程中，用戶可能會關閉面板，也可能不小心打開通知欄，或者打開手機的控制中心等。
Pocket 的底部彈出框控件非常高，需要向下滑動才能關閉，而因為控件的手柄位置在操作的時候很容易打開手機的通知欄或控制中心。即使用戶從正確的位置觸發關閉控件的手柄，也可能需要多次嘗試才能真正關閉這一面板。這種靈活性挑戰對于操作精度要求過高，對于多數用戶而言都是挑戰。
為了確保用戶可以快速關閉底部彈出框控件，最好在控件內添加常見的「關閉」按鈕，或者「X」按鈕。我們建議將這個按鈕放置在在底部彈出框的右上方之類的位置，使用這一按鈕的另外一個好處是方便有視力障礙的用戶，使用屏幕閱讀器來關閉它。
高手總結！UI 界面底部彈出框設計指南
蘋果的備忘錄當中的底部彈出框控件，就使用了「X」按鈕來方便用戶關閉它。
不要將多個底部彈出框堆疊起來
當 APP 內將多個彈出框堆疊起來的時候，最大的麻煩就出現了。
當多個底部彈出框堆疊在一起的時候，用戶不可避免會開始迷惑自己到底處于流程的哪個位置，并且可能還需要了解到底哪個是第一個彈出框，而哪個是最后一個。就像下面的案例。
我們強烈建議不要使用底部彈出框控件來替代用戶流程中應有的頁面。底部彈出框是一個臨時的 UI 控件，它并不是穩定的位置，它的存在旨在打斷用戶流程，告知用戶重要的信息和重要的操作，它本身并不是帶來愉悅感的「快樂路徑」。
高手總結！UI 界面底部彈出框設計指南
沃爾瑪的 APP 當中，產品詳情頁是用底部彈出框控件來承載的，而非單獨的頁面，而其中任何一個鏈接都會觸發另外一個底部彈出框，比如用戶評價。而用戶想要關閉退出則需要一層一層關閉。而頂上的返回和關閉按鈕兩者也同樣可能會讓人迷惑，有時候是后退，有時候是直接關閉彈出框，交互過程中可能會超出用戶原有的預期。
使用底部彈出框承載簡短交互
最后，當用戶可能會花費大量的時間查看底部彈出框所承載的信息時，我們建議不要使用底部彈出框來承載這類信息。它本質上是一個瞬間狀態下的 UI 控件，快速交互是它存在的意義，而非承載復雜的內容。
高手總結！UI 界面底部彈出框設計指南
這個名為 Soundbrenner 的 APP 會在頁面「1」 的 Learn 中打開「2」中的音樂教學列表，選擇特定課程時，會以底部彈出框的方式打開詳細課程信息，隨后，向下滾動「3」的時候，會意外將用戶帶回主頁「4」。這個 APP 的問題和之前沃爾瑪的情況類似，存在多個底部彈出框交疊的問題。
總結
底部彈出框控件在 UI 設計當中其實比較常見，它需要在保持上下文環境的情況下，提供額外的關鍵交互和信息說明，但是它不應該承載復雜的交互和過多的內容。
作者：陳子木
來源：優設
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.sdgs6788.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。