出自UXGuide.net

动画与过渡：设计规范

Animations and Transitions: Guidelines

目录 1 有效沟通 2 模式 2.1 悬停反馈 2.2 单击反馈 2.3 选中反馈 2.4 进度反馈 2.5 引起注意 2.6 关系动画 2.7 图解/预览 2.8 对象的扩大/收缩 2.9 内容的显示/隐藏/更改 2.10 控件或其功能可见性的显示/隐藏 2.11 场景切换 2.12 直接操纵 2.13 排序、筛选或调整顺序的过渡 2.14 性能过渡 2.15 特殊体验动画 3 性能 4 动画特征 5 动画文本 6 减少电源消耗 7 无障碍访问

有效沟通

• 定义并使用动画语汇来确保你的动画与过渡具有一致的含义，并在你的整个程序中保持统一。大部分语汇应当包括场景进入及对象显隐、导航、基本交互（悬停、选择、单击）、对象操纵与交互（移动、拖放、调整大小、滚动、平移、缩放、旋转、筛选）以及引起注意。一致的含义对于有效沟通来说至关重要。
• 尽可能使用 Windows 的动画语汇。虽然你的程序可能拥有不同的受众和需求，但通常一致性与熟悉感所带来的好处要多于其差异性。如果你的程序的语汇必须有所区别，应当使用与 Windows 相同的基本动画，但增加一些符合你的程序的个性。
• 不要为动画语汇中的常规动画和过渡指定特殊含义。像淡入淡出之类的常规过渡以及溶解等特效并没有特定的含义（除了显现和消失之外），因此可以自由使用。

错误：

在这个示例中，交叉淡入淡出效果错误地用在导航至下一个条目上。因为交叉淡入淡出并没有特别的含义，所以这种过渡意义不大。

• 使不同的语汇之间有明显差别。相关的操作可以具有相似的效果（例如，放大和缩小的过渡效果应该正好是相反的），但不相关的操作的效果之间应该存在明显的差别（例如，缩放和旋转不应当出现混淆）。
• 真实世界中的效果应当保持真实和统一。如果你使用真实的动画和过渡，应当与真实世界中的体验保持统一。用户不应当对其结果感到惊讶、疑惑或者被其误导。且对于一致性来说，不要混用隐喻。
• 相反的操作应当具有相反的动画。这将符合用户的预期并简化动画语汇。例如，如果面板出现时是滑入的，则消失也应当滑出——而不要使用其他效果。
• 动画应当易于理解。用户应当能够快速理解动画的目的。动画有可能会太小、太简短（短于 50 毫秒）或是过于细微，用户无法理解其目的。这种情况下，要么重新设计，使其含义明确，要么直接去掉。

错误：

在这个示例中，效果太小太细微，很少有用户能够理解其目的。最好是重新设计或者去掉。

模式

悬停反馈

• To appear responsive, strive to play animation within 50 milliseconds of entering or leaving the hover state.
• To appear fast, make the duration of hover animations less than 50 milliseconds.
• Use a fade in/fade out of hover effect. Doing so makes hover effects clearly distinct from click and selection feedback.

单击反馈

• To appear responsive, strive to play animation within 50 milliseconds of click down event. Click up events don't need click feedback.
• To appear fast, make the duration of click animations less than 50 milliseconds.
• Use a background flash or blink effect. Doing so makes click effects clearly distinct from hover and selection feedback. Because clicking requires hovering, make click feedback a smooth addition to hover feedback.

选中反馈

• To appear responsive, strive to play animation within 50 milliseconds of selection or deselection.
• To appear fast, make the duration of selection animations less than 50 milliseconds.
• Use a fade in/fade out selection rectangle effect. Doing so makes selection clearly distinct from hover and click feedback.

进度反馈

• Use an activity indicator when an action can't be performed within a second. Doing so indicates that the command has been received.
• Use a progress bar when a task will take more than five seconds. For more guidelines, see Progress Bars.
• Use progress feedback animations that help users visualize the effect of long-running tasks. Avoid unnecessary progress feedback animations—if an animation doesn't communicate anything helpful, use a progress bar instead.
• Have clearly identifiable completion and failure states. Users must be able to determine these final states quickly.
• Stop showing progress when the underlying task isn't making progress. Users need to be able to determine if progress isn't being made, and react accordingly.

引起注意

• Use attractors with restraint. Unless the information is urgent, critical, or otherwise likely to affect the user's immediate behavior, it's usually better to change state inconspicuously and let users discover the change on their own. Solve distractions, not discoverability.

In this example, the wireless network notification area icon uses an animation for critical problems, but lets users discover weak signals on their own.

• Choose an animation that draws the right level of attention. Attractor animations should draw just enough attention to themselves to fulfill their purpose, but no more. If the user must act immediately, choose an effect that demands attention no matter where the user is looking. For other situations, refer to the Attracting the right level of attention section to get the right combination of attention, noticeability, and urgency.

Incorrect:

The Microsoft Office Assistants attracted unnecessary attention to themselves.

• If the user doesn't respond, don't repeat the animation or use continuous animations. Instead, assume that the user chose not to act now, but may act later. Continuous animations make it difficult for users to concentrate on anything else.

关系动画

• Use relationship animations to show where objects came from or where they went.
• Relationship animations must start or end with the selected object. Don't show relationships between objects the user isn't currently interacting with. If users notice at all, what they'll notice is the distraction.

图解/预览

• Use previews to show the effect of a command without users having to perform it first. By using helpful previews, you can improve the efficiency and ease of learning of your program, and reduce the need for trial-and-error.
• Use illustrations and previews that have a clear interpretation. They have little value if confusing.
• Play only one illustration at a time to avoid overwhelming users. If multiple simultaneous illustrations are possible, use mouse hover or a play button to let users indicate their interest.
• Play an illustration automatically if it is the main purpose of the window or page. Otherwise, if it's optional, let users play it when they are ready.
• Play animations at the optimal speed—not so fast they are difficult to understand, but not so slow they are tedious to watch.

对象的扩大/收缩

• Don't clip content during a resize. Expand containers before adding content. Remove content before reducing containers.

Incorrect:

In this example, content is clipped during a resize.

内容的显示/隐藏/更改

• Display important information statically. Users shouldn't have to access important information through progressive disclosure.

控件或其功能可见性的显示/隐藏

• Display important controls when the user positions the pointer anywhere within the window or pane, or, if full screen, on mouse move. Users shouldn't have to hunt for these controls, so make their discovery certain.

In this example, Windows Media Center displays its controls whenever the pointer is over the window.

• Display secondary controls or control affordances when the user positions the pointer on or near the commands. For easy discoverability, make the location obvious and the target large.

In this example, Windows Live Messenger displays a secondary command when the pointer is near the upper right corner.

场景切换

• Make physical scene transitions consistent with natural mapping. People read from left to right in Western cultures, and hierarchical diagrams flow from top to bottom. Consequently, going forward in time is indicated by left-to-right movement. The following physical scene transitions have natural mapping:
  
  

  Transition	Meaning
  From left	Move back in task flow
  From right	Move forward in task flow
  From top	Move up task hierarchy
  From bottom	Move down task hierarchy

• If your program plays sound, design scene transitions and audio transitions together. For example, if a scene fades out gradually, any sound should fade gradually as well. Don't ruin seamless visual transitions by having abrupt sound transitions. For more sound guidelines, see Sound.

直接操纵

• When using physical gestures in the interaction (like tossing), design the animation to feel like a natural response to the gesture. Link the interaction cause with the transition effect. Give the animation real-world physical characteristics such as acceleration, deceleration, momentum, resistance, weight, bounce, and rotation.
• To maintain a direct feel, keep an object's contact points under the pointer smoothly throughout the interaction. Any lag, choppy response, or loss of contact destroys the perception of direct manipulation. Objects should never disappear while being manipulated.

排序、筛选或调整顺序的过渡

• For simple changes, show the entire transition. Users will be able to follow the entire transition easily. Simple changes involve four items or fewer.
• For complex changes, emphasize the end of the motion as it slows down, and let the eye fill in the rest. Doing so makes the motion feel much more responsive and orderly.

性能过渡

• Consider performing slow transitions in two or three stages to make them appear faster and immediately interactive. Use the following composition order when appropriate:
  • External frame
  • Background
  • Initial content (using a temporary representation if necessary)
  • Primary controls (so that users can interact immediately)
  • Secondary controls and any remaining UI elements
  • Final content (if a temporary representation was used)

Use transitions like fades and slides to make the composition appear smooth, orderly, and refined.

When scrolling in "Bird's eye" view, Bing maps display a temporary grid background. Doing so allows users to continue to scroll immediately, well before the final content is rendered.

特殊体验动画

• Reconsider animated splash screens (as well as static splash screens). Often splash screens just draw attention to how long a program takes to load, and they wear out their welcome quickly. While splash screens are acceptable if they are displayed only when user interaction isn't possible, whenever practical a better alternative is to design your program so that users can interact with it immediately, even while it is still loading.
• Provide a Skip Introduction command if an animated splash screen takes more than three seconds. Clicking anywhere on the splash screen should also dismiss it. Alternatively, use a short version of the animation after an initial period.

性能

• Don't make users wait for your program's animations and transitions. Use brief animations and transitions (less than 200 milliseconds) whenever practical. Use faster animations (100 milliseconds) for more frequent operations. Design longer animations (more than one second—usually the progress feedback, illustration, and special experience patterns) so that users can continue to work while they are running.
• Design long-running animations to make it clear to users that they can interact while the animation is running. Users won't attempt to continue to work if the visual clues suggest that they can't.

In this example from Windows Internet Explorer®, the low-key progress bar in the status bar suggests that users don't have to wait for completion before they can interact.

• Use lightweight animations for CPU-intensive tasks. Doing so gives full processing power to the task. Furthermore, users won't perceive that the lightweight animation is the reason why the task is CPU-intensive.
• Don't display an activity indicator during an animation or transition. Doing so destroys the effect. Design animations and transitions so that they are able to start right away.
• Design animations to degrade gracefully whenever there are insufficient system resources. 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.

Incorrect:

In this example, the window restore transition is used even though there aren't sufficient system resources to play it well. Consequently, the frozen frame appears to be a bug. If the resources aren't available, it's better to just display the window without a transition.

动画特征

Well-designed animations and transitions generally have these characteristics:

• Brief duration. Most animations should be between 100 and 300 milliseconds, preferably either 1/6 second (167 milliseconds) or 1/4 second (250 milliseconds). (Special experiences and progress feedback can be longer.) Use faster animation times for more frequent operations. Generally, longer animations take more time to complete, take more time to understand, and feel slow.
• Responsiveness. Animations should start within 50 milliseconds of the initiating event or user action. Longer start times feel unresponsive.
• Acceleration/deceleration. To look natural, most animation effects need to accelerate when starting and decelerate when stopping. To look responsive, design animations to have fast starts. To appear controlled, design animations to have soft landings at the end. While this applies to motion effects, it also applies to any effect that suggests movement, such as zooms and even fades.

Most animations should have fast starts and soft endings to have a responsive, yet controlled feel.

• Motion. Animations portraying motion in particular need to accelerate and decelerate, so don't use linear motion unless animation duration is very short. Motions should take the shorts path from beginning to end, without overshooting.

The full motion path is not always required. When appropriate, emphasize the end of the motion as it slows down, and let the eye fill in the rest. Doing so makes the motion feel much more responsive and orderly.

When animating the motion of several objects simultaneously, give them slightly different paths with slightly different timings to feel more natural.

• Frame rate. Most animations should use a frame rate of 20 frames per second. If the animation is for a special experience or is related to the main purpose of the program, consider using a higher rate of 24 – 30 frames per second to improve smoothness and realism.
• Scale. Design animations to work well across their entire range of intended usage. For example, page transitions should be designed to work for all page sizes.
• Personality. Design animations to feel natural, subdued, and efficient rather than artificial, whimsical, or slow.

动画文本

• While you may display text using a transition, don't continuously animate text. Animated text is often distracting and more difficult to read than static text.

Exceptions:

• • You may animate text in situations where it is traditionally animated, and you provide an accessible alternative.
  • You may animate text if the purpose of the text is primarily decorative.

In this example, Zune animates text but its purpose is primarily decorative. There isn't a problem if users don't carefully read the text.

减少电源消耗

• Design your animations to reduce power consumption. When designed properly, animations shouldn't increase power consumption significantly. To reduce power consumption:
  • Stop animating when the display is off. The display may be off for the purpose of saving power.
  • Don't use long-running animations that aren't user initiated. Animations that use high-resolution periodic timers reduce the efficiency of processor power management. Also, be sure to disable any high-resolution periodic timers when the animations are complete.
  • Suspend all animations when the system becomes idle. The period of user inactivity to become idle is determined by Power Options in Control Panel.

Developers: For more information about designing for power management, see Application Power Management Best Practices.

无障碍访问

• Don't use animation as the only way to convey essential information. Animations should communicate information that is useful but not critical, because they aren't accessible to users with visual impairments.
• Make sure equivalent information is available through other means, such as:
  • By inspection. Users can determine equivalent information by looking at the screen or objects involved in the animation.
  • By simple interaction. Users can determine equivalent information by hovering, clicking, or double clicking.

The Bing home page has an initial animation that reveals several hot spots. Users can also display the hot spots by moving the cursor near them.

Note that "equivalent information" doesn't mean identical information. The information might be in a different format or require simple deduction.

• When appropriate, set input focus on the object changed during a transition. Doing so enables assistive technologies to detect where the change happened. But don't change input focus when the user is using the keyboard.
• Don't use animations or transitions that flash or resize objects quickly. Flashing and rapid screen changes can cause problems for people with seizure impairments and other neurological disorders.
• Allow users to turn off your program's animations and transitions. To support this ability, respect the Turn off all unnecessary animations option in the Ease of Access Center in Windows.

Developers: You can determine if animations are enabled using the SystemParametersInfo API.

• Design tasks assuming that users will turn your program's animations off. Make sure that doing so doesn't disrupt the task flow significantly.

For more accessibility guidelines, see Accessibility.