給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

Kevin改變世界的點滴發表於2019-01-31


異常介面與Toast

說起異常介面,這裡不由想起在日常生活中我們所使用的APP帶來的各種阻礙情況下的一些反饋提示。這裡要說明異常介面裡面可能會包含Toast。

但從Android和IOS的人機互動規範角度,國內的APP包括大廠(某寶)都會將Android和IOS進行統一,這是在有限的人力和開發資源上有限,互動設計師或產品經理只需要出一套說明文件,自然控制元件會出現在IOS中出現ANDROID中特有的提醒機制,但從產品落地來說,只要不影響使用者實際操作體驗,當然就沒有問題。

異常介面的反饋提示是需要文案和BUTTON的合理搭配,能夠起到降低使用者心理對產品的牴觸或失落,甚至能夠有效的引導使用者進入某個模組或功能。起到流量迴圈不停的節奏感。

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

請點選此處輸入圖片描述

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

請點選此處輸入圖片描述

關於網路連結失敗,提醒使用者重新連結,並給予使用者指導進入網路設定。給予使用者解決當前頁面問題的方法和指導。相比什麼都沒有,或者給使用者報錯90001錯誤,請重試。是不是會好的更多?

01異常頁面與異常情況

頁面異常在移動端總共有以下分類:

  • 訪問頁面不存在的頁面

  • 操作失敗的頁面

  • 拉取資料失敗的頁面

異常情況分為:

  • 斷網狀態

  • 伺服器異常

  • 操作失敗

  • 許可權限制

  • 網路切換(WIFI—移動資料—飛航模式)

  • 字元限制

  • 反饋提示

羅列出了以上的頁面異常和異常情況之後,那麼自己在落地產品設計中,如何去保證自己的異常頁面發生時,能夠正確的去給予使用者一份貼心?

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

頁面異常:

案例1

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

請點選此處輸入圖片描述

案例2:

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

請點選此處輸入圖片描述

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

原型設計上:

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

請點選此處輸入圖片描述

操作失敗頁面:

案例3

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

請點選此處輸入圖片描述

案例4

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

請點選此處輸入圖片描述

以上案例有區分單個異常和異常說明的情況,其中在美的智慧APP上我們可以看到其異常不僅有提示,並且給予TOAST顯示當前的錯誤原因,可以檢查理由。方便使用者去恢復當前出現的錯誤

原型設計上:

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

請點選此處輸入圖片描述

拉取資料失敗頁面

案例1:

案例2:

以上分別是用兩種方式,第一個是以頁面文案提示;第二種是以TOAST來作為表示。最終需要說明該頁面的錯誤原因,並且需要對使用者的心情進行調理

斷網狀態:

案例1

案例2

2個案例說明,在斷網情況下不僅僅需要給予使用者當前網路提示,還需要給予使用者一個操作入口,能夠給予去修復當前狀態的行為操作。

原型設計:

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

請點選此處輸入圖片描述

伺服器異常:

案例1:

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

請點選此處輸入圖片描述

案例2:

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

請點選此處輸入圖片描述

同樣的,伺服器沒有相應我們需要在文案中提示當前的狀態,並且給予使用者當前操作的許可權。

原型設計:

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

請點選此處輸入圖片描述

操作失敗:

這裡提到操作失敗,首先需要梳理清楚當前使用者的操作場景,根據產品不同,其不同產品的功能點也不同,那麼使用者操作也不同。這裡我梳理了以下使用者操作行為:

  • 傳送操作

  • 評論操作

  • 點贊操作

  • 分享操作

  • 收藏操作

  • 拍照

  • 錄影

  • 剪輯

  • ......

因操作的場景不同,產品落地中使用TOAST或頁面提醒也不同。這裡舉例為:

案例1:

案例2:

以上操作失敗有操作失敗提示,提升當前處於XX操作,並且能夠給予使用者再次嘗試的入口。

許可權限制:

案例1:

案例2:

許可權限制基於在移動端中,需要給予使用者說明的是當前許可權的文案、操作選擇

這裡都是以TOAST或DIALOG進行提醒。很多會直接呼叫系統層的部件進行設計

原型設計:

網路切換:

案例1

網路切換這裡需要說明以TOAST或DIALOG進行提示,在移動端中給予使用者資訊顯示,讓使用者知道當前的網路切換狀態在應用中已經識別,尤其是在需要耗流量的場景下,提醒使用者顯得尤為重要(直播、短視訊等)

原型設計:

字元限制:

案例1

案例2

限制的提示需要區分場景,是傳送場景、還是編輯訊息中的場景,如果是在內容編輯中,則在輸入中進行提示。

原型設計:

反饋提示:

案例1:

案例2:

案例3:

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

請點選此處輸入圖片描述

案例4:

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

請點選此處輸入圖片描述

以上反饋為使用者操作成功提升、操作提示反饋,但反饋提示往往是為了讓滿足人類的互動習慣,人與人之間的交流,最不能忍受的是:和別人說話,但是別人卻沒有一點反映,好像視而不見。這些提示都是在1秒左右會小時,短暫的出現在畫面上。

原型設計:

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

請點選此處輸入圖片描述

最後要說的是,反饋需要避免過渡反饋、不要打斷使用者的意識流、避免遮擋用可能回去檢視或目前操作的物件和內容。

02

貼心在文案

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

首先我們要清楚使用者在移動端的操作情況,視訊》動態》圖》文字

使用者在瀏覽新聞、文章內容都是以掃的速度來進行留來,因此一份好的文案必須要簡短!

簡短

寫好文案後,儘量的縮減。根據產品落地的形態,如果是TOAST那麼文案儘可能在10個字或15個字元以內。

區分字型

根據不同的內容重要,進行區字型。比如以標題和正文來區分

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

請點選此處輸入圖片描述

給詞彙排序

設計文案時,思考將最重要的詞語呈現在螢幕上,以及不重要的內容看起來也不重要。

案例1:

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

請點選此處輸入圖片描述

你覺得那個更好通俗易懂?

分部展示文案

這裡特別適用於使用者引導文案,往往一個頁面不能把全部文案寫上去,這時候可以根據操作步驟或引導使用者的操作步驟將文案分開來。

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地

請點選此處輸入圖片描述

利用高保真

這個是為了解決WORD或TXT文件中,文案的顯示效果無法預測,導致文案可能太長或太短,達不到我們想要的效果。

因此利用高保真的原型設計,可以更快的落地文案。

案例1:

給予使用者一份貼心|(數十份案例)APP異常介面與Toast產品設計落地



2017年,讓我們繼續前進!


與KEVIN一起在產品中學習交流QQ群:257051609


我的個人微信,歡迎新增請修改備註 

574319420 名稱—地區——職位





相關文章