本文給大家分享在APP產品設計中的六種狀態，這幾種狀態為大部分APP產品在設計過程中，都需要考慮到的通用性全局狀態。

在進行一款新的APP產品設計時，很多新人會遺漏一些基礎狀態的設計，又或者會在不同頁面設計時進行重復設計，增加自身工作量。

而以下幾種狀態為大部分APP產品在設計過程中，都需要考慮到的通用性全局狀態，在進行不同頁面設計時可直接復用，減少重復工作，希望能幫到大家。

一、空加載

空加載屬于數據從服務端拉取前的一個中間狀態，主要告知用戶數據處于加載狀態中請耐心等待。由于使用場景和觸發邏輯存在一定差異，一般需要區分原生頁、模塊和webview頁面進行分別設計。

1. 原生頁

觸發場景：頁面通過原生開發封裝到APP中，但用戶在進入該頁面時本地無緩存數據，數據需要從服務端拉取并載入。

設計參考：

1. 通過漸變式圓圈旋轉動畫進行引導，同時文字同時頁面加載中；
2. 根據頁面加載完成后的最終形態，使用線條描繪出相應的輪廓進行動畫展示。

以上兩種設計都比較常見，但第1種設計的適用性相對更普遍些，而第2種需要根據目標頁進行設計，當不同目標頁差異較大時難以共用。

當然，無論選擇哪種設計方式，都需要設定一個最長響應上限（一般10s內為宜），當響應時間到達上限后還是沒有任何數據返回，則變更頁面狀態顯示失敗提示。同時，對于斷網等可在本地進行判斷的失敗情況可考慮設定為即時響應。

2. 模塊

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

設計參考：類似于原生頁的漸變式圓圈旋轉動畫進行引導，但由于屬于小模塊狀態而非頁面狀態，故在設計時會盡量精簡化，響應時間上限同上。

3. webview

觸發場景：通過APP內嵌的webview瀏覽器訪問非原生的web頁時觸發。

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

二、網絡異常

網絡異常狀態的處理方式，也可以分成整個頁面網絡異常和模塊網絡異常，下面重點說明頁面網絡異常的觸發和設計，對于模塊網絡異常的處理，可直接參考上文模塊空加載的方法。

觸發場景：根據是否主動進行數據加載來判斷，當加載進入該頁時，本地判斷網絡無法連接，則觸發該狀態。而在沒有數據加載時，不會觸發該狀態。

PS：對于使用長鏈接進行實時連接和數據傳輸的APP，當網絡中斷時，即便用戶沒有主動加載數據，也可以在頂部彈出長條進行提示（具體可參考微信）。

設計參考：該狀態下應該提供“重試”操作來引導用戶重試，在說明文案也可適當增加委屈類表情，引導用戶進行二次操作。

三、加載失敗

加載失敗類似于網絡異常，但出現的可能性會更少些，同樣可分為頁面和模塊加載失敗，此處重點說明頁面加載失敗。

觸發場景：一般在服務器異?；蚓W絡極端不穩定等情況下才會觸發，即當頁面從服務端拉取數據時，網絡可以正常連接，但在達到響應上限后，還是無法從服務端拉取到初始數據載入本地，此時就會觸發該狀態。

設計參考：文案說明數據加載失敗，并通過“重試”操作讓用戶重試。另外，為了方便后續用戶反饋和開發定位具體原因，需要對失敗情況設定對應的“錯誤碼”并在頁面顯示。

四、數據為空

頁面數據為空和模塊數據為空類似，區別在于：頁面數據為空的引導操作，多為引導到其他頁面去觸發產生內容，而模塊數據為空，則引導用戶在當前模塊輸出內容（設計樣式需參考對應的內容場景，具體可參考微博、貼吧的評論模塊），此處重點說明頁面數據為空。

觸發場景：頁面無任何相關數據時觸發該狀態。

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

五、上拉加載

觸發場景：頁面和模塊的上拉加載場景類似，都是對同一數據源的數據進行分頁處理，從而減少用戶在數據加載時的等待時間。當前一步已加載數據已瀏覽完成，用戶需要繼續瀏覽更多同源數據時觸發該狀態。

設計參考：

1. 當已加載數據的倒數第2條出現在屏幕區域時，觸發上拉加載狀態，同時顯示加載中；
2. 當服務端已告知沒有更多數據時，在底部顯示對應提示；
3. 由于網絡或服務器異常等原因導致數據返回失敗，則在底部提示告知加載失敗，同時提供“重試”按鈕方便用戶進行重試。

六、下拉刷新

觸發場景：用于頁面數據會根據時間和狀態進行變化的動態頁面，用戶主動對頁面進行下拉操作時觸發。

PS：使用長鏈接對數據進行實時更新的頁面不需要用戶主動觸發刷新操作，故不在此范疇，具體可參考微信、釘釘的聊天會話等頁面。

設計參考：

1. 用戶下拉頁面時，在頭部顯示下拉引導，當下拉區間未達到可刷新距離時繼續引導下拉；
2. 當下拉區間達到可刷新距離，則引導用戶松開刷新；
3. 松開后頁面收回到最小可刷新距離處后進行刷新，同時顯示加載中（響應上限參考空加載進行設計），若加載成功則更新頁面內容，若加載失敗則toast提升對應的失敗說明。為增加響應的趣味性，可在icon上融合APP吉祥物進行設計。

作者：瞻星同學（微信公眾號：產品研究社）

本文由 @瞻星同學 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議