在UI設計中，底部彈出框作為一種常見的交互設計模式，已經被廣泛應用於各種類型的APP中，以呈現臨時但重要的信息並引導用戶完成特定的操作。雖然底部彈出框看起來簡單，但是對於大部分設計師而言是一個不小的挑戰。畢竟，在小熒屏中設計這類空間，往往需要進行合理的取捨才能滿足現時的用戶體驗需求。

本文將詳細介紹關於底部彈出框的UI設計指南，希望幫助各位更好地理解和應用這種交互設計模式!

底部彈出框UI設計指南：底部彈出框的定義及作用

底部彈出框UI設計指南：底部彈出框的定義及作用

底部彈出框，又叫底部彈出控件，是一種固定於熒屏底部邊緣的控件，用於展示與當前頁面相關的輔助功能或更多選項。在UI設計中，底部彈出框的設計目的在於為用戶提供快捷的訪問方式、引導用戶進行下一步操作以及保持排版佈局的簡潔。

通過底部彈出框，可以幫助用戶在當前頁面中快速找到並使用系統中的核心功能，同時系統也會向他們展示APP的主要模塊和操作流程。此外，底部彈出框還為介面提供靈活的佈局設計，以及根據具體的上下文環境進行合理的適配。

與其他彈出框控件相比，底部彈出框保留了更強的信息可見性，因此用戶在和底部彈出框呈現的信息進行交互時，可能需要參考背景中的基礎信息，而兩者的呼應也應該貼合用戶當下的需求。另外，由於底部彈出框是一種漸進式的信息呈現方式，通常由用戶交互觸發後，系統會提供額外的詳細的信息並遮蓋部分熒屏內容，因此它不適合顯示始終很重要的信息。

底部彈出框UI設計指南：底部彈出框的類型

一般來說，底部彈出框可分為模態底部彈出框和非模態底部彈出框兩種。

● 模態底部彈出框

底部彈出框UI設計指南：模態底部彈出框

和傳統的模態控件設計一樣，模態底部彈出框的出現通常會迫使用戶在採取其他交互之前，強制他們與之進行交互。這是因為當模態底部彈出框出現時，背景內容通常會被半透明的疊加層蓋住，使其成為「可見卻不可交互」的視覺標識。

雖然模態底部彈出框會阻止用戶對介面其他交互的操作，直到用戶對之進行響應;但這種設計模式更容易引起用戶的注意力，更有效地引導用戶進行特定的交互。

● 非模態底部彈出框

底部彈出框UI設計指南：非模態底部彈出框

與模態底部彈出框不同，非模態底部彈出框不會覆蓋介面，而是浮層於介面之上，因此它不會強制用戶與之進行交互，而是讓用戶可以查看彈出框的同時，繼續在介面上進行其他操作。這也使得非模態底部彈出框通常只包含一些次要的操作，以及用於提供額外的功能或信息，而不是展示重要的信息或請求用戶進行特定操作。

底部彈出框UI設計指南：底部彈出框需要重視的設計原則

總體來說，底部彈出框是一種非常有用的交互設計模式，可以讓用戶更加方便地獲取信息和進行交互，同時提供更加靈活的UI設計和佈局方式。然而，要設計一個出色的底部彈出框並不是一件容易的事情，這需要遵循以下這些UI設計原則：

● 支持「後退」的按鈕和手勢，讓用戶無縫回到上一層介面

底部彈出框UI設計指南：底部彈出框需要重視的設計原則

當底部彈出框擴展為全屏時，用戶可能會感到困惑且不知道自己所處的介面，以及無法使用傳統的交互邏輯進行操作。

為了解決這些問題，可以在底部彈出框中添加支援「後退」的按鈕和手勢，以便用戶能夠無縫地回到上一個介面，同時可以讓用戶更加流暢地完成操作，減少因困惑而產生的挫敗感。

● 底部彈出框需要包含「關閉」按鈕，避免用戶誤操作其他交互

底部彈出框UI設計指南：底部彈出框需要重視的設計原則

雖然絕大多數底部彈出框可以通過「向下滑動」手勢或點擊「頂部空白處」來關閉，但是這個組件本身就容易被用戶忽略，甚至部分用戶根本就不知道這個功能。此外，這種「垂直滑動」操作還存在一定的模糊性，比如用戶本來是想關閉底部彈出框，結果不小心打開了通知欄或控制中心等。

因此，為了確保用戶可以快速關閉底部彈出框，最好在控件的右上方位置添加「關閉(Close)」按鈕或者是「×」按鈕，這樣還可以方便有視力障礙的用戶使用屏幕閱讀器來關閉它。

● 不要將多個底部彈出框堆疊起來，以免對用戶造成一定的困擾

底部彈出框UI設計指南：底部彈出框需要重視的設計原則

當多個底部彈出框堆疊起來時，用戶難免會開始疑惑自己到底處於流程的哪個位置，並且可能需要了解到底哪個是最先彈出的，哪個時最後的彈出的。

事實上，底部彈出框僅是一個臨時的UI控件，其存在目的是打斷用戶流程，告知他們介面中重要的信息和操作。換句話說，對絕大部分用戶而言，底部彈出框的出現本身就不是一個合理的用戶體驗，因此千萬不要使用底部彈出框來代替用戶流程中的應有的頁面。

● 不要使用底部彈出框來承載過於複雜或繁瑣的交互

底部彈出框UI設計指南：底部彈出框需要重視的設計原則

用戶通常不會花費大量時間來查看底部彈出框所承載的信息，加上底部彈出框本質就是一個瞬間狀態下的UI空間，「快速交互」才是它的存在意義，因此盡量使用底部彈出框來承載簡短的交互，而不是過於複雜或繁瑣的信息。

【總結】

在UI設計中，合理使用底部彈出框可以提高APP用戶的交互可觸達性，即使用戶更容易點擊熒屏底部的內容和控件;但同時底部彈出框本身就會損害一定的用戶體驗，因此設計時需要重視一些重要的UI設計原則，盡可能避免用戶對其產生困惑。