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

动效在过去,其实是比较奢侈的技术。因为对设备性能有一定的要求。然后现在NB得不行的各种智能手机已随处可见。所以,可以预见的的是,动效是接下来几年的设计趋势。那些恰到好处的动效总会吸引我们的眼球,并与之产生交互~

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

最后啰嗦句:骚年,赶紧先去了解了解Motion Graphic。AE不管正版\盗版的先安装在你电脑里再说·~

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

Menu open / tick / close

0

By Kreativa Studio

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

2. 下载/保存

Download / save

0 (1)

By Warren Lebovics

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

3. 播放/暂停

Play / pause

0 (2)

By Kreativa Studio

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

4. 搜索条

Search bar

0 (3)

By Sandeep Virk

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

5. 菜单的打开/关闭

Menu open / close

0 (4)

By Thanks But No Thanks

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

6. 响应式图标式样

Responsive icons

0 (5)

By Joe Harrison

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

7. 声音的打开/关闭

Sound on / off

0 (6)

By Kreativa Studio

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

8. 发送邮件

Sending mail

0 (7)

By Tamas Kojo

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

9. 菜单打开/关闭

Menu open / close

0 (8)

By Creativedash

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

10. 喜爱/收藏

Favourite

0 (9)

By Brian Waddington

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

11. 音频录制状态

Recording Audio

0 (10)

By Ryan McLaughlin

12. 云下载状态

Cloud download / done

0 (11)

By Brandon Termini

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

13. 菜单的打开/关闭

Menu open / close

0 (12)

By Tamas Kojo

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

14. 响应式设计

Responsive design

0 (13)

By Karol Podleśny

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

15. 新消息到达

New Message

0 (14)

By Davor Moucka

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

16. 下拉刷新

Pull down / refresh

0 (15)

By Hoang Nguyen

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

17. 菜单的打开/关闭

Menu open / close

0 (16)

By Kenny Sing

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

18. 刷新

Refresh

0 (17)

By Sandeep Virk

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

19. 保存

Save

0 (18)

By Justin Nurse

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

20. 搜索/返回

Search / back

0 (19)

By Rahul Bhosale

21. 菜单的各个状态

Menu / more / close / back

0 (20)

By Alex Kirhenstein | Draward

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

22. 返回/关闭

Back / close

0 (21)

By Sandeep Virk

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

23. 上传完成

Upload / complete

0 (22)

By Colin Garven

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

24. 附件内容

Attaching file

0 (23)

By Roman Bulah

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

25. 点菜单的打开/关闭

Dotted menu open / close

0 (24)

By Warren Lebovics

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

26. 发送消息

Message sent

0 (25)

By Mike DiLuigi

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

27. 新邮件到达

New mail

0 (26)

By Dominik Levitsky

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

28. 喜爱/收藏

Shortlist

0 (27)

By Rahul Bhosale

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

29. 菜单的打开/关闭

Menu open / close

0 (28)

By Homeliuwei

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

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

Music app intro animations

0 (29)

By Sergey Valiukh

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

31. 搜索加载

Search / loading

0 (30)

By Sandeep Virk

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

32. 径向菜单

Radial menu

0 (31)

By Howard Moen

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

33. 食物加载动画

EatStreet loading animation

0 (32)

By Jeremy Martinez

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

34. 火狐加载动画

Firefox logo

0 (33)

By Latham Arnott

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

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

0 (34)

By Sergey Valiukh

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

36. 天气图标

Weather icons

0 (35)

By Mark Geyer

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

2 11 收藏 3 评论

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部