本文給大家分享在APP產(chǎn)品設(shè)計(jì)中的六種狀態(tài)，這幾種狀態(tài)為大部分APP產(chǎn)品在設(shè)計(jì)過程中，都需要考慮到的通用性全局狀態(tài)。

在進(jìn)行一款新的APP產(chǎn)品設(shè)計(jì)時(shí)，很多新人會(huì)遺漏一些基礎(chǔ)狀態(tài)的設(shè)計(jì)，又或者會(huì)在不同頁面設(shè)計(jì)時(shí)進(jìn)行重復(fù)設(shè)計(jì)，增加自身工作量。

而以下幾種狀態(tài)為大部分APP產(chǎn)品在設(shè)計(jì)過程中，都需要考慮到的通用性全局狀態(tài)，在進(jìn)行不同頁面設(shè)計(jì)時(shí)可直接復(fù)用，減少重復(fù)工作，希望能幫到大家。

一、空加載

空加載屬于數(shù)據(jù)從服務(wù)端拉取前的一個(gè)中間狀態(tài)，主要告知用戶數(shù)據(jù)處于加載狀態(tài)中請耐心等待。由于使用場景和觸發(fā)邏輯存在一定差異，一般需要區(qū)分原生頁、模塊和webview頁面進(jìn)行分別設(shè)計(jì)。

1. 原生頁

觸發(fā)場景：頁面通過原生開發(fā)封裝到APP中，但用戶在進(jìn)入該頁面時(shí)本地?zé)o緩存數(shù)據(jù)，數(shù)據(jù)需要從服務(wù)端拉取并載入。

設(shè)計(jì)參考：

1. 通過漸變式圓圈旋轉(zhuǎn)動(dòng)畫進(jìn)行引導(dǎo)，同時(shí)文字同時(shí)頁面加載中；
2. 根據(jù)頁面加載完成后的最終形態(tài)，使用線條描繪出相應(yīng)的輪廓進(jìn)行動(dòng)畫展示。

以上兩種設(shè)計(jì)都比較常見，但第1種設(shè)計(jì)的適用性相對(duì)更普遍些，而第2種需要根據(jù)目標(biāo)頁進(jìn)行設(shè)計(jì)，當(dāng)不同目標(biāo)頁差異較大時(shí)難以共用。

當(dāng)然，無論選擇哪種設(shè)計(jì)方式，都需要設(shè)定一個(gè)最長響應(yīng)上限（一般10s內(nèi)為宜），當(dāng)響應(yīng)時(shí)間到達(dá)上限后還是沒有任何數(shù)據(jù)返回，則變更頁面狀態(tài)顯示失敗提示。同時(shí)，對(duì)于斷網(wǎng)等可在本地進(jìn)行判斷的失敗情況可考慮設(shè)定為即時(shí)響應(yīng)。

2. 模塊

觸發(fā)場景：一般用于頁面內(nèi)存在多個(gè)模塊，其中部分模塊的數(shù)據(jù)可直接從上一級(jí)頁面繼承，而另外的模塊數(shù)據(jù)在訪問該頁時(shí)，需要從服務(wù)端拉取后載入等情況。

設(shè)計(jì)參考：類似于原生頁的漸變式圓圈旋轉(zhuǎn)動(dòng)畫進(jìn)行引導(dǎo)，但由于屬于小模塊狀態(tài)而非頁面狀態(tài)，故在設(shè)計(jì)時(shí)會(huì)盡量精簡化，響應(yīng)時(shí)間上限同上。

3. webview

觸發(fā)場景：通過APP內(nèi)嵌的webview瀏覽器訪問非原生的web頁時(shí)觸發(fā)。

設(shè)計(jì)參考：由于web頁的打開渠道較多，并支持外部傳播，故web頁開發(fā)方都會(huì)設(shè)計(jì)有自己的加載方式。所以，webview瀏覽器為了兼容各類web頁的空加載，一般會(huì)在頂欄下方顯示進(jìn)度條來表示對(duì)應(yīng)的加載狀態(tài)，響應(yīng)時(shí)間上限同上。

二、網(wǎng)絡(luò)異常

網(wǎng)絡(luò)異常狀態(tài)的處理方式，也可以分成整個(gè)頁面網(wǎng)絡(luò)異常和模塊網(wǎng)絡(luò)異常，下面重點(diǎn)說明頁面網(wǎng)絡(luò)異常的觸發(fā)和設(shè)計(jì)，對(duì)于模塊網(wǎng)絡(luò)異常的處理，可直接參考上文模塊空加載的方法。

觸發(fā)場景：根據(jù)是否主動(dòng)進(jìn)行數(shù)據(jù)加載來判斷，當(dāng)加載進(jìn)入該頁時(shí)，本地判斷網(wǎng)絡(luò)無法連接，則觸發(fā)該狀態(tài)。而在沒有數(shù)據(jù)加載時(shí)，不會(huì)觸發(fā)該狀態(tài)。

PS：對(duì)于使用長鏈接進(jìn)行實(shí)時(shí)連接和數(shù)據(jù)傳輸?shù)腁PP，當(dāng)網(wǎng)絡(luò)中斷時(shí)，即便用戶沒有主動(dòng)加載數(shù)據(jù)，也可以在頂部彈出長條進(jìn)行提示（具體可參考微信）。

設(shè)計(jì)參考：該狀態(tài)下應(yīng)該提供“重試”操作來引導(dǎo)用戶重試，在說明文案也可適當(dāng)增加委屈類表情，引導(dǎo)用戶進(jìn)行二次操作。

三、加載失敗

加載失敗類似于網(wǎng)絡(luò)異常，但出現(xiàn)的可能性會(huì)更少些，同樣可分為頁面和模塊加載失敗，此處重點(diǎn)說明頁面加載失敗。

觸發(fā)場景：一般在服務(wù)器異?；蚓W(wǎng)絡(luò)極端不穩(wěn)定等情況下才會(huì)觸發(fā)，即當(dāng)頁面從服務(wù)端拉取數(shù)據(jù)時(shí)，網(wǎng)絡(luò)可以正常連接，但在達(dá)到響應(yīng)上限后，還是無法從服務(wù)端拉取到初始數(shù)據(jù)載入本地，此時(shí)就會(huì)觸發(fā)該狀態(tài)。

設(shè)計(jì)參考：文案說明數(shù)據(jù)加載失敗，并通過“重試”操作讓用戶重試。另外，為了方便后續(xù)用戶反饋和開發(fā)定位具體原因，需要對(duì)失敗情況設(shè)定對(duì)應(yīng)的“錯(cuò)誤碼”并在頁面顯示。

四、數(shù)據(jù)為空

頁面數(shù)據(jù)為空和模塊數(shù)據(jù)為空類似，區(qū)別在于：頁面數(shù)據(jù)為空的引導(dǎo)操作，多為引導(dǎo)到其他頁面去觸發(fā)產(chǎn)生內(nèi)容，而模塊數(shù)據(jù)為空，則引導(dǎo)用戶在當(dāng)前模塊輸出內(nèi)容（設(shè)計(jì)樣式需參考對(duì)應(yīng)的內(nèi)容場景，具體可參考微博、貼吧的評(píng)論模塊），此處重點(diǎn)說明頁面數(shù)據(jù)為空。

觸發(fā)場景：頁面無任何相關(guān)數(shù)據(jù)時(shí)觸發(fā)該狀態(tài)。

設(shè)計(jì)參考：大多使用吉祥物+文案說明的顯示方式，如需要該狀態(tài)的適用性更普遍，則文案上應(yīng)使用“空、無、沒有”等寬泛詞；而如果需要更多突出個(gè)性化和友好度，則需要針對(duì)不同頁面場景單獨(dú)設(shè)計(jì)空狀態(tài)文案。另外，如頁面的數(shù)據(jù)是可以由用戶主動(dòng)觸發(fā)來獲取，則可提供引導(dǎo)按鈕將用戶引導(dǎo)到對(duì)于的觸發(fā)頁進(jìn)行操作。

五、上拉加載

觸發(fā)場景：頁面和模塊的上拉加載場景類似，都是對(duì)同一數(shù)據(jù)源的數(shù)據(jù)進(jìn)行分頁處理，從而減少用戶在數(shù)據(jù)加載時(shí)的等待時(shí)間。當(dāng)前一步已加載數(shù)據(jù)已瀏覽完成，用戶需要繼續(xù)瀏覽更多同源數(shù)據(jù)時(shí)觸發(fā)該狀態(tài)。

設(shè)計(jì)參考：

1. 當(dāng)已加載數(shù)據(jù)的倒數(shù)第2條出現(xiàn)在屏幕區(qū)域時(shí)，觸發(fā)上拉加載狀態(tài)，同時(shí)顯示加載中；
2. 當(dāng)服務(wù)端已告知沒有更多數(shù)據(jù)時(shí)，在底部顯示對(duì)應(yīng)提示；
3. 由于網(wǎng)絡(luò)或服務(wù)器異常等原因?qū)е聰?shù)據(jù)返回失敗，則在底部提示告知加載失敗，同時(shí)提供“重試”按鈕方便用戶進(jìn)行重試。

六、下拉刷新

觸發(fā)場景：用于頁面數(shù)據(jù)會(huì)根據(jù)時(shí)間和狀態(tài)進(jìn)行變化的動(dòng)態(tài)頁面，用戶主動(dòng)對(duì)頁面進(jìn)行下拉操作時(shí)觸發(fā)。

PS：使用長鏈接對(duì)數(shù)據(jù)進(jìn)行實(shí)時(shí)更新的頁面不需要用戶主動(dòng)觸發(fā)刷新操作，故不在此范疇，具體可參考微信、釘釘?shù)牧奶鞎?huì)話等頁面。

設(shè)計(jì)參考：

1. 用戶下拉頁面時(shí)，在頭部顯示下拉引導(dǎo)，當(dāng)下拉區(qū)間未達(dá)到可刷新距離時(shí)繼續(xù)引導(dǎo)下拉；
2. 當(dāng)下拉區(qū)間達(dá)到可刷新距離，則引導(dǎo)用戶松開刷新；
3. 松開后頁面收回到最小可刷新距離處后進(jìn)行刷新，同時(shí)顯示加載中（響應(yīng)上限參考空加載進(jìn)行設(shè)計(jì)），若加載成功則更新頁面內(nèi)容，若加載失敗則toast提升對(duì)應(yīng)的失敗說明。為增加響應(yīng)的趣味性，可在icon上融合APP吉祥物進(jìn)行設(shè)計(jì)。

作者：瞻星同學(xué)（微信公眾號(hào)：產(chǎn)品研究社）

本文由 @瞻星同學(xué) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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