Interações por toque

Este tópico fornece diretrizes de design para criar experiências personalizadas e otimizadas para o toque em aplicações Windows.

Visão geral

O toque é uma forma principal de entrada no Windows e nas suas aplicações, que envolve o uso de um ou mais dedos (ou contactos táteis). Estes contactos táteis, e o seu movimento, são interpretados como gestos e manipulações táteis que suportam uma variedade de interações do utilizador.

Tanto o Windows SDK como o Windows App SDK incluem coleções abrangentes de controlos otimizados para o toque que proporcionam experiências robustas e consistentes em todas as aplicações Windows.

Use estas orientações ao criar controlos, experiências e frameworks personalizados para as suas aplicações Windows.

Princípios de conceção

Considere o seguinte ao desenhar a experiência tátil na sua aplicação para Windows.

Otimizado para Toque

As experiências das aplicações Windows devem ser convidativas ao toque, permitir manipulação direta e acomodar interações menos precisas. Considere aceleradores táteis, incluindo gestos e integração com caneta e voz.

Consistência entre Posturas

A sua aplicação deve ter uma experiência consistente, independentemente do método de introdução ou da postura em que o utilizador esteja. As alterações da postura tradicional do ambiente de trabalho para a postura do tablet (ver Definições recomendadas para melhores experiências no tablet), bem como alterações na orientação, não devem ser desorientadoras, mas sim subtis e apenas quando necessário. A sua aplicação deve reformular a interface de forma subtil para criar uma experiência familiar e coesa que atenda os utilizadores onde eles estão.

Adaptativo

As aplicações e interações devem fornecer feedback aos utilizadores em cada fase (toque final, ação, retoque) de uma interação, usando animações que respondam ao estado existente do utilizador, indicando possíveis ações. As animações também devem manter pelo menos 60 fps para se sentirem fluidas e modernas.

Honrando as Convenções Touch

Feedback Responsivo

O feedback visual apropriado durante as interações com seu aplicativo ajuda 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 em resposta ao toque do utilizador, que seja notório, compreensível e não perdido por distrações. Este feedback imediato é a forma como os utilizadores irão aprender e explorar os elementos interativos da sua aplicação.

• O feedback deve ser imediato na receção do toque e os objetos em movimento devem colar-se ao dedo do utilizador.
• A interface deve responder aos gestos igualando a velocidade e os movimentos do utilizador, evitando o uso de animações por keyframes.
• O feedback visual deve transmitir possíveis resultados antes de o utilizador se comprometer com uma ação.

Fazer

Não

Para mais informações, consulte Diretrizes para feedback visual e movimento no Windows 11

Padrões de Interação Tátil

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

Interações Comuns

Existe um conjunto de comportamentos e gestos comuns de toque com os quais os utilizadores estão familiarizados e esperam que funcionem de forma consistente em todas as experiências do Windows.

• Toque para ativar ou selecionar um item
• Pressione brevemente e arraste para mover um objeto
• Pressione e mantenha pressionado para aceder a um menu de comandos secundários e contextuais
• Deslizar (ou arrastar e largar) para comandos contextuais
• Rodar no sentido dos ponteiros do relógio ou anti-horário para pivotar

Interações

Tap

Deslizar (ou arrastar e largar)

Pressão curta e arrasto

Girar

Pressionar e segurar

Para mais informações, consulte Diretrizes para feedback visual e movimento no Windows 11

Gestos

Os gestos reduzem o esforço exigido pelos utilizadores para navegar e agir em interações comuns. Sempre que possível, apoie a interface com gestos táteis para facilitar a navegação e atuação dos utilizadores numa aplicação.

Se estiver a navegar entre vistas, use animações conectadas para que os estados existentes e novos fiquem ambos visíveis durante o arrasto. Se interagirem com a interface, os itens devem seguir o movimento do utilizador, fornecer feedback e, ao serem libertados, reagir com ações adicionais baseadas nos limiares de posição de arrasto.

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

• Arrasta ou desliza para avançar e recuar
• Arrastar para fechar
• Puxar para atualizar

Gestos

Arrasta ou faz um flick para ir para a frente e para trás

Puxar para atualizar

Arrastar para dispensar

Para mais informações, consulte Transições de Página e Puxar para atualizar.

Gestos personalizados

Use gestos personalizados para trazer atalhos de teclado de alta frequência e gestos do trackpad para uma interação tátil. Facilita a descoberta e resposta através de possibilidades dedicadas com animações e estados visuais (por exemplo, colocar três dedos no ecrã faz com que as janelas encolham para feedback visual).

• Não ignore gestos comuns, pois isso pode causar confusão aos utilizadores.
• Considere usar gestos com múltiplos dedos para ações personalizadas, mas tenha em atenção que o sistema reservou alguns gestos com vários dedos para alternar rapidamente entre aplicações e desktops.
• Tenha atenção a gestos personalizados originados perto das bordas do ecrã, pois os gestos de borda são reservados para comportamentos ao nível do sistema operativo, que podem ser invocados acidentalmente.

Evitar navegação acidental

Se a sua aplicação ou jogo puder envolver interações frequentes perto das extremidades do ecrã, considere apresentar a sua experiência em modo Exclusivo de Ecrã Completo (FSE) para evitar ativações acidentais de flyouts do sistema (os utilizadores terão de deslizar diretamente no separador temporário para abrir o flyout do sistema associado).

Observação

Evite usar isto a menos que seja absolutamente necessário, pois dificultará que os utilizadores se afastem da sua aplicação ou a utilizem em conjunto com outros.

Experiências com teclado tátil

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

Invocar ao tocar no campo de texto

O teclado tátil deve aparecer quando o utilizador tocar num campo de introdução de texto – isto funcionará automaticamente ao usar as nossas APIs do sistema para mostrar e esconder o teclado. Ver Responder à presença do teclado tátil.

Utilizar controlos padrão de entrada de texto

A utilização de controlos comuns proporciona o comportamento esperado e minimiza surpresas para os utilizadores.

Os controlos de texto que suportam o Text Services Framework (TSF) oferecem capacidades de escrita de formas (deslizar o teclado).

Sinais do teclado tátil

Tenha em conta a entrada, postura, sinais de hardware que tornam o teclado tátil o principal modo de entrada (teclado de hardware é desligado, pontos de entrada são invocados com toque, clara intenção do utilizador de escrever).

Reflow de forma adequada

• Tenha em atenção que o teclado pode ocupar 50% do ecrã em dispositivos mais pequenos.
• Não oculte o campo de texto ativo com o teclado tátil.
• Se o teclado tátil estiver a ocultar o campo de texto ativo, desloca o conteúdo da aplicação para cima (com animação) até que o campo fique visível.
• Se o teclado tátil estiver a ocultar o campo de texto ativo mas o conteúdo da app não conseguir subir, tente mover o contentor da app (com animação).

Metas a Alcançar

Certifica-te de que os alvos atingidos são confortáveis e convidativos ao toque. Se os alvos atingidos forem demasiado pequenos ou muito próximos, os utilizadores têm de ser mais precisos, o que é difícil de executar em dispositivos táteis e pode resultar numa má experiência.

Tocável

Definimos "touchable" como um mínimo de 40 x 40 epx, mesmo que o elemento visual seja menor, ou 32 epx de altura, caso a largura seja de pelo menos 120 epx.

Os nossos controlos comuns cumprem este padrão (são otimizados para utilizadores de rato e táteis).

Otimizado para o toque

Para uma interface otimizada para o 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 predefinidos: Sempre otimizar o toque ou transitar com base nos sinais do dispositivo.

Quando uma aplicação pode ser otimizada para o toque sem comprometer os utilizadores do rato, especialmente se for usada principalmente com toque, então otimize sempre o toque.

Se fizer a transição da interface com base nos sinais do dispositivo para a postura do dispositivo, oferece sempre experiências consistentes em todas as posturas.

Combinar visuais com o alvo de toque

Considere atualizar os visuais quando as dimensões do alvo de toque mudarem. Por exemplo, se os alvos de acerto aumentarem quando os utilizadores entram no modo tablet, a interface que representa esses alvos também deve ser atualizada para ajudar os utilizadores a compreender a alteração de estado e a atualização da funcionalidade. Para mais informações, consulte noções básicas de design de conteúdos para aplicações Windows, Diretrizes para alvos táteis, Tamanho e densidade de controlo.

Otimização de Retratos

Suporte layouts responsivos que tenham em conta janelas altas e largas para garantir que a aplicação está otimizada tanto para orientações em paisagem como em retrato.

Isto também garantirá que as janelas das aplicações mostrem corretamente os visuais principais da interface em cenários de multitarefa (aplicações fotografadas lado a lado com proporções de aspeto retrato), independentemente da orientação e do tamanho do ecrã.