編輯導語：B端產(chǎn)品的展現(xiàn)形式包含了很多類型，標簽頁、彈窗、懸浮層等等。本篇文章中作者分享了如何正確的呈現(xiàn)B端產(chǎn)品，讓產(chǎn)品的交互體驗更加絲滑。感興趣的小伙伴們快來一起看看吧，希望對你有所幫助。

在B端產(chǎn)品操作中，需要高頻率地打開各類鏈接和按鈕，如果點擊后需要展示新的內(nèi)容，那么展現(xiàn)形式就包含了很多種類型，標簽頁、新頁面、懸浮層、彈窗、抽屜等等。

在面對數(shù)量龐大的B端頁面、組件、交互場景下，應(yīng)該選擇哪種展示形式就變成了一個棘手的問題。

本篇分享就將集中在解決如何選擇正確的呈現(xiàn)形式上，讓產(chǎn)品的交互體驗更順滑。

一、內(nèi)容的載體形式

網(wǎng)頁是一種可視化的UI界面，也是一種內(nèi)容載體，它是瀏覽器訪問網(wǎng)站后顯示的主要對象，也是瀏覽器展示內(nèi)容中層級最高的單位。

在同一個網(wǎng)站中，如果我們想要訪問其它網(wǎng)頁，就需要點擊按鈕或鏈接觸發(fā)，這時候，打開新網(wǎng)頁的方式就有兩種，在新窗口/標簽中打開（_blank）或者在本窗口/標簽中打開（_self）。

不管是哪種，本質(zhì)上都需要瀏覽器重新加載新的頁面。對于一般的企業(yè)官網(wǎng)、新聞網(wǎng)站來說，這種加載的模式?jīng)]有太大的問題，因為操作頻次相對適中，用戶中間會有比較長的時間停頓下來查看頁面的內(nèi)容信息。

而B端項目則不同，雖然也有不少查看頁面信息的需求，但是包含了更多需要短平快完成操作目標的使用場景，比如修改個標題，更改商品價格，添加分類字段等。

如果所有高頻操作的場景，都要重新加載頁面，使用起來的 “頓挫感” 是非常強的，降低使用體驗。

早期的網(wǎng)站加載內(nèi)容必須刷新頁面，所以頓挫感是難以解決的，只能想辦法減少跳轉(zhuǎn)流程來提升用戶體驗。

隨著網(wǎng)頁技術(shù)的發(fā)展，異步處理（AJAX數(shù)據(jù)交換方式）技術(shù)的應(yīng)用，讓網(wǎng)頁的內(nèi)容可以通過不刷新或加載新網(wǎng)頁的形式加載和顯示。

簡單解釋，就是早期的網(wǎng)頁加載完成以后就是 “靜止” 的，里面所有內(nèi)容是固定的（不是HTML的靜態(tài)）。而異步處理，就是讓頁面中的指定模塊處于 “運動” 的狀態(tài)，客戶端可以在不重載網(wǎng)頁的情況下只加載和更新這個模塊的內(nèi)容。

比如下面的案例，設(shè)置不同的條件選項，在過去的網(wǎng)頁中只能重載頁面更新，而使用異步處理就可以直接和服務(wù)器請求數(shù)據(jù)刷新這個圖表模塊，而不用重載整個頁面。

所以，在B端項目中，我們不再是只有重載網(wǎng)頁一個選項，而有了其它的選擇，如下圖所示。

其中，網(wǎng)頁展示作為一個基礎(chǔ)展示對象，我就不多做介紹了。我會通過分別介紹其它幾個內(nèi)容的載體，幫助大家區(qū)分它們和重載頁面有何不同，以及如何正確選擇內(nèi)容加載形式。

二、浮層的使用解析

首先介紹浮層，它是我對通過懸浮在頁面基礎(chǔ)內(nèi)容之上的內(nèi)容層的統(tǒng)稱。例如各類氣泡、提示框、下拉菜單，都是浮層的表現(xiàn)形式。

浮層是比較底層的形式，其展示內(nèi)的容完全不需要使用一個新的頁面，且和觸發(fā)的元素有較強的視覺聯(lián)系（對比彈窗）。

浮層并不是由內(nèi)容的多和少決定的，復(fù)雜的浮層可以包含非常多的交互選項和內(nèi)容信息，導致我們很容易和下方解釋的彈窗搞混。

比如客戶端軟件常見的隱藏式側(cè)邊欄，搜索欄中展開的復(fù)雜面板，都是浮層的一種而不是彈窗。

浮層最大的特點，源自它的位置定義邏輯，它會和觸發(fā)它的元素具有非常緊密的位置關(guān)系，而不是像彈窗一樣無差別顯示在界面或瀏覽器視圖的固定區(qū)域。

如果我們想要顯示內(nèi)容，完全沒到用一個新頁面展示的地步（如搜索建議面板），且和觸發(fā)它的控件有較強的聯(lián)系，就可以考慮使用浮層來展示。

三、彈窗的使用解析

彈窗，也是一種懸浮在基礎(chǔ)內(nèi)容之上的內(nèi)容層，它和浮層的不同之處，就在于彈窗通常是居中固定的顯示區(qū)域，和觸發(fā)它的元素沒有什么位置聯(lián)系。并且，彈窗可以包含的內(nèi)容量級也是高于浮層的?；A(chǔ)的彈窗包含強提示彈窗，或類似注冊登錄這種表單彈窗。

而高級的彈窗，則類似下方案例，約等于打開一個獨立的網(wǎng)頁。

之所以使用這些高級彈窗作為頁面載體，原因就是對原觸發(fā)頁面的使用和關(guān)注并沒有結(jié)束，需要支持快速關(guān)閉當前的窗口并返回原來的頁面中去。

比如在一個非常長的列表中，你下滑了幾十頁的高度，肯定不想放棄掉當前的頁面位置，所以Behance或者花瓣等應(yīng)用，都采用窗口模式加載新頁面。

或者類似一個列表頁面中需要大量創(chuàng)建新的數(shù)據(jù)，這些數(shù)據(jù)又不復(fù)雜。于是就通過彈窗表單的形式，快速完成創(chuàng)建并在原頁面中再次點擊 “新增” 按鈕。

高級的彈窗使用除了保持原頁面位置、高頻操作等防止加載的原因之外，還有個更重要的特征，就是強制吸引用戶的注意力到窗口上。

因為彈窗主要以模態(tài) （Modal，后方有黑色遮罩）居中顯示，通過深色蒙版進行前后隔斷，凸顯彈窗區(qū)域，意味著我們強制讓用戶關(guān)注眼前的信息和任務(wù)。

如果我們想要顯示的內(nèi)容，需要保留原頁面狀態(tài)，減少頁面跳轉(zhuǎn)數(shù)量，又需求用戶強行關(guān)注，就可以使用這種模式展示。

四、抽屜的使用解析

最后，就是最難選擇，也最容易和其它組件搞混的抽屜了。

抽屜本身的特征包含懸浮屬性，覆蓋在原頁面之上。而我們常見的側(cè)邊欄、側(cè)邊菜單并不能和抽屜畫上等號，因為他們會占用畫布的實際顯示區(qū)域，和原有內(nèi)容同層。

比如下方案例中，Jira左側(cè)導航（不分左右）可以隱藏收入，頁面內(nèi)容變大，這是側(cè)邊欄。而點擊列表選項，右側(cè)彈窗的窗口覆蓋原有頁面，才是抽屜。

和高級的彈窗類似，抽屜也可以當成一個獨立的頁面展示信息。但它和彈窗不同的是，抽屜通常是從頁面的右側(cè)展開，沒有遮擋左側(cè)的空間。它的主要特征是還需要在原頁面進行交互。

比如Teambition案例中的列表，我們每開一個抽屜都還可以直接點擊原列表的其它選項切換下一個抽屜，省掉關(guān)閉步驟或者原頁面被遮擋的情況。

它比較適合應(yīng)用在表格/列表環(huán)境中，作為表格/列表內(nèi)容的詳情頁形式展開，這樣用戶可以在一個頁面中快速查看不同列表的具體信息或編輯。并且，表格/列表本身的特征會將標題放在最左側(cè)，也方便抽屜的切換。

也因為這種特性，抽屜不太需要使用模態(tài)和遮罩將左側(cè)內(nèi)容遮擋掉。如果需要通過遮擋來吸引用戶注意力，那么這種情況往往更適合使用彈窗。

所以，如果不想通過新頁面打開的列表詳情內(nèi)容，且不是強制要求用戶聚焦的任務(wù)，就可以使用抽屜的形式展現(xiàn)。

五、結(jié)尾

以上就是幾種基本的內(nèi)容展現(xiàn)形式說明，時間關(guān)系還有后半部分關(guān)于如何站在系統(tǒng)框架級的角度使用內(nèi)容載體的分享，我會留在下次分享。

如果有關(guān)于這部分的實際項目疑問，也可以在下方留言。

我們下篇再見～

作者：酸梅干超人；公眾號：超人的電話亭

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

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