Trumpet：對于加載(loading)，想必大家都不陌生。每當看到加載頁中那個不停轉啊轉的圈圈，或者是 "Loading…"后面不停閃動的三個點點，心里都會涌起各種焦躁反感。

這篇文章詳析了不同Loading對用戶情感的影響，魔鬼藏在細節里，假如想讓用戶在驚嘆于魔鬼般的細節時有出色的體驗，你可以試試這個 → 《讓等待也成為享受！18個讀取進度條的優秀設計案例》

根據一份調查得出，用戶能夠忍受加載的最長時間在：6到8秒。8秒是一個臨界值，如果加載時間在8秒以上，大部分訪問者最終會選擇放棄，除非他一定要打開那個頁面。

以上三種是常見的loading方式，如果是我，我更希望看到第三種的進度條，因為我實在不知道第一個圈圈要轉多久才能算加載成功，也不知道第二個點點要點到猴年馬月。

如果這個時候，界面除了看到"加載"以外的東西，是否就能轉移用戶的注意力呢?我們在看視屏前，視屏都會緩沖，在這時個候總是會放一段廣告。每次我都會忍耐加載時的廣告，但是如果廣告做的很棒，很吸引人，就一點都不煩躁了，甚至還能在評論里看到求加載廣告的地址。網頁的loading就承擔了加載廣告的作用。

在頁面局部加載時常能看到第一個圈圈的身影，不過每次看到這個圈圈都差不多，如果換一種轉圈的形式，也許會覺得"這個圈圈跟別的好像不太一樣"，通過好奇減少等待的焦躁。

減少用戶的焦慮，可以給個允諾，示意他們還要加載多久，告訴現在的進度（有個進程百分比），算給一個定心丸。例如以下的方式：

其中上圖最下面一種進度條又有不同的設計：

上面兩種確定性進度條雖然都提示了現在的進程，但它們的差別是，第一種的進度條內容是純色，第二種進度條內容有動畫效果，如果這個進度條再某點上突然停住了，這時候會給用戶造成困擾，到底是卡死了還是這段的加載比較慢呢?如果是下一種進度條就一目了然，如果卡死，那動畫效果就沒了，如果依然有動畫效果，那就說明只是這一段加載比較緩慢。

如果進度條再進行一些變形，不僅告訴了用戶現在的加載進程，還別有一種欣賞的意味：

除了進度條變形外，還可以從文案或圖片下手，這種形式的加載非但沒給用戶帶來煩躁的感覺，反而覺得這個加載有一種特別的氣質，不僅加深了印象，更帶來了好感。

用教學或小提示代替加載，在游戲加載頁面中經常看到。一般出現的內容為游戲教學或一些技巧小提示，并且每次的內容都不一樣。

要減弱用戶的焦躁，"增強用戶的期待值"也不失為一種好方法，除了對本身網站的期待，還有對"進度條本身"的期待。如果在不同的百分點上都會有不一樣的顏色，那么用戶也許在等待的時候會想：下一秒會是什么顏色呢，從而，好像也不是那么急了。

雖然加載在整個頁面來看是一件小事，但是因為加載在不經意間導致的用戶流失卻是大事。在加載頁中顯示進度，給出承諾，增加信息量或者幽默內容都能使用戶潛移默化減少"覺察"正在加載的時間。但是真正可以減緩的辦法還是加載的速度增快;別致的設計雖可以治標，但加載速度的提高才是治本。
 

原文地址：ued.focus
作者：Trumpet
 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：156982）分享實戰經驗。
設計微博：擁有粉絲量55萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：