給予用戶一份貼心|（數十份案例）APP異常界面與Toast產品設計落地

異常界面與Toast

提及異常界面，這裏不禁想起在平常生活中咱們所使用的APP帶來的各類阻礙狀況下的一些反饋提示。這裏要說明異常界面裏面可能會包含Toast。

但從Android和IOS的人機交互規範角度，國內的APP包括大廠（某寶）都會將Android和IOS進行統一，這是在有限的人力和開發資源上有限，交互設計師或產品經理只須要出一套說明文檔，天然控件會出如今IOS中出現ANDROID中特有的提醒機制，但從產品落地來講，只要不影響用戶實際操做體驗，固然就沒有問題。

異常界面的反饋提示是須要文案和BUTTON的合理搭配，可以起到下降用戶心理對產品的抵觸或失落，甚至可以有效的引導用戶進入某個模塊或功能。起到流量循環不停的節奏感。

請點擊此處輸入圖片描述

請點擊此處輸入圖片描述

關於網絡連接失敗，提醒用戶從新連接，並給予用戶指導進入網絡設置。給予用戶解決當前頁面問題的方法和指導。相比什麼都沒有，或者給用戶報錯90001錯誤，請重試。是否是會好的更多？

01異常頁面與異常狀況

頁面異常在移動端總共有如下分類：

• 訪問頁面不存在的頁面

• 操做失敗的頁面

• 拉取數據失敗的頁面

異常狀況分爲：

• 斷網狀態

• 服務器異常

• 操做失敗

• 權限限制

• 網絡切換（WIFI—移動數據—飛行模式）

• 字符限制

• 反饋提示

羅列出了以上的頁面異常和異常狀況以後，那麼本身在落地產品設計中，如何去保證本身的異常頁面發生時，可以正確的去給予用戶一份貼心？

所以，我收集了來自大廠的一些產品截圖，或許會幫助你可以落地相應的頁面。注意其文案和ICON以及BUTTON的結合，提升轉化。

頁面異常：

案例1

請點擊此處輸入圖片描述

案例2：

請點擊此處輸入圖片描述

以上頁面都有當前頁面的錯誤狀況說明，以及當前頁面的走向按鈕。

原型設計上：

請點擊此處輸入圖片描述

操做失敗頁面：

案例3

請點擊此處輸入圖片描述

案例4

請點擊此處輸入圖片描述

以上案例有區分單個異常和異常說明的狀況，其中在美的智能APP上咱們能夠看到其異常不只有提示，而且給予TOAST顯示當前的錯誤緣由，能夠檢查理由。方便用戶去恢復當前出現的錯誤

原型設計上：

請點擊此處輸入圖片描述

拉取數據失敗頁面

案例1：

案例2：

以上分別是用兩種方式，第一個是以頁面文案提示；第二種是以TOAST來做爲表示。最終須要說明該頁面的錯誤緣由，而且須要對用戶的心情進行調理

斷網狀態：

案例1

案例2

2個案例說明，在斷網狀況下不只僅須要給予用戶當前網絡提示，還須要給予用戶一個操做入口，可以給予去修復當前狀態的行爲操做。

原型設計：

請點擊此處輸入圖片描述

服務器異常：

案例1：

請點擊此處輸入圖片描述

案例2：

請點擊此處輸入圖片描述

一樣的，服務器沒有相應咱們須要在文案中提示當前的狀態，而且給予用戶當前操做的權限。

原型設計：

請點擊此處輸入圖片描述

操做失敗：

這裏提到操做失敗，首先須要梳理清楚當前用戶的操做場景，根據產品不一樣，其不一樣產品的功能點也不一樣，那麼用戶操做也不一樣。這裏我梳理了如下用戶操做行爲：

• 發送操做

• 評論操做

• 點贊操做

• 分享操做

• 收藏操做

• 拍照

• 錄像

• 剪輯

• ......

因操做的場景不一樣，產品落地中使用TOAST或頁面提醒也不一樣。這裏舉例爲：

案例1：

案例2：

以上操做失敗有操做失敗提示，提高當前處於XX操做，而且可以給予用戶再次嘗試的入口。

權限限制：

案例1：

案例2：

權限限制基於在移動端中，須要給予用戶說明的是當前權限的文案、操做選擇

這裏都是以TOAST或DIALOG進行提醒。不少會直接調用系統層的部件進行設計

原型設計：

網絡切換：

案例1

網絡切換這裏須要說明以TOAST或DIALOG進行提示，在移動端中給予用戶信息顯示，讓用戶知道當前的網絡切換狀態在應用中已經識別，尤爲是在須要耗流量的場景下，提醒用戶顯得尤其重要（直播、短視頻等）

原型設計：

字符限制：

案例1

案例2

限制的提示須要區分場景，是發送場景、仍是編輯消息中的場景，若是是在內容編輯中，則在輸入中進行提示。

原型設計：

反饋提示：

案例1：

案例2：

案例3：

請點擊此處輸入圖片描述

案例4：

請點擊此處輸入圖片描述

以上反饋爲用戶操做成功提高、操做提示反饋，但反饋提示每每是爲了讓知足人類的交互習慣，人與人之間的交流，最不能忍受的是：和別人說話，可是別人卻沒有一點反映，好像視而不見。這些提示都是在1秒左右會小時，短暫的出如今畫面上。

原型設計：

請點擊此處輸入圖片描述

最後要說的是，反饋須要避免過渡反饋、不要打斷用戶的意識流、避免遮擋用可能回去查看或目前操做的對象和內容。

02

貼心在文案

拿了幾十份案例，梳理了異常界面的產品設計，但要想給予用戶一份貼心，其最重要的是文案的結合。經過產品形態+內容的方式，達到轉化、促活的目的。

首先咱們要清楚用戶在移動端的操做狀況，視頻》動態》圖》文字

用戶在瀏覽新聞、文章內容都是以掃的速度來進行留來，所以一份好的文案必需要簡短！

簡短

寫好文案後，儘可能的縮減。根據產品落地的形態，若是是TOAST那麼文案儘量在10個字或15個字符之內。

區分字體

根據不一樣的內容重要，進行區字體。好比以標題和正文來區分

請點擊此處輸入圖片描述

給詞彙排序

設計文案時，思考將最重要的詞語呈如今屏幕上，以及不重要的內容看起來也不重要。

案例1：

請點擊此處輸入圖片描述

你以爲那個更好通俗易懂？

分部展現文案

這裏特別適用於用戶引導文案，每每一個頁面不能把所有文案寫上去，這時候能夠根據操做步驟或引導用戶的操做步驟將文案分開來。

請點擊此處輸入圖片描述

利用高保真

這個是爲了解決WORD或TXT文檔中，文案的顯示效果沒法預測，致使文案可能太長或過短，達不到咱們想要的效果。

所以利用高保真的原型設計，能夠更快的落地文案。

案例1：

2017年，讓咱們繼續前進！

與KEVIN一塊兒在產品中學習交流QQ羣：257051609

個人我的微信，歡迎添加請修改備註 

574319420 名稱—地區——職位