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