Diretrizes para animações de transição de página

Applies to Windows and Windows Phone

Use animações de transição de página para exibir a primeira página de um aplicativo recém-iniciado ou para fazer a transição entre páginas em um aplicativo.

Observação  Quando apenas uma parte do conteúdo da tela mudar, use as animações de transição de conteúdo em vez das animações de transição de página.

O que fazer e o que não fazer

  • Divida sua página ao longo de bordas ou limites naturais em um conjunto de duas a cinco regiões. Aplique temporização em ziguezague nas regiões para que elas apareçam sequencialmente, em vez de todas de uma vez, e desloque as regiões em 100 pixels para obter um layout de aplicativo largo. Você poderá usar um deslocamento menor se o aplicativo tiver um layout especial para estado estreito. Para informações sobre as divisões de página mais comuns e a ordem em que devem aparecer, consulta Diretriz de uso adicional.
  • Certifique-se de que qualquer conteúdo que as páginas de saída e de entrada tenham em comum permaneça inalterado, sem quaisquer animações aplicadas a elas. Por exemplo, se um botão Voltar estiver presente tanto na página de saída quanto na de entrada, ele não deverá ser incluído na animação de transição.
  • Se a página de saída não tiver um botão Voltar (como a primeira página de um aplicativo), mas a página de entrada tiver, o botão Voltar deverá ser especificado como uma região separada, e essa região deverá ser animada no modo de exibição antes de qualquer outra.
  • Se as páginas de saída e de entrada tiverem diferentes planos de fundo, use a animação de fade in para mostrar o novo plano de fundo. Comece a animação de fade in ao mesmo tempo em que a animação de transição de página.
  • Se parte do conteúdo na página de entrada não estiver pronta para exibição imediata, use a animação de transição de página para importar o máximo de conteúdo que estiver pronto nesse momento. Nesse meio tempo, se necessário, mostre um controle de progresso enquanto você prepara o conteúdo adicional. Depois que o conteúdo adicional estiver pronto para exibição, anime-o com base em sua área de conteúdo. Para uma grande área de conteúdo, use a animação de transição de conteúdo. Para uma pequena área de conteúdo ou um conteúdo descontínuo, use a animação de fade in.
  • Deslize a página para a exibição com base no fluxo de página geral ou na ordem de leitura. Por exemplo, se o conteúdo na página de entrada seguir o fluxo da esquerda para a direita, a página de entrada deverá deslizar da direita para a esquerda. Em aplicativos com ordem de leitura da direita para a esquerda, a página de entrada deve deslizar da esquerda para a direita. Da mesma maneira, ao dividir uma página em seções, conforme descrito nas ilustrações a seguir, a ordem com que essas seções forem inseridas na exibição deverá ser oposta à ordem de leitura.
  • Não execute animações de transição de página quando um usuário redimensionar uma janela de aplicativo. Animações de transição de página são usadas somente para navegar de uma página para outra em um modo de exibição específico. O sistema manipula a animação entre o antigo e o novo layout quando o modo de exibição muda.

Diretriz de uso adicional

As divisões de página mais comuns, incluindo a ordem em que elas devem aparecer, são mostradas a seguir:

Divisões de página comuns

As divisões de página mais comuns, com botões para voltar, são mostradas aqui. Se a página de saída não tiver um botão Voltar (como a primeira página de um aplicativo), mas a página de entrada tiver, o botão Voltar deverá ser especificado como uma região separada, e essa região deverá ser animada no modo de exibição antes de qualquer outra.

Divisões de página comuns

As divisões de página mais comuns, usadas com um aplicativo apresentado em um modo de exibição de largura estreita ou do tipo retrato, e a ordem de exibição das divisões são mostradas a seguir. Se o botão Voltar já estiver presente na página de saída, ele deverá permanecer inalterado, não incluído na animação.

Divisões de página comuns no modo de exibição redimensionado e retrato

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 clique de ponteiro
Diretrizes para animações de reposição
Diretrizes para animações de interface do usuário pop-up
Diretrizes para animações de passagem do dedo
Para desenvolvedores (HTML)
Exemplo da biblioteca de animação em HTML
Animando sua interface do usuário
Animando transições de página
WinJS.UI.Animation.enterPage function
WinJS.UI.Animation.exitPage function
Para desenvolvedores (XAML)
Animando sua interface do usuário
Animando transições de conteúdo e entrada
Guia de início rápido: animando sua interface do usuário usando as animações da biblioteca
EntranceThemeTransition class

 

 

Mostrar:
© 2014 Microsoft