新人來收！4個底部浮層的科普知識點

關于底部浮層的定義相信大家都很熟悉，底部浮層通常稱為「浮層」或「浮窗」，可用于給予信息提示，也用于展示更多的拓展信息。

學習知識點之前先來看這篇基礎規范：

「角落一」—— 與對話框的「親屬關系」

單從定義上看，底部浮層與對話框的作用是高度相似的，都是信息提示或是對當前頁面信息的延展，但在具體使用場景的交互操作中，二者卻大有不同：

1. 觸發方式

對話框可以自動觸發，而底部浮層是必須通過用戶操作才可以觸發顯示，于用戶而言底部浮層的顯示會符合心理預期。

2. 關閉方式

對話框通常會要求用戶進行選項操作后才可關閉，關閉方式較單一；底部浮層的關閉方式更多元，對于用戶而言有更豐富的選擇權。

底部浮層對比對話框的優勢在于，它的顯示更符合用戶的預期且干擾程度也較低。

「角落二」—— 多姿多彩的關閉方式

底部浮層靈活性很強，提供多種關閉方式：

1. 觸發浮層上的下一步操作

這是最常見的關閉方式，底部浮層通常作為信息的延展，浮層內可進行交互操作。

2. 點擊浮層外的區域

底部浮層不是一個完整的頁面，作為主頁面的二層出現，因此出現時通常會有黑色蒙層作為遮罩，點擊黑色蒙層的區域可將浮層關閉回到主頁面。

△ 點擊黑色蒙層的任意區域即可關閉

3. 下拉浮層達到收起的閾值

底部浮層的靈活性大，若浮層的高度較小（如未達到屏幕高度的一半），長按浮層頂部可配置是否能夠進行拖拽，若浮層是能夠進行上下拖拽的，那么長按此處下滑也可將浮層進行關閉。

△?長按浮層頂部往下拖拽即可關閉

關于收起的閾值有兩點可作為拓展說明：

閾值的設置

通常是以浮層高度的一半作為臨界值。

浮層首屏下滑

若浮層高度較大，上下滑動查看內容時，在浮層首屏繼續下滑，可將浮層關閉。此設置常見于重瀏覽的內容浮層

△?上下滑動瀏覽，滑至首屏再往下滑即觸發關閉

4. 點擊「關閉」按鈕

底部浮層可根據業務場景需要來配置關閉方式，也可直接放置明確的關閉按鈕，點擊即可將浮層進行關閉。

面對多姿多彩的關閉方式，我們在設計的過程里要仔細考慮合適的關閉操作，可以多加思考：若有明確的關閉按鈕，是否還需要點擊黑色蒙層就進行關閉？若浮層內的內容很重要且交互比較復雜，是否還需要可拖拽的操作？

「角落三」—— 隨時能「長高」

前面我們已經說到，底部浮層是可以進行長按拖拽操作的，長按除了可以下拉關閉，也可以進行高度的延伸。關于高度延伸的定義，在此也需要設置一個閾值，到達此臨界值松手即可將此浮層的高度延伸至最大高度，若未達到臨界值松手即恢復原高度。

△?長按浮層頂部往上拖拽使得高度延伸

「角落四」—— 二級浮層也不在話下

若浮層內容過多，需要對某一點進行特殊說明或者某一塊內容的延展時，可配置二級浮層。

△?二級浮層可作為一級某塊內容的具體說明或選擇的補充

總結

底部浮層作為靈活度很高的一個交互組件，適用于豐富的業務場景，我們在做設計時可多思考一點，關于關閉、關于操作是否處于需求和體驗的絕佳平衡點，共勉之。

歡迎關注作者微信公眾號：「設計牛奶盒」