APP產品設計中常見的全局狀態

來自專欄產品研究社

在進行一款新的APP產品設計時，很多新人會遺漏一些基礎狀態的設計，又或者會在不同頁面設計時進行重複設計，增加自身工作量。而以下幾種狀態為大部分APP產品在設計過程中都需要考慮到的通用性全局狀態，在進行不同頁面設計時可直接復用，減少重複工作，希望能幫到大家。

一、空載入

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

1. 原生頁

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

設計參考：1）通過漸變式圓圈旋轉動畫進行引導，同時文字同時頁面載入中；2）根據頁面載入完成後的最終形態，使用線條描繪出相應的輪廓進行動畫展示。以上兩種設計都比較常見，但第1種設計的適用性相對更普遍些，而第2種需要根據目標頁進行設計，當不同目標頁差異較大時難以共用。

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

2. 模塊

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

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

3. webview

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

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

二、網路異常

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

觸發場景：根據是否主動進行數據載入來判斷，當載入進入該頁時，本地判斷網路無法連接，則觸發該狀態；而在沒有數據載入時不會觸發該狀態。PS：對於使用長鏈接進行實時連接和數據傳輸的APP，當網路中斷時，即便用戶沒有主動載入數據，也可以在頂部彈出長條進行提示（具體可參考微信）。

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

三、載入失敗

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

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

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

四、數據為空

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

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

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

五、上拉載入

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

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

六、下拉刷新

觸發場景：用於頁面數據會根據時間和狀態進行變化的動態頁面，用戶主動對頁面進行下拉操作時觸發。PS：使用長鏈接對數據進行實時更新的頁面不需要用戶主動觸發刷新操作，故不在此範疇，具體可參考微信、釘釘的聊天會話等頁面。

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

最後，你還見過哪些常用的全局狀態嗎？歡迎留言分享~