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

學(xué)習(xí)知識(shí)點(diǎn)之前先來(lái)看這篇基礎(chǔ)規(guī)范：

「角落一」—— 與對(duì)話框的「親屬關(guān)系」

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

1. 觸發(fā)方式

對(duì)話框可以自動(dòng)觸發(fā)，而底部浮層是必須通過(guò)用戶操作才可以觸發(fā)顯示，于用戶而言底部浮層的顯示會(huì)符合心理預(yù)期。

2. 關(guān)閉方式

對(duì)話框通常會(huì)要求用戶進(jìn)行選項(xiàng)操作后才可關(guān)閉，關(guān)閉方式較單一；底部浮層的關(guān)閉方式更多元，對(duì)于用戶而言有更豐富的選擇權(quán)。

底部浮層對(duì)比對(duì)話框的優(yōu)勢(shì)在于，它的顯示更符合用戶的預(yù)期且干擾程度也較低。

「角落二」—— 多姿多彩的關(guān)閉方式

底部浮層靈活性很強(qiáng)，提供多種關(guān)閉方式：

1. 觸發(fā)浮層上的下一步操作

這是最常見(jiàn)的關(guān)閉方式，底部浮層通常作為信息的延展，浮層內(nèi)可進(jìn)行交互操作。

2. 點(diǎn)擊浮層外的區(qū)域

底部浮層不是一個(gè)完整的頁(yè)面，作為主頁(yè)面的二層出現(xiàn)，因此出現(xiàn)時(shí)通常會(huì)有黑色蒙層作為遮罩，點(diǎn)擊黑色蒙層的區(qū)域可將浮層關(guān)閉回到主頁(yè)面。

△ 點(diǎn)擊黑色蒙層的任意區(qū)域即可關(guān)閉

3. 下拉浮層達(dá)到收起的閾值

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

△?長(zhǎng)按浮層頂部往下拖拽即可關(guān)閉

關(guān)于收起的閾值有兩點(diǎn)可作為拓展說(shuō)明：

閾值的設(shè)置

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

浮層首屏下滑

若浮層高度較大，上下滑動(dòng)查看內(nèi)容時(shí)，在浮層首屏繼續(xù)下滑，可將浮層關(guān)閉。此設(shè)置常見(jiàn)于重瀏覽的內(nèi)容浮層

△?上下滑動(dòng)瀏覽，滑至首屏再往下滑即觸發(fā)關(guān)閉

4. 點(diǎn)擊「關(guān)閉」按鈕

底部浮層可根據(jù)業(yè)務(wù)場(chǎng)景需要來(lái)配置關(guān)閉方式，也可直接放置明確的關(guān)閉按鈕，點(diǎn)擊即可將浮層進(jìn)行關(guān)閉。

面對(duì)多姿多彩的關(guān)閉方式，我們?cè)谠O(shè)計(jì)的過(guò)程里要仔細(xì)考慮合適的關(guān)閉操作，可以多加思考：若有明確的關(guān)閉按鈕，是否還需要點(diǎn)擊黑色蒙層就進(jìn)行關(guān)閉？若浮層內(nèi)的內(nèi)容很重要且交互比較復(fù)雜，是否還需要可拖拽的操作？

「角落三」—— 隨時(shí)能「長(zhǎng)高」

前面我們已經(jīng)說(shuō)到，底部浮層是可以進(jìn)行長(zhǎng)按拖拽操作的，長(zhǎng)按除了可以下拉關(guān)閉，也可以進(jìn)行高度的延伸。關(guān)于高度延伸的定義，在此也需要設(shè)置一個(gè)閾值，到達(dá)此臨界值松手即可將此浮層的高度延伸至最大高度，若未達(dá)到臨界值松手即恢復(fù)原高度。

△?長(zhǎng)按浮層頂部往上拖拽使得高度延伸

「角落四」—— 二級(jí)浮層也不在話下

若浮層內(nèi)容過(guò)多，需要對(duì)某一點(diǎn)進(jìn)行特殊說(shuō)明或者某一塊內(nèi)容的延展時(shí)，可配置二級(jí)浮層。

△?二級(jí)浮層可作為一級(jí)某塊內(nèi)容的具體說(shuō)明或選擇的補(bǔ)充

總結(jié)

底部浮層作為靈活度很高的一個(gè)交互組件，適用于豐富的業(yè)務(wù)場(chǎng)景，我們?cè)谧鲈O(shè)計(jì)時(shí)可多思考一點(diǎn)，關(guān)于關(guān)閉、關(guān)于操作是否處于需求和體驗(yàn)的絕佳平衡點(diǎn)，共勉之。

歡迎關(guān)注作者微信公眾號(hào)：「設(shè)計(jì)牛奶盒」