編輯導(dǎo)語(yǔ)：浮層廣泛應(yīng)用于B端產(chǎn)品，可用來(lái)展示文本、列表等內(nèi)容，是一個(gè)非常好的組件。這篇文章作者從浮層組件的類型、特點(diǎn)、應(yīng)用案例以及浮層組件應(yīng)用的注意事項(xiàng)詳細(xì)地講述了B端產(chǎn)品的浮層組件設(shè)計(jì)，一起來(lái)看看吧。

浮層是在頁(yè)面上方展示的浮層容器，可展示文本、按鈕、列表、標(biāo)簽、表單項(xiàng)等內(nèi)容，在 B 端產(chǎn)品中有著非常廣泛的應(yīng)用。

根據(jù)內(nèi)容和作用，可以分為不同的設(shè)計(jì)組件。例如 Notification，Tooltip，Dialog 等等。

這些組件都可以看作是頁(yè)面空間的延展，最近在項(xiàng)目工作中有了一些新的思考，今天我們就來(lái)討論下浮層組件的設(shè)計(jì)，希望大家能夠有新的收獲。

主要內(nèi)容包括以下 4 部分：

1. 浮層組件的類型
2. 浮層組件 3 個(gè)的特點(diǎn)
3. 幾個(gè)應(yīng)用案例
4. 浮層組件應(yīng)用的注意事項(xiàng)

一、浮層組件的類型

說(shuō)起浮層就離不開“模態(tài)”和“非模態(tài)”。

簡(jiǎn)單的理解，“模態(tài)”就是用戶必須進(jìn)行交互操作的浮層，否則浮層會(huì)一直存在，并且無(wú)法進(jìn)行頁(yè)面功能操作。

例如對(duì)話框，這種強(qiáng)制性保證了對(duì)話框信息的有效傳遞，但是對(duì)用戶操作流程造成了比較強(qiáng)的阻斷。“非模態(tài)”則不需要給出反饋，不影響用戶的其他操作，沒(méi)有強(qiáng)制性，可以說(shuō)是“來(lái)去自如”。

微信 PC 端圖片查看功能中信息提示很好的反映了兩者的差異。對(duì)于無(wú)法查看的圖片，采用模態(tài)彈窗形式，提醒用戶無(wú)法查看的原因，用戶需要點(diǎn)擊確定后，才能繼續(xù)操作。

如果查看到最后一張圖片，系統(tǒng)采用非模態(tài)的 Notatifion 組件提醒。組件未消失時(shí)，用戶也可以回看或其他操作，更加輕量化。

具體到組件設(shè)計(jì)層面，浮層的類型就比較多了。

例如 AntDesign 設(shè)計(jì)規(guī)范共定義了 8 種浮層組件，Element 設(shè)計(jì)規(guī)范則定義了 9 種浮層組件，增加了 Messagebox 組件，其實(shí)就是 Dialog 對(duì)話框的簡(jiǎn)易版。具體的差異感興趣的同學(xué)可以自己去查閱一下。

Ant Design設(shè)計(jì)規(guī)范

Element 設(shè)計(jì)規(guī)范

二、浮層組件的特點(diǎn)

1. 構(gòu)建獨(dú)立空間，簡(jiǎn)化頁(yè)面信息量

浮層在一定的條件下觸發(fā)展示，作為一種容器可以形成臨時(shí)的內(nèi)容空間。不會(huì)占據(jù)頁(yè)面空間，并且可以簡(jiǎn)化頁(yè)面的信息量，有助于頁(yè)面的內(nèi)容布局。例如常見(jiàn)的數(shù)據(jù)可視化展示時(shí)，重點(diǎn)在于圖形展示，詳細(xì)數(shù)據(jù)放置在浮窗中展示，從而保證了頁(yè)面的可視化效果。

浮窗展示空間

2. 交互輕量化

對(duì)于強(qiáng)調(diào)操作效率的 B 端產(chǎn)品，如非必要，需要盡量減少頁(yè)面的跳轉(zhuǎn)次數(shù)，實(shí)現(xiàn)當(dāng)前頁(yè)面內(nèi)的流程閉環(huán)。

在交互流程上，浮層組件停留在當(dāng)前頁(yè)面，相比頁(yè)面跳轉(zhuǎn)的交互方式效率更高。

在觸發(fā)機(jī)制上，非模態(tài)浮層可以實(shí)現(xiàn)懸停展示，移走消失，操作更加方便。

某些信息反饋類的組件還可以自動(dòng)消失，最大程度上減少了用戶操作。并且非模態(tài)浮層同樣可以承載按鈕、選擇器，表單等功能性組件，用戶可以就近操作，從而提高效率。

QQ瀏覽器設(shè)置浮窗

在頁(yè)面布局方面，浮層也更加靈活，可以出現(xiàn)在頁(yè)面中間、側(cè)邊、上方、下方等各個(gè)位置，尺寸可大可小，對(duì)于不太復(fù)雜的信息都有較好的適應(yīng)性。

3. 實(shí)現(xiàn)操作的所見(jiàn)即所得

由于非模態(tài)窗口不具有強(qiáng)交互性，一般不占據(jù)屏幕中間位置，更多的是跟隨功能選項(xiàng)或者頁(yè)面邊緣。這就為功能操作的所見(jiàn)所得提供了便利性，方便用戶做出操作決策。

例如表格列設(shè)置功能，操作后即可實(shí)時(shí)展示操作結(jié)果?；蛘唔?yè)面皮膚的設(shè)置，用戶選擇后即可預(yù)覽效果，方便用戶對(duì)比選擇。

QQ瀏覽器皮膚切換

三、浮層組件的應(yīng)用案例

在實(shí)際使用場(chǎng)景中，浮層組件主要應(yīng)用在信息反饋、內(nèi)容展示和功能操作 3 個(gè)方向，給大家介紹幾個(gè)案例。

1. 預(yù)覽展示，減少用戶的操作成本

Windows11 任務(wù)欄懸停程序圖標(biāo)時(shí)，顯示浮窗預(yù)覽當(dāng)前運(yùn)行的任務(wù)，通過(guò)圖形化的方式，讓用戶更好的識(shí)別任務(wù)內(nèi)容，便于用戶做出選擇。

在淘寶 Web 端訂單頁(yè)面，商品在未收貨狀態(tài)下，物流狀態(tài)就成為用戶更加關(guān)心的信息，懸停顯示物流最新狀態(tài)，用戶可以不進(jìn)入詳情頁(yè)快速獲取信息，交互上更加便捷，有效的減少了用戶操作成本。

2. 就近原則，快捷操作

在 B 端產(chǎn)品中，表格信息如何快速拆分內(nèi)容，查看單個(gè)數(shù)據(jù)的詳情信息呢？

如果采用跳轉(zhuǎn)頁(yè)面，或者表格按鈕等形式，都無(wú)法帶給用戶更加流暢的操作體驗(yàn)。通過(guò)浮層展示功能選項(xiàng)，就可以實(shí)現(xiàn)點(diǎn)對(duì)點(diǎn)的查看信息詳情。類似于操作系統(tǒng)的右鍵功能，方便快捷。

同樣在微信公眾號(hào)編輯器中，懸停和選中圖片都可以調(diào)出圖片編輯功能，就近的設(shè)計(jì)形式，保證了用戶的操作效率。

3. 引導(dǎo)作用，輔助功能指向

我們使用 Chrome 瀏覽器登錄網(wǎng)站時(shí)，經(jīng)常提醒我們保存或者更新密碼。這是脫離了網(wǎng)頁(yè)之外的瀏覽器自帶功能。

如果采用模態(tài)對(duì)話框方式，在屏幕中間彈窗展示確認(rèn)對(duì)話框，會(huì)阻斷用戶的正常操作流程。使用了非模態(tài)窗口，并與密碼管理功能入口強(qiáng)關(guān)聯(lián)，可以引導(dǎo)用戶認(rèn)知功能入口。

四、組件使用注意事項(xiàng)

對(duì)于組件如何使用，各大廠商都給出了較為明確的場(chǎng)景說(shuō)明。但是規(guī)范是死的，如何靈活運(yùn)用就需要“仁者見(jiàn)仁、智者見(jiàn)智”了。

1. 基于用戶場(chǎng)景的思考

當(dāng)我們面對(duì)刪除功能的時(shí)候，基于防錯(cuò)原則，首先想到是增加確認(rèn)彈窗，這看起來(lái)是沒(méi)有問(wèn)題的。但是不是最優(yōu)的解決方案呢？

例如同樣是刪除網(wǎng)址收藏功能，QQ 瀏覽器和 Chrome 瀏覽器給出了兩種解決方案。QQ 瀏覽器刪除時(shí)，增加了確認(rèn)彈窗，用戶確認(rèn)后可刪除。

QQ瀏覽器確認(rèn)彈窗

Chrome 瀏覽器的方案時(shí)，順應(yīng)用戶操作，直接刪除內(nèi)容，顯示成功提示的同時(shí)，增加了容錯(cuò)的“撤回”按鈕。

Chrome瀏覽器浮窗提醒

我們可以先思考下用戶場(chǎng)景，刪除是個(gè)比較高風(fēng)險(xiǎn)的操作，用戶一般只有產(chǎn)生了強(qiáng)烈又明確的意圖時(shí)，才會(huì)主動(dòng)刪除內(nèi)容。

無(wú)論是確認(rèn)彈窗還是撤銷功能，都是為了避免用戶誤操作。所以就要評(píng)估用戶誤操作的幾率和誤操作后帶來(lái)的用戶損失。就書簽而言，用戶損失并不大，誤刪除后再加入收藏就可以了。

（1）關(guān)于誤操作的幾率

QQ 瀏覽器只有選中內(nèi)容后，才能激活刪除按鈕，另外還可以通過(guò)右鍵菜單、更多按鈕、選擇”刪除“選項(xiàng)后才能完成操作，其實(shí)防錯(cuò)機(jī)制做的比較好的，因此誤操作的幾率比較低。

（2）關(guān)于操作成本

誤操作幾率比較低的情況下，我個(gè)人認(rèn)為 Chrome 容錯(cuò)的設(shè)計(jì)方案更優(yōu)一些，刪除的流程更順暢，只需要在誤操作時(shí)撤銷就可以了。

QQ 瀏覽器確認(rèn)彈窗的方式操作成本更高，不過(guò)好在能夠批量刪除。在一定程度上解決了頻繁彈窗的問(wèn)題。

這種容錯(cuò)思維在 Chrome 其他場(chǎng)景中也有應(yīng)用，我覺(jué)得還是值得借鑒的。

2. 避免濫用

現(xiàn)在各種反饋有點(diǎn)泛濫的趨勢(shì)，所見(jiàn)即所得的場(chǎng)景下，我覺(jué)得并不需要增加反饋信息。例如登錄頁(yè)面成功后會(huì)直接跳轉(zhuǎn)至系統(tǒng)界面，登錄成功的提示就有點(diǎn)畫蛇添足了。

3. 毫無(wú)來(lái)源的反饋信息

當(dāng)用戶打開頁(yè)面，沒(méi)有任何操作就彈出一個(gè)提示信息，而且是一閃而過(guò)，只會(huì)讓用戶用戶一臉疑惑。所以需要注意提示信息的形式和節(jié)奏，避免讓提示信息成為用戶的負(fù)擔(dān)。

#專欄作家#

子牧先生。公眾號(hào)：子牧UXD（HelloDesign），人人都是產(chǎn)品經(jīng)理專欄作家。產(chǎn)品體驗(yàn)設(shè)計(jì)師。8年互聯(lián)網(wǎng)行業(yè)經(jīng)驗(yàn)，擅長(zhǎng)體驗(yàn)設(shè)計(jì)思維、設(shè)計(jì)方法論、交互設(shè)計(jì)研究。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Pexels，基于CC0協(xié)議