“B 端頁(yè)面加載，關(guān)乎用戶體驗(yàn)。” 在 B 端產(chǎn)品設(shè)計(jì)中，頁(yè)面加載功能不容小覷。如何讓用戶在等待中減少焦慮？怎樣使頁(yè)面加載邏輯清晰、策略得當(dāng)？本文將詳細(xì)闡述，為 B 端產(chǎn)品設(shè)計(jì)提供指引。

每一個(gè)用戶都不喜歡進(jìn)入頁(yè)面時(shí)需要長(zhǎng)時(shí)間的等待，并且對(duì)著一個(gè)空白的頁(yè)面。

因此在 iOS當(dāng)中會(huì)使用大量的動(dòng)效、情感化設(shè)計(jì)來(lái)引導(dǎo)用戶多停留一些時(shí)間等待加載；在較多 app 當(dāng)中，也會(huì)通過(guò)動(dòng)效設(shè)計(jì)，優(yōu)化頁(yè)面信息的加載。

那既然頁(yè)面加載很重要，對(duì)于B端產(chǎn)品而言，我們也需要去考慮頁(yè)面的功能究竟要如何進(jìn)行設(shè)計(jì)。

今天我們會(huì)聊聊 頁(yè)面加載 功能的具體邏輯，以及B端產(chǎn)品的常見頁(yè)面加載策略，希望能夠?qū)Ω魑煌瑢W(xué)有所幫助～

一、頁(yè)面加載的邏輯

在系統(tǒng)當(dāng)中，頁(yè)面加載其實(shí)是用戶對(duì)系統(tǒng)界面進(jìn)行交互后，系統(tǒng)會(huì)將對(duì)應(yīng)的數(shù)據(jù)傳給服務(wù)器，而服務(wù)器又會(huì)將內(nèi)容反饋給用戶的整個(gè)過(guò)程。

比如在按鈕組件中，我們就需要去設(shè)定「當(dāng)用戶點(diǎn)擊了按鈕過(guò)后它需要長(zhǎng)時(shí)間加載的 Loading 狀態(tài)」

通過(guò)這樣的做法，其實(shí)就是緩解用戶等待所花費(fèi)的時(shí)間，減少焦慮。

在很多C端產(chǎn)品中，頁(yè)面加載是非常常見的。比如會(huì)有懶加載、預(yù)加載、異步加載等。

什么是B端產(chǎn)品經(jīng)理？和C端產(chǎn)品經(jīng)理有什么區(qū)別？

B端產(chǎn)品經(jīng)理中的B是Business，商業(yè)的意思，B端產(chǎn)品經(jīng)理首先就要理解這個(gè)職位的重要性，要設(shè)計(jì)出更適合這個(gè)項(xiàng)目需求的產(chǎn)品方案，B最終產(chǎn)品經(jīng)理在日常工作中...

查看詳情 >

同時(shí)會(huì)使用非常多的 插畫設(shè)計(jì)、動(dòng)效設(shè)計(jì) 去降低用戶所使用的焦慮。但是在桌面端中，它的思考方式會(huì)有些許不同，我們將其分為四種不同的方式。

二、骨架圖/skeleton

骨架屏是較為常規(guī)的頁(yè)面模塊加載方式。

它主要適用于模塊當(dāng)中，加載內(nèi)容需要提供占位信息時(shí)進(jìn)行使用。通常會(huì)在 列表、卡片類 圖文信息較多的頁(yè)面當(dāng)中進(jìn)行呈現(xiàn) 。

在用戶預(yù)期上，骨架圖能夠幫助我們展示當(dāng)中頁(yè)面的大體結(jié)構(gòu)，以避免在頁(yè)面加載信息的過(guò)程當(dāng)中出現(xiàn)隨意跳動(dòng)、亂展示的情況。

特別是在很多頁(yè)面第一次加載時(shí)，由于數(shù)據(jù)內(nèi)容較多，因此使用骨架圖填充會(huì)更為合理。比如在有贊當(dāng)中， 就會(huì)使用骨架圖的方式來(lái)進(jìn)行頁(yè)面信息的加載。而在B端后臺(tái)中也更多的適用于工作臺(tái)信息的加載，特別是在工作臺(tái)中有數(shù)據(jù)部分的內(nèi)容呈現(xiàn)的時(shí)候，需要格外去注意。

三、加載中/Spin

Spin 主要要于頁(yè)面和區(qū)塊當(dāng)中的信息加載，通過(guò)適當(dāng)?shù)膭?dòng)效，能夠保證頁(yè)面加載時(shí)緩解用戶的焦慮。

在 Spin 當(dāng)中，會(huì)有許多不同的類型：基礎(chǔ)Loading、動(dòng)畫Loading、進(jìn)度Loading

基礎(chǔ)Loading 更適用于頁(yè)面當(dāng)中的組件類級(jí)別的加載，像是在輸入框內(nèi)、按鈕中、下拉選擇… 的內(nèi)容加載。

動(dòng)畫Loading 則偏向于區(qū)塊、頁(yè)面級(jí)別的加載，比如在表格頁(yè)面中，就會(huì)經(jīng)常使用加載的方式展示目前正在相應(yīng)。

進(jìn)度Loading 則更像是進(jìn)度條的外露，想要更凸顯目前的真實(shí)進(jìn)度情況。目前在 Ant Design 5.18.0 版本當(dāng)中即可支持

四、長(zhǎng)時(shí)間加載

當(dāng)然，在系統(tǒng)當(dāng)中還會(huì)出現(xiàn)一些特殊的加載狀態(tài)。比如在針對(duì)數(shù)據(jù)量較大的情況下時(shí)，我們會(huì)采取什么樣的加載策略？

比如在神策數(shù)據(jù)當(dāng)中，當(dāng)我們?cè)谌シ治龊笈_(tái)的行為數(shù)據(jù)時(shí)，需要進(jìn)行大量的計(jì)算，因此在分析完一次過(guò)后所等待的時(shí)間也會(huì)更為長(zhǎng)久。這時(shí)候神策會(huì)給出一套更為復(fù)雜的加載策略。

首先在加載層面上，它會(huì)優(yōu)先告知用戶目前整體的加載進(jìn)度，這對(duì)于用戶的等待是非常有益的。

其次，如果你對(duì)于整體加載的時(shí)間進(jìn)度不夠滿意，那我可以給你相應(yīng)的解決策略，像是分批加載等等。

最后如果你在加載過(guò)程當(dāng)中有其他的分析任務(wù)，也可以通過(guò)異步加載的方式，進(jìn)行后臺(tái)計(jì)算，等結(jié)果出來(lái)后會(huì)通過(guò)通知的方式進(jìn)行提示。當(dāng)然，在此過(guò)程中，你可以中斷、退出。

五、異步加載

異步加載也是針對(duì)長(zhǎng)時(shí)間加載的一種策略，比如我需要去上傳較大信息的時(shí)候，我需要耗費(fèi)特別多的時(shí)間。那這時(shí)候就可以采用異步加載的方式，滿足用戶的正常使用。

在飛書當(dāng)中，我要上傳飛書妙記，我要導(dǎo)入飛書成員，那都可以通過(guò)異步加載的方式來(lái)進(jìn)行呈現(xiàn)。

那在設(shè)計(jì)的時(shí)候需要去考慮異步加載整體的入口以及功能之間是如何實(shí)現(xiàn)的。

像是在飛書妙記中，它會(huì)將其作為一個(gè)上傳入口，進(jìn)行快速的展現(xiàn)。而在導(dǎo)入飛書成員的時(shí)候，則會(huì)展現(xiàn)是將其放在后臺(tái)進(jìn)行加載，等完成過(guò)后通過(guò)通知的方式來(lái)告知用戶（與神策相同）

關(guān)于加載，其實(shí)在設(shè)計(jì)上還會(huì)有很多細(xì)節(jié)，我們也會(huì)在課程當(dāng)中，通過(guò) 功能設(shè)計(jì) 的方式給大家進(jìn)行梳理設(shè)計(jì)要點(diǎn)（肯定會(huì)比現(xiàn)在更為系統(tǒng)），后續(xù)有時(shí)間，再和大家分享～

本文由人人都是產(chǎn)品經(jīng)理作者【CE青年】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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

蘭亭妙微(m.shtzxx.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)的軟件開發(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