Movimento para aplicativos do WindowsMotion for Windows apps

Ícone de movimento

O movimento fluente tem um propósito em seu aplicativo.Fluent motion serves a purpose in your app. Ele fornece comentários inteligentes com base no comportamento do usuário, mantém a interface do usuário ativa e guia a navegação do usuário no aplicativo.It gives intelligent feedback based on the user's behavior, keeps the UI feeling alive, and guides the user's navigation through your app. O movimento fluente gera uma conexão emocional entre um usuário e sua experiência digital.Fluent motion elicits an emotional connection between a user and their digital experience. Aproveitamos uma base de movimento natural que o usuário já entende do mundo físico e ampliamos nosso sistema com base nisso.We build on a foundation of natural movement the user already understands from the physical world, and we extend our system from there.

ExemplosExamples

XAML controls gallery

Se você tiver o aplicativo XAML Controls Gallery instalado, clique aqui para abrir o aplicativo e ver o Movimento em ação.If you have the XAML Controls Gallery app installed, click here to open the app and see Motion in action.

Princípios de movimento fluenteFluent motion principles

FísicoPhysical

Objetos em movimento apresentam comportamentos de objetos no mundo real.Objects in motion exhibit behaviors of objects in the real world. Um movimento fluente e dinâmico faz com que a experiência seja natural, criando conexões emocionais e adicionando personalidade.Fluid, responsive movement makes the experience feel natural, creating emotional connections and adding personality.

Exemplo de interface do usuário de movimento físico

Quando você interage com a interface do usuário por meio de toque, o movimento da interface do usuário está diretamente relacionado à velocidade da interação.When you interact with UI via touch, the movement of the UI is directly related to the velocity of the interaction. Como o toque é a manipulação direta, o objeto com o qual você interage afeta os objetos ao redor.And because touch is direct manipulation, the object you interact with affects the objects around it.

FuncionalFunctional

O movimento tem um propósito e uma convicção.Motion serves a purpose and has conviction. Ele orienta o usuário pela complexidade e ajuda a estabelece a hierarquia.It guides the user through complexity and helps establish hierarchy. O movimento oferece a impressão de desempenho aprimorado e otimiza a experiência do usuário, ocultando a latência percebida.Movement gives the impression of enhanced performance and optimizes the user experience by hiding perceived latency.

Exemplo de interface do usuário de movimento funcional

As transições de página têm finalidade específica.Page transitions are purpose-built. Elas fornecem dicas sobre como as páginas são relacionadas entre si.They give hints about how pages are related to each other. Elas se movem de forma considerada rápida até mesmo quando o desempenho não é ideal.They move in a manner that's perceived as fast even when performance is not optimal.

ContínuoContinuous

O movimento fluente de um ponto a outro naturalmente atrai a atenção e orienta o usuário.Fluid movement from point to point naturally draws the eye and guides the user. Com elegância, ele une uma tarefa do usuário, fazendo parecer mais amigável e consumível.It elegantly stitches together a user’s task, making it feel more consumable and friendly.

Exemplo de interface do usuário de movimento contínuo

Objetos podem deslocar de cena em cena ou se transformar dentro de uma cena para fornecer continuidade e ajudar o usuário a manter o contexto.Objects can travel from scene to scene or morph within a scene to provide continuity and help the user maintain context.

ContextualContextual

O movimento inteligente fornece comentários ao usuário de forma alinhada com a manipulação da interface do usuário.Intelligent motion provides feedback to the user in a manner that's aligned with how they manipulated the UI. A interação está centralizada no usuário.Interaction is centered around the user. O movimento parece apropriado ao fator forma e é projetado tendo em vista o cenário.The movement feels appropriate to the form-factor and designed around the scenario. Deve ser confortável para cada usuário.It should be comfortable for each user.

Exemplo de interface do usuário de movimento contextual

A animação deve se relacionar à interação do usuário.Animation should tie back to the user interaction. Um menu de contexto é implantado de um o ponto em que o usuário o ativa.A context menu is deployed from a point where the user activated it.

Artigos sobre movimentoMotion articles

Tempo e suavizaçãoTiming and easing

O tempo e a suavização são elementos importantes que tornam o movimento natural para objetos que entram, saem ou se movem na interface do usuário.Timing and easing are important elements that make motion feel natural for objects entering, exiting, or moving within the UI.

Direcionalidade e gravidadeDirectionality and gravity

Os sinais de direção ajudam a fornecer um modelo mental sólido da jornada do usuário nas experiências.Directional signals help provide a solid mental model of the journey a user takes across experiences. O movimento direcional está sujeito a forças como gravidade, o que reforça a sensação natural da movimentação.Directional movement is subject to forces like gravity, which reinforces the natural feel of the movement.

Transições de páginaPage transitions

As transições de página navegam os usuários entre as páginas de um aplicativo, fornecendo comentários sobre o relacionamento entre as páginas.Page transitions navigate users between pages in an app, providing feedback about the relationship between pages. Elas ajudam os usuários a entender onde estão na hierarquia de navegação.They help users understand where they are in the navigation hierarchy.

Animação conectadaConnected animation

As animações conectadas permitem que você crie uma experiência de navegação dinâmica e convincente pela animação da transição de um elemento entre duas exibições diferentes.Connected animations let you create a dynamic and compelling navigation experience by animating the transition of an element between two different views.