Interações por toque

Este tópico fornece diretrizes de design para criar experiências personalizadas com otimização de toque em aplicativos do Windows.

Visão geral

O toque é uma forma primária de entrada no Windows e em aplicativos do Windows que envolve o uso de um ou mais dedos (ou pontos de toque). Esses contatos de toque e seu movimento são interpretados como gestos de toque e manipulações que dão suporte a uma variedade de interações do usuário.

O SDK do Windows e o SDK do Aplicativo do Windows incluem coleções abrangentes de controles com otimização de toque que fornecem experiências robustas e consistentes em aplicativos do Windows.

Use essas diretrizes ao criar controles personalizados, experiências e estruturas para seus aplicativos do Windows.

Princípios de design

Considere o seguinte ao projetar a experiência de toque em seu aplicativo do Windows.

Otimizado para toque

As experiências de aplicativo do Windows devem ser convidativas para tocar, permitir manipulação direta e acomodar interações menos precisas. Considere aceleradores de toque, incluindo gestos e integração de caneta e voz.

Consistente em todas as posturas

Seu aplicativo deve ter uma experiência consistente, independentemente do método de entrada ou postura em que o usuário está. As alterações da postura tradicional da área de trabalho para a postura do tablet (consulte as configurações recomendadas para melhores experiências de tablet), bem como as alterações na orientação, não devem ser desorientadoras, mas sim sutis e apenas conforme necessário. Seu aplicativo deve refluir a interface do usuário de maneiras sutis para criar uma experiência familiar e coesa que atenda aos usuários onde eles estão.

Dinâmico

Os aplicativos e as interações devem fornecer aos usuários feedback em todas as fases (Touchdown, ação, retoque) de uma interação usando animações que respondam ao estado existente de um usuário enquanto indicam possíveis ações. As animações também devem manter pelo menos 60 fps para se sentirem suaves e modernas.

Honrando as convenções de toque

Comentários Responsivos

Feedback visual apropriado durante as interações com seu aplicativo ajudam os usuários a reconhecer, aprender e se adaptar à forma como suas interações são interpretadas pelo aplicativo e pela plataforma Windows. Forneça feedback imediato e contínuo que seja perceptível, compreensível e não se perca por distrações, em resposta ao toque do usuário. Este feedback imediato é como os usuários aprenderão e explorarão os elementos interativos do seu aplicativo.

• Os comentários devem ser imediatos ao tocar a tela e os objetos em movimento devem permanecer no dedo do usuário.
• A interface do usuário deve responder a gestos correspondendo à velocidade e aos movimentos do usuário; deve evitar o uso de animações de quadro-chave.
• Os comentários visuais devem transmitir possíveis resultados antes que o usuário se comprometa com uma ação.

Para obter mais informações, consulte Diretrizes para comentários visuais e movimento no Windows 11

Padrões de interação por toque

Respeite esses padrões comuns de interação e gestos para trazer consistência e previsivelmente à sua experiência.

Interações comuns

Há um conjunto de comportamentos e gestos comuns de toque que os usuários estão familiarizados e esperam trabalhar consistentemente em todas as experiências do Windows.

• Toque para ativar ou selecionar um item
• Pressione e arraste para mover um objeto
• Pressione e segure para acessar um menu de comandos contextuais secundários
• Deslizar o dedo (ou arrastar e liberar) para comandos contextuais
• Gire no sentido horário ou anti-horário para pivotar

Para obter mais informações, consulte Diretrizes para comentários visuais e movimento no Windows 11

Gestos

Os gestos reduzem o esforço exigido pelos usuários para navegar e agir em interações comuns. Sempre que possível, dê suporte à interface do usuário com gestos de toque para facilitar a navegação e a atuação dos usuários em um aplicativo.

Se estiver navegando entre visões, use animações conectadas para que estados existentes e novos sejam visíveis durante o arraste. Se estiver interagindo com a interface do usuário, os itens devem seguir o movimento do usuário, fornecer feedback e, na liberação, reagir com ações adicionais com base nos limites de posição de arrastar.

Os gestos também devem ser acionáveis com movimentos e deslizes com base na inércia e estar dentro de uma amplitude de movimento confortável.

• Arrastar ou deslizar para ir e voltar
• Arrastar para descartar
• Puxar para atualizar

Para obter mais informações, consulte Transições de página e Pull para atualizar.

Gestos personalizados

Use gestos personalizados para integrar teclas de atalho frequentes e gestos de touchpad em uma interação de toque. Ajude a descobrir e responder por meio de recursos dedicados com animações e estados visuais (por exemplo, colocar três dedos na tela faz com que as janelas diminuam para feedback visual).

• Não substitua gestos comuns, pois isso pode causar confusão para os usuários.
• Considere usar gestos com múltiplos dedos para ações personalizadas, mas lembre-se de que o sistema reservou alguns gestos com múltiplos dedos para alternar rapidamente entre aplicativos e áreas de trabalho.
• Esteja atento a gestos personalizados que começam próximos às bordas de uma tela, pois os gestos de borda são reservados para funcionalidades do sistema operacional e podem ser acionados acidentalmente.

Evitar navegação acidental

Se seu aplicativo ou jogo pode envolver interações frequentes perto das bordas da tela, considere apresentar sua experiência em um modo Fullscreen Exclusive (FSE) para evitar ativações acidentais de submenus do sistema (os usuários terão que deslizar diretamente na guia temporária para puxar o submenu do sistema associado).

Experiências de teclado de tela sensível ao toque

O teclado virtual habilita a entrada de texto para dispositivos que dão suporte a toque. Os controles de entrada de texto do aplicativo Windows invocam o teclado virtual por padrão quando um usuário toca em um campo de entrada editável.

Toque para invocar no campo de texto

O teclado virtual deve aparecer quando um usuário toca em um campo de entrada de texto. Isso funcionará automaticamente usando nossas APIs do sistema para mostrar e ocultar o teclado. Consulte Responder sobre a presença do teclado sensível ao toque.

Usar controles de entrada de texto padrão

O uso de controles comuns fornece o comportamento esperado e minimiza surpresas para os usuários.

Os controles de texto que oferecem suporte ao TSF (Text Services Framework) fornecem recursos de escrita de forma (teclado de passar o dedo).

Sinais de teclado sensível ao toque

Considere a entrada, a postura, e sinais de hardware que tornam o teclado de toque o modo principal de entrada (quando o teclado de hardware está desanexado, os pontos de entrada são acionados pelo toque, com clara intenção do usuário de digitar).

Refluir adequadamente

• Lembre-se de que o teclado pode levar até 50% da tela em dispositivos menores.
• Não obscureça o campo de texto ativo com o teclado virtual.
• Se o teclado virtual estiver ocultando o campo de texto ativo, role o conteúdo do aplicativo para cima (com animação) até que o campo esteja visível.
• Se o teclado virtual estiver ocultando o campo de texto ativo, mas o conteúdo do aplicativo não puder rolar para cima, tente mover o contêiner do aplicativo (com animação).

Atingir Metas

Certifique-se de que as áreas de toque são confortáveis e agradáveis ao toque. Se os alvos atingidos forem muito pequenos ou lotados, os usuários devem ser mais precisos, o que é difícil com o toque e pode resultar em uma experiência ruim.

Palpável

Definimos "tocável" como um mínimo de 40 x 40 epx, mesmo que o visual seja menor. Alternativamente, se a largura for de pelo menos 120 epx, a altura mínima será de 32 epx.

Nossos controles comuns estão em conformidade com esse padrão (eles são otimizados para usuários de mouse e toque).

Otimizado para toque

Para uma interface do usuário otimizada para toque, considere aumentar o tamanho do alvo para 44 x 44 epx com pelo menos 4 epx de espaço visível entre os alvos.

Recomendamos dois comportamentos padrão: sempre otimização para toque ou transição baseada em sinais de dispositivo.

Quando um aplicativo pode ser otimizado para interação por toque sem comprometer os usuários de mouse, especialmente se o aplicativo for usado principalmente com toque, sempre priorize a otimização para toque.

Se você fizer a transição da interface do usuário com base nos sinais do dispositivo para a postura do dispositivo, sempre forneça experiências consistentes entre as posturas.

Corresponder elementos visuais ao alvo de toque

Considere atualizar os visuais quando as dimensões dos alvos de toque forem alteradas. Por exemplo, se as metas de acerto aumentarem quando os usuários entrarem na postura do tablet, a interface do usuário que representa as metas atingidas também deverá ser atualizada para ajudar os usuários a entender a alteração de estado e a acessibilidade atualizada. Para obter mais informações, consulte as noções básicas de design de conteúdo para aplicativos do Windows, Diretrizes para destinos de toque, tamanho do controle e densidade.

Otimização de Retrato

Ofereça suporte a layouts responsivos que consideram janelas altas e largas para garantir que um aplicativo seja otimizado para as orientações paisagem e retrato.

Isso também garantirá que as janelas do aplicativo exibam os principais visuais da interface do usuário corretamente em cenários de multitarefa (aplicativos ajustados lado a lado com proporções retrato), independentemente da orientação e dos tamanhos de tela.