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.
- Diretrizes para interações comuns do usuário
- Diretrizes de deslizamento transversal
- Diretrizes de zoom óptico e redimensionamento
- Diretrizes de movimento panorâmico
- Diretrizes de rotação
- Diretrizes do Zoom Semântico
- Diretrizes para seleção de texto e imagens
- Diretrizes de direcionamento
- Diretrizes de resposta visual
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
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 API | Propriedade CSS | Atributos DOM | Eventos DOM |
|---|---|---|---|
| touch-action especifica se uma determinada região pode ser manipulada por movimento panorâmico ou zoom. | |||
| Movimento panorâmico/Rolagem | |||
| Zoom | 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 | |
| Eventos de gestos estáticos | |
| Eventos de gestos de manipulação |
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)