Guidelines for pointer click animations

Applies to Windows and Windows Phone

Use pointer animations to provide users with visual feedback of a tap or click on an item. The pointer down animation is played when a user taps or clicks on an item. The animation slightly shrinks the item to indicate that it is pressed. The pointer up animation is played when the tap or click is released. This animation restores the item to its original size, to indicate that it has been released.

Dos and don'ts

  • When you use a pointer up animation, be sure to trigger the animation immediately when the user releases the tap or click. It is critical that the pointer up animation appears quickly. This provides instant feedback to the user that their action has been recognized, even if the action triggered by the tap or click (such as navigating to a new page) is slower to respond.

Related topics

For designers
Guidelines for add and delete
Guidelines for content transitions animations
Guidelines for drag animations
Guidelines for edge-based UI animations
Guidelines for fade animations
Guidelines for page transitions animations
Guidelines for reposition animations
Guidelines for pop-up UI animations
Guidelines for swipe animations
For developers (HTML)
HTML animation library sample
Animating your UI
WinJS.UI.Animation.pointerUp function
WinJS.UI.Animation.pointerDown function
For developers (XAML)
Animating your UI
Animating pointer clicks
Quickstart: Animating your UI using library animations
PointerUpThemeAnimation class
PointerDownThemeAnimation class

 

 

Show:
© 2014 Microsoft