30個APP介面動效設計欣賞

發表於2015-11-16

當我們展示一個概念APP時,單調的介面UI圖片只能單調的現實一部分效果,並不能讓你的APP看起來是真的,也不能展示整改互動流程給所有人。如果你想打動你的“甲方”(也許是真正的甲方,也許是公司內的需求方或老闆),使用GIF動畫將會使你的APP概念效果更加逼真、有動態效果,最後引人入勝。

30個關於手機APP介面UI動畫的GIF例子欣賞12188574_10153690974282505_1825417482_n

這個APP概念GIF動畫將肯定會給你帶來靈感。

下面是我們的UI移動APP程式動畫,它會激勵你下次做一樣的動畫去給“甲方”展示。

30個關於手機APP介面UI動畫的GIF例子欣賞speedcam

這個高速的APP動畫效果令人印象深刻。

1.Speedcam App Animation by Jakub Antalík for Sygic.com

30個關於手機APP介面UI動畫的GIF例子欣賞designer screen

2.Designer Screen GIF-Animation by Sergey Valiukh for Tubik Studio

30個關於手機APP介面UI動畫的GIF例子欣賞gif_animation_of_template_gallery

3. Gif Animation of Template Gallery by Sergey Valiukh for Tubik Studio

30個關於手機APP介面UI動畫的GIF例子欣賞weather-rebound

4.Weather Rebound by Chris Slowik

30個關於手機APP介面UI動畫的GIF例子欣賞curl (1)

5. Curl by Nicolas Girard

30個關於手機APP介面UI動畫的GIF例子欣賞workflowpayment

6. GIF – Workflow Payment by Barthelemy Chalvet for AgenceMe

 

如果你螢幕內容滾動的粉絲,那麼你可能認為這個APP動畫有點過了,但是如果你不是,那麼你一定會同意 Barthelemy Chalvet 的作品很棒,這個動畫流暢、快速。該GIF中有顯示支付過程,它不僅僅看起來整潔,而且方便。

30個關於手機APP介面UI動畫的GIF例子欣賞facescan

7.FaceScan App by George Frigo

 

這個動畫只持續了12秒,但很明顯你已經知道它是做什麼的,它可讓使用者通過網際網路組織自己的照片。

30個關於手機APP介面UI動畫的GIF例子欣賞wip

8.WIP Discover Music app by Alexander van Ravestyn

30個關於手機APP介面UI動畫的GIF例子欣賞walkthrough animation

9.Walkthrough Animation by Devin Ruppert

30個關於手機APP介面UI動畫的GIF例子欣賞interaction overview

10. Interaction Overview by Mihnea Zamfir

雖然很簡單,但是不得不說這個APP的刪除動畫集簡單、美麗和功效於一身!

30個關於手機APP介面UI動畫的GIF例子欣賞Delete task and assign task to your teammate in action

11. Delete Task and Assign Task to Your Teammate in Action by Tobs

30個關於手機APP介面UI動畫的GIF例子欣賞menu interaction

12. Menu Interaction GIF by Ben Dunn

毫無疑問這個選單超有吸引力,它從左側滑出非常優雅,難道你不喜歡它這種彈出方式嗎?

30個關於手機APP介面UI動畫的GIF例子欣賞abracadabra_gif

13. Abracadabra App by Sergey Valiukh for Tubik Studio

這個選單的互動方式非常了不起,特別是摺疊效果。

30個關於手機APP介面UI動畫的GIF例子欣賞showtime app

14. Showtime App by Luft

30個關於手機APP介面UI動畫的GIF例子欣賞ios7 animation

15. iOS 7 Animation by Fabio Basile

30個關於手機APP介面UI動畫的GIF例子欣賞life minimal app

16. Life Minimal App by Budi Tanrim

30個關於手機APP介面UI動畫的GIF例子欣賞weather by beardchicken

17. Weather by BeardChicken

30個關於手機APP介面UI動畫的GIF例子欣賞account

18. Account by Barthelemy Chalvet for AgenceMe

30個關於手機APP介面UI動畫的GIF例子欣賞work_page

19. Work Page by Barthelemy Chalvet for AgenceMe

30個關於手機APP介面UI動畫的GIF例子欣賞cover-inbox

20. Covert Inbox by Creativedash

30個關於手機APP介面UI動畫的GIF例子欣賞soccer analytics

21. Soccer Analytics by Monterosa

30個關於手機APP介面UI動畫的GIF例子欣賞onboarding-tour by mark geyer

22. Tour by Mark Geyer for Salesforce UX D

30個關於手機APP介面UI動畫的GIF例子欣賞loading animation

23. Loading Animation by Nicolas Girard

30個關於手機APP介面UI動畫的GIF例子欣賞photo_navigation_concept

24. Photo Navigation Concept by Chapps

30個關於手機APP介面UI動畫的GIF例子欣賞workflowpayment

25. Fiche Workflow Payment by Barthelemy Chalvet for AgenceMe

30個關於手機APP介面UI動畫的GIF例子欣賞map-pin-bubble

26. Map Pin Bubble by Ben Cline for RALLY

30個關於手機APP介面UI動畫的GIF例子欣賞menu

27. Menu (Animation) by Nest

30個關於手機APP介面UI動畫的GIF例子欣賞first shot

28. First Shot by Plady

16個令人眼前一亮的手機APP介面互動動畫效果展示

29.Shines GIF UI Animation

30個關於手機APP介面UI動畫的GIF例子欣賞exercise screen

30. Exercise Screen by Vitaly Rubtsov for Yalantis

30個關於手機APP介面UI動畫的GIF例子欣賞animated sliding bar

31. Animated Sliding Tab Bar by Virgil Pana

總結

UI和UX(使用者體驗設計師)開發者都意識到,使用介面動畫來展示它們的作品除了可以更容易打動需求方並且可以提升固有的藝術性。使用GIF動畫,可以避免花很長的時間去給客戶解釋相關的功能。無論APP介面截圖多麼漂亮,也比不上增加一個短暫的介面操作動畫所帶來的效果震撼和生動感覺。

相關文章