編輯導(dǎo)語：產(chǎn)品設(shè)計與用戶的體驗(yàn)感息息相關(guān)，但是很多時候產(chǎn)品經(jīng)理在產(chǎn)品設(shè)計過程中會忽略掉可能影響到用戶體驗(yàn)感的一些因素，比如一些異常狀態(tài)的出現(xiàn)會讓用戶產(chǎn)品卸載的想法。因此，如何處理好非正常狀態(tài)的用戶體驗(yàn)是產(chǎn)品經(jīng)理需要做好的一件事。本文通過四大維度，讓你了解加載和異常狀態(tài)設(shè)計應(yīng)該如何做。

產(chǎn)品經(jīng)理在產(chǎn)品規(guī)劃設(shè)計中，場景考慮的全面性決定了產(chǎn)品呈現(xiàn)給用戶的體驗(yàn)優(yōu)劣。我們往往在產(chǎn)品設(shè)計中更多的考慮到正向流程是否順暢，功能是否有缺失。

卻忽略了頁面性能、用戶網(wǎng)絡(luò)、接口異常等帶來異常情況的影響，其實(shí)在用戶交互中，任何一個功能都存在狀態(tài)異常和加載有問題的情況，這是無法避免的事實(shí)。

正向流程的產(chǎn)品設(shè)計中，產(chǎn)品間不會出現(xiàn)太大的優(yōu)劣，很難給用戶帶來“WOW”的尖叫感，反而異常狀態(tài)倘若處理不友好，更易招致用戶的吐槽和卸載。那么如何盡可能的處理好非正常狀態(tài)的用戶體驗(yàn)就顯得尤為重要。

我簡單的將用戶的加載和異常狀態(tài)分為四部分：

1. 加載場景：用戶網(wǎng)絡(luò)、接口性能等均會導(dǎo)致頁面在打開時面臨“慢”的問題。大多數(shù)時候除了用戶第一次打開頁面，其他時候可采用緩存機(jī)制來避免加載慢的問題；
2. 缺省場景：空態(tài)頁面、接口異常、數(shù)據(jù)異常等情況會導(dǎo)致該場景出現(xiàn)；
3. 網(wǎng)絡(luò)異常：這種情況其實(shí)在5G時代還是普遍存在的，運(yùn)營商在偏遠(yuǎn)地區(qū)、密閉空間存在網(wǎng)絡(luò)不穩(wěn)定，導(dǎo)致出現(xiàn)網(wǎng)絡(luò)異常情況；
4. 邏輯異常：如今算法普遍應(yīng)用的時代，很多平臺都會圈定用戶進(jìn)行投放營銷，當(dāng)訪問用戶與圈定的用戶不相符時，會出現(xiàn)邏輯判斷導(dǎo)致的相關(guān)提示信息。

一、加載與異常

1. 加載場景

1）全局加載

任何APP內(nèi)有也不可或缺的模塊——運(yùn)營活動，當(dāng)我們打開活動時，經(jīng)常會遇到一個小動態(tài)圖片在頁面中間運(yùn)動，這個頁面就是全局加載的loading頁。

為什么需要該loading頁呢？

目前的活動多為H5頁面，當(dāng)用戶打開時需要請求接口及下載元素，在此背景下就受到一些客觀因素的影響導(dǎo)致頁面從用戶點(diǎn)擊到呈現(xiàn)會有一定的時間差。

如果在該時間差內(nèi)就一個空蕩蕩的頁面，會增加用戶心理感知的等待時間。當(dāng)加入有趣的動態(tài)小圖在頁面上運(yùn)動時，用戶的注意力會被吸引，從而在感知上減少了用戶等待時間。

該加載方式的優(yōu)點(diǎn)是完整的將頁面元素展示給用戶，當(dāng)然也有缺點(diǎn)，比如在業(yè)務(wù)模塊多的情況下加載時間會較長。

2）骨架圖加載

很多時候我們?yōu)榱藴p少用戶在頁面打開的時間差，會采用此加載方式，讓用戶先看到頁面的布局，該布局可采用帶有擦亮效果。通常該加載方式常用于模塊結(jié)構(gòu)較固定的模塊，而非整個頁面。

比如資源模塊就很適合這種方式，目前當(dāng)平臺SKU達(dá)到一定數(shù)量時，就會有機(jī)器學(xué)習(xí)算法的介入，往往這種資源接口相比于熱門推薦類的接口耗時更久。

3）下拉加載

常用于頁面內(nèi)容刷新操作，像淘寶這類超級APP當(dāng)下拉到一定高度時也會有其他隱藏的功能，比如淘寶二樓。如上圖，可明顯感覺到這個模塊還是有操作空間的，比如京東的形象好小人+宣傳語，讓用戶眼前一亮的同時，也傳遞出平臺的亮點(diǎn)。

4）上拉加載

上拉加載，常見于feed流，為實(shí)現(xiàn)沉浸式瀏覽的場景。上拉加載也可能是由于數(shù)據(jù)分頁的原因?qū)е虏捎迷摲绞?。從接口層面考慮數(shù)據(jù)量較大時，一次性拉出所有的feed信息與用戶與平臺而言都是有損失消耗的。

5）局部加載

多用于導(dǎo)航TAB切換，比如類目、品類導(dǎo)航的局部切換，從而達(dá)到不影響整體頁面的瀏覽。

2. 缺省場景

1）空數(shù)據(jù)/內(nèi)容被刪除

空數(shù)據(jù)包含初始狀態(tài)空數(shù)據(jù)和清空（刪除）狀態(tài)空數(shù)據(jù)，清空狀態(tài)的空數(shù)據(jù)比如公眾號分享出去的內(nèi)容被作者刪除后的頁面。

2）接口異常

其實(shí)在我們理解中這種情況出現(xiàn)算作服務(wù)異常，可屬于bug范疇，但實(shí)際很難規(guī)避，比如接口請求超時未返回信息。

3. 網(wǎng)絡(luò)異常

網(wǎng)絡(luò)異常，如果是多年資深的手機(jī)用戶都會遇到。

若頁面部分已呈現(xiàn)，則可考慮tips提示和彈窗提示處理；若頁面無法正常顯示，則建議考慮缺省頁。比如當(dāng)打開APP時，很多app是用native寫的，用戶正常打開是可以展示APP首頁，當(dāng)用戶發(fā)生點(diǎn)擊等行為時，則會提示網(wǎng)絡(luò)異常。純H5的話，更多的是直接考慮缺省頁。

4. 邏輯異常

1）判斷異常

跳轉(zhuǎn)的頁面有邏輯判斷，比如無訪問權(quán)限，可使用Dialog彈窗引導(dǎo)到指定頁面。

2）查詢異常

常見于用戶搜索行為和篩選行為導(dǎo)致的無結(jié)果，比如搜索框內(nèi)搜索了某關(guān)鍵字導(dǎo)致無結(jié)果，可使用插畫+文字的空態(tài)頁承接，現(xiàn)在更多大廠也會在其頁面做推薦（猜你喜歡）。

在垂直搜索領(lǐng)域，用戶輸入的信息越長尾越可能出現(xiàn)無查詢結(jié)果，所以查詢異常的空態(tài)頁還是很有必要的。

3）操作異常

某些關(guān)鍵信息未輸入、輸入錯誤、未勾選等情況都會導(dǎo)致的操作異常提醒，比如登錄頁面的手機(jī)號碼輸入位數(shù)不夠，可使用toast提示告知用戶。

二、使用建議

所有的加載與異?？梢酝ㄟ^空態(tài)頁、toast提示、tips提示、彈窗（模態(tài)、非模態(tài)）、loading來提升用戶使用過程中的體驗(yàn)，但有一個原則：能避免就避免，這并非是體驗(yàn)的最佳選擇。

異常狀態(tài)的文案可根據(jù)平臺特征進(jìn)行擬人化，比如支付寶的我也是有底線的；圖片可動圖化，動圖是僅次于視頻的表達(dá)形式，動圖盡可能做到全平臺統(tǒng)一，便于給用戶整體的認(rèn)知，如果有能力強(qiáng)烈建議結(jié)合平臺吉祥物。

合適的場景選擇合適的交互，比如登錄頁輸入異常就采用toast提示2.5s，toast文案不宜過長。2.5s是個人經(jīng)驗(yàn)之談，可根據(jù)個人自行調(diào)整。

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

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