Direcionalidade e gravidadeDirectionality and gravity

Os sinais de direção ajudam a solidificar o modelo mental da jornada do usuário nas experiências.Directional signals help to solidify the mental model of the journey a user takes across experiences. É importante que a direção de qualquer movimento ofereça suporte à continuidade do espaço, bem como à integridade dos objetos no espaço.It is important that the direction of any motion support both the continuity of the space as well as the integrity of the objects in the space.

O movimento direcional está sujeito às forças como a gravidade.Directional movement is subject to forces like gravity. A aplicação de forças ao movimento reforça a aparência natural do movimento.Applying forces to movement reinforces the natural feel of the motion.

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.

Direção do movimentoDirection of movement

A direção da movimentação corresponde ao movimento físico.Direction of movement corresponds to physical motion. Assim como na natureza, os objetos podem ser mover em qualquer eixo: X,Y e Z.Just like in nature, objects can move in any world axis - X,Y,Z. Isso é como consideramos o movimento dos objetos na tela.This is how we think of the movement of objects on the screen. Ao mover objetos, evite colisões não naturais.When you move objects, avoid unnatural collisions. Lembre-se de onde os objetos vêm e vão e sempre dão suporte a constructos de nível superior que podem ser usados na cena, como direção de rolagem ou hierarquia de layout.Keep in mind where objects come from and go to, and alway support higher level constructs that may be used in the scene, such as scroll direction or layout hierarchy.

Vídeo curto mostrando um círculo e, em seguida, a adição de um eixo X, um eixo Y e um eixo Z.

Direção da navegaçãoDirection of navigation

A direção da navegação entre as cenas em seu aplicativo é conceitual.The direction of navigation between scenes in your app is conceptual. Os usuários navegam para frente e para trás.Users navigate forward and back. Cenas movem se movem para dentro e para fora com campo de visão.Scenes move in and out of view. Esses conceitos combinam a movimentação física para orientar o usuário.These concepts combine with physical movement to guide the user.

Quando a navegação provoca o deslocamento de um objeto da cena anterior para a nova, o objeto faz um simples movimento de A até B na tela.When navigation causes an object to travel from the previous scene to the new scene, the object makes a simple A-to-B move on the screen. Para garantir que o movimento pareça mais físico, o padrão de suavização é adicionado, bem como a sensação de gravidade.To ensure that the movement feels more physical, the standard easing is added, as well as the feeling of gravity.

Para a navegação regressiva, o movimento é invertido (de B para A).For back navigation, the move is reversed (B-to-A). Quando os usuários navegam de volta, eles esperam retornar para o estado anterior assim que possível.When the user navigates back, they have an expectation to be returned to the previous state as soon as possible. O tempo é mais rápido, mais direto e usa a suavização por desaceleração.The timing is quicker, more direct, and uses the decelerate easing.

Aqui, esses princípios são aplicados à medida que o item selecionado permanece na tela durante a navegação para frente e para trás.Here, these principles are applied as the selected item stays on screen during forward and back navigation.

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

Quando a navegação provoca a substituição de itens na tela, é importante mostrar para onde a cena de saída foi e de onde a nova cena vem.When navigation causes items on the screen to be replaced, its important to show where the exiting scene went to, and where the new scene is coming from.

Isso tem várias vantagens:This has several benefits:

  • Solidifica o modelo mental do usuário do espaço.It solidifies the user's mental model of the space.
  • A duração da cena existente fornece mais tempo para preparar o conteúdo que será animada da cena de entrada.The duration of the exiting scene provides more time to prepare content to be animated in for the incoming scene.
  • Melhora o desempenho percebido do aplicativo.It improves the perceived performance of the app.

Existem quatro direções discretas de navegação para considerar.There are 4 discreet directions of navigation to consider.

Encaminhar Comemora o conteúdo entrando na cena de maneira que não colide com o conteúdo de saída.Forward-In Celebrate content entering the scene in a manner that does not collide with outgoing content. O conteúdo é desacelerado na cena.Content decelerates into the scene.

Avançar direção

Encaminhamento O conteúdo é fechado rapidamente.Forward-Out Content exits quickly. Objetos aceleram a tela.Objects accelerate off screen.

encaminhamento de direção

Voltar O mesmo que encaminhar, mas invertido.Backward-In Same as Forward-In, but reversed.

Vídeo curto mostrando uma entrada de círculo à direita do quadro e parando no meio do quadro.

Saída para trás O mesmo que o encaminhamento, mas invertido.Backward-Out Same as Forward-Out, but reversed.

direção para fora

GravidadeGravity

A gravidade faz com que suas experiências sejam mais naturais.Gravity makes your experiences feel more natural. Os objetos que se movem no eixo Z e não são ancorados à cena por uma funcionalidade na tela têm o potencial de serem afetados pela gravidade.Objects that move on the Z-axis and are not anchored to the scene by an onscreen affordance have the potential to be affected by gravity. Quando um objeto sai da cena e antes de atingir a velocidade de escape, a gravidade o atrai para baixo, criando uma curva mais natural de trajetória à medida em que o objeto move.As an object breaks free of the scene and before it reaches escape velocity, gravity pulls down on the object, creating a more natural curve of the object trajectory as it moves.

Normalmente, a gravidade se manifesta quando um objeto deve saltar de uma cena para outra.Gravity typically manifests when an object must jump from one scene to another. Por isso a animação conectada usa o conceito de gravidade.Because of this, connected animation uses the concept of gravity.

Aqui, um elemento na linha superior da grade é afetado pela gravidade, provocando sua queda à medida que deixa seu lugar e se move para a frente.Here, an element in the top row of the grid is affected by gravity, causing it to drop slightly as it leaves its place and moves to the front.

Vídeo curto mostrando um elemento Rectangle deixando a linha superior de uma grade, deixando levemente e aplicando zoom à frente da janela.