談?wù)劶虞d(Loading)的那點(diǎn)事
對(duì)于加載(loading),想必大家都不陌生。每當(dāng)看到加載頁(yè)中那個(gè)不停轉(zhuǎn)啊轉(zhuǎn)的圈圈,或者是 “Loading…”后面不停閃動(dòng)的三個(gè)點(diǎn)點(diǎn),心里都會(huì)涌起各種焦躁反感。
根據(jù)一份調(diào)查得出,用戶能夠忍受加載的最長(zhǎng)時(shí)間在:6到8秒。8秒是一個(gè)臨界值,如果加載時(shí)間在8秒以上,大部分訪問者最終會(huì)選擇放棄,除非他一定要打開那個(gè)頁(yè)面。
以上三種是常見的loading方式,如果是我,我更希望看到第三種的進(jìn)度條,因?yàn)槲覍?shí)在不知道第一個(gè)圈圈要轉(zhuǎn)多久才能算加載成功,也不知道第二個(gè)點(diǎn)點(diǎn)要點(diǎn)到猴年馬月。
如果這個(gè)時(shí)候,界面除了看到“加載”以外的東西,是否就能轉(zhuǎn)移用戶的注意力呢?我們?cè)诳匆暺燎埃暺炼紩?huì)緩沖,在這時(shí)個(gè)候總是會(huì)放一段廣告。每次我 都會(huì)忍耐加載時(shí)的廣告,但是如果廣告做的很棒,很吸引人,就一點(diǎn)都不煩躁了,甚至還能在評(píng)論里看到求加載廣告的地址。網(wǎng)頁(yè)的loading就承擔(dān)了加載廣 告的作用。
在頁(yè)面局部加載時(shí)常能看到第一個(gè)圈圈的身影,不過每次看到這個(gè)圈圈都差不多,如果換一種轉(zhuǎn)圈的形式,也許會(huì)覺得“這個(gè)圈圈跟別的好像不太一樣”,通過好奇減少等待的焦躁。
減少用戶的焦慮,可以給個(gè)允諾,示意他們還要加載多久,告訴現(xiàn)在的進(jìn)度(有個(gè)進(jìn)程百分比),算給一個(gè)定心丸。例如以下的方式:
其中上圖最下面一種進(jìn)度條又有不同的設(shè)計(jì):
上面兩種確定性進(jìn)度條雖然都提示了現(xiàn)在的進(jìn)程,但它們的差別是,第一種的進(jìn)度條內(nèi)容是純色,第二種進(jìn)度條內(nèi)容有動(dòng)畫效果,如果這個(gè)進(jìn)度條再某點(diǎn)上突 然停住了,這時(shí)候會(huì)給用戶造成困擾,到底是卡死了還是這段的加載比較慢呢?如果是下一種進(jìn)度條就一目了然,如果卡死,那動(dòng)畫效果就沒了,如果依然有動(dòng)畫效 果,那就說明只是這一段加載比較緩慢。
如果進(jìn)度條再進(jìn)行一些變形,不僅告訴了用戶現(xiàn)在的加載進(jìn)程,還別有一種欣賞的意味:
除了進(jìn)度條變形外,還可以從文案或圖片下手,這種形式的加載非但沒給用戶帶來煩躁的感覺,反而覺得這個(gè)加載有一種特別的氣質(zhì),不僅加深了印象,更帶來了好感。
用教學(xué)或小提示代替加載,在游戲加載頁(yè)面中經(jīng)??吹健R话愠霈F(xiàn)的內(nèi)容為游戲教學(xué)或一些技巧小提示,并且每次的內(nèi)容都不一樣。
要減弱用戶的焦躁,“增強(qiáng)用戶的期待值”也不失為一種好方法,除了對(duì)本身網(wǎng)站的期待,還有對(duì)“進(jìn)度條本身”的期待。如果在不同的百分點(diǎn)上都會(huì)有不一樣的顏色,那么用戶也許在等待的時(shí)候會(huì)想:下一秒會(huì)是什么顏色呢,從而,好像也不是那么急了。
雖然加載在整個(gè)頁(yè)面來看是一件小事,但是因?yàn)榧虞d在不經(jīng)意間導(dǎo)致的用戶流失卻是大事。在加載頁(yè)中顯示進(jìn)度,給出承諾,增加信息量或者幽默內(nèi)容都能使 用戶潛移默化減少“覺察”正在加載的時(shí)間。但是真正可以減緩的辦法還是加載的速度增快;別致的設(shè)計(jì)雖可以治標(biāo),但加載速度的提高才是治本。
本文地址:http://m.likemindfilms.com/tutorial/id1710.html
您可能還喜歡
- 關(guān)于第三方注冊(cè)和本地注冊(cè)的選擇
- 8大網(wǎng)頁(yè)前端界面必備jQuery插件
- 掌上指路標(biāo) —– APP架構(gòu)與導(dǎo)航設(shè)計(jì)
- 時(shí)尚電商網(wǎng)站交互分析
- 軟件推薦為移動(dòng)設(shè)計(jì)而生-Justinmind
- TGideas實(shí)例:加載,不只是少一點(diǎn)點(diǎn)
- 網(wǎng)頁(yè)設(shè)計(jì)中引人入勝的引導(dǎo)頁(yè)設(shè)計(jì)
- 體驗(yàn)新版Apple AppStore ——App設(shè)計(jì)從
- 確認(rèn)按鈕在左邊,取消按鈕在右邊?
- 交互設(shè)計(jì)從登錄開始
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏