Gestos, manipulações e interações (HTML)

Artigo
12/12/2015

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Com interações de toque, seu aplicativo pode traduzir e usar gestos físicos para emular a manipulação direta de elementos de interface do usuário.

Interações de toque oferecem uma experiência natural, do mundo real quando os usuários interagem com os elementos na tela. Por outro lado, a interação com um objeto por meio de sua janela de propriedades ou outra caixa de diálogo é considerada uma manipulação indireta. O Windows também suporta interações de toque entre as modalidades de entrada e os dispositivos, incluindo o toque, mouse e caneta.

As APIs da plataforma do Tempo de Execução do Windows permitem interações do usuário por meio de três tipos de eventos de interação: ponteiro, gesto e manipulação.

Os eventos de ponteiro são usados para obter informações básicas de contato, como a localização e o tipo de dispositivo, informações estendidas, como a pressão e a geometria de contato, e para dar suporte a interações mais complexas.
Os eventos de gesto são usados para tratar de interações com um único dedo, como toque e pressionar e segurar (dar um toque duplo e soltar derivam desses gestos básicos).
Os eventos de manipulação são usados para interações multitoque dinâmicas, como pinçar e ampliar, bem como para interações que usam inércia e dados de velocidade, como movimento panorâmico/rolagem, aplicação de zoom e rotação. Observação As informações fornecidas pelos eventos de manipulação não identificam a interação. Elas especificam os dados de entrada, como a posição, o delta de conversão e a velocidade. Esses dados são então usados para determinar a manipulação e realizar a interação.

Veja os seguintes Guias de Início Rápido para saber mais:

Em seguida, descrevemos o relacionamento entre gestos, manipulações e alterações.

Gestos

Um gesto é um ato ou movimento físico executado no dispositivo de entrada ou por ele (com dedo, dedos, caneta, mouse, etc.). Por exemplo, para iniciar, ativar ou invocar um comando, você pode usar um toque simples com o dedo em um dispositivo de toque ou touchpad (equivalente a um clique com o botão esquerdo do mouse ou tocar com uma caneta; ou pode pressionar Enter em um teclado).

Veja aqui o conjunto básico de gestos de toque para manipular a interface do usuário e executar uma interação.

Nome	Tipo	Descrição
Toque	Gesto estático	Um dedo toca a tela e é erguido.
Pressionar e segurar	Gesto estático	Um dedo toca a tela e permanece no local.
Deslizar	Gesto de manipulação	Um ou mais dedos tocam a tela e movem-se na mesma direção.
Passar o dedo	Gesto de manipulação	Um ou mais dedos tocam a tela e movem-se por uma curta distância na mesma direção.
Virar	Gesto de manipulação	Dois ou mais dedos tocam a tela e movem-se em um arco em sentido horário ou anti-horário.
Pinçar	Gesto de manipulação	Dois ou mais dedos tocam a tela e aproximam-se.
Ampliar	Gesto de manipulação	Dois ou mais dedos tocam a tela e distanciam-se.

Manipulações

Uma manipulação é a reação ou resposta imediata e contínua de um objeto ou da interface do usuário a um gesto. Por exemplo, os gestos de deslizar ou passar o dedo geralmente fazem com que um elemento ou a interface do usuário se mova de alguma maneira.

O resultado de uma manipulação – a forma como ela se reflete no objeto na tela e na interface do usuário – é a interação.

Interações

As interações dependem de como uma manipulação é interpretada e do comando ou da ação resultante dessa manipulação. Por exemplo, objetos podem ser movidos por gestos de deslizar ou passar o dedo, mas os resultados diferem conforme o limite de distância é ultrapassado ou não. O gesto de deslizar o dedo pode ser usado para arrastar um objeto ou para fazer um movimento panorâmico de uma exibição, enquanto o gesto de passar o dedo pode ser usado para selecionar um item ou exibir a AppBar.

Esta seção descreve algumas interações comuns.

Aprendizado

O gesto de pressionar e segurar exibe informações detalhadas ou elementos visuais de ensino (por exemplo, uma dica de ferramenta ou menu de contexto) sem o compromisso de executar uma ação ou comando. O movimento panorâmico continuará possível se um gesto de deslizar o dedo for iniciado enquanto o elemento visual estiver sendo exibido. Para saber mais, veja Diretrizes para comentários visuais.

Interação de aprendizado

Execução de comandos

O gesto de tocar invoca uma ação primária, por exemplo, iniciar um aplicativo ou executar um comando.

Interação de comando

Movimento panorâmico

O gesto de deslizar o dedo é usado principalmente para interações de movimento panorâmico, mas também pode ser usado para mover, desenhar ou escrever. O movimento panorâmico é uma técnica otimizada para toque para navegar distâncias curtas sobre pequenos conjuntos de conteúdo dentro de uma única exibição (por exemplo, a estrutura de pastas de um computador, uma biblioteca de documentos ou um álbum de fotos). Equivalente a rolar com o mouse ou teclado, o movimento panorâmico só é necessário quando o volume de conteúdo no modo de exibição faz a área de conteúdo exceder a área visível. Para saber mais, veja Diretrizes para movimento panorâmico.

Interação de movimento panorâmico

Zoom

Os gestos de pinçagem e ampliação são usados para três tipos de interação: zoom óptico, redimensionamento e zoom semântico.

Zoom óptico e redimensionamento

O zoom óptico ajusta o nível de ampliação de toda a área de conteúdo para proporcionar uma visão mais detalhada. Redimensionamento, por outro lado, é uma técnica usada para ajustar o tamanho relativo de um ou mais objetos dentro de uma área de conteúdo sem alterar a visualização dessa área. As duas imagens superiores aqui mostram um zoom óptico e as duas imagens inferiores o redimensionamento de um retângulo na tela sem alterar o tamanho de qualquer outro objeto. Para saber mais, veja Diretrizes para zoom óptico e redimensionamento.

Interação de zoom óptico

Interação de redimensionamento

Zoom Semântico

Zoom semântico é uma técnica otimizada para toque usada para apresentar e navegar por conteúdo ou dados estruturados dentro de uma única exibição (por exemplo, a estrutura de pastas de um computador, uma biblioteca de documentos ou um álbum de fotos) sem ter que recorrer aos controles de movimento panorâmico, rolagem ou exibição de árvore. O zoom semântico fornece duas exibições diferentes do mesmo conteúdo, que pode ser ampliado para ver mais detalhes ou reduzido para ver menos detalhes. Para saber mais, consulte Diretrizes para zoom semântico.

Interação de zoom semântico

Rotação

O gesto de girar simula a experiência de girar um pedaço de papel sobre uma superfície plana. A interação é realizada colocando dois dedos sobre o objeto e girando um dedo na direção do outro ou ambos os dedos em torno de um ponto central, com a mão acompanhando a rotação na direção desejada. Você pode usar dois dedos da mesma mão ou um dedo de cada mão. Para saber mais, veja Diretrizes para rotação.

Interação de rotação

Selecionando e movendo

Os gestos de deslizar o dedo e passar o dedo são usados em uma manipulação de deslizamento transversal, um movimento perpendicular à direção de movimento panorâmico da área de conteúdo. Isso é interpretado como uma seleção ou, se um limite de distância for excedido, como uma interação de mover (arrastar). Este diagrama descreve esses processos. Para saber mais, veja Diretrizes para deslizamento transversal.

Interações de selecionar e de arrastar e soltar

Exibindo barras de comandos

O gesto de passar o dedo revela várias barras de comandos ou a tela de logon.

Para revelar os comandos do aplicativo, passe o dedo começando pela borda inferior ou superior da tela. Use o AppBar para exibir os comandos do aplicativo.

Exibir os comandos do aplicativo

Os comandos do sistema são revelados passando o dedo a partir da borda direita, os aplicativos usados recentemente passando o dedo a partir da borda esquerda e os comandos de ajuste ou fechamento passando o dedo da borda superior à borda inferior.

Exibir os comandos do sistema