起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識從4個部分，聊聊B端產品中的浮層組件的設計思考
編輯導語：浮層廣泛應用于B端產品，可用來展示文本、列表等內容，是一個非常好的組件。這篇文章作者從浮層組件的類型、特點、應用案例以及浮層組件應用的注意事項詳細地講述了B端產品的浮層組件設計，一起來看看吧。
浮層是在頁面上方展示的浮層容器，可展示文本、按鈕、列表、標簽、表單項等內容，在 B 端產品中有著非常廣泛的應用。
根據內容和作用，可以分為不同的設計組件。例如 Notification，Tooltip，Dialog 等等。
這些組件都可以看作是頁面空間的延展，最近在項目工作中有了一些新的思考，今天我們就來討論下浮層組件的設計，希望大家能夠有新的收獲。
主要內容包括以下 4 部分：
- 浮層組件的類型
- 浮層組件 3 個的特點
- 幾個應用案例
- 浮層組件應用的注意事項
一、浮層組件的類型
說起浮層就離不開“模態”和“非模態”。
簡單的理解，“模態”就是用戶必須進行交互操作的浮層，否則浮層會一直存在，并且無法進行頁面功能操作。
例如對話框，這種強制性保證了對話框信息的有效傳遞，但是對用戶操作流程造成了比較強的阻斷。“非模態”則不需要給出反饋，不影響用戶的其他操作，沒有強制性，可以說是“來去自如”。
微信 PC 端圖片查看功能中信息提示很好的反映了兩者的差異。對于無法查看的圖片，采用模態彈窗形式，提醒用戶無法查看的原因，用戶需要點擊確定后，才能繼續操作。
如果查看到最后一張圖片，系統采用非模態的 Notatifion 組件提醒。組件未消失時，用戶也可以回看或其他操作，更加輕量化。
具體到組件設計層面，浮層的類型就比較多了。
例如 AntDesign 設計規范共定義了 8 種浮層組件，Element 設計規范則定義了 9 種浮層組件，增加了 Messagebox 組件，其實就是 Dialog 對話框的簡易版。具體的差異感興趣的同學可以自己去查閱一下。
Ant Design設計規范
Element 設計規范
二、浮層組件的特點
1. 構建獨立空間，簡化頁面信息量
浮層在一定的條件下觸發展示，作為一種容器可以形成臨時的內容空間。不會占據頁面空間，并且可以簡化頁面的信息量，有助于頁面的內容布局。例如常見的數據可視化展示時，重點在于圖形展示，詳細數據放置在浮窗中展示，從而保證了頁面的可視化效果。
浮窗展示空間
2. 交互輕量化
對于強調操作效率的 B 端產品，如非必要，需要盡量減少頁面的跳轉次數，實現當前頁面內的流程閉環。
在交互流程上，浮層組件停留在當前頁面，相比頁面跳轉的交互方式效率更高。
在觸發機制上，非模態浮層可以實現懸停展示，移走消失，操作更加方便。
某些信息反饋類的組件還可以自動消失，最大程度上減少了用戶操作。并且非模態浮層同樣可以承載按鈕、選擇器，表單等功能性組件，用戶可以就近操作，從而提高效率。
QQ瀏覽器設置浮窗
在頁面布局方面，浮層也更加靈活，可以出現在頁面中間、側邊、上方、下方等各個位置，尺寸可大可小，對于不太復雜的信息都有較好的適應性。
3. 實現操作的所見即所得
由于非模態窗口不具有強交互性，一般不占據屏幕中間位置，更多的是跟隨功能選項或者頁面邊緣。這就為功能操作的所見所得提供了便利性，方便用戶做出操作決策。
例如表格列設置功能，操作后即可實時展示操作結果?；蛘唔撁嫫つw的設置，用戶選擇后即可預覽效果，方便用戶對比選擇。
QQ瀏覽器皮膚切換
三、浮層組件的應用案例
在實際使用場景中，浮層組件主要應用在信息反饋、內容展示和功能操作 3 個方向，給大家介紹幾個案例。
1. 預覽展示，減少用戶的操作成本
Windows11 任務欄懸停程序圖標時，顯示浮窗預覽當前運行的任務，通過圖形化的方式，讓用戶更好的識別任務內容，便于用戶做出選擇。
在淘寶 Web 端訂單頁面，商品在未收貨狀態下，物流狀態就成為用戶更加關心的信息，懸停顯示物流最新狀態，用戶可以不進入詳情頁快速獲取信息，交互上更加便捷，有效的減少了用戶操作成本。
2. 就近原則，快捷操作
在 B 端產品中，表格信息如何快速拆分內容，查看單個數據的詳情信息呢？
如果采用跳轉頁面，或者表格按鈕等形式，都無法帶給用戶更加流暢的操作體驗。通過浮層展示功能選項，就可以實現點對點的查看信息詳情。類似于操作系統的右鍵功能，方便快捷。
同樣在微信公眾號編輯器中，懸停和選中圖片都可以調出圖片編輯功能，就近的設計形式，保證了用戶的操作效率。
3. 引導作用，輔助功能指向
我們使用 Chrome 瀏覽器登錄網站時，經常提醒我們保存或者更新密碼。這是脫離了網頁之外的瀏覽器自帶功能。
如果采用模態對話框方式，在屏幕中間彈窗展示確認對話框，會阻斷用戶的正常操作流程。使用了非模態窗口，并與密碼管理功能入口強關聯，可以引導用戶認知功能入口。
四、組件使用注意事項
對于組件如何使用，各大廠商都給出了較為明確的場景說明。但是規范是死的，如何靈活運用就需要“仁者見仁、智者見智”了。
1. 基于用戶場景的思考
當我們面對刪除功能的時候，基于防錯原則，首先想到是增加確認彈窗，這看起來是沒有問題的。但是不是最優的解決方案呢？
例如同樣是刪除網址收藏功能，QQ 瀏覽器和 Chrome 瀏覽器給出了兩種解決方案。QQ 瀏覽器刪除時，增加了確認彈窗，用戶確認后可刪除。
QQ瀏覽器確認彈窗
Chrome 瀏覽器的方案時，順應用戶操作，直接刪除內容，顯示成功提示的同時，增加了容錯的“撤回”按鈕。
Chrome瀏覽器浮窗提醒
我們可以先思考下用戶場景，刪除是個比較高風險的操作，用戶一般只有產生了強烈又明確的意圖時，才會主動刪除內容。
無論是確認彈窗還是撤銷功能，都是為了避免用戶誤操作。所以就要評估用戶誤操作的幾率和誤操作后帶來的用戶損失。就書簽而言，用戶損失并不大，誤刪除后再加入收藏就可以了。
（1）關于誤操作的幾率
QQ 瀏覽器只有選中內容后，才能激活刪除按鈕，另外還可以通過右鍵菜單、更多按鈕、選擇”刪除“選項后才能完成操作，其實防錯機制做的比較好的，因此誤操作的幾率比較低。
（2）關于操作成本
誤操作幾率比較低的情況下，我個人認為 Chrome 容錯的設計方案更優一些，刪除的流程更順暢，只需要在誤操作時撤銷就可以了。
QQ 瀏覽器確認彈窗的方式操作成本更高，不過好在能夠批量刪除。在一定程度上解決了頻繁彈窗的問題。
這種容錯思維在 Chrome 其他場景中也有應用，我覺得還是值得借鑒的。
2. 避免濫用
現在各種反饋有點泛濫的趨勢，所見即所得的場景下，我覺得并不需要增加反饋信息。例如登錄頁面成功后會直接跳轉至系統界面，登錄成功的提示就有點畫蛇添足了。
3. 毫無來源的反饋信息
當用戶打開頁面，沒有任何操作就彈出一個提示信息，而且是一閃而過，只會讓用戶用戶一臉疑惑。所以需要注意提示信息的形式和節奏，避免讓提示信息成為用戶的負擔。
#專欄作家#
子牧先生。公眾號：子牧UXD（HelloDesign），人人都是產品經理專欄作家。產品體驗設計師。8年互聯網行業經驗，擅長體驗設計思維、設計方法論、交互設計研究。
本文原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Pexels，基于CC0協議
簡潔明了，不需要費太多時間琢磨的設計真的很戳用戶的心
很細致！
現誠聘項目經理，C端產品經理和B端產品經理
有意向私聊
咋私聊呀