網頁設計技巧:網頁的loading進度條設計

來源:互聯網
上載者:User

文章描述:雖然載入在整個頁面來看是一件小事,但是因為載入在不經意間導致的使用者流失卻是大事。在載入頁中顯示進度,給出承諾,增加資訊量或者幽默內容都能使使用者潛移默化減少“覺察”正在載入的時間。但是真正可以減緩的辦法還是載入的速度增快;別緻的設計雖可以治標,但載入速

對於載入(loading),想必大家都不陌生。每當看到載入頁中那個不停轉啊轉的圈圈,或者是 “Loading…”後面不停閃動的三個點點,心裡都會湧起各種焦躁反感。
根據一份調查得出,使用者能夠忍受載入的最長時間在:6到8秒。8秒是一個臨界值,如果載入時間在8秒以上,大部分訪問者最終會選擇放棄,除非他一定要開啟那個頁面。

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

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

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

減少使用者的焦慮,可以給個允諾,示意他們還要載入多久,告訴現在的進度(有個進程百分比),算給一個定心丸。例如以下的方式:

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

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

如果進度條再進行一些變形,不僅告訴了使用者現在的載入進程,還別有一種欣賞的意味:

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

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

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

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



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。