Compartilhar via


Respondendo à interação do usuário (HTML)

[ 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]

Saiba mais sobre a plataforma de interação do usuário, as fontes de entrada (incluindo toque, touchpad, mouse, caneta e teclado), modos (teclado virtual, roda do mouse, apagador na caneta etc.) e as interações do usuário compatíveis com aplicativos do Windows, da Windows Store e da Loja do Windows Phone.

Atualizações para Windows 8.1: O Windows 8.1 introduz uma série de atualizações e melhorias para as APIs de entrada de ponteiro. Para saber mais, veja Alterações de API para Windows 8.1.

Nós explicamos como a funcionalidade básica de entrada e interação é oferecida gratuitamente com os controles integrados das estruturas de linguagem (aplicativos em JavaScript, aplicativos em C++, C# ou Visual Basic e aplicativos em DirectX com C++), como os padrões de interação são compartilhados entre as estruturas de linguagem e como personalizar a experiência de interação do usuário.

Por meio de diretrizes, melhores práticas e exemplos, mostramos como tirar total proveito dos recursos de interação do Windows para compilar aplicativos com experiências do usuário intuitivas, envolventes e imersivas.

Dica  A informação neste tópico é específica para o desenvolvimento de aplicativos em JavaScript.

Veja Respondendo à interação do usuário (XAML) para aplicativos que usam C++, C# ou Visual Basic.

Veja Respondendo à interação do usuário (DirectX e C++) para aplicativos que usam DirectX com C++.

 

Pré-requisitos: Se você for iniciante no desenvolvimento de aplicativos 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 o Guia de início rápido: adicionando controles HTML e manipulando eventos e Captura de eventos e propagação de eventos com eventos DOM

Recursos de aplicativos, do início ao fim: Explore essa funcionalidade mais profundamente como parte da nossa série Recursos de 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 relevante para entrada por touchpad, mouse, teclado e caneta.

Exemplos: Veja essa funcionalidade em ação em nossos exemplos de aplicativos.

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

Entrada: Amostra de recursos de dispositivo

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

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

Entrada: amostra de gestos instanciáveis

Entrada: gestos e manipulações com o GestureRecognizer

Entrada: Amostra de tinta simplificada

Entrada: Amostra de tinta

Visão geral da plataforma de manipulação do usuário do Windows 8

Projete seus aplicativos com interações por toque. Há suporte para entrada por toque em um número cada vez maior e mais variado de dispositivos, e as interações por toque são um aspecto fundamental da experiência do Windows.

Como o toque é o principal modo de interação dos usuários do Windows e Windows Phone, as plataformas são otimizadas para entrada por toque para melhorar a capacidade de resposta, a precisão e a facilidade de uso do seus aplicativos. E não se preocupe, os modos de entrada (como mouse, caneta e teclado) são totalmente compatíveis e funcionalmente consistentes com o recurso de toque (veja Gestos, manipulações e interações). A velocidade, precisão e comentário tátil que os modos de entrada tradicionais oferecem são conhecidas e atraentes para muitos usuários. Essas experiências de interação exclusivas e diferenciadas não foram comprometidas.

Seja criativo com o design da experiência de interação com o usuário. Ofereça compatibilidade ao maior número possível de recursos e preferências para atrair o maior público possível, e conquiste mais clientes para o seu aplicativo.

Desde os controles internos até a personalização completa, a plataforma de interação com o usuário se baseia em camadas de funcionalidade que progressivamente agregarão flexibilidade e controle.

Controles internos

Aproveite a vantagem dos controles internos para oferecer uma experiência comum de interação com o usuário que funcione corretamente para a maioria dos aplicativos do Windows e Windows Phone.

Os controles internos foram totalmente projetados para ser otimizados para toque e, ao mesmo tempo, fornecer experiências de interação consistentes e envolventes em todos os modos de entrada. Eles dão suporte a um conjunto abrangente de gestos: pressionar e segurar, tocar, deslizar, passar o dedo, pinçar, ampliar, virar. Quando você os acopla a manipulações diretas, como panorâmica, zoom, girar, arrastar e comportamento inercial realista, eles permitem uma interação envolvente e imersiva, que cumpre as melhores práticas de maneira consistente em toda a plataforma Windows.

Para obter mais informações sobre as bibliotecas de controle, veja Adicionando controles e conteúdo.

Modos de exibição

Ajuste a experiência de interação do usuário através das configurações de movimento panorâmico/rolagem e zoom dos modos de exibição do aplicativo. O modo de exibição do aplicativo indica como o usuário acessa e manipula o aplicativo e seu conteúdo. Exibições também fornecem comportamentos, como a inércia, o salto de limite de conteúdo e pontos de ajuste.

As configurações de movimento panorâmico e rolagem determinam como os usuários navegam em um modo de exibição único, quando o respectivo conteúdo não cabe no visor. Um modo de exibição único pode ser, por exemplo, a página de uma revista ou de um livro, a estrutura de pastas de um computador, uma biblioteca de documentos ou um álbum de fotos.

As configurações de zoom são aplicadas ao zoom óptico e ao controle SemanticZoom. O Zoom Semântico é uma técnica otimizada para toque para apresentação e navegação em grandes conjuntos de dados ou conteúdos relacionados, em um único modo de exibição. Ele funciona com o uso de dois modos distintos de classificação ou níveis de zoom. Análogo ao movimento panorâmico e à rolagem em um modo de exibição único. O movimento panorâmico e a rolagem podem ser usados em conjunto com o Zoom Semântico.

Use modos de exibição de aplicativos e as seguintes propriedades CSS (Cascading Style Sheets), atributos DOM (Document Object Model) e eventos DOM para modificar os comportamentos de movimento panorâmico/rolagem e zoom. Isso pode fornecer uma experiência de interação mais tranquila do que seria possível por meio da manipulação de eventos de ponteiro e gestos.

Superfície APIPropriedade CSSAtributos DOMEventos DOM
touch-action especifica se uma determinada região pode ser manipulada por movimento panorâmico ou zoom.
Movimento panorâmico/Rolagem

-ms-overflow-style

-ms-scroll-chaining

-ms-scroll-limit

-ms-scroll-limit-x-max

-ms-scroll-limit-x-min

-ms-scroll-limit-y-max

-ms-scroll-limit-y-min

-ms-scroll-rails

-ms-scroll-snap-points-x

-ms-scroll-snap-points-y

-ms-scroll-snap-type

-ms-scroll-snap-x

-ms-scroll-snap-y

-ms-scroll-translation

scroll

scrollHeight

scrollLeft

scrollTop

scrollWidth

onscroll

Zoom

-ms-content-zoom-chaining

-ms-content-zooming

-ms-content-zoom-limit

-ms-content-zoom-limit-max

-ms-content-zoom-limit-min

-ms-content-zoom-snap

-ms-content-zoom-snap-points

-ms-content-zoom-snap-type

msContentZoomFactor onmscontentzoom
Ambos onmsmanipulationstatechanged

 

Para saber mais sobre modos de exibição de aplicativos, veja Definindo layouts e modos de exibição.

Para saber mais sobre zoom, veja Diretrizes de zoom ótimo e redimensionamento ou Diretrizes de zoom semântico.

Para saber mais sobre movimento panorâmico/rolagem, veja Diretrizes para movimento panorâmico.

Eventos de ponteiro e gestos DOM

Um ponteiro é um tipo genérico de entrada com um mecanismo de evento unificado. Ele exibe informações básicas (posição na tela, por exemplo) na fonte ativa de entrada, que pode ser toque, touchpad, mouse ou caneta. Os gestos variam desde interações fixas simples, como toque, até manipulações mais complexas, como zoom, movimento panorâmico e rotação. Para saber mais detalhes, veja Gestos, manipulações e interações.

Observação  

Os eventos de gesto estático são acionados depois que uma interação é concluída. Os eventos de gestos de manipulação indicam uma interação contínua. Os eventos de gesto de manipulação são acionados quando o usuário toca no elemento e continuam até o usuário retirar o dedo ou até a manipulação ser cancelada.

 

O acesso a eventos com o ponteiro ou gestos permite que você use a linguagem do design interativo do  Windows 8para:

  • Jogos
  • Personalizar controles e comentários visuais
  • Interações personalizadas

Aproveite o reconhecimento de gesto interno oferecido por estes eventos de gestos DOM:

Tipo Eventos de gestos DOM
Eventos gerais MSManipulationStateChanged
Eventos de ponteiros

gotpointercapture

lostpointercapture

pointercancel

pointerdown

pointermove

pointerout

pointerover

pointerup

Eventos de gestos estáticos

MSGestureHold

MSGestureTap

Eventos de gestos de manipulação

MSGestureChange

MSGestureEnd

MSGestureStart

MSInertiaStart

 

Para saber mais sobre como manipular eventos de ponteiros e gestos, veja Guia de início rápido: manipulação de ponteiro e Guia de início rápido: manipulação de gestos DOM básicos.

Personalizar a experiência do usuário

Personalize e controle totalmente a experiência de interação do seu aplicativo por meio das APIs de aplicativos de Tempo de Execução do Windows . Com essas APIs, você pode habilitar interações do usuário personalizadas e manipular outras opções de configuração e recursos de hardware, como dispositivos de mouse com botão direito, botão de roda, roda de inclinação ou botões X, bem como dispositivos de caneta com botões da caneta e pontas com apagador.

A maioria das APIs de manipulação é fornecida pelos tipos Windows.UI.Core, Windows.UI.Input e Windows.UI.Input.Inking, com os dados do dispositivo de entrada expostos pelo Windows.Devices.Input.

Você verá que as classes GestureRecognizer, PointerPoint e PointerPointProperties são mais úteis para lidar com gestos e manipulações.

Antes de fornecer experiências de interação personalizadas por meio de manipulações e gestos novos ou modificados, considere o seguinte:

  • Um gesto existente fornece a experiência que o seu aplicativo precisa? Não forneça um gesto personalizado para zoom ou movimento panorâmico se puder simplesmente adaptar o aplicativo para dar suporte ou interpretar um gesto existente.
  • O gesto personalizado gera uma possível inconsistência entre os aplicativos?
  • O gesto exige suporte específico de hardware, como número de contatos?
  • Há um controle (como, por exemplo, SemanticZoom) que proporciona a experiência de interação necessária? Caso haja um controle capaz de manipular intrinsecamente a entrada do usuário, é realmente necessário personalizar um gesto ou uma manipulação?
  • Seu gesto ou manipulação personalizado resulta em uma experiência de interação eficaz e natural?
  • A experiência de interação faz sentido? Se a interação depender de aspectos como o número de contatos, velocidade, tempo (não recomendado) e inércia, garanta que essas restrições e dependências sejam consistentes e detectáveis. Por exemplo, a forma como os usuários interpretam movimentos rápidos e lentos pode influenciar diretamente a funcionalidade do aplicativo e a satisfação dos usuários em relação à experiência.
  • O gesto ou manipulação é afetado pelas características físicas do seu usuário? Ele é acessível?
  • Um comando da barra de aplicativos ou algum outro comando de interface do usuário será suficiente?

Resumindo, crie gestos e manipulações personalizados apenas se houver uma necessidade clara e bem definida e se nenhum gesto básico der suporte ao seu cenário.

Para saber mais sobre interações personalizadas, veja Guia de início rápido: gestos estáticos e Guia de início rápido: gestos de manipulação.

Tópicos relacionados

Conceitual

Desenvolvendo aplicativos da Windows Store (JavaScript e HTML)

Design de interação por toque