The UX of Great Animation

Понравилась презентация – покажи это...

Слайд 0

Слайд 1

Слайд 2

Слайд 3

Слайд 4

Great UI animation has purpose and style http://img.archiexpo.com/images_ae/photo-g/contemporary-chair-polypropylene-charles-ray-eames-80422-3019841.jpg

Слайд 5

Animating With Purpose

Слайд 6

The Brain Benefits of Animation Reduce cognitive load Prevent change blindness Better recall of spacial relationships Lower perceived load times

Слайд 7

Design Problems Animation Can Solve

Слайд 8

Orientation Reinforce mental models of the interface and show how content is related.

Слайд 9

Слайд 10

Слайд 11

Слайд 12

Guide Tasks By showing cause and effect and cueing current or potential actions.

Слайд 13

Слайд 14

Слайд 15

Слайд 16

Demonstrate Showing how something works or what to expect in a short amount of time.

Слайд 17

Слайд 18

Слайд 19

Direct Attention Leading the eye and calling attention to changes and important items.

Слайд 20

Слайд 21

Слайд 22

Слайд 23

Слайд 24

Going “Faster” Perceived performance gains by 
 transitioning content in.

Слайд 25

“Our findings indicate that the psychological mechanism of transitions is completely different from progress bars”

Слайд 26

Слайд 27

Слайд 28


Слайд 29

The Bigger Picture

Слайд 30

Choreography Designing all your UI animations 
 to feel logical and related.

Слайд 31

Similar objects animate in similar ways

Слайд 32

Entrance informs exit

Слайд 33

Match velocities

Слайд 34

Cohesive over consistent.

Слайд 35


Слайд 36


Слайд 37

Слайд 38

Be Inspired!

Слайд 39


Слайд 40


Слайд 41


Слайд 42

Слайд 43

@vlh uianimationewsletter.com

Слайд 44