Design [Note]

[TOC]

Motion Design

设计靠形式来体现内容的感觉。

层次 visual foucs

1. Transition, Focus & Delight
2. Position, Opacity & Scale
   • Position,
   • Opacity，浅化，逐渐淡出人们的视野
     
3. Use the three properties. Break the design down.
4. Color, Rotation & 3D(perspective value -> the amount of warping)

Slight rotation animations can add a really neat element of interest to an otherwise mundane piece of motion, especially when coupled with spring animation curves which will be discussed later in this guide.(?)

Think first

why you use this animation?

• What are the initial properties of the item?
• What are the final properties of the item?
• How long should the animation take?
• What's happening while this item is animating?
• What will happen once this item is done animating?

Code it

Apple CALayer

Framwork

Design with animation

What is animation?

Why? When?

1. Direct people's attention. Something is changed.
2. Where they are and where they go
3. Connect people's behavior, fell they are in control. eg. note center ## How do we try animals? When to use which animation? How it feels?
4. Make prototype and get their feedback.
5. Show
6. Learn

Example: toast APP.

Prototyping Animation.

1. Tool: Keynote
2. Why? What's your goal? What do you want to tell your coustomer?
   • Email
   • add your favorite toast ### Interactive Prototype
3. fell it at hands
4. let people try it
5. make changes

Peoblem Start Change Compete

Use animation to add character to your app or game.