Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
Motion descreve a maneira como a interface anima e responde à interação do usuário. O movimento no Windows é reativo, direto e adequado ao contexto. Fornece feedback ao input do utilizador e reforça paradigmas espaciais que suportam a orientação espacial.
Sugestão
Este artigo descreve como a linguagem Fluent Design é aplicada a Windows aplicações. Para obter mais informações, consulte Design fluente - movimento.
Princípios de movimento
Estes princípios orientam o uso do movimento no Windows.
Conectado: elementos de ações se conectam perfeitamente
Os elementos que mudam de posição e tamanho devem se conectar visualmente de um estado para outro, mesmo que não estejam conectados sob o capô. Os utilizadores são guiados a seguir os elementos de ponto a ponto, diminuindo a carga cognitiva de mudanças de estados estáticos.
Exemplo: Quando uma janela transita entre flutuante, encaixada e maximizada, ela sempre parece a mesma janela.
Sugestão
Para melhorar a acessibilidade e a legibilidade, esta página utiliza imagens estáticas na vista predefinida. Você pode clicar em uma imagem para ver a versão animada.
Consistente: os elementos devem se comportar de maneira semelhante ao compartilhar pontos de entrada
As superfícies que compartilham o mesmo ponto de entrada da interface devem ser ativadas e desativadas da mesma maneira para garantir consistência nas interações. Cada transição deve respeitar o tempo, progressão e direção dos outros elementos para que uma superfície transmita uma sensação de coesão.
Exemplo: Todos os submenus da barra de tarefas deslizam para cima quando invocados e deslizam para baixo quando descartados.
Clique na imagem para vê-la animada.
Responsivo: O sistema responde e se adapta às entradas e escolhas do usuário
Indicadores claros mostram que o sistema reconhece e se adapta graciosamente a diferentes entradas, posturas e orientações. Os aplicativos devem se basear em comportamentos do sistema operacional para se sentirem responsivos, vivos e auxiliarem o uso, dependendo dos métodos de entrada.
Exemplo: Os ícones da barra de tarefas se espalham quando os teclados são separados. As bordas da janela invocam um visual diferente, dependendo da entrada do cursor ou do toque.
Clique na imagem para vê-la animada.
Delicioso: Momentos inesperados de alegria com propósito
O movimento adiciona personalidade e energia à experiência, a fim de transformar ações simples em momentos de prazer. Esses momentos são sempre breves e fugazes, e ajudam a reforçar as ações do usuário.
Exemplo: Minimizar uma janela faz com que o ícone de uma aplicação salte para baixo, enquanto restaurar faz com que o ícone de uma aplicação salte para cima.
Clique na imagem para vê-la animada.
Engenhoso: Utiliza controles existentes para trazer consistência sempre que possível
Evite animações personalizadas sempre que possível. Usa recursos de animação como os controlos do WinUI 3 para transições de página, foco dentro da página e microinterações. Se não puder usar controlos WinUI, imite os comportamentos existentes do seu sistema operativo com base na localização do ponto de entrada da aplicação.
Exemplo:Transições de página, animações conectadas e ícones animados são os controles WinUI recomendados que adicionam movimento agradável e necessário aos aplicativos.
Clique na imagem para vê-la animada.
Examples
A aplicação WinUI 3 Gallery inclui exemplos interativos de controlos e funcionalidades WinUI. Descarrega a aplicação na Microsoft Store ou navega pelo código-fonte no GitHub.
Usage
Propriedades da animação
O Windows motion é rápido, direto e adequado ao contexto. As curvas de temporalidade e suavização são ajustadas com base no objetivo da animação para criar uma experiência coerente.
| Propósito | Definition | Facilidade | Sincronização | Utilizado para |
|---|---|---|---|---|
| Entrada Direta | Rápido – Em Movimento | Cubic-bezier(0,0,0,1) | 167, 250, 333 | Posição, Escala, Rotação |
| Elementos existentes | Ponto a ponto | Cubic-bezier(0.55,0.55,0,1) | 167, 250, 333ms | Posição, Escala, Rotação |
| Saída direta | Rápido – Fora | Cubic-bezier(0,0,0,1) | 167ms | Posição, Escala, Rotação (SEMPRE combinar com fade out) |
| Saída suave | Suave – Fora | Cubic-bezier(1,0,1,1) | 167ms | Posição, Escala |
| Mínimo Absoluto | Fade – Entrada + Saída | Linear | 83 ms | Opacidade |
| Entrada Forte | Entrada Elástica (3 Keyframes) | (3 valores abaixo) | (3 valores abaixo) | Posição, Escala |
| Quadro-chave 1 | Cubic-Bezier(0.85, 0, 0, 1) | 167ms | ||
| Quadro-chave 2 | Cubic-Bezier (0,85, 0, 0,75, 1) | 167ms | ||
| Quadro-chave 3 | Cubic-Bezier(0.85, 0, 0, 1) | 333 milissegundos |
Controlos
Esta versão de Windows introduz microinterações intencionais nos controlos WinUI. Adicione esses controles ao seu aplicativo para ajudar a organizar melhor as informações e ajudar os usuários do aplicativo a fazer a transição de página para página, camada para camada e estado para estado de uma interação.
Transição de Página: Transições entre páginas dentro da mesma superfície
Use transições de página para fazer uma transição suave de página para página e configure as direções de animação para respeitar o fluxo de um aplicativo.
As transições de página guiam os olhos do usuário para o conteúdo de entrada e saída, diminuindo a carga cognitiva.
Clique na imagem para vê-la animada.
Animação conectada: transições de camada para camada na mesma página
Use animações conectadas para destacar informações específicas em uma página ou superfície, mantendo o contexto.
As animações conectadas dão foco aos elementos selecionados e fazem a transição perfeita entre os estados focados e não focados.
Clique na imagem para vê-la animada.
Ícone animado: Adiciona prazer e revela informações através de micro interações
Utilize ícones animados para implementar ícones e ilustrações ligeiros, baseados em vetores e com movimento, usando animações Lottie.
Os ícones animados chamam a atenção para pontos de entrada específicos, fornecem feedback de estado para estado e dão prazer a uma interação.
Clique na imagem para vê-la animada.
Colabore connosco no GitHub
A origem deste conteúdo pode ser encontrada no GitHub, onde também pode criar e rever problemas e pedidos Pull. Para mais informações, consulte o nosso guia do contribuidor.
Windows developer