出自UXGuide.net

动画与过渡：设计理念

Animations and Transitions: Design Concepts

目录 1 好的动画与过渡的特性 2 创建动画语汇 3 设计正确的个性 3.1 生产力应用程序 3.2 实用程序 3.3 娱乐、游戏 4 动画性能 5 适当程度的注意力吸引 5.1 动画效果 5.2 时长 5.3 效果消退 6 PowerPoint 怎么样？

动画与过渡是代替原本可能被用户忽视的文本解释来形象地传达信息的有效方式。

错误：

正确：

使用动画来传达同样的信息，但显得更自然、低调。如果你需要重复看一千遍，你希望是哪种方式？

动画和过渡并不需要用户的关注。事实上，它们往往用于避免用户将注意力放在他们并不需要关心的程序机制上。许多成功的动画非常自然，以至于用户甚至没有注意到过——只有当它缺失的时候用户才会有所察觉。频繁出现使得动画更需要显得细微，把那些引人注目的效果留给真正需要引起注意的不常发生的事件。

开始菜单的过渡效果避免引起注意。

除了使你的程序更易于理解、用起来更流畅之外，设计良好的动画和过渡也是为你的程序增加个性、特征与风格的好办法。通过提供自然、真实世界的感，可以带来沉浸感更强、更吸引人的用户体验。

Windows 7 根据鼠标当前位置和程序图标的颜色在鼠标悬停时高亮任务栏按钮。这种方式在视觉上具有吸引力、也很细微，表达了谦虚的个性。

不过，当动画和过渡效果具有明确目的的时候最有效，也最受欢迎。应当将其用于改进可用性、流畅性和流程、以及对品质的印象——但不会严重影响性能。

尽管有些类型的动画用于引起用户的注意，但仍应确保其合理性且值得打断用户的思考。人眼对运动的物体较为敏感，尤其是外围的运动。当任务栏按钮闪烁或出现旋转的通知区域图标时，用户很难集中注意力。避免用动画来打断用户或分散用户的注意力，或是将用户的注意力吸引到那些并不需要用户关注的地方。

错误：

除非用户必须立即处理某些重要的事情，否则程序不应闪动其任务栏按钮。而在上面的情况下，用户唯一需要做的事情就是激活这个程序。

使用动画和过渡效果是因为你的程序需要使用，而不仅仅是因为你可以使用。而且出于无障碍访问的考虑，不要将动画用作传递重要信息的唯一方式。确保用户能够通过其他方式获取等价的信息。

好的动画与过渡的特性

Good animations and transitions strike the right balance among these attributes:

• Are clearly purposeful. Good animations are there because they need to be, whether to communicate information, make an interaction feel real, or draw attention to something noteworthy. And purposeful animations are accurate—if an animation shows that a task is being done, it's because the task is in fact being done.

Incorrect:

In this example, the animation shows that a fully charged battery is being charged.

• Look smooth and continuous. Good animations smoothly remove seams between scene or element state changes by showing relationships and providing a sense of place and context. Continuity helps users understand how they got where they are, and how to get back to where they came from.

The Windows 7 taskbar window preview morphs for continuity as the user moves from one program to another.

• Are realistic. Good animations simulate an object's real-world physical properties and behavior. This helps users predict and understand the results of their interactions. You don't have to model the real world exactly, but if you use realistic animations, you must keep them consistent with the real world. Users should never be surprised or confused by the results, especially with animations used for direct manipulation.

In this example, the "move out of the way" animation used by the Windows 7 taskbar feels more realistic than a static insertion point.

• Are authentic. Even objects that aren't found in the real world can appear natural by being based on the real-world behavior of a different, but related, object. This metaphor only works if the relationship clearly communicates the intended purpose and behavior.

In this example, the window "squeegee" animation used by Windows 7 feels authentic because it is consistent with how glass windows might behave in the real world.

• Use natural mapping. Natural mappings are either physical or cultural. A culturally-based natural mapping, for example, might start from the fact that in Western cultures, people read from left to right. Consequently, to express a time sequence of objects, the middle object is current, objects to the left are from the past, and objects to the right are in the future. Going forward in time is indicated by left-to-right movement.

In this example, the Windows Media® Player control has a natural mapping because playing moves the position from left to right.

• Have personality. Well-chosen animations are great ways to add personality, character, and style to your program. They can make the user experience more immersive and engaging. While the type of animation determines what it communicates, the specific way in which the animation is performed shows the program's personality. Good animations project the right personality for your program, whether serious or whimsical, or somewhere in between.

In this example, Zune's use of animated text and dynamic perspective help shape its personality.

• Look and feel responsive. Good animations don't harm the user's productivity by blocking users from other interactions, or forcing users to watch. No matter how natural and engaging your program's animations are, nobody wants to wait for them exclusively. Good animations also look responsive without being jarring by having a fast start with a soft landing. Responsive animations also benefit from communicating their purpose quickly. Users shouldn't have to watch an animation for a long time just to figure out what it is doing or when it is done.

For direct manipulation, responsive animations are essential to maintain a direct and engaging real-world feel. To feel direct, an object's contact points must stay under the pointer smoothly throughout the manipulation. Any lag, choppy response, or loss of contact destroys the perception of direct manipulation.

In this example, the touch panning transition feels responsive by keeping the contact point under the user's finger throughout the manipulation.

• Attract the right level of attention. Good animations are usually subtle and draw only the attention required to fulfill their purpose. As a result, they aren't distracting, annoying, overly complex, overly long, or repetitive. They don't become tiresome after repeated viewings.

In this example, Windows search temporarily draws attention to matching search words, then fades down.

• Look special only if genuinely special. Frequency increases the necessity for subtlety, so common interactions need simple animations that communicate a simple idea in a simple way. Reserve special, complex animations for special, infrequent experiences.

In this example, Windows uses an attention-getting animation at startup to make the experience feel special, but such an animation would be inappropriate elsewhere.

You'll know that you have achieved the right balance when the overall experience would be harmed if any of these attributes were removed.

创建动画语汇

Good animations are about effective visual communication, and consistency is crucial to their effectiveness. If you use a specific transition, such as pushing a scene in from the right to advance to the next scene, that should be the only transition used for that purpose and that transition shouldn't be used for any other purpose. Assigning different meanings to the same animation harms its ability to communicate. By assigning specific animations and transitions to specific meanings, you are creating an animation vocabulary.

This issue applies to animations and transitions that have meaning, not to generic ones that users aren't likely to assign meaning to or those whose purpose is to be unnoticeable. For example, animations like fades and special effects like dissolves have no particular meaning, so they can be used freely.

A good vocabulary assigns animations that model an object's real world, physical behavior. If you need to assign an animation to an object or action that doesn't have a real world counterpart, choose an animation that shows how the object might behave were it real.

While the Start menu isn't a real world object, its hover effect lights up like a real-world object might when activated.

Each animation in a vocabulary needs to be clearly distinct. The animations should have similar behaviors only if their associated actions are similarly related. For example, movement transitions suggest navigation, so you can use movement transitions from different directions to indicate different types of navigation.

You'll know that your animations and transitions aren't communicating well when users find the results confusing, surprising, or unexpected. Generally, it's better to achieve a single purpose well than multiple purposes not so well.

Ideally, your animation vocabulary should be comprehensive across all areas of your program that need them. If only a few interactions have natural animations, that will draw attention to those that don't.

To learn more about the Windows animation vocabulary, see the Usage patterns section of this article.

设计正确的个性

While the type of animation determines what it communicates, the specific way in which the animation is performed speaks to the program's personality and reinforces its brand.

Your program's personality should reflect the nature of its tasks and the personality of its users, so it's not an arbitrary choice. Rather, a well-designed personality should feel authentic—never try to force it. The personality should make an emotional connection to the user. Some factors to consider:

• Tasks: Serious or fun; optional or required.
• Consequences: Serious or minor.
• Cost: Free or purchased; if purchased, moderately priced or expensive.
• User focus: Relatively narrow group of target users, or wide, general audience.
• User environment: Professional, casual, or home.
• User age: Younger or older.
• Usage frequency: Frequent or infrequent.

The combination of these factors helps determine an appropriate personality for your program. Here are some suitable combinations for common types of programs:

生产力应用程序

Naturally, productivity applications must focus on productivity. While a few special experiences can stand out, most other animations should have these characteristics:

• Small
• Natural, realistic
• Subtle, subdued
• Fast, efficient
• Relaxed

实用程序

Utilities are typically used briefly, so their use of animation can be more aggressive:

• Realistic, illustrative, self-explanatory
• Safe
• Engaging

娱乐、游戏

Because the goal of these programs is to engage and delight users, the animations and transitions can be much more aggressive by having these characteristics:

• Large (possibly becoming an integral part of the experience)
• Artificial, surreal
• Impactful, vibrant
• Emotional, playful, whimsical
• Energetic

Making an emotional connection is so important for entertainment programs that it's acceptable to bend some rules if doing so helps make users fall in love with the program. For example, it's acceptable if an animation or transition becomes tiresome after the hundredth time if most users are unlikely to use the program that often.

Generally, animations and transitions that are small, natural, subdued, efficient, yet relaxed are the safest bet. Transitions with these characteristics typically take the shortest path from beginning to end, start quickly, end softly, and don't overshoot. Also, well designed transitions are designed to work well across the entire range of distances in which they will be used.

动画性能

When designing animations, make sure that they don't affect users' ability to use your program efficiently. Generally, make your animations slow enough to fulfill their purpose, but fast enough that they don't interfere with responsiveness, demand too much attention, or become tiresome.

Incorrect:

While this page turning animation has an engaging, real-world feel, it lessens users' productivity by taking longer to turn pages.

Brief transitions (200 milliseconds or less) are a special case (especially when they often work off of a delay) because users will be aware that they have to wait a split second for them. Users are willing to wait for such animations if:

• The perceived wait is extremely brief (200 milliseconds or less).
• The transition makes the interaction feel more smooth and natural.
• The transition makes the interaction feel more responsive.
• Any delay helps keep the user in control of the interaction.

Users will accept a brief delay for the taskbar button reordering animation because it is very brief and it makes the interaction feel more natural.

There are three ways in which animations can adversely affect performance: speed, responsiveness, and perception.

For speed, some animations are visual veneers over CPU-intensive tasks, so the last thing you should do is make these tasks slower with CPU-intensive animations. The most CPU-intensive animations ("heavy" animations) tend to:

• Involve many elements moving independently.
• Play for a long duration or distance.
• Involve a large amount of screen space.
• Are mathematically intensive.

Animations with less impact on performance:

• Involve a single object.
• Play for a short duration or distance.
• Involve a small amount of screen space.
• Aren't mathematically intensive.

To ensure good performance, heavy animations should be used only for tasks that aren't CPU intensive, whereas light animations can be used anywhere.

For responsiveness, most animations and transitions should be designed so that users can interact while the animation is running. Unless an animation is part of a process, make it independent of the user's primary interaction and allow users to interrupt it.

An animation might not adversely affect a task's performance in reality, yet users may have the perception that it does. For example, don't use an animation that appears heavy for a slow, CPU-intensive task even if it doesn't harm performance, because users might conclude that the animation is the reason the task is slow. If something looks slow, it will feel slow, so it's better to use animations that feel simple, lightweight, and fast. Using animations with snappy beginnings for CPU-intensive tasks helps.

Risky:

While the animation in the Windows file copy dialog doesn't harm file copy performance, it runs the risk of having users think that it does.

Also risky:

In this example, the sluggish looking progress animation in the Windows Explorer address bar makes some tasks look painfully slow.

Animations and transitions have no value if their quality is so poor that they make the experience less smooth and less engaging. To maintain their quality, animations should be designed to degrade gracefully whenever sufficient system resources aren't available. Animations can degrade by having variations that require fewer resources (such as shorter lengths or lower frame rates), or even not running at all. Regardless of the resources available, make sure the animations have high quality and look like animations instead of software bugs.

Finally, if users believe that your program's animations and transitions detract from their productivity, there's a good chance that some users will want to turn them off. To support this ability, respect the option to Turn off all unnecessary animations found in the Windows Ease of Access Center.

适当程度的注意力吸引

While only some types of animations and transitions are specifically designed to attract the user's attention, they should be designed to attract the right level of attention to fulfill their purpose well. What are the different ways to attract attention, and how do you pick the right one?

动画效果

Different animation effects attract different levels of attention. The following list summarizes the most common methods, starting with the most attention-getting:

• Rapid flashing. Demands immediate attention. Can break users' concentration no matter where the flashing is occurring.
• Moderate flashing. Same, but demands less attention with lower frequency.
• Bouncing. Noticeable in peripheral vision, and relatively demanding in nature. Users are likely to notice, but can continue to concentrate elsewhere only if duration is short.
• Motion. Noticeable in peripheral vision, but not demanding. However, complex or 3-D motions attract more attention than simple or 2-D motions. Users are likely to notice, but can continue to concentrate elsewhere.
• Moderate pulsing. Noticeable but not distracting in peripheral vision. Users can continue to concentrate elsewhere. Can pulse brightness, colors, and sizes.
• Slow pulsing/glowing. Noticeable but subtle. Attracts more attention than a static effect, but users might not notice the animation unless they are already looking.
• Fade. Even less noticeable. Attracts more attention than a static effect, but users might not notice the animation unless they are already looking.
• Static highlight/gleam. Noticeable if users choose to look, but doesn't demand attention if it is elsewhere.
• Ambient/natural. Purposefully not noticeable by having a natural, real-world appearance.

To determine the right approach for your program or feature, consider how these factors relate to your feature's scenarios.

For example, suppose you are designing an instant message program and someone just sent the user a message. This scenario requires the user's attention, it should be noticeable anywhere, and usually the user will want to respond quickly. This scenario suggests that a moderate flashing animation would be a good choice. By contrast, suppose you want to inform users that a print job has completed. Users should be able to continue to concentrate and work productively elsewhere, and it's acceptable if users don't notice. This scenario suggests that moderate to slow pulsing or glowing would be a good choice.

时长

The appropriate duration for an attention getting animation depends upon the scenario and the specific type of animation used. The more attention an animation effect demands, the shorter the duration should be. While very subtle effects that demand little attention (like slow pulsing) can be played indefinitely, attention demanding effects should only be played between 1 and 3 seconds. Anything longer risks making the animation overwhelming and annoying.

In Windows 7, the taskbar flashes for attention for only a second. Any longer would be annoying.

效果消退

You should design attention-getting animations based on the assumption that if users don't respond right away, it is because they are busy doing something else and don't want to be interrupted. Thus, your goal should be to attract attention without demanding it.

To get the right balance of attracting attention without demanding it, decay the intensity of an effect over time. For example, to attract attention you can make the effect initially strong, but then slow down the effect quickly. By doing so, the attractive power is mostly determined by the initial effect, but the user's overall impression is determined mostly by its finish.

In Windows 7, the taskbar flash effect slows down at the end.

PowerPoint 怎么样？

Microsoft PowerPoint® transitions often deliberately violate these guidelines because they are designed to draw attention to slide transitions and require users to wait for them. Furthermore, they don't have any particular meaning so they communicate nothing beyond the fact that a slide is changing.

PowerPoint-style transitions, when used properly, have these purposes:

• They break long presentations into smaller chunks by forcing the presenter to pause.
• They draw the audience's attention toward changes in the presentation, helping people refocus if their minds have wondered.
• They give the presentation a rhythm so that it doesn't feel monotonous or overwhelming.
• Their style reflects the personality of the presenter or of the material.

While these are important goals for a presentation, such transitions would draw unnecessary attention in the UI of most types of programs, and would become tiresome quickly.

Bottom line: Don't use PowerPoint-style transitions as a model for your program.

If you do only six things...

1. Use animations and transitions to make your program easier to understand, and feel smoother and more engaging. They should have a clear purpose. Don't use animations just because you can, or to draw unnecessary attention to your program.
2. Define an animation vocabulary and use it consistently throughout your program. Use the Windows 7 animation vocabulary when appropriate.
3. Use the characteristics of your animations to give your program personality and reinforce its brand.
4. Make most animations simple, brief, and subtle. Remember that animations don't have to demand attention to be successful. If an animation is appropriate and natural, users will only notice its absence.
5. Make your animations fast and responsive, and give them a lightweight feel. No matter how engaging your animations are, nobody is going to want to feel like they are waiting for them. Design heavier animations to have graceful degradation.
6. Design for the long run. If an animation is annoying, distracting, or tiresome, redesign it or remove it.