随笔 - 229  文章 - 2  评论 - 511  阅读 - 84万

Animation Guidelines



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
posted on   stswordman  阅读(348)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
< 2007年1月 >
31 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 1 2 3
4 5 6 7 8 9 10

点击右上角即可分享
微信分享提示