Diretrizes de rotação

Applies to Windows and Windows Phone

Este tópico descreve a nova IU do Windows para rotação. Também fornece diretrizes para a experiência do usuário que devem ser consideradas ao usar esse novo mecanismo de interação no seu aplicativo da Windows Store.

Veja este recurso em ação como parte da nossa série sobre recursos para aplicativos, do início ao fim:  Interação com o usuário: Entrada de toque... e muito mais.

O que fazer e o que não fazer

  • Use a rotação para ajudar os usuários a rotacionarem os elementos da interface diretamente.

Diretriz de uso adicional

Visão geral da rotação

A rotação é uma técnica otimizada para toque usada por aplicativos da Windows Store no Windows 8 para permitir que os usuários virem um objeto em uma direção circular (sentido horário ou anti-horário).

Dependendo do dispositivo de entrada, a interação de rotação é realizada com:

  • Um mouse ou uma caneta ativa para mover a garra de rotação de um objeto selecionado.
  • Uma caneta de toque ou passiva para virar o objeto na direção desejada usando o gesto de girar.

Quando usar a rotação

Use a rotação para ajudar os usuários a rotacionarem os elementos da interface diretamente. Os diagramas a seguir mostram algumas das posições de dedos para a interação de rotação.

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 de dois pontos de toque a não ser 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 de layout). 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.

A primeira foto mostra os pontos inicial (dedão) e secundário (dedo indicador): o dedo indicador está tocando uma árvore e o dedão está tocando uma tora.

Imagem mostrando os dois pontos iniciais de toque para o gesto de girar.

Nesta segunda foto, a rotação é realizada em torno do ponto de toque inicial (dedão). Após a rotação, o dedo indicador permanece tocando o tronco da árvore e o dedão a tora (o ponto de rotação).

Imagem mostrando uma foto rotacionada com o ponto de rotação restringido a um dos dois pontos de toque iniciais.

Nesta terceira foto, o centro da rotação foi definido pelo aplicativo (ou definido pelo usuário) para ser o ponto central da foto. Após a rotação, devido a foto não ter rotacionado por um dos dedos, a ilusão de uma manipulação direta é quebrada (a menos que o usuário tenha escolhido essa definição).

Imagem mostrando uma foto rotacionada com o ponto de rotação restringido ao centro da foto em vez de algum dos dois pontos de toque iniciais.

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. Novamente, a menos que o usuário tenha escolhido essa definição, nesse caso, a ilusão de uma manipulação direta é quebrada.

Imagem mostrando uma foto rotacionada com o ponto de rotação restringido ao centro mais à esquerda da foto em vez de algum dos dois pontos de toque iniciais.

O Windows 8 suporta três tipos de rotação: livre, restringida e combinada.

TipoDescrição
Rotação livre

A rotação livre permite ao usuário rotacionar conteúdos livremente onde deseja em um arco de 360 graus. Quando o usuário solta o objeto, o mesmo permanece na posição escolhida. A rotação livre é útil para aplicativos de desenho e layout como: Microsoft PowerPoint, Word, Visio, e Paint, e Adobe Photoshop, Illustrator, e Flash.

Rotação restringida

A rotação restringida suporta a rotação livre durante a manipulação, mas aplica pontos de ajustes em bases de 90 graus (0, 90, 180 e 270) ao soltar. Quando o usuário solta o objeto, o mesmo rotaciona automaticamente para o ponto de ajuste mais próximo.

A rotação restringida é o método de rotação mais comum, e funciona de forma parecida com o rolamento de conteúdo. Pontos de ajuste permitem que um usuário seja impreciso e ainda assim alcance seu objetivo. A rotação restringida é útil para aplicativos como navegadores da web ou álbuns de fotos.

Rotação combinada

A rotação combinada suporta a rotação livre com zonas (parecidas com trilhos na visão panorâmica) em cada ponto de ajuste de 90 graus imposta pela rotação restringida. 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 rotacionará automaticamente para um ponto de ajuste.

Observação  Um trilho da interface do usuário é um recurso no qual uma área ao redor de um alvo restringe o movimento em algum valor específico ou local para influenciar na sua seleção.

 

Tópicos relacionados

Para designers
Diretrizes para interações comuns do usuário
Design de interação por toque
Para desenvolvedores (aplicativos do Tempo de Execução do Windows em JavaScript e HTML)
Guia de Início Rápido: Ponteiros
Guia de Início Rápido: Gestos e Manipulações DOM
Guia de Início Rápido: Gestos Estáticos
Guia de Início Rápido: Gestos de Manipulação
Para desenvolvedores (aplicativos do Tempo de Execução do Windows em C#/VB/C++ e XAML)
Guia de Início Rápido: Entrada por Toque
Guia de Início Rápido: Manipulando a Entrada do Ponteiro
Para desenvolvedores (aplicativo do Tempo de Execução do Windows em DirectX com C++)
Respondendo à entrada por toque (DirectX e C++)
Amostras (DOM)
Amostra de rolagem, movimento panorâmico e aplicação de zoom em HTML
Entrada: amostra de gestos instanciáveis
Amostras (APIs de aplicativos da Windows Store )
Entrada: exemplo de manipulações e gestos (JavaScript)
Entrada: amostra de gestos no Windows 8
Entrada: amostra de eventos de entrada do usuário XAML
Amostra de rolagem, movimento panorâmico e aplicação de zoom em XAML
Amostras (DirectX)
Amostra de entrada por toque do DirectX
Entrada: amostra de manipulações e gestos (C++)

 

 

Mostrar:
© 2014 Microsoft