前一陣子，接到一個(gè)app切圖制作加載圓形進(jìn)度條的任務(wù)，看到那個(gè)小進(jìn)度條轉(zhuǎn)啊轉(zhuǎn)的，我若有所思…同時(shí)，一個(gè)做印象派制作間控件設(shè)計(jì)的同學(xué)最近做了改版，那個(gè)控件登陸需要一些時(shí)間，看到他對(duì)loading加載條進(jìn)行了優(yōu)化，然后就一起交流了一下。作為一個(gè)剛畢業(yè)入行不久的新人，請(qǐng)?jiān)试S我分享一下關(guān)于討論loading加載后的一些心得…
這是一個(gè)浮躁的年代，長(zhǎng)聽到這樣的抱怨“好慢！”“等到死！”，每次看到那個(gè)轉(zhuǎn)啊轉(zhuǎn)的圈圈，或者是那個(gè)“l(fā)oading…”后面那三個(gè)點(diǎn)不停滴閃動(dòng)，心里總是有莫名的焦躁，彼時(shí)的心情就好像下面這張圖片一樣，不知您是否有同感…

有人統(tǒng)計(jì)，用戶能夠忍受的最長(zhǎng)等待時(shí)間大約在 6～8秒之間。8秒是一個(gè)臨界值，如果網(wǎng)頁加載時(shí)間在8秒以上，很有可能大部分訪問者最終都會(huì)離開該頁面。除非他一定要打開那個(gè)頁面。

以上三種是常見的loading方式，如果是我，我更希望看到第三種的進(jìn)度條，因?yàn)槲覍?shí)在不知道第一個(gè)圈圈要轉(zhuǎn)多久才能算加載成功，也不知道第二個(gè)點(diǎn)點(diǎn)點(diǎn)要點(diǎn)到猴年馬月。

但是如果這個(gè)時(shí)候，界面除了看到“加載”以外的東西，是否就能轉(zhuǎn)移用戶的注意力呢？比如我們?cè)阢y行排隊(duì)的時(shí)候，如果我們無時(shí)不刻看著自己手中的號(hào)碼牌和叫號(hào)板，雖然知道自己大概什么時(shí)候會(huì)輪到，但是依舊會(huì)無聊和煩躁。這時(shí)候銀行里的一些宣傳單起到了很好的作用：比如各種銀行的理財(cái)產(chǎn)品，如果你不小心還看到了適合自己投資的，肯定會(huì)激動(dòng)不已，覺得這個(gè)等待時(shí)間給自己帶來的意外的收獲，即使沒有得到自己想要的信息，也不會(huì)覺得那么無聊了。又比如視頻在緩沖的過程中，總是會(huì)放一段廣告，我一直弱弱滴認(rèn)為這個(gè)好雞肋，舍不得放棄看那個(gè)視頻，但又要忍耐這個(gè)加載時(shí)候的廣告。但是如果廣告做得很棒，就一點(diǎn)都不煩躁了，甚至還在評(píng)論里看到求加載廣告的地址。網(wǎng)頁的loading就承擔(dān)了宣傳單跟加載廣告的作用。

在頁面局部加載時(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)度條變形外，還可以從文案下手，例如，下面的是“下廚房”的APP的加載頁，雖然只有短短的一句話“是誰來自山川湖海 卻囿于晝夜 廚房與愛”雖然只閃過短短一秒鐘，這非但沒給用戶帶來煩躁的感覺，反而覺得這個(gè)應(yīng)用有一種特別的氣質(zhì)，不僅加深了印象，更帶來了好感。

一般電影上映前都有一段預(yù)告片來吸引觀眾去觀影。顯露冰山一角，以此激起用戶的好奇心，也告訴了用戶大概情況。

上圖是QZONE的熱門應(yīng)用游戲——捕魚大亨的登陸頁，這個(gè)loading的進(jìn)度設(shè)計(jì)就像一個(gè)魚雷的行程，不僅告訴玩家現(xiàn)在加載到哪個(gè)進(jìn)度，尾部的小水花也似乎在說我一直在努力加載。另外，這個(gè)加載速度有點(diǎn)慢，上方還有場(chǎng)景圖介紹，以此讓玩家有更多的了解。這種彈出窗口展示放大圖片和多個(gè)視圖也是許多頂級(jí)在線零售商所采用的方法。雖然加載有點(diǎn)慢，但是給玩家這樣一個(gè)暗示：這是非常值得的等待。

此外，如果要加載的東西比較多，那么加載進(jìn)度肯定會(huì)比較慢，呈現(xiàn)一種加載條一直滯留不動(dòng)的情況，在這種情況下，我們可以把進(jìn)度條分成多個(gè)進(jìn)度條多次加載以安撫用戶焦躁的心。但是每次加載最好都配有文字顯示現(xiàn)在在加載的內(nèi)容，不然一次又一次的進(jìn)度條會(huì)讓用戶恐慌“這到底要加載多少次才是個(gè)頭！”但是如果像下面一樣，明確告訴用戶在加載的內(nèi)容，就算用戶是有些煩躁“怎么有這么多要加載”但是每次都相對(duì)加載得比較快，而且每次加載都有理有據(jù)，讓用戶覺得這個(gè)加載還是有必要的。

要減弱用戶的焦躁，“增強(qiáng)用戶的期待值”也不失為一種好方法，除了對(duì)本身網(wǎng)站的期待，還有對(duì)“進(jìn)度條本身”的期待。

如果在不同的百分點(diǎn)上都會(huì)有不一樣的顏色，那么用戶也許在等待的時(shí)候會(huì)想：下一秒會(huì)是什么顏色呢，從而，好像也不是那么急了。

這個(gè)小人的表情好豐富，但是似乎又代表了用戶的心情，看著他挪動(dòng)并有不同的心理，就像在看一個(gè)好玩的gif。

這是印像派的新版制作間登陸，在等待的同時(shí)還告訴客戶有哪些產(chǎn)品可以使用到制作間，既傳達(dá)了品牌的信息，也讓用戶在等待時(shí)不那么枯燥。

此外，如果這個(gè)是多次登陸的網(wǎng)站，那么不管捕魚大亨的場(chǎng)景展示，還是yxp的步驟流程展示，似乎這些展示只在第一次會(huì)起到比較特別的作用，但是如果每次都附帶給登陸者不同的信息，那么，用戶每次都有小驚喜，比如每次都隨機(jī)出現(xiàn)一些小提示（以下分別是四次loading）：

雖然加載是個(gè)小細(xì)節(jié)，但是也很有可能不經(jīng)意間讓用戶流失。以上是我的一些小心得，雖然搜集的這些設(shè)計(jì)方式可以減緩一些用戶煩躁的等待情緒，但是真正可以減緩的辦法還是加載的速度增快；別致的設(shè)計(jì)可以治標(biāo)，加載速度提高是治本。在加載頁中顯示進(jìn)度，給出承諾，增加信息量或者幽默內(nèi)容都能使用戶潛移默化減少“覺察”正在加載的時(shí)間。當(dāng)然，煩躁是一種心情，加載是煩躁的導(dǎo)火索，但是如果每天保持好心情，那對(duì)待等待的耐心也會(huì)大大增加哦^.^

最后，送上一個(gè)可以生成加載圈圈的小工具，希望可以對(duì)您有幫助：

http://preloaders.net/en/circular

來源：http://uedc.163.com/8809.html