windows:Visuals/animations-and-transitions/usage-patterns
出自UXGuide.net
动画与过渡:使用模式
Animations and Transitions: Usage Patterns
动画具有下列使用模式
| 悬停反馈 用于显示交互点的位置。 |
指示交互点处于可用状态,悬停状态也可通过静态效果来显示。
在 Zune® 数码媒体播放器中,专辑的封面会在悬停时高亮,并显示播放控制组件。 |
| 单击反馈 用于显示可单击的对象具有反应并接受到了单击操作。 |
指示对象已被单击。
触摸会显示水波纹动画,以使用户知道操作已被识别。 |
| 选中反馈 用于显示对象已被选中。 |
指示对象已被选中。选中状态也可以通过静态效果来显示。
在 Zune 中,专辑封面在被单击时会闪烁,然后在选中后显示选区矩形。 |
| 进度反馈 用于显示任务正在进行中。 |
进度反馈用于指示任务正在不断进行中,通常与活动指示器、进度条或描述任务的动画一起使用。确定性进度反馈将大致显示已完成和剩余的任务量,而非确定性进度则只指示任务正在进行过程中。
在这个示例中,Windows Live™ Messenger 在登录过程中显示非确定性进度反馈。 |
| 引起注意 用于显示存在需要用户注意的情况。 |
当重要的对象被创建或需要关注(通常因为发生了更改),或者重要紧急的事件发生时引起适当程度的关注。关于设计技巧,参见引起适当程度的关注。
Windows Live 工具栏在其第一次展现时显示动画,以明确其所在位置。 |
| 关系 用于显示对象之间的关系或因果关系。 |
以不会分散注意力或侵扰用户的方式显示关系,尤其当这种关系不太容易理解或未能预期时。
在这个示例中,该动画显示了 Gamma 设置及其对显示的影响之间的关系。 |
| 图解/预览 用于形象地解释概念、任务或命令的效果。 |
用于形象地解释某个概念或某样东西的工作方式的动画或视频,同时补充或替换文本解释。这使得用户能够有效且自信地完成任务或选择命令。
在这个示例中,Tablet PC 输入面板中的“show me”命令通过图解来显示如何进行更正、删除、分割和连接。 |
过渡具有下列使用模式:
|
扩大/收缩/显现对象 |
Object changes between states, possibly while moving. Transition keeps users oriented during changes.
In this example, the Weather Gadget morphs from its concise state to display its Options dialog box. |
|
显示/隐藏/更改内容 |
Window interior reshapes to display more, less, or different content. Transition keeps users oriented during changes.
The Windows Calculator has a smooth transition between view modes. |
|
显示/隐藏控件或其功能可见性 |
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.
In this example, the Windows Media Player controls fade in on hover when in full screen mode. |
|
场景切换 |
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.
In this example, the Windows desktop wallpaper gently cross-fades between images to make the transition feel smooth and controlled. |
|
特殊场景切换 |
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.
In this example, PowerPoint uses attention-getting transitions to draw the audience into the change. |
|
直接操纵 |
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.
In this example, Magnifier zooms smoothly between levels. |
|
错误的直接操纵 |
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.
In this example, the document bounces to show that the user has reached the end. |
|
排序、筛选、调整顺序的过渡 |
The transition shows (or for complex changes, suggests) the effect of the change.
In this example, Bing visual search uses a filter transition.
In this example, Windows Media Center uses a reorder transition as a special experience while a song is playing. |
|
性能过渡 |
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.
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. |
|
特殊体验 |
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.
In this example, Windows Media Center displays an animation while loading to immediately engage users. |