recently years ,the motion graphic 、micro-interaction are very popular ; Maybe we can make a summary about this.

1. Interaction design Course
INTRODUCTORY
• What is Interaction design ?
• How does it using in UX practices?

2. What is interaction design ?
Interaction
Interaction
state
action
is
is
IxD
InD
“ Interaction Design ( IxD ) defines the structure and
behavior of interactive products and services.”
“ Interaction design ( InD ) is a medium to connect the
virtual and reality . ”

3. “Interactivity persuades people by making users think more
deeply about the message.”
——Jeeyun Oh
The nature of interaction design is
engagement

4. InD is one of keys to building good experience
Wearable Mobile Web
“New functionalities deliver new methods of interaction – which is to say, new ways to entertain users as
well .”

5. Animation in UI design:
the past _ roots in tradition animation
The history of Animation

6. The past _ roots in tradition animation:
Illusion of Life: Disney Animation

7. Illusion of Life: Disney Animation :
12 principles of animation
1. Squash and Stretch
2. Anticipation
3. Staging
4. Straight ahead Action and Pose to Pose
5. Follow-Through and Overlapping Action
6. Slow in and out
7. Arcs
8. Secondary Action
9. Timing
10. Exaggeration
11. Solid Drawing
12. Appeal

8. Follow the principles, the animation make the UI alive
Animation in UI design
The Present : 12 principles of animation in UI

9. Animation in UI design
The Present : 12 principles of animation in UI
1. Squash and Stretch 2. Anticipation 3. Staging
help describe the mass and rigidity of
animated objects and define the properties
of material they’re made of.
Is about emphasizing the central idea of an
animation, making it completely clear to
the viewer.
is a really powerful principle that can be
used both in the beginning and end of your
animation.

10. 4. Straight ahead Action and
Pose to Pose
5. Follow-Through and
Overlapping Action
6. Slow in and out
Is about orchestrating several simultaneous
motions.
Is one of the most fundamental tools to
drive users’ attention and make motion
look authentic at the same time.
Animators use different techniques
depending on the complexity and the
dynamics of current transition.
Animation in UI design
The Present : 12 principles of animation in UI

11. 7. Arcs 8. Secondary Action 9. Timing
also help define the motion’s nature. Is probably the most important principle of
all. No matter what you’re animating
Is very similar to Follow-through and
Overlapping . It helps you define what
should be put in front of the user and what
should stay hidden.
Animation in UI design
The Present : 12 principles of animation in UI

12. 10. Exaggeration 11. Solid Drawing 12. Appeal
makes movement feel dynamic, alive, and
just plain fun.
requires animators to understand the basics
of three-dimensional shapes: anatomy,
weight, balance, light, and shadow.
means staying true and consistent to the
motion design style and feeling it conveys
Animation in UI design
The Present : 12 principles of animation in UI

13. Animation in UI design
The Present : the relationship of animation and IND
Similarly, in UI, we want to tell a great interactive story on tiny screens.

14. Animation in UI design:
The Present : the relationship of animation and IND
Our characters are UX flow
Similarly, in UI, we want to tell a great interactive story on tiny screens.

15. Animation in UI design:
The Present : the relationship of animation and IND
Our fictional universe consists of UI controls

16. And we don’t have two hours—we’ve got
merely seconds before a user is confused
and loses attention
Animation in UI design:
The Present : the relationship of animation and IND

17. Animation in UI design:
The Present : the relationship of animation and IND
Just like movie directors, we want users to understand our characters

18. we can define three “buckets” of animation: Functional, Material, and Delightful. Animation
can help us achieve UX goals and make UI feel more consistent and real, all while driving
adoption of an entire product.
Animation in UI design:
The Present : the role of InD

19. Animation in UI design:
The Present : the role of InD
Functional（communication，Revealing Information）
•Optimize perceived user experience, make
it feel faster and more comprehensive
•Drive users’ attention
•Provide visual feedback and prepare for
next steps

20. Animation in UI design:
The Present : the role of InD
Material(Pacing)
• Build animation upon a consistent IA and
material UI model
• Define the spatial relationships between
screens and elements, their relative height
and elevation, weight and velocity

21. Animation in UI design:
The Present : the role of InD
Delightful(Distraction, Storytelling)
•After the first two components are met, add
some humanity and fun
•Make it feel unique and stand out from the
crowd
•Entertain users and help them relate to the
product

22. “Animated techniques will continue to evolve as designers break out of using animation for
only text, shapes and drawn elements by incorporating it into design projects that use more
still contents as well .
Animation in UI design:
The future: UP AND COMING TREND

23. Animation in UI design:
The future : Animation for “traditional” business
“You’ll likely start seeing companies such as
financial institutions, colleges and other visually
conservative businesses feature more animation
on their digital products. ”

24. Animation in UI design:
The future : Animation as a sales tool
“Animation can showcase products and
provide neat details in the user experience.”

25. Animation in UI design:
The future : the micro-interaction
“Micro-interactions might be easily overlooked
in the greater design scheme, but they actually
hold the entire experience together. They are
single moments of communication that help
users flow through your design. ”

26. SEE YOU NEXT TIME
the basic course
• The IND in project process;
• The key factors and the principles of IND;
• Create the concept design with general software;