2025-4-9 杰睿
編輯導語：B端產品的展現形式包含了很多類型，標簽頁、彈窗、懸浮層等等。本篇文章中作者分享了如何正確的呈現B端產品，讓產品的交互體驗更加絲滑。感興趣的小伙伴們快來一起看看吧，希望對你有所幫助。
在B端產品操作中，需要高頻率地打開各類鏈接和按鈕，如果點擊后需要展示新的內容，那么展現形式就包含了很多種類型，標簽頁、新頁面、懸浮層、彈窗、抽屜等等。
在面對數量龐大的B端頁面、組件、交互場景下，應該選擇哪種展示形式就變成了一個棘手的問題。
本篇分享就將集中在解決如何選擇正確的呈現形式上，讓產品的交互體驗更順滑。
網頁是一種可視化的UI界面，也是一種內容載體，它是瀏覽器訪問網站后顯示的主要對象，也是瀏覽器展示內容中層級最高的單位。
在同一個網站中，如果我們想要訪問其它網頁，就需要點擊按鈕或鏈接觸發，這時候，打開新網頁的方式就有兩種，在新窗口/標簽中打開（_blank）或者在本窗口/標簽中打開（_self）。
不管是哪種，本質上都需要瀏覽器重新加載新的頁面。對于一般的企業官網、新聞網站來說，這種加載的模式沒有太大的問題，因為操作頻次相對適中，用戶中間會有比較長的時間停頓下來查看頁面的內容信息。
而B端項目則不同，雖然也有不少查看頁面信息的需求，但是包含了更多需要短平快完成操作目標的使用場景，比如修改個標題，更改商品價格，添加分類字段等。
如果所有高頻操作的場景，都要重新加載頁面，使用起來的 “頓挫感” 是非常強的，降低使用體驗。
早期的網站加載內容必須刷新頁面，所以頓挫感是難以解決的，只能想辦法減少跳轉流程來提升用戶體驗。
隨著網頁技術的發展，異步處理（AJAX數據交換方式）技術的應用，讓網頁的內容可以通過不刷新或加載新網頁的形式加載和顯示。
簡單解釋，就是早期的網頁加載完成以后就是 “靜止” 的，里面所有內容是固定的（不是HTML的靜態）。而異步處理，就是讓頁面中的指定模塊處于 “運動” 的狀態，客戶端可以在不重載網頁的情況下只加載和更新這個模塊的內容。
比如下面的案例，設置不同的條件選項，在過去的網頁中只能重載頁面更新，而使用異步處理就可以直接和服務器請求數據刷新這個圖表模塊，而不用重載整個頁面。
所以，在B端項目中，我們不再是只有重載網頁一個選項，而有了其它的選擇，如下圖所示。
其中，網頁展示作為一個基礎展示對象，我就不多做介紹了。我會通過分別介紹其它幾個內容的載體，幫助大家區分它們和重載頁面有何不同，以及如何正確選擇內容加載形式。
首先介紹浮層，它是我對通過懸浮在頁面基礎內容之上的內容層的統稱。例如各類氣泡、提示框、下拉菜單，都是浮層的表現形式。
浮層是比較底層的形式，其展示內的容完全不需要使用一個新的頁面，且和觸發的元素有較強的視覺聯系（對比彈窗）。
浮層并不是由內容的多和少決定的，復雜的浮層可以包含非常多的交互選項和內容信息，導致我們很容易和下方解釋的彈窗搞混。
比如客戶端軟件常見的隱藏式側邊欄，搜索欄中展開的復雜面板，都是浮層的一種而不是彈窗。
浮層最大的特點，源自它的位置定義邏輯，它會和觸發它的元素具有非常緊密的位置關系，而不是像彈窗一樣無差別顯示在界面或瀏覽器視圖的固定區域。
如果我們想要顯示內容，完全沒到用一個新頁面展示的地步（如搜索建議面板），且和觸發它的控件有較強的聯系，就可以考慮使用浮層來展示。
彈窗，也是一種懸浮在基礎內容之上的內容層，它和浮層的不同之處，就在于彈窗通常是居中固定的顯示區域，和觸發它的元素沒有什么位置聯系。并且，彈窗可以包含的內容量級也是高于浮層的。基礎的彈窗包含強提示彈窗，或類似注冊登錄這種表單彈窗。
而高級的彈窗，則類似下方案例，約等于打開一個獨立的網頁。
之所以使用這些高級彈窗作為頁面載體，原因就是對原觸發頁面的使用和關注并沒有結束，需要支持快速關閉當前的窗口并返回原來的頁面中去。
比如在一個非常長的列表中，你下滑了幾十頁的高度，肯定不想放棄掉當前的頁面位置，所以Behance或者花瓣等應用，都采用窗口模式加載新頁面。
或者類似一個列表頁面中需要大量創建新的數據，這些數據又不復雜。于是就通過彈窗表單的形式，快速完成創建并在原頁面中再次點擊 “新增” 按鈕。
高級的彈窗使用除了保持原頁面位置、高頻操作等防止加載的原因之外，還有個更重要的特征，就是強制吸引用戶的注意力到窗口上。
因為彈窗主要以模態 （Modal，后方有黑色遮罩）居中顯示，通過深色蒙版進行前后隔斷，凸顯彈窗區域，意味著我們強制讓用戶關注眼前的信息和任務。
如果我們想要顯示的內容，需要保留原頁面狀態，減少頁面跳轉數量，又需求用戶強行關注，就可以使用這種模式展示。
最后，就是最難選擇，也最容易和其它組件搞混的抽屜了。
抽屜本身的特征包含懸浮屬性，覆蓋在原頁面之上。而我們常見的側邊欄、側邊菜單并不能和抽屜畫上等號，因為他們會占用畫布的實際顯示區域，和原有內容同層。
比如下方案例中，Jira左側導航（不分左右）可以隱藏收入，頁面內容變大，這是側邊欄。而點擊列表選項，右側彈窗的窗口覆蓋原有頁面，才是抽屜。
和高級的彈窗類似，抽屜也可以當成一個獨立的頁面展示信息。但它和彈窗不同的是，抽屜通常是從頁面的右側展開，沒有遮擋左側的空間。它的主要特征是還需要在原頁面進行交互。
比如Teambition案例中的列表，我們每開一個抽屜都還可以直接點擊原列表的其它選項切換下一個抽屜，省掉關閉步驟或者原頁面被遮擋的情況。
它比較適合應用在表格/列表環境中，作為表格/列表內容的詳情頁形式展開，這樣用戶可以在一個頁面中快速查看不同列表的具體信息或編輯。并且，表格/列表本身的特征會將標題放在最左側，也方便抽屜的切換。
也因為這種特性，抽屜不太需要使用模態和遮罩將左側內容遮擋掉。如果需要通過遮擋來吸引用戶注意力，那么這種情況往往更適合使用彈窗。
所以，如果不想通過新頁面打開的列表詳情內容，且不是強制要求用戶聚焦的任務，就可以使用抽屜的形式展現。
以上就是幾種基本的內容展現形式說明，時間關系還有后半部分關于如何站在系統框架級的角度使用內容載體的分享，我會留在下次分享。
如果有關于這部分的實際項目疑問，也可以在下方留言。
我們下篇再見～
作者：酸梅干超人；公眾號：超人的電話亭
本文由 @超人的電話亭 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議。
專欄作家
韓敘，微信公眾號：運營狗工作日記，人人都是產品經理專欄作家。原貓眼電影產品運營專家，創業時經歷了0到1的艱辛，在百度時規劃了海量用戶的玩法。從業10年，專注互聯網運營領域，包括產品運營、用戶運營、社區運營和UGC運營。
本文原創發布于人人都是產品經理，未經許可，不得轉載。
題圖來自Unsplash，基于CC0協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(m.wowo44.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan