Diretrizes de direcionamento

Applies to Windows and Windows Phone

O direcionamento de toque no Windows usa a área de contato total de cada dedo detectado por um digitalizador de toque. O conjunto maior e mais complexo de dados de entrada relatados pelo digitalizador é usado para aumentar a precisão ao determinar o destino desejado (ou mais provável) do usuário.

Este tópico descreve o uso da geometria de contato do direcionamento de toque e fornece as melhores práticas de direcionamento em aplicativos do Tempo de Execução do Windows.

Veja este recurso em ação como parte da nossa série sobre recursos para aplicativos, do início ao fim:  Interação com o usuário: Entrada de toque... e muito mais.

Medidas e dimensionamento

Para manter-se consistente entre diferentes tamanhos de tela e densidades de pixels, todos os tamanhos desejados são apresentados em unidades físicas (milímetros). As unidades físicas podem ser convertidas para pixels ao usar a seguinte equação:

Pixels = Densidade de Pixels × Medida

O exemplo a seguir usa esta fórmula para calcular o tamanho do pixel de um alvo de 9 mm em uma tela de 135 pixels por polegada (PPI) em um patamar de dimensionamento de 1x:

Pixels = 135 PPI × 9 mm

Pixels = 135 PPI × (0,03937 polegadas por mm × 9 mm)

Pixels = 135 PPI × 0,35433 polegadas

Pixels = 48 pixels

Esse resultado deve ser ajustado conforme cada patamar de dimensionamento definido pelo sistema.

Limites

Os limites de distância e tempo podem ser usados para determinar o resultado de uma interação.

Por exemplo, quando um toque é detectado, ele é registrado se o objeto é arrastado a menos de 2,7 mm do ponto de toque e o dedo é levantado em 0,1 segundo ou menos depois do toque. Mover o dedo além desse limite de 2,7 mm faz com que o objeto seja arrastado e selecionado ou movido (para saber mais, veja Diretrizes para deslizamento transversal). Dependendo do seu aplicativo, segurar o dedo por mais de 0,1 segundo pode fazer com que o sistema faça uma interação de autorrevelação (para saber mais, veja Diretrizes para comentários visuais).

Tamanhos do alvo

Em geral, defina o tamanho do alvo de toque como 9 mm ou maior (48x48 pixels em uma tela de 135 PPI em um nível de ajuste predefinido de 1,0x). Evite usar alvos de toque que tenham menos de 7 mm.

O diagrama a seguir mostra como o tamanho do alvo normalmente é uma combinação de um alvo visual, do tamanho do alvo real e de qualquer área de reserva entre o alvo real e outros alvos possíveis.

Diagrama mostrando os tamanhos recomendados para o alvo visual, o alvo real e a distância.

A tabela a seguir lista os tamanhos mínimos e recomendados para os componentes de um alvo de toque.

Componente alvoTamanho mínimoTamanho recomendado
Distância 2 mmNão aplicável.
Tamanho visual do alvo< 60% do tamanho real90-100% do tamanho real

A maioria dos usuários não vai perceber que um alvo visual pode ser tocado, se ele for menor que 4,2 mm (60% do tamanho de alvo mínimo recomendado de 7 mm).

Tamanho real do alvo7 mmMaior ou igual a 9 mm (48 x 48 px em 1x)
Tamanho total do alvo 11 x 11 mm (aproximadamente 60 px: três unidades de grade de 20 px em 1x) 13,5 x 13,5 mm (72 x 72 px em 1x)

Isto implica que o tamanho do destino real e o preenchimento combinados devem ser maiores que os seus mínimos respectivos.

 

Essas recomendações de tamanho de destino podem ser ajustadas de acordo com determinado cenário. Algumas das considerações incluídas nessas recomendações são:

  • Frequência de toques: considere tornar os destinos pressionados repetidas vezes ou com frequência maiores que o tamanho mínimo.
  • Consequência do erro: destinos com consequências graves quando tocados por engano devem ter preenchimento maior e ser colocados mais distantes da extremidade da área de conteúdo. Isso vale principalmente para destinos que são tocados com frequência.
  • Posição na área de conteúdo
  • Fator forma e tamanho da tela
  • Postura do dedo
  • Visualizações por toque
  • Hardware e digitalizadores de toque

Assistência de direcionamento

O Windows oferece assistência de direcionamento para suportar cenários onde as recomendações de tamanho mínimo ou distância apresentados aqui não são aplicáveis, por exemplo, hyperlinks em uma página, controles de calendário, listas suspensas e caixas de combinação ou seleção de texto.

Essas melhorias na plataforma de direcionamento e os comportamentos da interface do usuário trabalham juntos com a resposta visual (IU de desambiguidade) para aumentar a precisão e a confiança do usuário. Para saber mais, veja Diretrizes de resposta visual.

Se um elemento tocável deve ser menor que o tamanho mínimo de alvo recomendado, as seguintes técnicas podem ser usadas para minimizar os problemas de direcionamento resultantes.

Conector

O conector é uma indicação visual (um conector de um ponto de contato até o retângulo delimitador de um objeto) usada para indicar ao usuário que ele está conectado e interagindo com um objeto, mesmo que o contato de entrada não esteja diretamente em contato com o objeto. Isso pode ocorrer quando:

  • Um contato de toque foi detectado primeiro dentro de algum limite de proximidade com um objeto, e esse objeto foi identificado como o destino mais provável do contato.
  • Um contato de toque foi movido para fora de um objeto, mas ainda está dentro do limite de proximidade.

Esse recurso não está disponível para exposto para desenvolvedores de aplicativos da Windows Store usando JavaScript.

Esfregar

Esfregar significa tocar em qualquer lugar dentro de um campo de alvos e deslizar para selecionar o alvo desejado sem tirar o dedo até que esteja sobre o alvo desejado. Isso também é conhecido como "ativação sem largar", onde o objeto que é ativado é aquele que foi tocado por último quando o dedo foi suspenso da tela.

Siga estas diretrizes para criar interações de esfregar:

  • Esfregar é usado em conjunto com a IU de desambiguidade. Para saber mais, veja Diretrizes de resposta visual.
  • O tamanho mínimo recomendado para o destino de toque de esfregar é de 20 px (3,75 mm em 1x).
  • Esfregar tem prioridade quando realizada em uma área de movimento panorâmico, como uma página da Web.
  • Os destinos de esfregar devem ficar juntos.
  • Uma ação é cancelada quando o usuário arrasta o dedo para fora do destino de esfregar.
  • O conector de um destino de esfregar é especificado quando as ações realizadas pelo destino não são destrutivas, como alternar entre datas no calendário.
  • O conector é especificado em uma única direção, horizontal ou vertical.

Tópicos relacionados

Para designers
Diretrizes para interações comuns do usuário
Design de interação por toque
Para desenvolvedores (HTML)
Guia de início rápido: ponteiros
Guia de início rápido: gestos e manipulações DOM
Guia de início rápido: gestos estáticos
Guia de início rápido: gestos de manipulação
Para desenvolvedores (XAML)
Guia de início rápido: entrada por toque
Guia de início rápido: manipulando a entrada por ponteiro
Windows.UI.Core
Windows.UI.Input
Windows.UI.Xaml.Input
Para desenvolvedores (aplicativos do Tempo de Execução do Windows em DirectX com C++)
Respondendo à entrada por toque (DirectX e C++)
Amostras (DOM)
Amostra de rolagem, movimento panorâmico e aplicação de zoom em HTML
Entrada: amostra de gestos instanciáveis
Amostras (APIs de aplicativos da Windows Store )
Entrada: Amostra de manipulações e gestos (JavaScript)
Entrada: amostra de gestos no Windows 8
Entrada: amostra de eventos de entrada do usuário XAML
Amostra de rolagem, movimento panorâmico e aplicação de zoom em XAML
Amostras (DirectX)
Amostra de entrada por toque do DirectX
Entrada: Amostra de manipulações e gestos (C++)
Entrada: Amostra de teste de hit de toque

 

 

Mostrar:
© 2014 Microsoft