APP加載框架
描述:以一種合適的方式告訴用戶正在發(fā)生什么,將會發(fā)生什么,減少用戶的等待感。
上下文情境:用戶進(jìn)行一種操作后,打開APP,點擊列表,點擊下載等等,需要一定的時間的等待,加載結(jié)束后的過渡和隨后呈現(xiàn)。
任務(wù)流程:操作,加載,同時反饋,結(jié)果呈現(xiàn)
構(gòu)成元素:進(jìn)度條,無限循環(huán)指示器,
相關(guān)元素:太多,不列舉
設(shè)計標(biāo)準(zhǔn):不要讓用戶無聊;給予用戶及時的反饋;讓用戶有流暢的使用體驗;用戶隨時可以取消
按照加載出現(xiàn)的前置條件可以分為下列幾種,只是列舉,可能會有考慮不全的地方
1開屏加載
這個是最常見的花樣也是最多的,各種開屏加載方式五花八門在iOS的設(shè)計規(guī)范中,對開屏的加載方式有了比較詳盡的指導(dǎo):
盡可能避免使用啟動畫面或類似的啟動體驗。最好讓用戶可以立即開始使用你的app
顯示一個和app首屏及其相似的啟動畫面(框架,或背景色)。這可以讓用戶感覺你的app非???,并讓你有足夠的時間去加載內(nèi)容
但作為一個開屏畫面,使用app的用戶都能看到的地方,不對它上下其手,是在不符合我們的商業(yè)利益,所以在開屏動畫這里一般會放入以下幾個東西代替交互規(guī)范的推薦
1)品牌展示
通常包括LOGO,品牌名稱,slogan;或者還有分發(fā)渠道(某某首發(fā)等)
2)活動頁面
在一些活動上線,或者一些隱藏功能,起到告知用戶的作用
3)廣告頁面
不解釋,不過最好配一些高大上的,有逼格的廣告
最后還有這個微信這個獨(dú)樹一幟的,充滿情懷的啟動畫面
2層級內(nèi)切換
在同級頁面如tab間的切換,如果信息不多或可以復(fù)用,可以在一個頁面內(nèi)先加載完成。如很多APP中的我的模塊,基本都是采用一個頁面加載多個的方式。如微信的個性信息。你進(jìn)入微信后,即使關(guān)閉網(wǎng)絡(luò),也能看到我頁面的信息。這樣在同級頁面間切換時會很流暢,同時也不會消耗太多流量,是一種平衡。
3層級間跳轉(zhuǎn)
如列表頁進(jìn)入詳情頁,圖片詳情等。
1)如果頁面內(nèi)容單一,采取全頁面加載,頁面會處于空白,這個時候需要一個無限加載循環(huán)或進(jìn)度條來顯示狀態(tài),讓用戶保持耐心。這個常見于只有一個元素的載入情形,或者也適用于全屏圖片加載。
2)如果頁面元素比較多,但框架比較固定,搜索進(jìn)入進(jìn)入結(jié)果頁,首頁進(jìn)入列表頁等??梢圆扇》謮K加載的方式。分塊加載,分步加載,優(yōu)先重要內(nèi)容,易加載信息;如果模塊有關(guān)聯(lián)性優(yōu)先加載父內(nèi)容;框架固定的,內(nèi)容更新的,先把框架加載出來。加載用戶的等待感;帶入前置窗口已加載過的部分信息(如知乎,請忽略內(nèi)容~)。
注意:這種加載方式要注意加載失敗的狀態(tài),不能多個模塊提示多個錯誤,可以根據(jù)信息的優(yōu)先級來決定哪些數(shù)據(jù)失敗采用默認(rèn)狀態(tài),哪些數(shù)據(jù)采用失敗提示。
在這方式下,可以采用預(yù)置的格式化信息(圖片的占位符,信息分割樣式,按鈕形狀顏色),在信息傳入前就把信息傳遞給用戶。
3)預(yù)先加載,這種在新聞列表頁面比較常見的一種加載方法,預(yù)判用戶會點擊的列表項,在用戶點擊前就加載頁面內(nèi)容;或者在一些功能使用流程中(如閱讀中的預(yù)先加載下一頁),預(yù)判用戶操作流程提前一步。這種加載方式給予用戶無縫的使用體驗,使得用戶在使用產(chǎn)品過程中更直接流程,沒有被打斷的感覺。但這種加載方式容易消耗不必要的流量,要結(jié)合網(wǎng)絡(luò)情況和加載內(nèi)容進(jìn)行綜合考慮,可以只加載文字信息或關(guān)鍵信息。同時預(yù)先加載也是需要消耗時間,所以要同時考慮一種正常情況下的加載方式。
4界面內(nèi)加載
1)模態(tài)提示層,app在觸發(fā)后加載后,出現(xiàn)模態(tài)提示層,防止用戶在加載過程中進(jìn)行其他操作,導(dǎo)致當(dāng)前加載出錯。如果采用模態(tài)加載,肯會因為網(wǎng)絡(luò)原因或內(nèi)容過多導(dǎo)致長時間處于加載狀態(tài),建議提供一個“取消”的操作。同時在安卓中的后退按鈕能關(guān)閉模態(tài)提示。
2)控件自身加載,把操作加載的狀態(tài)與控件的樣式結(jié)合起來,對某個控件進(jìn)行操作后,控件變?yōu)榧虞d狀態(tài),此時控件不能重復(fù)操作,當(dāng)加載完畢后,控件再作為顯示加載結(jié)果的狀態(tài)。比如說appstore的免費(fèi)/獲取/打開按鈕,還要支付寶的支付按鈕,音頻軟件中常見的下載按鈕。這種加載方式是控件的自身狀態(tài),不影響其他操作,所以用戶也可以對頁面進(jìn)行操作,因此也會導(dǎo)致同時有多個請求的情況,增加了加載失敗的風(fēng)險。請求失敗后可配合提示告知用戶失敗的原因。
3)導(dǎo)航欄加載,這個在微信里面比較常見,以導(dǎo)航欄的形式展現(xiàn)加載狀態(tài),如剛進(jìn)入的連接中,消息數(shù),對方正在輸入等。將導(dǎo)航欄標(biāo)題臨時變?yōu)榧虞d信息,在用戶與產(chǎn)品互動過程中提供實時反饋,此時的產(chǎn)品不再是一堆冷冰冰的界面,而是一位善于溝通的人。
4)后臺加載,用戶在操作后,app立即反饋操作成功,然后把加載過程放到后臺,用戶不需要了解也不需要等待,例如微信里面的點贊。但因為后臺操作,可能有時候明明顯示成功,但其實失敗,所以一些比較重要的操作不太適合用這種方式來呈現(xiàn)。
5)界面內(nèi)刷新,自從teitter出了下拉刷新后,這種無盡列表加載方式(下拉刷新,上拉加載更多)已經(jīng)已經(jīng)為廣大用戶所接受。列表頁面默認(rèn)加載部分,在用戶進(jìn)行操作后,根據(jù)用戶行為俠士更多列表內(nèi)容,無需點擊下一頁。但這個會導(dǎo)致用戶沒有足夠的定位信息,不知道自己閱讀到哪里。很難再次找到以前見過的一些信息。懶注意,加載時需要注意一次要加載的內(nèi)容的數(shù)量,一般是根據(jù)內(nèi)容的大小和高度來決定,既能較快的載入內(nèi)容,又能讓用戶更順暢地查看而不用一直等待加載;另一方面是加載的時間,好的懶加載會根據(jù)用戶的瀏覽速度去調(diào)節(jié)加載的時間點,而不是在瀏覽加載完內(nèi)容后才開始繼續(xù)加載。
看看微信逆天下之大不違把小視頻放在聊天窗口的下拉里,導(dǎo)致網(wǎng)上罵聲一片,最近在最新的版本里有偷偷改掉。有些用戶習(xí)慣,可以被挑戰(zhàn),有些不能~
5上述劃分是根據(jù)層級關(guān)系進(jìn)行的加載方式區(qū)分,另外還有從網(wǎng)絡(luò)情況角度進(jìn)行考慮
1)智能加載方式,根據(jù)網(wǎng)絡(luò)環(huán)境自適應(yīng)加載。在不同的網(wǎng)絡(luò)情況下,智能判斷是否下載圖片,圖片質(zhì)量(花瓣上傳)等,并且在網(wǎng)絡(luò)情況發(fā)生變化時提醒用戶變化情況。對于2G用戶給用戶提供最核心的少量內(nèi)容,同時在更多內(nèi)容的情況下也要提供手動查看這部分信息的操作(知乎圖片)。
2)離線訪問,移動場景帶來的網(wǎng)絡(luò)情況的多樣性,有時候用戶沒有網(wǎng)絡(luò)(網(wǎng)絡(luò)覆蓋),或者關(guān)閉網(wǎng)絡(luò)(流量限制)??梢跃彺嬉徊糠?jǐn)?shù)據(jù)來進(jìn)行離線訪問,這樣在斷網(wǎng)情況下也能使用英語,并能訪問已有的數(shù)據(jù);減少流量的消耗;減少訪問時間。但考慮到手機(jī)空間,要設(shè)計合適的離線機(jī)制。并配合一定的清理緩存的機(jī)制。另外要考慮現(xiàn)在安卓手機(jī)清理軟件的橫行,要提醒用戶加入白名單,不然用戶會經(jīng)常以為app出問題。
6使用一個確定的指示器
在加載過程中盡量使應(yīng)用加載過程令人愉快,這時候有一個狀態(tài)指示可以減少用戶等待的焦慮感,同時在長時間加載中不會誤以為app崩潰。
對于完成部分可以確定的情況下,使用一個確定的指示器,他們會告知用戶操作所需的時間。
對于完成部分不確定,用戶需要等待,無需告知后臺的情況以及所需時間,這時可以使用一個不確定的指示器。
1)無限循環(huán)指示器
用于表明app正在執(zhí)行某些處理。如果正在執(zhí)行的處理影響范圍較大,可以使用模態(tài)的無限循環(huán)指示器。如果只是界面的一部分,可以采用小尺寸的提示信息。
如果顯示時間較長,筆者建議改用進(jìn)度條來提示用戶當(dāng)前的執(zhí)行進(jìn)度以及還需要等待多少時間,這樣能減少用戶的焦躁感。同時讓用戶可以取消這個狀態(tài),或執(zhí)行其他操作
ios(多個顏色深淺隨時間變化的圓角長方形來營造旋轉(zhuǎn)的感覺),安卓采用一個不斷旋轉(zhuǎn)的色彩深淺不一的環(huán)形圖標(biāo)
2)進(jìn)度條
瀏覽器的進(jìn)度條是一種較為常見的進(jìn)度告知設(shè)計,通過這個進(jìn)度告知,讓用戶有了更加明確的知情權(quán),也能更好的預(yù)期到加載完成的時間。但即便是小小的進(jìn)度條,也有很多的設(shè)計技巧在里面。
一個非常經(jīng)典的體驗設(shè)問,同樣是3s的加載時間,勻速的進(jìn)度條、先慢后快的進(jìn)度條、先快后慢的進(jìn)度條,哪個讓用戶感覺上最快?經(jīng)過科學(xué)的實驗證實,先慢后快的進(jìn)度條是讓用戶心理感受上最快的設(shè)計。這是因為用戶最容易記住最后一瞬間的感覺,如果最后一瞬間,感知到了快,就覺得順暢了。但這點論點存疑,微信朋友圈網(wǎng)頁打開后進(jìn)度條會快速前進(jìn)一大半,然后再緩慢加載。不知道是不是有另外的依據(jù)。
3)自定義的動畫
自定義動畫現(xiàn)在是比較常見的指示器方式,加入與品牌相關(guān)的元素,增加趣味性。
一些相關(guān)書籍文章
《iOS設(shè)計規(guī)范》
《移動設(shè)計》
《APP這樣設(shè)計才好賣》
淺談移動端App的頁面載入方式
iOS App中數(shù)據(jù)加載的6種方式
隱藏在背后的交互設(shè)計
作者:靜默之思
來源:http://www.jianshu.com/p/5349de8d0c9c
如果有相關(guān)圖片的話,會更好理解
學(xué)到了,很棒
內(nèi)容不錯,就是錯別字有點多 ? 然后“在同級頁面如tab間的切換,如果信息不多或可以復(fù)用,可以在一個頁面內(nèi)先加載完成。如很多APP中的我的模塊,基本都是采用一個頁面加載多個的方式。如微信的個性信息。你進(jìn)入微信后,即使關(guān)閉網(wǎng)絡(luò),也能看到我頁面的信息。這樣在同級頁面間切換時會很流暢,同時也不會消耗太多流量,是一種平衡。”這個沒看懂是啥意思 ??