今天25學(xué)堂的給大家收集了9個來自Dribbble的UI 圖標(biāo)類的動效設(shè)計稿。非常富有設(shè)計靈感的一些APP動效作品。可以讓大家理解這樣的一些APP圖標(biāo)交互動效設(shè)計的原理以及如何構(gòu)思的。

小編覺得給大家有實用的參考價值！值得大家一一來品味。

1、 APP漢堡菜單圖標(biāo)的打開/關(guān)閉 ? ??Menu open / close

干凈、清爽、流暢的APP圖標(biāo)動畫設(shè)計就是讓人舒服。

追波網(wǎng)地址：https://dribbble.com/shots/2265620-hamburger-menu

2、APP漢堡菜單的打開/關(guān)閉

APP漢堡菜單是整個APP圖標(biāo)設(shè)計當(dāng)中最常見的一個，你可以設(shè)計的非常動感，也可以根據(jù)具體的使用場景來設(shè)計這樣的菜單交互。

追波網(wǎng)地址：https://dribbble.com/shots/1625075-Animated-Menu-Icon

3、鼠標(biāo)移動圖標(biāo)動畫設(shè)計

追波網(wǎng)地址：https://dribbble.com/shots/1769468-Product-Animation

4、菜單的各個狀態(tài) ?Menu / more / close / back

追波網(wǎng)地址：https://dribbble.com/shots/1877392-Icon-Animation

5、點(diǎn)菜單的打開/關(guān)閉 ? ?Dotted menu open / close

追波網(wǎng)地址：https://dribbble.com/shots/1916107-Menu-Animation

6、搜索圖標(biāo)加載動畫設(shè)計??Search / loading

追波網(wǎng)地址：https://dribbble.com/shots/1709699-Search-Loading

7、APP發(fā)送消息圖標(biāo)的動效設(shè)計

追波網(wǎng)地址：https://dribbble.com/shots/1929970-Message-Sent

8、APP新消息到達(dá)圖標(biāo)動畫設(shè)計

當(dāng)你的APP上有新的站內(nèi)信息或者消息通知的時候，除了有一個紅點(diǎn)表示之外，也可以采用這樣的設(shè)計方式，在圖標(biāo)的右上角加上一個小數(shù)字。

追波網(wǎng)地址：https://dribbble.com/shots/1686692-You-ve-got-message

9、聲音的打開/關(guān)閉 ??Sound on / off

這是一個音樂圖標(biāo)動畫設(shè)計靈感，非常的人性化。

追波網(wǎng)地址：https://dribbble.com/shots/1664807-No-you-shut-up