從0到1的產品,如何一次性解決所有異常和載入狀態?

編輯導語:異常和載入狀態是產品功能流程中存在的常見狀態,那麼,如何避免繁瑣設計、提高開發效率,設計出合理的異常和載入狀態呢?本篇文章裡,作者總結了從0到1的產品、如何一次性解決異常和載入狀態的方法,一起來看一下。

從0到1的產品,如何一次性解決所有異常和載入狀態?

本篇文章的價值:看完之後可以獨立統籌整個產品的全域性設計。

做從0到1的產品時,在設計產品功能的互動流程和UI設計中,都是先做出所有正常的互動流程和介面。

但每個功能流程都存在異常和載入的狀態,實際工作中不可能每個功能的頁面都做異常和載入狀態,這樣的話,會導致設計繁瑣複雜。

通用的做法是:先將所有的正常流程和介面完成之後,再統一做全域性異常場景和載入狀態。

這些全域性異常和載入狀態通用於整個產品中,開發需要使用時直接呼叫,避免設計每個需求都做一遍,降低無用功,提升開發效率。

本文為所涉及到的異常和載入狀態內容。在實際工作中,根據自身產品,附上對應狀態出現的場景頁面即可。

本文文章大綱如下:

一、載入場景

除非是存在本地,否則其他所有介面都需要載入。載入場景,適用於幾乎所有介面。

載入的方式有很多,總結起來包含:全屏載入、佔位符載入、上拉載入、下拉載入、區域性載入等。

1. 全屏載入

這種載入比較簡單,一次性載入完所有資料後再顯示內容。但這種一次性載入完後,再展示出來,會給使用者的感覺時間較長。

適用場景:進入到下一級介面時,載入後全部展示。

從0到1的產品,如何一次性解決所有異常和載入狀態?

2. 佔位符載入

當載入的頁面內容有固定的框架時,可以先載入框架,再載入框架內的內容。

透過先載入頁面框架,設計佔位符等形式可以提前讓使用者知道整個介面的架構,提高產品的體驗感。

這種載入給使用者感知,載入穩定且速度快。

適用場景

:具備典型頁面的場景,如列表頁、詳情頁等。

從0到1的產品,如何一次性解決所有異常和載入狀態?

3. 上拉載入

使用者在瀏覽介面的過程中,對於未載入的資訊,透過手勢上拉,資訊自動載入。

需要設定預設一次性載入多少條,可根據實際情況設定,一般常見的是20條。載入過多浪費流量,載入過少,需要頻繁載入。

使用場景:對於佈局相同的佈局,可使用上拉載入資料,通常為feed流。

從0到1的產品,如何一次性解決所有異常和載入狀態?

4. 下拉載入

使用者下拉時,出現loading動畫,整個頁面重新載入重新整理。資料獲取完成後,loading動畫結束。

現在很多的產品重新設計loading載入動畫,使得載入過程更加具有情感化、人性化和品牌化。

因業務需求,有時候載入完畢後,會透過toast告知使用者更新多少條內容。

使用場景:具有重新整理當前頁面資料時使用,常用的為首頁、列表流等。

從0到1的產品,如何一次性解決所有異常和載入狀態?

5. 區域性載入

整個介面中,僅部分割槽域需要載入資料。

適用場景:切換部分割槽域內容,資料重新載入時使用。通用於二級導航切換。

從0到1的產品,如何一次性解決所有異常和載入狀態?

二、網路異常

當移動裝置網路異常時,導致無法上傳和下載資料,從而無法正常地使用產品。

網路異常存在兩種場景:

網路異常時,使用者開啟APP,這種情況APP會出現異常狀態提示給使用者,這是APP主動告知行為。

使用者點選操作時,由於網路異常,這時候透過互動反饋給使用者,這是APP被動告知行為。

1. APP主動行為

當無網路時,使用者開啟APP。透過tips提示使用者當前網路不可用。

從0到1的產品,如何一次性解決所有異常和載入狀態?

tips使用場景一般為使用者開啟後,介面停留在首頁, 且首頁以列表形式展示,這樣的話,tips才能合理地融入到介面中。

2. APP被動行為

當前無網路時,使用者點選操作時,無法正常使用產品,這時候通常有兩種處理方式。

一種是進行互動操作時,出現toast提示。

從0到1的產品,如何一次性解決所有異常和載入狀態?

另一種是進入下一級介面,以預設頁的形式提醒使用者當前網路異常。

從0到1的產品,如何一次性解決所有異常和載入狀態?

三、預設場景

預設場景包含:空資料、網路異常、伺服器異常、內容被刪除等。

1. 空資料

由於產品處於初始狀態或者因為操作刪除而清空狀態產生的空資料。

預設頁一般包含:插畫和對應的提示文字。是否提供操作按鈕,可根據具體業務情況來定。

適用場景:資料為空時出現。

從0到1的產品,如何一次性解決所有異常和載入狀態?

2. 網路異常

當移動裝置網路異常時,導致無法上傳和下載資料,從而無法正常地使用產品。這時候會出現網路異常頁面提示使用者。

預設頁包含:插畫、對應的提示文案和操作。

插畫視覺一般比較輕,僅提供裝飾作用,強化下方的文字。

對於網路異常,提供使用者去設定網路。

從0到1的產品,如何一次性解決所有異常和載入狀態?

3. 伺服器異常

伺服器異常是小機率事件,但是也會發生。

當伺服器異常時,且使用者在操作過程中,出現這種情況,一般可設計為toast提示,明確告知使用者,伺服器出現問題。

從0到1的產品,如何一次性解決所有異常和載入狀態?

當伺服器異常, 使用者進入下級頁面時,則透過預設頁面提示給使用者。

從0到1的產品,如何一次性解決所有異常和載入狀態?

4. 內容被刪除

檔案或者頁面內容被刪除,由於檔案或者頁面內容的上一級頁面有快取亦或使用者獲取連結進入,會出現文章/檔案被刪除的情況。

已被刪除的異常狀態,常見的設計是使用者進入新頁面出現對應的插畫和標題提示。

適用場景:下級頁面內容被刪除時。

從0到1的產品,如何一次性解決所有異常和載入狀態?

四、操作異常

任何操作行為的互動介面都伴隨著操作失敗的可能性。當用戶操作失敗時,且操作在當前頁面完成時,透過toast告知使用者操作失敗及操作失敗的原因。

從0到1的產品,如何一次性解決所有異常和載入狀態?

以上是異常場景和載入狀態的全域性內容。

做0到1的產品的設計師,在設計全域性異常和載入時,需要將以上4大類按照自己產品的實際情況,逐條梳理,即可適用於整個產品。

注:部分素材使用光音移動設計規範。素材由@MiroCat和@三牛設計。

#專欄作家#

UX,人人都是產品經理專欄作家。前美團點評高階互動設計師。微信公眾號:Echo的設計筆記,歡迎關注

本文原創釋出於人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash,基於 CC0 協議

頂部