IxD Lab Assignment 2
Animation Rules for UI Design
This week we talk about animation principles for UI design. For interaction designer, there is not way to escape animation part while implementing a interaction design prototype.
Illusion of Life
From Disney’s 12 animation principles, we have extract 5 of them as our UI design principles.
- Squash & Stretch: When object moves, the shape of object will change according its movement.
- Anticipation: When object starts to move, there will be a prepared stage to let viewer aware of its next movement.
- Follow through: When the main body of the object moves, other parts of object will follow it according to its property. For example, the antenna and feather will move in different way.
- Slow in & Slow out: Object moves in real world will have accelerate and decelerate stage other than just move in constant speed.
- Timing: Different frames numbers between keyframes will feel different.
Apply in UI Design
This principles could apply in UI design as well. With motionLibraryV1 provided by Professor. We follow the build-in motion curve to make a UI prototype.
I create two pages of an simple UI design.
Apply motion with different elements by links them as parent layer