UI設(shè)計(jì)師必備！最全的加載動(dòng)畫網(wǎng)站Preloaders

UI設(shè)計(jì)師在工作過程當(dāng)中難免會(huì)遇到一些界面設(shè)計(jì)之外的細(xì)節(jié)，比如Loading動(dòng)畫，或是轉(zhuǎn)場動(dòng)畫等，今天推薦的一個(gè)網(wǎng)站，就是一個(gè)Loading動(dòng)畫收集站，除了可以直接調(diào)用其中的資源之外。還能直接線上修改Loading效果。實(shí)乃UI設(shè)計(jì)必備之佳品。

UI 動(dòng)效設(shè)計(jì)靈感站：《讓界面動(dòng)起來！9個(gè)移動(dòng)動(dòng)效設(shè)計(jì)必備的靈感收集站》

Preloaders

?

Preloaders的動(dòng)畫類別非常之多，可以看到除了常見的圖片以外，他們對(duì)圖片還進(jìn)行了分類可以是三維的loading效果，也可以是純文字的。總之你能想到的常見分類，這里都是可以直接找到對(duì)應(yīng)的作品。

?它里面可以生成的格式是GIF、SVG或者APNG，有“Free”標(biāo)簽的Loading是可以直接下載使用的。這對(duì)于設(shè)計(jì)師來說減少了很多與RD同學(xué)的溝通成本。

與此同時(shí)，美丫姐覺得最最方便是它有很多的效果是能夠直接在網(wǎng)頁里面去編輯的。比如：修改顏色、修改運(yùn)動(dòng)速度。要知道這些在AE里面修改之后輸出資源，還是非常麻煩的。

?從上圖可以看到，可以修改的地方還是非常多的。比如前景背景色，還有大小，運(yùn)動(dòng)速度等等。讓我們修改看看吧。

改起來非常直觀，這樣我們就獲得了一個(gè)嶄新的藍(lán)色GIF圖片。這里選用的是.gif格式進(jìn)行下載，所以最終的顯示效果也是直接就能預(yù)覽的GIF動(dòng)圖，效果如下：

?

其他的樣式也可以隨意更改，總之是非常非常方便，以下效果均出自Preloaders

?

?以后再跟RD哥哥溝通頁面效果的時(shí)候，完全可以拿出這個(gè)網(wǎng)站的案例作為范例來給RD哥哥演示。即使圖形上有偏差，也可以作為效果演示。簡簡單單搞定~

當(dāng)然，這個(gè)網(wǎng)站也有一個(gè)非常逼死強(qiáng)迫癥的地方：就是它的網(wǎng)站圖標(biāo)，是一個(gè)Loading圖！！總覺得沒有加載出來啊啊啊啊啊，急死我了…

?

簡直可怕…

?想要了解更多的設(shè)計(jì)神器，可以關(guān)注@你丫才美工

同時(shí)推薦一個(gè)非常棒的免費(fèi)UI教程網(wǎng)站給大家：uiiiuiii.com

??

uiiiuiii.com優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄，幫您開啟免費(fèi)自學(xué)新篇章。

今天的神器就介紹到這里咯，歡迎同學(xué)們關(guān)注最充滿智（dou）慧（bi）的設(shè)計(jì)賬號(hào)：

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com