Diretrizes de direcionamento

Este tópico descreve o uso da geometria de contato para seleção por área de toque na nova IU do Windows. Também fornece diretrizes para a experiência do usuário que devem ser consideradas ao usar esses novos mecanismos de direcionamento em seus aplicativos da Windows Store.

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

Visão geral do direcionamento através da geometria de contato

O direcionamento de toque no Windows 8 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. Isso garante uma experiência muito mais satisfatória para o usuário por aumentar a precisão e a confiança em suas interações por toque.

As recomendações a seguir descrevem como otimizar o seu aplicativo para o direcionamento do toque.

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

Não há uma recomendação definitiva para o tamanho de um alvo ou para onde ele deve ser colocado no aplicativo. O tamanho e a área do alvo de um objeto dependem de vários fatores, incluindo os cenários da experiência do usuário e o contexto da interação.

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 todos 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
Tamanho real do alvo9 x 9 mm (48 x 48 px em 1x)

Para elementos que são menores que o recomendado pelas diretrizes de experiência do usuário, a distância do centro de um elemento até o centro de outro elemento deve ser no mínimo de 9 mm.

Não aplicável
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

Conceitual
Diretrizes para interações comuns do usuário
Design de interação por toque
Tutorial (aplicativos da Windows Store usando JavaScript)
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
Tutorial (aplicativos da Windows Store usando C#/VB/C++ e XAML)
Guia de início rápido: entrada por toque
Guia de início rápido: ponteiros
Tutorial (aplicativos da Windows Store em C++ e DirectX)
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
Referência
Windows.UI.Core
Windows.UI.Input
Windows.UI.Xaml.Input

 

 

Mostrar:
© 2014 Microsoft