Movimento no Windows

Motion descreve a maneira como a interface anima e responde à interação do usuário. O movimento no Windows é reativo, direto e apropriado ao contexto. Ele fornece feedback para a entrada do usuário e reforça paradigmas espaciais que suportam a busca de caminhos.

Sugestão

Este artigo descreve como a linguagem Fluent Design é aplicada a aplicativos do Windows. 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 usuários são guiados a seguir elementos indo de ponto a ponto, diminuindo a carga cognitiva de mudanças de estado estático.

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 do usuário devem invocar e descartar da mesma maneira para trazer consistência às interações. Cada transição deve respeitar o tempo, a flexibilização e a direção de outros elementos para que uma superfície pareça coesa.

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 um ícone de aplicativo seja devolvido, enquanto a restauração devolve um ícone de aplicativo 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. Use recursos de animação como controles WinUI para transições de página, foco na página e micro interações. Se você não puder usar controles WinUI, imite comportamentos existentes do sistema operacional com base em onde o ponto de entrada do aplicativo vive.

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

Abra o aplicativo WinUI 3 Gallery e veja exemplos de movimento em ação

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo da Microsoft Store ou obtenha o código-fonte no GitHub

Usage

Propriedades da animação

O movimento do Windows é rápido, direto e apropriado ao contexto. As curvas de tempo e flexibilização são ajustadas com base no objetivo da animação para criar uma experiência coerente.

Propósito	Definition	Facilidade	Calendário	Usado para
Entrada Direta	Rápido – Em	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 – Saídas	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	Fade – Entrada + Saída	Linear	83 ms	Opacidade
Entrada Forte	Entrada elástica (3 quadros-chave)	(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)	333ms

Controlos

Esta versão do Windows introduz microinterações propositais em controles 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 de página para página 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

Use ícones animados para implementar ícones e ilustrações leves e baseados em vetores 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.