如何使你的應用看起來載入的更快

發表於2016-03-09

d4da56d44cec6ac7252ce62b25ce.jpg

如何使你的應用讓使用者看起來載入的更快

在我們設計的時候, 我們沒有方法去模仿不同的載入速度.所以在必須要等待內容展示出來的時候我們不能總是設計出讓使用者感到不舒服的動效.

但是,網路的速度不總是有保證的.尤其在一張圖片或一首歌在下載的時候.在這些情況下,我們不得不去決定展現什麼能夠滿足使用者和填充當下的空檔時間,和對使用者造成的心理上的拖沓影響.

載入旋轉指標就是小惡魔

載入旋轉指標並不是表示載入或者思考的正確方式.預設的載入圖示(像iOS裡灰色的圓角矩形圍繞中心點旋轉的載入針)傾向於表明消極的含義.他們提供了多種多樣的作業系統功能,表達不論從策略引導到問題的連線到網路或者載入一個資料等的所有狀態.

e00f56d44d2f32f875520ff50feb.jpg

因此,人們討厭看到沒有任何具有程式資訊或時間的示意而只有一個載入旋轉針的情況.讓使用者只盯著一個載入條或者針輪看會增加跳出率.

不確定的等待是要比所知道的要長的,無盡的等待.你應該給你的使用者一個清晰的示意讓他們知道會等多久.通過提供程式-使用者體驗設計為使操作透明是健康和有意義的.試著去使用程式條使載入感覺自然:

98bb56d44d6c6ac7252ce628eddf.jpg

程式條告訴使用者一個動作會用掉多長時間,但是他們也不總是正確的.你可以在你的程式條上通過使移動的游標持續和穩定來偽裝小的延遲(開始時快結尾時慢).程式條應當永遠不停止,否則使用者將會以為應用卡住了.

背景操作

動作被裝到背景操作中會有兩個優勢—他們對於使用者來說可以是隱形的並且會在使用者實際尋求他們之前出現.在一個程式在背景執行同時給使用者其他東西去關注.上傳圖片到Instagram裡就是一個很好的例子.使用者剛一選擇圖片要去分享,它就開始上傳.

61e156d44d946ac7252ce63ec87b.jpg

Instagram邀請使用者為圖片新增標題和標籤於此同時圖片正在後臺進行上傳.當使用者準備好去按下分享按鍵的的同時,上傳工作基本完成並且使用者可以立即分享他們的圖片.

虛擬的內容和佔位符

如果你不能簡短載入的時長你應該會總想試圖去讓等待更加愉悅.並且他是一個包含暫時性資訊的一個正確的時間段.為了保持使用者的參與,使用虛假內容作為文字內容和圖片佔位符.

這裡有一些小建議:

  • 載入螢幕不應過於高亮.他本身不需要很醒目.facebook的灰色佔點陣圖就是一個很好的例子.他在載入內容時使用模板元素並且使使用者對於內容將要載入出來的全域性架構更加熟悉.

e54156d44db832f875520f52c87b.jpg

  • 對於載入圖片你可以使用一個將要載入的圖片的預先引導顏色去填充佔點陣圖.medium有一漂亮的載入效果,首先,載入一個小的模糊圖片,然後轉變成大的圖片.

f6e856d44dd832f875520f5e8a46.jpg

使用佔位符合虛擬內容是一個沒有加速的程式,但是在使用者的大腦裡會感覺像在加速.

讓你的使用者分心

為了確保人們在等待什麼事情將要發生的時候不會覺得無聊,提供給他們一些消遣.可以是有趣的出乎意料的,或者什麼其他的能夠足夠長時間去抓住使用者注意力的事情以便你的應用去進行載入.

3cee56d44df732f875520fbf1ce3.jpg

動效可以轉移你訪問者的注意力並且讓他們忽略了長時間的等待.

結論

使用者不會想為了內容而等待.但是如果你想使它看起來好像從來沒有等待過,他們將一直喜愛你的應用.幫助使你的使用者察覺到載入的時間比他們真正的要短.

相關文章