前一陣子，接到一個app切圖製作載入圓形進度條的任務，看到那個小進度條轉啊轉的，我若有所思…同時，一個做印象派製作間控制項設計的同學最近做了 改版，那個控制項登陸需要一些時間，看到他對loading載入條進行了優化，然後就一起交流了一下。作為一個剛畢業入行不久的新人，請允許我分享一下關於 討論loading載入後的一些心得…
這是一個浮躁的年代，長聽到這樣的抱怨“好慢！”“等到死！”，每次看到那個轉啊轉的圈圈，或者是那個“loading…”後面那三個點不停滴閃動，心裡總是有莫名的焦躁，彼時的心情就好像下面這張圖片一樣，不知您是否有同感…
有人統計，用戶能夠忍受的最長等待時間大約在 6～8秒之間。8秒是一個臨界值，如果網頁載入時間在8秒以上，很有可能大部分訪問者最終都會離開該頁面。除非他一定要打開那個頁面。
以上三種是常見的loading方式，如果是我，我更希望看到第三種的進度條，因為我實在不知道第一個圈圈要轉多久才能算載入成功，也不知道第二個點點點要點到猴年馬月。
但是如果這個時候，介面除了看到“載入”以 外的東西，是否就能轉移用戶的注意力呢？比如我們在銀行排隊的時候，如果我們無時不刻看著自己手中的號碼 牌和叫號板，雖然知道自己大概什麼時候會輪到，但是依舊會無聊和煩躁。這時候銀行裡的一些宣傳單起到了很好的作用：比如各種銀行的理財產品，如果你不小心 還看到了適合自己投資的，肯定會激動不已，覺得這個等待時間給自己帶來的意外的收穫，即使沒有得到自己想要的資訊，也不會覺得那麼無聊了。又比如視頻在緩 沖的過程中，總是會放一段廣告，我一直弱弱滴認為這個好雞肋，捨不得放棄看那個視頻，但又要忍耐這個載入時候的廣告。但是如果廣告做得很棒，就一點都不煩 躁了，甚至還在評論裡看到求載入廣告的地址。網頁的loading就承擔了宣傳單跟載入廣告的作用。
在頁面局部載入時常能看到第一個圈圈的身影，不過每次看到這個圈圈都差不多，如果換一種轉圈的形式，也許會覺得“這個圈圈跟別的好像不太一樣”，通過好奇減少等待的焦躁。
下面我找了一些變過形的圈圈，是不是多了一些新意呢？
減少用戶的焦慮，可以給個允諾，示意他們還要載入多久，告訴現在的進度（有個進程百分比），算給一個定心丸。例如以下的方式：
其中上圖最下面一種進度條又有不同的設計：
上面兩種確定性進度條雖然都提示了現在的進程，但它們的差別是，第一種的進度條內容是純色，第二種進度條內容有動畫效果，如果這個進度條再某點 上突 然停住了，這時候會給用戶造成困擾，到底是卡死了還是這段的載入比較慢呢？如果是下一種進度條就一目了然，如果卡死，那動畫效果就沒了，如果依然有動畫效 果，那就說明只是這一段載入比較緩慢。
如果進度條再進行一些變形，不僅告訴了使用者現在的載入進程，還別有一種欣賞的意味：
PS：上右是搜狗實驗室的logo，但是這個創意做成loading也很棒啊，還加強了品牌印象。
除了進度條變形外，還可以從文案下手，例如，下面的是“下廚房”的APP的載入頁，雖然只有短短的一句話“是誰來自山川湖海 卻囿於晝夜 廚房與愛”雖然只閃過短短一秒鐘，這非但沒給用戶帶來煩躁的感覺，反而覺得這個應用有一種特別的氣質，不僅加深了印象，更帶來了好感。
一般電影上映前都有一段預告片來吸引觀眾去觀影。顯露冰山一角，以此激起用戶的好奇心，也告訴了使用者大概情況。
上圖是QZONE的熱門應用遊戲——捕魚大亨的登陸頁，這個loading的 進度設計就像一個魚雷的行程，不僅告訴玩家現在載入到哪個進度，尾部的 小水花也似乎在說我一直在努力載入。另外，這個載入速度有點慢，上方還有場景圖介紹，以此讓玩家有更多的瞭解。這種快顯視窗展示放大圖片和多個視圖也是許 多頂級線上零售商所採用的方法。雖然載入有點慢，但是給玩家這樣一個暗示：這是非常值得的等待。
此外，如果要載入的東西比較多，那麼載入進度肯定會比較慢，呈現一種載入條一直滯留不動的情況，在這種情況下，我們可以把進度條分成多個進度條多次 載入以安撫用戶焦躁的心。但是每次載入最好都配有文字顯示現在在載入的內容，不然一次又一次的進度條會讓使用者恐慌“這到底要載入多少次才是個頭！”但是如 果像下面一樣，明確告訴使用者在載入的內容，就算使用者是有些煩躁“怎麼有這麼多要載入”但是每次都相對載入得比較快，而且每次載入都有理有據，讓用戶覺得這 個載入還是有必要的。
要減弱用戶的焦躁，“增強用戶的期待值”也不失為一種好方法，除了對本身網站的期待，還有對“進度條本身”的期待。
如果在不同的百分點上都會有不一樣的顏色，那麼用戶也許在等待的時候會想：下一秒會是什麼顏色呢，從而，好像也不是那麼急了。
這個小人的表情好豐富，但是似乎又代表了用戶的心情，看著他挪動並有不同的心理，就像在看一個好玩的gif。
這是印像派的新版製作間登陸，在等待的同時還告訴客戶有哪些產品可以使用到製作間，既傳達了品牌的資訊，也讓使用者在等待時不那麼枯燥。
此外，如果這個是多次登陸的網站，那麼不管捕魚大亨的場景展示，還是yxp的步驟流程展示，似乎這些展示只在第一次會起到比較特別的作用，但是如果每次都附帶給登陸者不同的資訊，那麼，使用者每次都有小驚喜，比如每次都隨機出現一些小提示（以下分別是四次loading）：
雖然載入是個小細節，但是也很有可能不經意間讓用戶流失。以上是我的一些小心得，雖然搜集的這些設計方式可以減緩一些使用者煩躁的等待情緒，但 是真正 可以減緩的辦法還是載入的速度增快；別致的設計可以治標，載入速度提高是治本。在載入頁中顯示進度，給出承諾，增加信息量或者幽默內容都能使使用者潛移默 化 減少“覺察”正在載入的時間。當然，煩躁是一種心情，載入是煩躁的導火索，但是如果每天保持好心情，那對待等待的耐心也會大大增加哦^.^
最後，送上一個可以生成載入圈圈的小工具，希望可以對您有幫助：
http://preloaders.net/en/circular文章來自uedc
文章提供:: BAYSTARS DESIGN網頁設計公司
程序代碼
