RotaçãoRotation

Este artigo descreve a nova interface de usuário do Windows para rotação e fornece diretrizes de experiência do usuário que devem ser consideradas ao usar esse novo mecanismo de interação em seu aplicativo do Windows.This article describes the new Windows UI for rotation and provides user experience guidelines that should be considered when using this new interaction mechanism in your Windows app.

APIs importantes: Windows.UI.Input, Windows.UI.Xaml.InputImportant APIs: Windows.UI.Input, Windows.UI.Xaml.Input

O que fazer e o que não fazerDos and don'ts

  • Use a rotação para ajudar os usuários a girarem os elementos da interface diretamente.Use rotation to help users directly rotate UI elements.

Diretriz de uso adicionalAdditional usage guidance

Visão geral da rotaçãoOverview of rotation

A rotação é a técnica otimizada para toque usada por aplicativos do Windows para permitir que os usuários transformem um objeto em direção circular (no sentido horário ou no sentido anti-horário).Rotation is the touch-optimized technique used by Windows apps to enable users to turn an object in a circular direction (clockwise or counter-clockwise).

Dependendo do dispositivo de entrada, a interação de rotação é realizada com:Depending on the input device, the rotation interaction is performed using:

  • Um mouse ou uma caneta ativa para mover a garra de rotação de um objeto selecionado.A mouse or active pen/stylus to move the rotation gripper of a selected object.
  • Uma caneta de toque ou passiva para girar o objeto na direção desejada usando o gesto de girar.Touch or passive pen/stylus to turn the object in the desired direction using the rotate gesture.

Quando usar a rotaçãoWhen to use rotation

Use a rotação para ajudar os usuários a girarem os elementos da interface diretamente.Use rotation to help users directly rotate UI elements. Os diagramas a seguir mostram algumas das posições de dedos com suporte para a interação de rotação.The following diagrams show some of the supported finger positions for the rotation interaction.

diagrama demonstrando várias posturas de dedos suportadas pela rotação.

Observação    Intuitivamente, e na maioria dos casos, o ponto de rotação é um dos dois pontos de toque, a menos que o usuário possa especificar um ponto de rotação não relacionado aos pontos de contato (por exemplo, em um aplicativo de desenho ou layout).Note   Intuitively, and in most cases, the rotation point is one of the two touch points unless the user can specify a rotation point unrelated to the contact points (for example, in a drawing or layout application). As imagens a seguir demonstram como a experiência do usuário pode ser reduzida se o ponto de rotação não for restringida dessa forma.The following images demonstrate how the user experience can be degraded if the rotation point is not constrained in this way.

A primeira foto mostra os pontos inicial (polegar) e secundário (dedo indicador): o dedo indicador está tocando uma árvore e o polegar está tocando uma tora.This first picture shows the initial (thumb) and secondary (index finger) touch points: the index finger is touching a tree and the thumb is touching a log.

imagem mostrando os dois pontos iniciais de toque para o gesto de girar.image showing the two initial touch points for the rotation gesture. Nesta segunda foto, a rotação é realizada em torno do ponto de toque inicial (dedão).In this second picture, rotation is performed around the initial (thumb) touch point. Após a rotação, o dedo indicador permanece tocando o tronco da árvore e o polegar a tora (o ponto de rotação).After the rotation, the index finger is still touching the tree trunk and the thumb is still touching the log (the rotation point).

imagem mostrando uma foto girada com o ponto de rotação restringido a um dos dois pontos de toque iniciais.image showing a rotated picture with the rotation point constrained to one of the two initial touch points. Nesta terceira foto, o centro da rotação foi definido pelo aplicativo (ou definido pelo usuário) para ser o ponto central da foto.In this third picture, the center of rotation has been defined by the application (or set by the user) to be the center point of the picture. Após a rotação, como a foto não foi girada por um dos dedos, a ilusão de uma manipulação direta é quebrada (a menos que o usuário tenha escolhido essa configuração).After the rotation, because the picture did not rotate around one of the fingers, the illusion of direct manipulation is broken (unless the user has chosen this setting).

imagem mostrando uma foto girada com o ponto de rotação restringido ao centro da foto em vez de algum dos dois pontos de toque iniciais.image showing a rotated picture with the rotation point constrained to the center of the picture rather than either of the two initial touch points. Nesta última foto, o centro da rotação foi definido pelo aplicativo (ou definido pelo usuário) para ser um ponto no meio da borda esquerda da foto.In this last picture, the center of rotation has been defined by the application (or set by the user) to be a point in the middle of the left edge of the picture. Novamente, a menos que o usuário tenha escolhido essa configuração, nesse caso, a ilusão de uma manipulação direta é quebrada.Again, unless the user has chosen this setting, the illusion of direct manipulation is broken in this case.

imagem mostrando uma foto girada com o ponto de rotação restringido ao centro mais à esquerda da foto em vez de a um dos dois pontos de toque iniciais.

 

O Windows 10 dá suporte a três tipos de rotação: gratuita, restrita e combinada.Windows 10 supports three types of rotation: free, constrained, and combined.

TypeType DescriçãoDescription
Rotação livreFree rotation

A rotação livre permite ao usuário girar conteúdos livremente onde desejar em um arco de 360 graus. Quando o usuário solta o objeto, este permanece na posição escolhida.Free rotation enables a user to rotate content freely anywhere in a 360 degree arc. When the user releases the object, the object remains in the chosen position. A rotação livre é útil para aplicativos de desenho e layout como: Microsoft PowerPoint, Word, Visio, e Paint, e Adobe Photoshop, Illustrator, e Flash.Free rotation is useful for drawing and layout applications such as Microsoft PowerPoint, Word, Visio, and Paint; and Adobe Photoshop, Illustrator, and Flash.

Rotação restringidaConstrained rotation

A rotação restringida suporta a rotação livre durante a manipulação, mas aplica pontos de alinhamento em bases de 90 graus (0, 90, 180 e 270) ao soltar.Constrained rotation supports free rotation during the manipulation but enforces snap points at 90 degree increments (0, 90, 180, and 270) upon release. Quando o usuário solta o objeto, o mesmo rotaciona automaticamente para o ponto de alinhamento mais próximo.When the user releases the object, the object automatically rotates to the nearest snap point.

A rotação restringida é o método de rotação mais comum e funciona de forma semelhante à rolagem de conteúdo.Constrained rotation is the most common method of rotation, and it functions in a similar way to scrolling content. Pontos de alinhamento permitem que um usuário seja impreciso e ainda assim alcance seu objetivo.Snap points let a user be imprecise and still achieve their goal. A rotação restringida é útil para aplicativos como navegadores da web ou álbuns de fotos.Constrained rotation is useful for applications such as web browsers and photo albums.

Rotação combinadaCombined rotation

A rotação combinada suporta a rotação livre com zonas (parecidas com trilhos em Diretrizes para movimento panorâmico) em cada ponto de alinhamento de 90 graus imposta pela rotação restringida.Combined rotation supports free rotation with zones (similar to rails in Guidelines for panning) at each of the 90 degree snap points enforced by constrained rotation. Se o usuário soltar o objeto fora de uma das zonas de 90 graus, o objeto permanecerá naquela posição. Caso contrário, o objeto girará automaticamente para um ponto de alinhamento.If the user releases the object outside of one of 90 degree zones, the object remains in that position; otherwise, the object automatically rotates to a snap point.

Observação    Um trilho de interface de usuário é um recurso no qual uma área em volta de um destino restringe a movimentação em direção a algum valor ou local específico para influenciar sua seleção. Note  A user interface rail is a feature in which an area around a target constrains movement towards some specific value or location to influence its selection.
 

ExemplosSamples

Exemplos de arquivo-mortoArchive samples