產(chǎn)品設(shè)計(jì)中,當(dāng)網(wǎng)絡(luò)斷掉時(shí)APP如何應(yīng)對(duì)?

4 評(píng)論 13100 瀏覽 96 收藏 8 分鐘

如今移動(dòng)互聯(lián)網(wǎng)已經(jīng)深入到生活的各個(gè)層面,現(xiàn)在的移動(dòng)應(yīng)用已經(jīng)無(wú)法脫離網(wǎng)絡(luò)而獨(dú)立存在。本文主要就是討論應(yīng)用在網(wǎng)絡(luò)情況不佳時(shí)的處理方式,希望和大家多討論。

最初,應(yīng)用的使用不需要網(wǎng)絡(luò)。我們下載一個(gè)應(yīng)用到手機(jī)中,安裝包包含了所有的內(nèi)容,比如游戲、離線(xiàn)地圖等工具。后來(lái)隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展,app功能增加必須借助網(wǎng)絡(luò)來(lái)完成相應(yīng)功能,所以當(dāng)今大多數(shù)應(yīng)用在無(wú)網(wǎng)絡(luò)的前提下是不能夠運(yùn)行使用的。

本文主要討論app的斷網(wǎng)提示界面,現(xiàn)在市場(chǎng)上通用的斷網(wǎng)提示有三種——彈出框提示、背景圖刷新提示、頂部提示,這三種斷網(wǎng)處理方法分為2類(lèi)。一個(gè)是斷網(wǎng)提示類(lèi)型,如彈出框提示;另一個(gè)是斷網(wǎng)狀態(tài)類(lèi)型,如背景刷新提示、頂部提示。當(dāng)然后兩種也同樣起到了斷網(wǎng)的效果,但是傳達(dá)的意義有一定區(qū)別。這三種斷網(wǎng)處理方法也經(jīng)?;旌鲜褂?,達(dá)到產(chǎn)品想要傳達(dá)的效果。

彈出框提示

這類(lèi)斷網(wǎng)提示是最常見(jiàn)的,這種處理方法屬于一個(gè)過(guò)程提示,即提示用戶(hù)現(xiàn)在網(wǎng)斷了。它更突出斷網(wǎng)這樣一個(gè)動(dòng)作而不是狀態(tài)?,F(xiàn)在大多數(shù)的應(yīng)用也都使用此類(lèi)斷網(wǎng)提示。

1

這種提示的特點(diǎn)是簡(jiǎn)短、突出具有很強(qiáng)的提示性,此類(lèi)處理方法一般可以應(yīng)用于非IM類(lèi)別的應(yīng)用中,彈出提示框的時(shí)間點(diǎn)一般為向后臺(tái)請(qǐng)求時(shí)發(fā)生。這類(lèi)處理方式最大的特點(diǎn)是具有極強(qiáng)的突出性,可以馬上引起用戶(hù)的注意。但是該類(lèi)提示也具有一些缺點(diǎn)。首先,從心理學(xué)上講,人在使用工具(app)中具有一定連續(xù)性,即在出現(xiàn)任何中斷時(shí)人都會(huì)感到不安。比如我們正在進(jìn)行的使用一個(gè)應(yīng)用時(shí)突然黑屏,用戶(hù)肯定會(huì)對(duì)此感到非常詫異于驚恐。其次,傳達(dá)的意義也有限。因?yàn)榇笮畔⒘看筇崾颈厝恍枰^長(zhǎng)時(shí)間,越會(huì)給用戶(hù)以不安的感覺(jué)。

設(shè)計(jì)上為了將缺陷降低到最小也做出了一些改進(jìn):

  • 提示框較小
  • 提示語(yǔ)較短且清晰
  • 彈出時(shí)間短

在足夠表達(dá)提示的前提下盡可能的減少提示框面積,可以減少用戶(hù)的不安感,是手機(jī)畫(huà)面更可能多的保留之前用戶(hù)的使用狀態(tài),這也符合iOS人機(jī)交互原則的順從原則。提示框的時(shí)間越長(zhǎng)使人的不安感受越發(fā)強(qiáng)烈,所以注定傳達(dá)的內(nèi)容需要極為精煉的語(yǔ)言來(lái)進(jìn)行描述。大家可以參考上面幾張圖,無(wú)論從文案與彈框大小,都是極為精簡(jiǎn)的。

背景圖提示

斷網(wǎng)的處理方法中,此類(lèi)方法也較為常用的,表現(xiàn)一個(gè)斷網(wǎng)狀態(tài)。而且通常與彈出框提示混合使用。從使用場(chǎng)景而言,與彈出框提示不同的是,彈出框提示是一個(gè)過(guò)程,他告訴用戶(hù)現(xiàn)在出現(xiàn)了一個(gè)斷網(wǎng)的動(dòng)作;而背景圖的提示方式表明目前處于斷網(wǎng)的一個(gè)狀態(tài)。一般用于非IM體系的應(yīng)用中,特別是雜化H5頁(yè)面的應(yīng)用。

2

這種方式提供了一個(gè)斷網(wǎng)的狀態(tài),往往和彈出框提示搭配使用。在做出一個(gè)請(qǐng)求的同時(shí),彈出提示框,提示用戶(hù)沒(méi)有網(wǎng)絡(luò),同時(shí)展示背景圖提示用戶(hù)刷新。此種模式我個(gè)人認(rèn)為是最佳的,即提示了用戶(hù)出現(xiàn)了斷網(wǎng)的動(dòng)作,也可以標(biāo)識(shí)出目前用戶(hù)處于什么狀態(tài)。而且一個(gè)優(yōu)秀的背景圖也可以使應(yīng)用增加趣味性,也符合iOS人機(jī)交互原則中的深度原則。

背景圖提示從場(chǎng)景上來(lái)講更加使用與頁(yè)面類(lèi)的應(yīng)用,說(shuō)白了就是一個(gè)歡樂(lè)的404頁(yè)面。這里值得再次指出一點(diǎn),一般的產(chǎn)品都擁有緩存設(shè)計(jì),對(duì)于斷網(wǎng)的情況首先應(yīng)該調(diào)取緩存內(nèi)容,這樣可以保證用戶(hù)的連續(xù)使用。當(dāng)頁(yè)面沒(méi)有緩存時(shí),再調(diào)取背景圖提示是最優(yōu)的處理方法。當(dāng)然全網(wǎng)頁(yè)app更適應(yīng)于這個(gè)方法。

頂部提示

微信與qq的用戶(hù)占有率如此之大,所以用戶(hù)自然對(duì)頂部提示未連接這種處理方式很熟悉。其實(shí)這是一個(gè)最佳的處理方式,即用較輕的方式提示了一個(gè)狀態(tài)又不過(guò)分影響用戶(hù)使用的場(chǎng)景與頁(yè)面,而且提示了現(xiàn)在網(wǎng)絡(luò)的狀態(tài)。不過(guò)這種斷網(wǎng)提示方式目前也就是使用在時(shí)時(shí)通訊應(yīng)用中,因?yàn)镮M應(yīng)用中存在心跳,能夠?qū)崟r(shí)監(jiān)測(cè)是否有網(wǎng)絡(luò)信號(hào),所以在信號(hào)恢復(fù)的第一時(shí)刻頂部提示就消失了。

頂部提示的好處在于既可以起到提示作用,又不會(huì)影響用戶(hù)對(duì)當(dāng)前界面的操作,也可以顯示現(xiàn)有的網(wǎng)絡(luò)狀態(tài),但使用場(chǎng)景是與服務(wù)器的時(shí)時(shí)通訊,所以一般使用在帶有心跳的IM應(yīng)用中。

3

一篇信守拈來(lái)的小文,歡迎大家提意見(jiàn)與吐槽。做產(chǎn)品本身就是以小見(jiàn)大的工作,注意每個(gè)細(xì)節(jié),充分理解業(yè)務(wù)才能成為一名優(yōu)秀的產(chǎn)品經(jīng)理。

#專(zhuān)欄作家#

高飛,人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。移動(dòng)醫(yī)療高級(jí)產(chǎn)品經(jīng)理,綜合負(fù)責(zé)醫(yī)療資訊、電商、社交類(lèi)產(chǎn)品族設(shè)計(jì)與開(kāi)發(fā)。擅長(zhǎng)需求挖掘,用戶(hù)研究,數(shù)據(jù)分析等。愛(ài)好羽毛球,對(duì)用戶(hù)體驗(yàn)具有變態(tài)要求。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 我就想了解一下對(duì)用戶(hù)體驗(yàn)有變態(tài)要求都是些啥要求。。。

    回復(fù)
  2. 什么是IM類(lèi)型的應(yīng)用

    回復(fù)
    1. 即時(shí)通訊應(yīng)用,比如微信QQ

      來(lái)自四川 回復(fù)
  3. ??

    來(lái)自廣東 回復(fù)