Interações por mouse

Artigo
07/05/2024

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

mouse

A entrada do mouse é mais adequada para interações do usuário que exigem precisão ao apontar e clicar. Essa precisão inerente é naturalmente suportada pela interface do usuário do Windows, que é otimizada para a natureza imprecisa do toque.

Onde a entrada de mouse e toque divergem é a capacidade do toque de emular mais de perto a manipulação direta de elementos da interface do usuário por meio de gestos físicos executados diretamente nesses objetos (como passar o dedo, deslizar, arrastar, girar e assim por diante). As manipulações com um mouse normalmente exigem alguma outra funcionalidade de interface do usuário, como o uso de alças para redimensionar ou girar um objeto.

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

A linguagem do mouse do aplicativo UWP

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

Termo	Descrição
Passe o mouse para aprender	Passe o mouse sobre um elemento para exibir informações mais detalhadas ou recursos visuais de ensino (como uma dica de ferramenta) sem um compromisso com uma ação.
Clique com o botão esquerdo do mouse para a ação principal	Clique com o botão esquerdo do mouse em um elemento para invocar sua ação principal (como iniciar um aplicativo ou executar um comando).
Role para mudar 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 podem indicar o local do modo de exibição atual na área de conteúdo (o movimento panorâmico com toque exibe uma interface do usuário semelhante).
Clique com o botão direito do mouse para selecionar e comandar	Clique com o botão direito do mouse para exibir a barra de navegação (se disponível) e a barra de aplicativos com comandos globais. Clique com o botão direito do mouse em um elemento para selecioná-lo e exibir a barra de aplicativos com comandos contextuais para o 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 comportamentos apropriados da interface do usuário. Mas é altamente recomendável que você use a barra de aplicativos para todos os comportamentos de comando.
Comandos da interface do usuário para ampliar	Exiba comandos de interface do usuário na barra de aplicativos (como + e -) ou pressione Ctrl e gire a roda do mouse para emular gestos de pinçar e esticar para zoom.
Comandos da interface do usuário para girar	Exiba 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 girar para girar. Gire o próprio dispositivo para girar a tela inteira.
Clique com o botão esquerdo e arraste para reorganizar	Clique com o botão esquerdo e arraste um elemento para movê-lo.
Clique com o botão esquerdo e arraste para selecionar o texto	Clique com o botão esquerdo do mouse no 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 os eventos de ponteiro, gesto e manipulação em Windows.UI.Input.

Exemplos: consulte nosso exemplo BasicInput, para .

Diretrizes de feedback visual

Quando um mouse é detectado (por meio de eventos de movimentação ou foco), mostre a interface do usuário específica do mouse para indicar a funcionalidade exposta pelo elemento. Se o mouse não se mover por um determinado período de tempo ou se o usuário iniciar uma interação por toque, faça com que a interface do usuário do mouse desapareça gradualmente. Isso mantém a interface do usuário limpa e organizada.
Não use o cursor para comentários de foco, os comentários fornecidos pelo elemento são suficientes (consulte Cursores abaixo).
Não exiba comentários visuais se um elemento não oferecer suporte à interação (como texto estático).
Não use retângulos de foco com interações do mouse. Reserve estes para interações com o teclado.
Exibir feedback visual simultaneamente para todos os elementos que representam o mesmo destino de entrada.
Forneça botões (como + e -) para emular manipulações baseadas em toque, como movimento panorâmico, rotação, zoom e assim por diante.

Para obter orientações mais gerais sobre comentários visuais, consulte Diretrizes para comentários visuais.

Cursores

Um conjunto de cursores padrão está disponível para um ponteiro do mouse. Eles são usados para indicar a ação primária de um elemento.

Cada cursor padrão tem uma imagem padrão correspondente associada a ele. O usuário ou um aplicativo pode substituir a imagem padrão associada a qualquer cursor padrão a qualquer momento. Especifique uma imagem de cursor por meio da função PointerCursor .

Se você precisar personalizar o cursor do mouse:

Sempre use o cursor de seta () para elementos clicáveis. Não use o cursor de apontar () para links ou outros elementos interativos. Em vez disso, use efeitos de foco (descritos anteriormente).
Use o cursor de texto () para texto selecionável.
Use o cursor de movimento () quando mover for a ação principal (como arrastar ou cortar). Não use o cursor de movimento para elementos em que a ação principal é a navegação (como blocos Iniciar).
Use os cursores de redimensionamento horizontal, vertical e diagonal (, , , ), quando um objeto for redimensionável.
Use os cursores de mão de preensão (, ) ao deslocar o conteúdo em uma tela fixa (como um mapa).