Diretrizes para animações de interface do usuário baseada em bordas

Applies to Windows and Windows Phone

Animações de borda mostram ou ocultam a interface do usuário que tem origem na borda da tela. As ações de mostrar e ocultar podem ser iniciadas pelo usuário ou pelo aplicativo. A interface do usuário pode sobrepor o aplicativo ou fazer parte da superfície principal do aplicativo. Se a interface do usuário fizer parte da superfície do aplicativo, talvez seja necessário redimensionar o restante do aplicativo para acomodá-la.

O que fazer e o que não fazer

  • Use as animações de interface do usuário de borda para mostrar ou ocultar uma barra de erros ou de mensagens personalizada que não se estende muito pela tela.
  • Use as animações de painel para mostrar a interface do usuário que desliza em uma distância significativa na tela, por exemplo, um painel de tarefas ou um teclado virtual personalizado.
  • Deslize a interface do usuário para dentro da mesma borda em que ela será anexada.
  • Deslize a interface do usuário para fora da mesma borda da qual ela surgiu.
  • Se o conteúdo do aplicativo precisar ser redimensionado em resposta ao deslizamento da interface do usuário para dentro ou para fora, use as animações de fade para o redimensionamento.
    • Se a interface do usuário estiver deslizando para dentro, use uma animação de fade depois da animação de painel ou de interface do usuário de borda.
    • Se a interface do usuário estiver deslizando para fora, use uma animação de fade ao mesmo tempo em que a animação de painel ou de interface do usuário de borda.
  • Não aplique essas animações às notificações. As notificações não devem ser posicionadas na interface do usuário de borda.
  • Não aplique as animações de painel ou de interface do usuário de borda em qualquer controle ou contêiner de interface do usuário que não esteja na borda da tela. Essas animações são usadas apenas para mostrar, redimensionar e descartar a interface do usuário nas bordas da tela. Para mover outros tipos de interface do usuário, use as animações de reposicionamento.

    Ilustra quando usar as animações de painel ou de interface do usuário de borda e quando usar o reposicionamento.

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 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
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 interface do usuário de borda
showEdgeUI
hideEdgeUI
showPanel
hidePanel
Animando fades
Animando reposições
Para desenvolvedores (XAML)
Animando sua interface do usuário
Animando interface do usuário de borda
Guia de início rápido: Animando sua interface do usuário usando as animações da biblioteca
EdgeUIThemeTransition
PaneThemeTransition
Animando fades
Animando reposições

 

 

Mostrar:
© 2014 Microsoft