animation in ui ux

Download Animation in UI UX

If you can't read please download the document

Post on 21-Apr-2017

656 views

Category:

Design

0 download

Embed Size (px)

TRANSCRIPT

Chris ChenAnimation In UI UX

Interaction Design

Interaction Design

http://www.billverplank.com/Lecture/images/InteractionDesign.gif

Turkish Airline iPad Design is an example too muchhttps://vimeo.com/132487615

Change StatesChange of States & Modes

Attract Users Attention

Visual Feedback

Reduce the stress in Waiting Time

Guiding the user to next action

()Increase Spatial Awareness (Mental Model)

()

Frank Thomas & Oille JohnstonThe nine old man

The illusion of life12 Principles

Squash and Stretch Created by Way Chang

Squash and Stretch

Time and Spacing

Time and Spacing

0.3

0.3

http://www.humanbenchmark.com/tests/reactiontime

Anticipation

Anticipation

John Lasseter

Arc

Arc

Pose to Pose Animation

Layered Animation is about give each property their individual timinghttps://vimeo.com/51370027

http://uigifs.comuiGIFscapptivate.coCapptivate.cohttp://useyourinterface.comUse Your InterfaceUI Movementhttp://uimovement.comAPP ANIMATIONhttp://www.appanimations.comand more

Prototyping Tool

Resources

https://code.facebook.com/posts/234067533455773/introducing-pop-the-animation-engine-behind-paper/Facebook animation engine - POP

Spring for Swift by MengTohttps://github.com/MengTo/Spring

MVP

Referencehttps://medium.com/elepath-exports/spatial-interfaces-886bccc5d1e9#.pi6lx9a0vSpatial Interfaces - Pasquale DSilvahttp://markgeyer.com/pres/the-art-of-ui-animationsThe Art of UI animationhttps://www.google.com/design/spec/motion/material-motion.htmlGoogle Material Design - Motionhttps://medium.com/p/f450432731e5/edit - https://medium.com/@becca_u/the-principles-of-ux-choreography-69c91c2cbc2a#.dmg8kgt0dThe Principles of UX Choreographyhttps://medium.com/@jakely/the-why-of-using-animation-in-interaction-design-350aad16dea0#.3t768tvqlWhy using Animation in Interaction