怎麼讓複雜的頁面更好用?編輯導語：B端産品的展現形式包含了很多類型，标簽頁、彈窗、懸浮層等等本篇文章中作者分享了如何正确的呈現B端産品，讓産品的交互體驗更加絲滑感興趣的小夥伴們快來一起看看吧，希望對你有所幫助，今天小編就來說說關于怎麼讓複雜的頁面更好用?下面更多詳細答案一起來看看吧!

怎麼讓複雜的頁面更好用

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

在B端産品操作中，需要高頻率地打開各類鍊接和按鈕，如果點擊後需要展示新的内容，那麼展現形式就包含了很多種類型，标簽頁、新頁面、懸浮層、彈窗、抽屜等等。

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

本篇分享就将集中在解決如何選擇正确的呈現形式上，讓産品的交互體驗更順滑。

網頁是一種可視化的UI界面，也是一種内容載體，它是浏覽器訪問網站後顯示的主要對象，也是浏覽器展示内容中層級最高的單位。

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

不管是哪種，本質上都需要浏覽器重新加載新的頁面。對于一般的企業官網、新聞網站來說，這種加載的模式沒有太大的問題，因為操作頻次相對适中，用戶中間會有比較長的時間停頓下來查看頁面的内容信息。

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

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

早期的網站加載内容必須刷新頁面，所以頓挫感是難以解決的，隻能想辦法減少跳轉流程來提升用戶體驗。

随着網頁技術的發展，異步處理（AJAX數據交換方式）技術的應用，讓網頁的内容可以通過不刷新或加載新網頁的形式加載和顯示。

簡單解釋，就是早期的網頁加載完成以後就是 “靜止” 的，裡面所有内容是固定的（不是HTML的靜态）。而異步處理，就是讓頁面中的指定模塊處于 “運動” 的狀态，客戶端可以在不重載網頁的情況下隻加載和更新這個模塊的内容。

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

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

其中，網頁展示作為一個基礎展示對象，我就不多做介紹了。我會通過分别介紹其它幾個内容的載體，幫助大家區分它們和重載頁面有何不同，以及如何正确選擇内容加載形式。

首先介紹浮層，它是我對通過懸浮在頁面基礎内容之上的内容層的統稱。例如各類氣泡、提示框、下拉菜單，都是浮層的表現形式。

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

浮層并不是由内容的多和少決定的，複雜的浮層可以包含非常多的交互選項和内容信息，導緻我們很容易和下方解釋的彈窗搞混。

比如客戶端軟件常見的隐藏式側邊欄，搜索欄中展開的複雜面闆，都是浮層的一種而不是彈窗。

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

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

彈窗，也是一種懸浮在基礎内容之上的内容層，它和浮層的不同之處，就在于彈窗通常是居中固定的顯示區域，和觸發它的元素沒有什麼位置聯系。并且，彈窗可以包含的内容量級也是高于浮層的。基礎的彈窗包含強提示彈窗，或類似注冊登錄這種表單彈窗。

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

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

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

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

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

因為彈窗主要以模态 （Modal，後方有黑色遮罩）居中顯示，通過深色蒙版進行前後隔斷，凸顯彈窗區域，意味着我們強制讓用戶關注眼前的信息和任務。

如果我們想要顯示的内容，需要保留原頁面狀态，減少頁面跳轉數量，又需求用戶強行關注，就可以使用這種模式展示。

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

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

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

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

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

它比較适合應用在表格/列表環境中，作為表格/列表内容的詳情頁形式展開，這樣用戶可以在一個頁面中快速查看不同列表的具體信息或編輯。并且，表格/列表本身的特征會将标題放在最左側，也方便抽屜的切換。

也因為這種特性，抽屜不太需要使用模态和遮罩将左側内容遮擋掉。如果需要通過遮擋來吸引用戶注意力，那麼這種情況往往更适合使用彈窗。

所以，如果不想通過新頁面打開的列表詳情内容，且不是強制要求用戶聚焦的任務，就可以使用抽屜的形式展現。

以上就是幾種基本的内容展現形式說明，時間關系還有後半部分關于如何站在系統框架級的角度使用内容載體的分享，我會留在下次分享。

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

我們下篇再見～

作者：酸梅幹超人；公衆号：超人的電話亭

本文由 @超人的電話亭 原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!