Interações por mouse

Artigo
06/02/2023

Otimize o design do aplicativo Windows para entrada por toque e obtenha suporte básico ao mouse por padrão.

Mouse

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, que foi otimizado para a natureza imprecisa do toque.

Mouse e touch apresentam divergências quando o assunto é a capacidade do touch de emular mais precisamente a manipulação direta de elementos da interface do usuário na tela usando gestos físicos executados diretamente nesses objetos (por exemplo, passar o dedo, deslizar o dedo, arrastar, girar etc.). Manipulações com o mouse geralmente exigem alguma outra funcionalidade de interface do usuário, como o uso de identificadores para redimensionar ou girar um objeto.

Este tópico descreve as considerações de design para interações com mouse.

A linguagem de mouse de aplicativo UWP

Um conjunto conciso de interações de mouse é usado de forma consistente em todo o sistema.

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.
Clicar para uma ação principal	Clique 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 a barra de navegação (se disponível) e a barra 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 apps com os comandos contextuais relacionados ao elemento selecionado. Nota Clique com o botão direito do mouse para exibir um menu de contexto se os comandos de seleção ou barra de aplicativos não forem comportamentos apropriados da interface do usuário. Mas a nossa recomendação é que você use a barra de apps 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.

Eventos de entrada do mouse

A maioria das entradas do mouse pode ser manipulada por meio dos eventos de entrada roteados comuns compatíveis com todos os objetos UIElement . Estão incluídos:

No entanto, você pode aproveitar os recursos específicos de cada dispositivo (como eventos de roda do mouse) usando o ponteiro, o gesto e os eventos de manipulação no Windows.UI.Input.

Amostras: Consulte nosso exemplo BasicInput, para .

Diretrizes de feedback visual

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 comentários sobre elementos visuais quando o elemento não der suporte a interação (como um 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, consulte 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. Especifique uma imagem de cursor usando a função PointerCursor.

Se você precisa personalizar o cursor do mouse:

Sempre use o cursor de seta () para elementos clicáveis. não use o cursor de mão apontador () 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 () ao mover é 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 um objeto for redimensionável.
Use os cursores de mão de agarramento (, ) ao fazer movimento panorâmico do conteúdo em uma tela fixa (como um mapa).