windows:Visuals/animations-and-transitions/usage-patterns

出自UXGuide.net

跳转到: 导航, 搜索

动画与过渡:使用模式
Animations and Transitions: Usage Patterns


动画具有下列使用模式

悬停反馈

用于显示交互点的位置。

指示交互点处于可用状态,悬停状态也可通过静态效果来显示。
Windows 语汇:显示悬停效果(边界矩形、高亮、放大),并通过淡入淡出效果保持流畅。

Aa511285_Animations29(en-us,MSDN_10).png

在 Zune® 数码媒体播放器中,专辑的封面会在悬停时高亮,并显示播放控制组件。

单击反馈

用于显示可单击的对象具有反应并接受到了单击操作。

指示对象已被单击。
Windows 语汇:在鼠标按下时闪亮对象的背景。要表现触摸接触,可使用水波纹效果。

Aa511285_Animations30(en-us,MSDN_10).png

触摸会显示水波纹动画,以使用户知道操作已被识别。

选中反馈

用于显示对象已被选中。

指示对象已被选中。选中状态也可以通过静态效果来显示。
Windows 语汇:绘制选区矩形,并通过淡入淡出效果保持流畅。

Aa511285_Animations31(en-us,MSDN_10).png

在 Zune 中,专辑封面在被单击时会闪烁,然后在选中后显示选区矩形。

进度反馈

用于显示任务正在进行中。

进度反馈用于指示任务正在不断进行中,通常与活动指示器、进度条或描述任务的动画一起使用。确定性进度反馈将大致显示已完成和剩余的任务量,而非确定性进度则只指示任务正在进行过程中。
Windows 语汇:旋转的活动指示器、进度条、进度背景、图解动画。

Aa511285_Animations32(en-us,MSDN_10).png

在这个示例中,Windows Live™ Messenger 在登录过程中显示非确定性进度反馈。

引起注意

用于显示存在需要用户注意的情况。

当重要的对象被创建或需要关注(通常因为发生了更改),或者重要紧急的事件发生时引起适当程度的关注。关于设计技巧,参见引起适当程度的关注
Windows 语汇:闪烁、移动、脉动、发光、荧光。

Aa511285_Animations33(en-us,MSDN_10).png

Windows Live 工具栏在其第一次展现时显示动画,以明确其所在位置。

关系

用于显示对象之间的关系或因果关系。

以不会分散注意力或侵扰用户的方式显示关系,尤其当这种关系不太容易理解或未能预期时。
Windows 语汇:变形、变换、物理变化,如翻转、从某源点开始扩展、或者收缩到某目标点等。

Aa511285_Animations35(en-us,MSDN_10).png

在这个示例中,该动画显示了 Gamma 设置及其对显示的影响之间的关系。

图解/预览

用于形象地解释概念、任务或命令的效果。

用于形象地解释某个概念或某样东西的工作方式的动画或视频,同时补充或替换文本解释。这使得用户能够有效且自信地完成任务或选择命令。

Aa511285_Animations36(en-us,MSDN_10).png

在这个示例中,Tablet PC 输入面板中的“show me”命令通过图解来显示如何进行更正、删除、分割和连接。

过渡具有下列使用模式:

扩大/收缩/显现对象
To change an object's size or state smoothly.

Object changes between states, possibly while moving. Transition keeps users oriented during changes.
Windows vocabulary: Morph, change size, object slides in or out.

Aa511285_Animations37(en-us,MSDN_10).png

In this example, the Weather Gadget morphs from its concise state to display its Options dialog box.

显示/隐藏/更改内容
To show, hide, or change content smoothly, typically for progressive disclosure.

Window interior reshapes to display more, less, or different content. Transition keeps users oriented during changes.
Windows vocabulary: Pane slides in or out. Flyout windows fade in and out. Different content fades or rolls in.

Aa511285_Animations39(en-us,MSDN_10).png

The Windows Calculator has a smooth transition between view modes.

显示/隐藏控件或其功能可见性
To smoothly show or hide controls or their affordances on hover or mouse move in order to simplify the normal visual appearance.

Display controls when users are hovering the pointer over a command area, or display affordances when users are hovering over a control. Hovering over these areas indicates that the user intends to interact. Affordances may hide if the pointer becomes stationary.

Aa511285_Animations40(en-us,MSDN_10).png

In this example, the Windows Media Player controls fade in on hover when in full screen mode.

场景切换
To make a scene transition smooth and seamless in order to avoid attention.

Abrupt scene changes can be jarring, especially for large screen areas, so use scene transitions to create smoothness and continuity, and to provide context. Scene transitions are designed to be natural and low key, to avoid calling attention to the process of transition itself.
Windows vocabulary: Fade in/out; cross fade; sliding in/left, out/right, up, down; pushes and covers.

Aa511285_Animations41(en-us,MSDN_10).png

In this example, the Windows desktop wallpaper gently cross-fades between images to make the transition feel smooth and controlled.

特殊场景切换
To draw attention to a scene change to make it special or refocus the user's attention.

While most scene transitions should not call attention to the process of transition, some are designed to break the flow and draw attention in order to emphasize that something different is about to happen. To draw attention, special scene transitions are designed to be unnatural and have high visual impact.

Aa511285_Animations42(en-us,MSDN_10).png

In this example, PowerPoint uses attention-getting transitions to draw the audience into the change.

直接操纵
To show the effect of direct manipulations (such as move, scroll/pan, rotate, and zoom).

The transition shows the effect of the manipulation in real time. The effect should feel smooth, continuous, and consistent with the real world. Moving and rotating may not be continuous in some places to indicate restrictions or likely preferred choices. Zooming makes content larger or smaller, possibly changing the level of detail accordingly.

Aa511285_Animations43(en-us,MSDN_10).png

In this example, Magnifier zooms smoothly between levels.

错误的直接操纵
To indicate that a direct manipulation (such as move, scroll/pan) was attempted but could not be done.

The transition shows the manipulation being attempted, but reverts back to the original state. Often the effect looks like the manipulation can't be performed due to some real-world physical restriction. These animations are used instead of text-based error messages, which would disrupt the real-world feel of the manipulation.
Windows vocabulary: bounce

Aa511285_Animations04(en-us,MSDN_10).png

In this example, the document bounces to show that the user has reached the end.

排序、筛选、调整顺序的过渡
To indicate that the presentation or content of a collection of items has changed.

The transition shows (or for complex changes, suggests) the effect of the change.

Aa511285_Animations46a(en-us,MSDN_10).png


Aa511285_Animations46b(en-us,MSDN_10).png


Aa511285_Animations46c(en-us,MSDN_10).png

In this example, Bing visual search uses a filter transition.


Aa511285_Animations47(en-us,MSDN_10).png

In this example, Windows Media Center uses a reorder transition as a special experience while a song is playing.

性能过渡
To make an action appear to happen faster.

While any transition has the potential for making an action appear to happen faster, the primary purpose of these transitions is to improve the perception of performance and responsiveness. A good technique is to show the task being performed in deliberate steps. By contrast, delaying the action, rendering the results in a haphazard manner, or using an activity indicator will feel slow.
Windows vocabulary: Perform action in stages, with smooth transitions between the stages.


Aa511285_Animations38(en-us,MSDN_10).png

In this example, a taskbar Jump List immediately displays the standard items, and then slides out to display the destinations once the list is ready. Doing so disguises the time required to build the list. By contrast, delaying the initial display would feel unresponsive, and displaying an incomplete list or progress feedback would feel much slower.

特殊体验
To engage and delight users during infrequent, special experiences that are important to your program and have the user's full attention.

While any transition has the potential for being a special experience, these transitions are best reserved for infrequent experiences that are truly special to your program. Custom transitions are used to give a special feel. Branding and personality are often important design elements. Unlike other patterns, special experiences can demand attention, be heavy, and require users to wait a moment. Consequently, these transitions wear out quickly if overused because the experience is no longer special.

Aa511285_Animations49(en-us,MSDN_10).png

In this example, Windows Media Center displays an animation while loading to immediately engage users.

个人工具
名字空间
变换
动作
导航
工具箱