Beruflich Dokumente
Kultur Dokumente
In this article
Animation fundamentals
Animation patterns
Animation fundamentals
Follow these rules to ensure consistent and user-friendly animation styles across the Visual Studio IDE.
Timing and speed are important to ensure that transitions feel quick and natural:
Animations that would occur frequently need to be quick enough that they don't interrupt the user's workflow. Watch the animation in a loop and
adjust the timing until it feels right.
Animations shouldn't be so fast or jarring that it's difficult to understand, but not so slow that it makes one impatient for the transition to finish.
Use variable timing to emphasize importance. For example, when navigating through a sequence of items on a class diagram, speed through
transitions between items then slow down to focus on important items.
Use gradual non-linear easing from one state to another, giving a sense of calm and natural movement.
When possible, use a subtle animation on hover to indicate interactive elements under the mouse.
If you rely heavily on animations in your features, then provide a means to turn them off locally (for all your features) as an option in the Tools >
Options dialog.
Only one animation should occur at a time and convey just one piece of information. More than one object moving or attempting to convey
multiple things can be confusing.
Subtlety is important. In most cases, animation doesn't have to demand user attention to serve its purpose. Subtle changes in timing, sequencing,
and behavior might significantly impact perception, and can make the difference between an effective and ineffective animation.
When using animation to draw attention to something, make sure that it's worth interrupting the user's train of thought.
Stop showing progress movement when the underlying process isn't advancing.
Minimize use of effect animations that show status and make sure that they have real value by providing additional information of actual use.
Examples include transient status changes and emergencies
Animation don'ts:
Don't use small movements (movement in a small footprint). Prefer fades and changes over moving objects.
Don't use animations that take place over a large area of screen real estate. Regardless of size, this style of animation is distracting to the user.
Don't use animations unrelated to the object the user is currently focused on or interacting with.
Don't use animations that require user interaction to reset the state, like forcing the user to respond to a flashing notification in order to make it
stop flashing. Interacting with them in any way should be sufficient to dismiss them.
For more information on applications for these best practices, see Animation patterns.
Animation metrics
The system should visibly react to user gestures in less than 10 milliseconds.
One way to compensate for transitions that require longer times is to separate it into two parts. For example, the first part of an animation could be
the empty content container (up to 500 milliseconds), followed by the content fading into the container (up to 500 milliseconds).
For load times that can be calculated, a determinant progress indicator (percent-done progress indicator) is preferred.
For load times that can't be calculated, a busy indicator like a cursor or embedded spinning animation (loading or working indicator) is appropriate.
Animation as communicator
In Visual Studio UI, animation functions only as a communication tool. It's used to communicate a variety of information, like structural changes in the UI
(for example, when a menu opens or closes). Animation can help visualize the time-dependent behavior of complex systems, like installation progress
visualization. Animations can also be used to attract attention with alerts and notifications.
UI animations typically function in four ways: visualize, attract attention, simulate, and response times/progress indicators.
Visualize
Animation can emphasize the three-dimensional nature of objects and make it easier for users to visualize their spatial structure. To achieve this, the
animation may need to spin the object in a full circle, slowly turn it back and forth, or bring the object closer and slightly increase its size to emphasize
rollover or focus.
Although three-dimensional objects may be moved with user control, the designer should determine in advance (programmatically or manually) how to
best animate a movement that provides optimal understanding of the object. This programmed animation can then be activated by the user by placing
the cursor over the object, whereas user-controlled movements require the user to understand how to manipulate the object. Limit the movement to a
single axis or orientation at a time; either scale, rotate, or translate, but don't do more than one simultaneously.
The Visualize category includes the aspects of data, relationships, state, structure, sequence, and time.
Data
Representing changes over time using time sliders, jog-and-shuttle wheels, and transport controls (play, stop, and pause)
Relationships
Illustrate how items relate to one another or which items relate to a given item
State
Content updates
Progress
Errors
Structure
Reorienting
Sequence
Slideshow sequence
Time
Attract attention
If the goal is to draw the user's attention to a single element out of several or to alert the user to updated information, then an animation might be
appropriate. For example, your application start page might employ a Getting Started button that slides into place after the page loads.
As a rule, the last moving element on the screen attracts the user's attention. In a series of animated elements, the user's attention will follow the last
moving object.
Alert
Show that something is being done correctly or incorrectly or show progress or progress changes
Prompt users during a task, like finding more information online or learning about the current task
Notifications
Interrupt the user to see if they would like to attend to something else
Gently inform the user that a process has completed or changed, like when a download is complete.
Simulate
Determinate indicators give the user a sense of how far along the action is progressing, as well as a feeling of getting closer to the finish.
Animation patterns
Overview
Animations in Visual Studio are meant to serve a specific function without hindering user productivity. Generally, animations in Visual Studio should be:
This illustration shows the animation styles we recommend for Visual Studio. No animation or subtle animations like fade in/fade out are the most
frequently used. There is limited application of movement animations like expand and contract, X and Y position change, and rotation.
With this pattern, an element switches from visible to out-of-view and back without a transition animation.
Correct usage
Fresh UI elements that need to instantly appear or disappear so that the user is neither distracted nor obstructed. In addition, slow-moving animations
might be perceived as a performance drag, which won't occur with the appear-and-disappear style.
Incorrect usage
Cases in which UI appears so abruptly the user has no idea what happened, and adding an animation would help with contextual understanding.
Animation properties
Examples
With this pattern, a UI element transitions from not visible (0% opacity) to visible (100% opacity) or vice versa.
Correct usage
This is the most commonly recommended UI animation. It's a subtle effect that adds interest without interrupting flow. In some cases, the user might not
even realize that there's an animation, perceiving a smooth and flowing UI system.
Animation properties
Duration: 200 milliseconds standalone, 100 milliseconds when used as part of a combination animation sequence
Examples
Correct usage
As an animated transition when a UI element changes color from one context or state to another.
Animation properties
Duration: 200 milliseconds standalone, 100 milliseconds when used as part of a combination animation sequence
Examples
Correct usage
As an animated transition when a UI element changes size from one context to another.
Animation properties
Anchor position: generally upper-left (for left-to-right languages) or upper-right (for right-to-left languages)
Duration: 200 milliseconds standalone, 100 milliseconds when used as part of a combination animation sequence
Examples
Correct usage
As an animated transition when a UI element changes position from one context to another.
Animation properties
Duration: 200 milliseconds standalone, 100 milliseconds when used as part of a combination animation sequence
Example
Tab reordering
Rotate
Animation properties
Duration: continuous
Example
Tab open
Style: appear
Tab close
Tab reorder
Tab reorder animation
Style: appear
Style: to be consistent with other windows, let the current operating system define the document close animation.
Menu open
Menu open animation
Style: fade-in
Menu close
Style: fade-out
Style: appear