Diretrizes para animações de passagem do dedo

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

Recomendações

  • 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 (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

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