編輯導(dǎo)讀：底部浮層為何要存在呢，它與對(duì)話框相比又有什么特點(diǎn)，背后滿足的需求又是什么，在什么場(chǎng)景下會(huì)用它，用它又能給用戶、產(chǎn)品帶來什么價(jià)值？本文作者從這些問題出發(fā)，對(duì)底部浮層展開了分析，一起來看看~

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

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

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

1. 觸發(fā)方式：對(duì)話框可以自動(dòng)觸發(fā)，而底部浮層是必須通過用戶操作才可以觸發(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ā)浮層上的下一步操作

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

浮層上有明確的「下一步」指引按鈕?

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

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

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

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

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

??

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

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

1. 閾值的設(shè)置：通常是以浮層高度的一半作為臨界值。
2. 浮層首屏下滑：若浮層高度較大，上下滑動(dòng)查看內(nèi)容時(shí)，在浮層首屏繼續(xù)下滑，可將浮層關(guān)閉。此設(shè)置常見于重瀏覽的內(nèi)容浮層

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

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

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

浮層有明確的關(guān)閉按鈕?

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

「角落三」—— 隨時(shí)能“長高”

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

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

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

若浮層內(nèi)容作為下一步的中轉(zhuǎn)頁面，需要對(duì)浮層內(nèi)某一點(diǎn)進(jìn)行特殊說明或者某一塊內(nèi)容的延展時(shí)，可適當(dāng)配置二級(jí)浮層的操作。

二級(jí)浮層可作為一級(jí)浮層某部分內(nèi)容的補(bǔ)充或是具體說明?

總結(jié)

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

本文由 @設(shè)計(jì)牛奶盒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議。