Diretrizes para animações de passagem do dedo

Applies to Windows and Windows Phone

Use animações de passagem do dedo ao implementar o gesto de passar o dedo para a seleção de um item.

O que fazer e o que não fazer

  • Se o usuário não arrastou o item longe o suficiente para alternar o estado de seleção antes de ele ser liberado, use a animação da seleção por passagem do dedo para mover o item de volta à sua posição de repouso sem mudar o estado de seleção.
  • Certifique-se de que a direção da animação de passagem do dedo deve corresponder à direção do gesto de passar o dedo do usuário.
    • No caso de rolagem horizontal do conteúdo, a direção de passar o dedo é vertical, por isso a sequência de animação de passagem do dedo deve se mover para baixo e depois novamente para cima.
    • No caso de rolagem vertical do conteúdo, a direção de passar o dedo é horizontal, por isso a sequência de animação de passagem do dedo deve se mover horizontalmente de acordo com a ordem de leitura do aplicativo.
      • Para um aplicativo com ordem de leitura da esquerda para a direita, a animação deve se mover para a direita e depois para a esquerda.
      • Para um aplicativo com ordem de leitura da direita para a esquerda, a animação deve se mover para a esquerda e depois para a direita.
  • Mova o item na distância recomendada como parte da animação de passagem do dedo, que será de 15 pixeis se o movimento for vertical ou de 23 pixeis se o movimento for horizontal.

Tópicos relacionados

Para designers
Diretrizes para adicionar e excluir
Diretrizes para animações de transações de conteúdo
Diretrizes para animações de arrastar
Diretrizes para animações de interface do usuário baseada em bordas
Diretrizes para animações de fade
Diretrizes para animações de transações de página
Diretrizes para animações de clique de ponteiro
Diretrizes para animações de reposição
Diretrizes para animações de interface do usuário pop-up
Para desenvolvedores (HTML)
Exemplo da biblioteca de animação em HTML
Animando sua interface do usuário
Animando gestos de passar o dedo
WinJS.UI.Animation.swipeReveal function
WinJS.UI.Animation.swipeSelect function
WinJS.UI.Animation.swipeDeselect function
Para desenvolvedores (XAML)
Animando sua interface do usuário
Animando gestos de passar o dedo
Guia de início rápido: animando sua interface do usuário usando animações da biblioteca
SwipeHintThemeAnimation class
SwipeBackThemeAnimation class

 

 

Mostrar:
© 2014 Microsoft