Respondendo a interações de touchpad (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]

Crie e compile aplicativos da Windows Store em que os usuários possam interagir por meio de um touchpad.

Dica As informações neste tópico são específicas para desenvolver aplicativos da Windows Store em JavaScript.

Veja Respondendo a entrada por touchpad (XAML) para aplicativos da Windows Store em C++, C# ou Visual Basic.

Pré-requisitos: Se você for iniciante no desenvolvimento de aplicativos da Windows Store em JavaScript, consulte esses tópicos para ficar familiarizado com as tecnologias discutidas aqui.

Criar seu primeiro aplicativo da Windows Store em JavaScript

Mapa para os aplicativos da Windows Store usando JavaScript

Saiba mais sobre eventos com Guia de início rápido: adicionando controles HTML e manipulando eventos

Recursos de aplicativos, do início ao fim: Explore esse recurso mais profundamente como parte da nossa série sobre recursos para aplicativos, do início ao fim

Interação do usuário, do início ao fim (HTML)

Personalização da interação do usuário, do início ao fim (HTML)

Diretrizes de experiência do usuário:

As bibliotecas de controle de plataforma (HTML e XAML) fornecem a experiência de total interação do usuário do Windows, incluindo interações padrão, efeitos físicos animados e comentários visuais. Se não precisar de suporte para interação personalizada, use esses controles internos.

Se os controles de plataforma não forem suficientes, as diretrizes a seguir para interação do usuário podem ajudá-lo a proporcionar uma experiência de interação envolvente e imersiva, consistente entre os modos de entrada. Essas diretrizes têm como foco principal a entrada por toque, mas elas ainda são relevantes para entrada por touchpad, mouse, teclado e de caneta.

Exemplos: Veja essa funcionalidade em ação em nossos Exemplos de aplicativos da Windows Store.

Exemplo de personalização da interação do usuário, do início ao fim

Entrada: exemplo de recursos de dispositivo

Entrada: amostra de manipulação de eventos de ponteiros DOM

Amostra de rolagem, movimento panorâmico e aplicação de zoom em HTML

Entrada: exemplo de manipulações e gestos (JavaScript)

Entrada: amostra de gestos instanciáveis

Visão geral

Um touchpad combina a entrada multitoque indireta com a entrada de precisão de um dispositivo apontador, como um mouse. Essa combinação torna o touchpad adequado à interface do usuário otimizada para toque e aos destinos geralmente menores de aplicativos de produtividade e do ambiente de área de trabalho. Otimize o design do seu aplicativo da Windows Store para entrada por toque e obtenha, por padrão, o suporte básico para touchpad.

Devido à convergência de experiências de interação compatíveis com touchpads, recomendamos que você forneça comandos de interface do usuário estilo mouse, além do suporte interno para entrada por toque. Por exemplo, use os botões anterior e próximo para permitir que os usuários virem as páginas de conteúdo e também movimentem o conteúdo panoramicamente.

Os gestos e as diretrizes discutidos neste tópico podem ajudar a garantir que o seu aplicativo dê suporte à entrada por touchpad de forma integrada e com um mínimo de código.

Diretrizes da experiência do usuário para dar suporte a interações por touchpad

O Windows dá suporte a um conjunto de gestos familiares, que foram otimizados para a entrada por touchpad. Veja a seguir algumas diretrizes para dar suporte a interações por touchpad.

A linguagem de touchpad do Windows 8.1

Um conjunto conciso de interações por touchpad é usado de forma consistente em todo o sistema. Otimize seu aplicativo para a entrada por toque e mouse. Essa linguagem permite que o aplicativo se comporte de modo familiar aos seus usuários, aumentando o nível de confiança deles e tornando o aplicativo mais fácil de aprender e usar.

Termo	Descrição
Focalizar para aprender	Focalize um elemento para mostrar informações mais detalhadas ou elementos visuais explicativos (como uma dica de ferramenta) antes de realizar uma ação. Para saber mais sobre dicas de ferramentas, veja Adicionando dicas de ferramentas.
Toque único para ação primária	Toque uma única vez em um elemento e invoque sua ação primária (por exemplo, iniciar um aplicativo ou executar um comando).
Toque com dois dedos para clique com o botão direito do mouse	Toque com dois dedos, simultaneamente, para exibir a barra de aplicativos com comandos globais ou em um elemento para selecioná-lo e exibir a barra de aplicativos com comandos contextuais. Observação Toque com dois dedos para exibir um menu de contexto, se os comandos de seleção ou da barra de aplicativos não forem os comportamentos adequados da interface do usuário. Entretanto, a nossa recomendação é que você use a barra de aplicativos para todos os comportamentos de comandos.
Toque com dois dedos para movimento panorâmico	O deslizamento é usado principalmente para interações de movimento panorâmico, mas também pode ser usado para movimentação, desenho ou escrita.
Pinçar e ampliar para zoom	Os gestos de pinçar e ampliar são geralmente usados para redimensionamento e zoom semântico.
Pressionar com toque único e deslizar para reorganizar	Arraste um elemento.
Pressionar com toque único e deslizar para selecionar texto	Pressione dentro do texto selecionável e deslize para selecioná-lo. Toque duas vezes para selecionar uma palavra.
Zona de clique com o botão esquerdo e direito do mouse	Emule a funcionalidade do botão esquerdo e direito de um dispositivo de mouse.
Bordas para comandos do sistema (dependente do sistema)	Quando você passa o dedo da borda direita da tela (ou da borda esquerda, em layouts da direta para a esquerda), isso revela os botões que expõem os comandos do sistema. Quando você passa o dedo da borda esquerda (ou da borda direita em layouts da direita para a esquerda), isso revela uma lista de aplicativos em execução.

Hardware

Consulte os recursos de dispositivo do mouse (MouseCapabilities) para identificar os aspectos da interface do usuário do seu aplicativo que o hardware de touchpad pode acessar diretamente. Recomendamos que você forneça interface do usuário para entrada por toque e mouse.

Para saber mais sobre como consultar os recursos do dispositivo, veja Guia de início rápido: identificando dispositivos de ponteiro.

Comentário visual

Quando o cursor do touchpad é detectado (por eventos de movimentação ou focalização), mostre a interface do usuário específica do mouse para indicar a funcionalidade exposta pelo elemento. Se o cursor do touchpad não for movimentado por algum tempo ou se o usuário começar uma interação por toque, faça com que a interface do usuário do touchpad desapareça gradualmente. Dessa forma, a interface do usuário fica mais organizada.
Não use o cursor para comentário de foco; o comentário apresentado pelo elemento é suficiente (veja Cursores, a seguir).
Não exiba comentários visuais quando o elemento não permite manipulação (como texto estático).
Não use retângulos de foco nas interações por touchpad; Reserve-os para as interações por teclado.
Exiba respostas visuais simultaneamente para todos os elementos que representam o mesmo destino de entrada.

Para obter diretrizes mais gerais sobre comentário visual, veja Diretrizes para comentários visuais.

Cursores

Um conjunto de cursores padrão está disponível para ponteiros de touchpad. São usados para indicar a ação primária de um elemento.

Cada cursor padrão tem uma imagem padrão correspondente associada. O usuário ou um aplicativo substitui a imagem padrão associada a qualquer cursor padrão quando desejado. Os aplicativos da Windows Store especificam a imagem de um cursor usando a função PointerCursor.

Se for preciso personalizar o cursor do touchpad:

Use sempre o cursor de seta () para elementos clicáveis. Não use o cursor de mão apontando () para links ou outros elementos interativos. No lugar dele, use os efeitos de focalização (descritos anteriormente).
Use o cursor de texto () para texto selecionável.
Use o cursor de movimentação () quando o movimento é a ação principal (como arrastar ou cortar). Não use o cursor de movimentação para elementos em que a ação principal é navegar (como os blocos na tela inicial).
Use os cursores de redimensionamento horizontal, vertical e diagonal (, , , ) quando o objeto for redimensionável.
Use os cursores de mão agarrando (, ) ao fazer o movimento panorâmico do conteúdo dentro de uma tela fixa (como um mapa).