Respondendo a interações por mouse (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]
Responda à entrada por mouse nos aplicativos da Windows Store em C++, C# ou Visual Basic manipulando os mesmos eventos básicos de ponteiro usados para entrada por toque e caneta.
Esses eventos comuns permitem implementar funcionalidade de entrada básica sem precisar escrever código para cada dispositivo de entrada. Entretanto, você ainda pode aproveitar os recursos especiais de cada dispositivo (como eventos da roda do mouse), se necessário.
Dica As informações neste tópico são específicas para o desenvolvimento de aplicativos da Windows Store em JavaScript.
Veja Respondendo a interações por mouse (XAML) para aplicativo da Windows Store em C++, C# ou Visual Basic.
Veja Desenvolvendo controles do mouse (DirectX e C++) para aplicativos da Windows Store usando DirectX com C++.
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.
- Diretrizes para interações comuns do usuário
- Diretrizes de zoom óptico e redimensionamento
- Diretrizes de movimento panorâmico
- Diretrizes de rotação
- Diretrizes do Zoom Semântico
- Diretrizes de resposta visual
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: amostra de recursos de dispositivo
Entrada: exemplo de gestos instanciáveis
Entrada: gestos e manipulações com o GestureRecognizer
Visão geral
A entrada via mouse é a mais adequada às interações que exigem precisão do usuário para apontar e clicar. Essa precisão inerente é naturalmente aceita pela interface do usuário do Windows 8, que foi otimizado para a natureza imprecisa do toque. Otimize o design do seu aplicativo da Windows Store para entrada por toque e obtenha, por padrão, o suporte básico para mouse.
Mouse e toque apresentam divergências quando o assunto é a capacidade do toque de emular a manipulação direta de elementos da interface do usuário na tela usando gestos físicos executados nesses objetos (por exemplo, passar o dedo, deslizar o dedo, arrastar, girar etc.).
Para aceitar as interações do mouse em cenários que enfatizam a manipulação direta, use a interface do usuário específica do mouse para fornecer a funcionalidade equivalente aos usuários do seu aplicativo, independentemente do dispositivo que estiverem usando. Por exemplo, quando um mouse é detectado, use uma barra de rolagem para emular o movimento panorâmico e os botões anterior e próximo, para virar as páginas de conteúdo.
Recomendações para permitir manipulações por mouse
Veja a seguir algumas diretrizes para permitir manipulações por mouse.
A linguagem de mouse do Windows 8
O Windows 8 oferece um conjunto conciso de manipulações por mouse usado igualmente em todo o sistema. A aplicação consistente dessa linguagem de mouse torna seu aplicativo familiar para os usuários. Isso aumenta a confiança do usuário e facilita aprender e usar seu aplicativo.
| 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. |
Clicar com o botão esquerdo para uma ação principal |
Clique com o botão esquerdo em um elemento para invocar sua ação principal (como iniciar um aplicativo ou executar um comando). |
Rolar para mudar o modo de exibição |
Exiba barras de rolagem para mover para cima, para baixo, para a esquerda e para a direita em uma área de conteúdo. Os usuários podem rolar clicando nas barras de rolagem ou girando a roda do mouse. As barras de rolagem indicam o local do modo de exibição atual dentro da área de conteúdo (o movimento panorâmico com toque exibe uma IU parecida). |
Clicar com o botão direito do mouse para selecionar e executar um comando |
Clique com o botão direito do mouse para exibir as barras de aplicativos com os comandos globais. Clique com o botão direito do mouse em um elemento para selecioná-lo e exibir a barra de aplicativos com os comandos contextuais relacionados ao elemento selecionado. Observação Clique com o botão direito do mouse 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. Mas a nossa recomendação é que você use a barra de aplicativos para os comportamentos de todos os comandos. |
Comandos da interface do usuário para aplicar zoom |
Exiba os comandos da interface do usuário na barra de aplicativos (como + e -) ou pressione Ctrl e gire a roda do mouse para emular gestos de pinçagem e ampliação para aplicar zoom. |
Comandos da interface do usuário para girar |
Exiba os comandos da interface do usuário na barra de aplicativos ou pressione Ctrl+Shift e gire a roda do mouse para emular o gesto de rotação para girar. Gire o próprio dispositivo para girar a tela inteira. |
Clicar e arrastar para reorganizar |
Clique e arraste um elemento para movê-lo. |
Clicar e arrastar para selecionar texto |
Clique dentro de um texto selecionável e arraste para selecioná-lo. Clique duas vezes para selecionar uma palavra. |
Cantos e bordas do mouse para comandos do sistema |
A movimentação do mouse para o canto superior direito ou para o canto inferior direito, da esquerda para a direita (ou para a borda esquerda em layouts da direita para a esquerda) na tela, revela os botões que expõem os comandos do sistema. Mova o mouse para o canto superior esquerdo em layouts da esquerda para a direita (ou para o canto superior direito em layouts da direita para a esquerda) para exibir a miniatura do aplicativo usado mais recentemente. Clique com o botão esquerdo do mouse, ou clique e arraste para rolar e alternar os aplicativos em execução, ou arraste para ajustar o aplicativo (se permitido pela resolução de tela). Mova o mouse para o canto inferior esquerdo em layouts da esquerda para a direita (ou para o canto inferior direito em layouts da direita para a esquerda) para exibir a miniatura da tela inicial. Clique e arraste desde a borda superior até a borda inferior da tela para fechar o aplicativo atual. Clique e arraste desde a borda superior até a borda esquerda ou direita para ajustar o aplicativo atual à lateral da tela. |
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 mouse pode acessar diretamente. Para saber mais sobre como consultar os recursos de dispositivo, veja Guia de início rápido: identificando dispositivos de ponteiro.
Alguns dispositivos de mouse têm cinco botões. O quarto e quinto botão, mencionados como botões X, geralmente navegam para frente e para trás em navegadores da Web, como o Windows Internet Explorer. Associe esses botões à interface do usuário adequada (botões Voltar e Avançar) em seu aplicativo.
Quando o mouse tem um botão de roda, faça com que o giro para frente e para trás ative a rolagem vertical (para cima e para baixo) dentro da área de conteúdo. Ative a rolagem horizontal (para esquerda e direita) quando a área de conteúdo não rola na vertical. Quando o botão de roda tem uma inclinação, ele deve ativar apenas a rolagem horizontal.
A roda de rolagem deve ativar o zoom (se exposta) quando o usuário pressionar a tecla modificadora Ctrl.
Comentários visuais
- Quando o mouse é 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 mouse 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 mouse 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 respostas visuais quando o elemento não permite manipulação (como texto estático).
- Não use retângulos de foco nas manipulações por mouse. Reserve-os para as interações por teclado.
- Exiba respostas visuais simultaneamente para todos os elementos que representam o mesmo destino de entrada.
- Inclua botões (como + e -) para emular manipulações baseadas em toque, como movimento panorâmico, giro, zoom, etc.
Para obter diretrizes mais gerais sobre comentários visuais, veja Diretrizes de comentários visuais.
Cursores
Um conjunto de cursores padrão está disponível para ponteiros de mouse. 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 você precisa personalizar o cursor do mouse:
- Use sempre o cursor de seta (
.png "Cursor de seta")
) para elementos clicáveis. Não use o cursor de mão apontando (.png "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 (
.png "Cursor de texto")
) para texto selecionável. - Use o cursor de movimentação (
.png "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 (
.png "Cursor de redimensionamento vertical")
, .png "Cursor de redimensionamento horizontal")
, .png "Cursor de redimensionamento diagonal (inferior esquerdo, superior direito)")
, .png "Cursor de redimensionamento diagonal (superior esquerdo, inferior direito)")
) quando o objeto for redimensionável. - Use os cursores de mão agarrando (
.png "Cursor de mão agarrando (aberta)")
, .png "Cursor de mão agarrando (fechada)")
) ao fazer o movimento panorâmico do conteúdo dentro de uma tela fixa (como um mapa).
Comando
O clique com o botão direito do mouse deve ativar a barra de aplicativos do aplicativo. Evite zonas mortas que não aceitem cliques com o botão direito do mouse na interface do usuário de seu aplicativo. Para saber mais sobre barras de aplicativos, veja Adicionando barras de aplicativos.