36个UI动效设计!帮你从细节上提升app产品逼格

分享到:更多 ()

今天给大家收集了36个来自Dribbble社区最新的UI动效设计概念动画图标及元素设计稿。好好学习一下里面的细节处理吧。有实用的参考价值!

1. 菜单的打开/确认/关闭三种状态

Menu open / tick / close

UI动效设计

By Kreativa Studio

https://dribbble.com/shots/1657075-Dancing-Icon

2. 下载/保存

Download / save

UI动效设计

By Warren Lebovics

https://dribbble.com/shots/1725734-Download-Save-Animation

3. 播放/暂停

Play / pause

UI动效设计

By Kreativa Studio

https://dribbble.com/shots/1680799-Play-Pause-Animation

4. 搜索条

Search bar

UI动效设计

By Sandeep Virk

https://dribbble.com/shots/1992789-Search

5. 菜单的打开/关闭

Menu open / close

UI动效设计

By Thanks But No Thanks

https://dribbble.com/shots/2256354-Menu-open-close

6. 响应式图标式样

Responsive icons

UI动效设计

By Joe Harrison

https://dribbble.com/shots/1290195-New-Project-Responsive-Icons

7. 声音的打开/关闭

Sound on / off

UI动效设计

By Kreativa Studio

https://dribbble.com/shots/1664807-No-you-shut-up

8. 发送邮件

Sending mail

UI动效设计

By Tamas Kojo

https://dribbble.com/shots/2190376-sending

9. 菜单打开/关闭

Menu open / close

UI动效设计

By Creativedash

https://dribbble.com/shots/1623679-Open-Close

10. 喜爱/收藏

Favourite

UI动效设计

By Brian Waddington

https://dribbble.com/shots/1884504-Twitter-Fav

11. 音频录制状态

Recording Audio

11.gif

By Ryan McLaughlin

12. 云下载状态

Cloud download / done

12.gif

By Brandon Termini

https://dribbble.com/shots/1915900-Download-Animation

13. 菜单的打开/关闭

Menu open / close

13.gif

By Tamas Kojo

https://dribbble.com/shots/2265620-hamburger-menu

14. 响应式设计

Responsive design

14.gif

By Karol Podleśny

https://dribbble.com/shots/1277779-Morphing-devices-GIF

15. 新消息到达

New Message

15.gif

By Davor Moucka

https://dribbble.com/shots/1686692-You-ve-got-message

16. 下拉刷新

Pull down / refresh

16.gif

By Hoang Nguyen

https://dribbble.com/shots/2232385-Pull-Down-to-Refresh

17. 菜单的打开/关闭

Menu open / close

17.gif

By Kenny Sing

https://dribbble.com/shots/1625075-Animated-Menu-Icon

18. 刷新

Refresh

18.gif

By Sandeep Virk

https://dribbble.com/shots/2064446-Refresh

19. 保存

Save

19.gif

By Justin Nurse

https://dribbble.com/shots/1047708–Freebie-Save-Icon-Animated

20. 搜索/返回

Search / back

20.gif

By Rahul Bhosale

21. 菜单的各个状态

Menu / more / close / back

21.gif

By Alex Kirhenstein | Draward

https://dribbble.com/shots/1877392-Icon-Animation

22. 返回/关闭

Back / close

22.gif

By Sandeep Virk

https://dribbble.com/shots/1980182-Back-to-Close

23. 上传完成

Upload / complete

23.gif

By Colin Garven

https://dribbble.com/shots/1429143-Upload

24. 附件内容

Attaching file

24.gif

By Roman Bulah

https://dribbble.com/shots/1989304-Attaching-File

25. 点菜单的打开/关闭

Dotted menu open / close

25.gif

By Warren Lebovics

https://dribbble.com/shots/1916107-Menu-Animation

26. 发送消息

Message sent

26.gif

By Mike DiLuigi

https://dribbble.com/shots/1929970-Message-Sent

27. 新邮件到达

New mail

27.gif

By Dominik Levitsky

https://dribbble.com/shots/2142189-We-ve-got-mail-GIF

28. 喜爱/收藏

Shortlist

28.gif

By Rahul Bhosale

https://dribbble.com/shots/2191426-Shortlist-Icon-animates-now

29. 菜单的打开/关闭

Menu open / close

29.gif

By Homeliuwei

https://dribbble.com/shots/1625836-Open-Close

30. 音乐APP的引导页动画介绍

Music app intro animations

30.gif

By Sergey Valiukh

https://dribbble.com/shots/1614592-GIF-Animation-of-Introductory-Screens

31. 搜索加载

Search / loading

31.gif

By Sandeep Virk

https://dribbble.com/shots/1709699-Search-Loading

32. 径向菜单

Radial menu

32.gif

By Howard Moen

https://dribbble.com/shots/801609-Concept-Idea-Radial-Menu-UI-animated

33. 食物加载动画

EatStreet loading animation

33.gif

By Jeremy Martinez

https://dribbble.com/shots/1950119-EatStreet-Loading

34. 火狐加载动画

Firefox logo

34.gif

By Latham Arnott

https://dribbble.com/shots/1726042-Firefox-Logo-Animation

35. 地图社交程序的交互动画

35.gif

By Sergey Valiukh

https://dribbble.com/shots/1653754-GIF-Animation-of-an-App

36. 天气图标

Weather icons

36.gif

By Mark Geyer

https://dribbble.com/shots/1389791–GIF-Weather

 

来源:V6Design(微信号:V6Designs)

 

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » 36个UI动效设计!帮你从细节上提升app产品逼格

2
分享到:更多 ()