Animation Guidelines

• Rob Relyea 在文章中阐述了他对于在wpf中使用动画的建议

Animation Guidelines

Here is a snapshot of the animation section of the Ux (User Experience) Guidelines for WPF:

Animations

There are five basic types of animations:

• Illustration animations communicate information visually instead of verbally.
• Effect animations create interactions to model their real-world counterparts.
• Relationship animations show relationships between objects (where objects come from, went to).
• Transition animations show major UI state changes.
• Feedback animations show that something is being done correctly or incorrectly, or show processing progress.

The human eye is sensitive to motion, especially peripheral motion. If you use animation to draw attention to something, make sure that attention is well deserved and worthy of interrupting the user's train of thought.

Animations don't have to demand attention to be successful. In fact, many successful animations are so natural that users aren't even aware of them.

Do's:

Illustration animations

• Use illustration animations that have a single interpretation. They have little value if confusing.
• Show one thing at a time to avoid overwhelming users.
• Play at the optimal speed—not so fast they are difficult to understand, but not so slow they are tedious to watch.
• Gradually increase the speed of repeated animations. Viewers will already be familiar with the animation, so increasing speed slowly will feel right.
• Use timing to emphasize importance, such as slowing down for important parts.

Effect animations

• Use effect animations for objects that the user is currently interacting with. Such animations aren't distracting because the user is already focused on the object.
• Minimize use of effect animations that show status. Make sure:
  • They have real value by providing additional information users can actually use. Examples include transient status changes and emergencies.
  • They are subtle.
  • They are short in duration and therefore not running most of the time.
  • They can be turned off.
• Keep effect animations low-key so they don't draw too much attention to themselves. Avoid movement or use small movements, but prefer fades and changes in overlays.

Relationship animations

• Must start or end with the selected object. Don't show relationships between objects the user isn't currently interacting with.
• Must complete within a half second or less.

Transition animations

• Use to show relationships between states. Animating state changes makes them easier to understand and appear smoother.
• Make sure transitions have natural mappings. For example, an opening window transition should be upward and expand; a closing window transition should be downward and contract.
• Must complete within a half second or less.

Feedback animations

• Must have clearly identifiable completion and failure states.
• Must stop showing progress when the underlying process isn't making progress.

Don'ts:

• Don't use animations that can noticeably affect performance. Consider performance over slow network connections or when many objects are involved.
• Don't draw attention to things that aren't worthy of attention.

Are we missing guidelines?
What examples would you like to see?
Any other comments?

Additions (after initial post)

Shawn Van Ness emailed me:

The comment about slow network connections isn't entirely clear, to me. (Is it referring to TS?)  I expected to see something about power or battery life, there.

Can we put in place a guideline to turn off animations (or greatly reduce the DesiredFrameRate) when running on battery?

Yes, I would guess that network is talking about TS??
Yes, it is good practice to not hit the CPU when you are running on battery...now the question is how easy can you detect that...

* A few other guidelines I found on the web: [1] [2] [3] (just collecting them for now...)

http://rrelyea.spaces.live.com/blog/cns!167AD7A5AB58D5FE!1604.entry?_c=BlogPart