萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 超有趣網站進度條設計

超有趣網站進度條設計

   人們討厭等待,特別是加載網站的時候,可有些時候由於網速或者浏覽器的原因,等待總是不可避免,如果在網站中也能像移動應用一樣,有創意的進度條,會很大地減少人們的焦慮,還能避免因等待過久放棄進入這種不幸的事故。

  相對於移動端,在網站中使用進度條不常見,該用哪種方式呈現給訪客也是一個考驗設計師的難題。現在你可以來看看這10個在網站中創意運用進度條的設計,它們既帶給訪客樂趣,也不妨礙內容閱讀,學習一下,讓它們在無形的展示中留住網速拙急的訪客!(大多數提供源碼,你可以很方便地學習它們)

  Creative Loading Effects

超有趣網站進度條設計 三聯

  這個教程非常漂亮,展示了不止一種加載進度的方式,你可以點擊DEMO玩一下。

  Spinning Loading

loading-effect-tutorials-01

  用大寫的「Loading 」,中間的O以新奇的動態旋轉,是個非常清新的設計,提供了源碼,可以很方便應用到你的網站。

  Planets

loading-effect-tutorials-02

  看兩個萌萌的小星球在跳舞真是太好玩了,它特別適合用在卡通風格的網站上。

  Sinister Loadscreen

loading-effect-tutorials-09

  是的,看起來很邪惡的形象,不過很適合應用在暗黑系的黑色風格網站上,或者你可以用它來營造神秘感。

  Yet Another Loading Animation

loading-effect-tutorials-06

  這個動效做得非常有節奏感,你可能想把它應用在音樂風格的網站上。

  CProgress

loading-effect-tutorials-03

  Cprogress使用jQuery來展現一個非常酷的和易於使用的loadscreen。強大的是,你也能鼓搗成這幾行代碼,因為它們是完全可定制的!

  Spin.js

loading-effect-tutorials-04

  一個讓世界快速旋轉的「Loading 」!你也可以通過控制右邊的滑塊來改變它的形狀,給它加點陰影,甚至改變旋轉的方向!

  Alessio Atzeni

loading-effect-tutorials-05

  這教程又酷又好學,因為它是完全用HTML和CSS來實現的,還有三種進度模板供你選擇。

  Facebook-ish Loading Animation

loading-effect-tutorials-07

  如果你想讓網站看起來像Facebook,那麼這個進度條最適合你了,它的加載方式與Facebook加載圖像時一樣。

  Flickr Style

loading-effect-tutorials-08

  如果你是Flickr的愛好者,那麼這個不能錯過,完全仿照Flickr的效果來。

copyright © 萬盛學電腦網 all rights reserved