Diretrizes de deslizamento transversal

Applies to Windows and Windows Phone

Use o deslizamento transversal para dar suporte à seleção com o gesto de deslizar e a interações de arrastar (mover) com o gesto de deslizar.

Veja o funcionamento deste recurso como parte de nossos Recursos de aplicativos, da série do início ao fim .:  Interação com o usuário: Entrada de toque ....e muito mais.

O que fazer e o que não fazer

  • Use o deslizamento transversal para listas ou coleções que rolam em uma única direção.
  • Utilize o deslizamento transversal para seleção de itens quando a interação de toque for utilizada para outra finalidade.
  • Não utilize o deslizamento transversal para adicionar itens a uma fila.

Diretriz de uso adicional

Gestos de selecionar e arrastar só são possíveis em uma área de conteúdo que permite movimento panorâmico unidirecional (vertical ou horizontal). Para qualquer uma dessas interações funcionar, uma direção de movimento panorâmico deve ser bloqueada, e o gesto deve ser realizado na direção perpendicular à direção do momento panorâmico.

Veja aqui a demonstração de selecionar e arrastar um objeto usando o deslizamento transversal. A imagem à esquerda mostra como um item é selecionado quando um gesto de passar o dedo não atravessa o limite de distância antes que o contato seja retirado e o objeto, liberado. A imagem à direita mostra um gesto de deslizamento que atravessa o limite de distância e faz com que o objeto seja arrastado.

Diagrama mostrando os processos de selecionar e de arrastar e soltar.

As distâncias de limite usadas pela interação de deslizamento transversal são mostradas no diagrama a seguir.

Captura de tela mostrando os processos de selecionar e de arrastar e soltar.

Para preservar a funcionalidade de movimento panorâmico, um pequeno limite de 2,7 mm (aproximadamente 10 pixels na resolução de destino) deve ser excedido para que uma interação de selecionar ou arrastar seja ativada. Esse pequeno limite ajuda o sistema a diferenciar entre deslizamento transversal e movimento panorâmico. Ajuda também a garantir que um gesto de toque seja distinguido no deslizamento transversal e no movimento panorâmico.

Essa imagem mostra como um usuário toca um elemento da interface do usuário, mas move o dedo ligeiramente para baixo, no contato. Não havendo limites, a interação é interpretada como um deslizamento transversal devido ao movimento vertical inicial. Com o limite, o movimento é interpretado corretamente como movimento panorâmico horizontal.

Captura de tela mostrando o limite que remove a ambiguidade das interações de seleção e de arrastar e soltar.

Aqui estão algumas diretrizes a serem consideradas ao incluir a funcionalidade de deslizamento transversal em seu aplicativo.

Use o deslizamento transversal para listas ou coleções que rolam em uma única direção. Para saber mais, veja Adicionando controles ListView.

Observação  Nos casos em que a área de conteúdo podem ser girada nas duas direções, como navegadores da Web ou leitores eletrônicos, a interação com tempo de pressionar e manter pressionado deve ser usada para chamar o menu de contexto para objetos como imagens e hiperlinks.
Movimento panorâmico horizontal, lista bidimensionalMovimento panorâmico vertical, lista unidimensional
Uma lista bidimensional de movimento panorâmico horizontal. Arraste verticalmente para selecionar ou mover um item.Uma lista unidimensional de movimento panorâmico vertical. Arraste verticalmente para selecionar ou mover um item.

 

Selecionando

Seleção é marcar, sem iniciar ou ativar, um ou mais objetos. Esta ação é semelhante a dar um clique simples no mouse, ou pressionar a tecla Shift e clicar com o mouse, em um ou mais objetos.

A seleção de deslizamento transversal é atingida tocando em um elemento e liberando-o após uma curta interação de arrastar. Esse método de seleção usa tanto o modo de seleção dedicado quanto a interação com tempo de pressionar e manter pressionado exigida por outras interfaces de toque e não entra em conflito com a interação de toque para ativação.

Além do limite de distância, a seleção de deslizamento transversal é limitada a uma área de limite de 90°, conforme mostrado no diagrama a seguir. Se o objeto for arrastado para fora desta área, ele não será selecionado.

Diagrama mostrando a área de limite de seleção.

A interação de deslizamento transversal é complementada por uma interação pressionar e segurar com limite de tempo, também chamada de interação "autorreveladora". Essa interação complementar ativa uma animação que indica qual ação poderá ser executada no objeto. Para saber mais sobre a UI de desambiguidade, veja Diretrizes de resposta visual.

As capturas de tela a seguir demonstram como a animação autorreveladora funciona.

  1. Pressione e mantenha pressionada a animação da interação autorreveladora. O estado selecionado do item afeta o que é revelado pela animação: uma marca de verificação se não selecionado e nenhuma marca de verificação se selecionado.

    Captura de tela mostrando um estado não selecionado.
  2. Selecione o item usando o gesto de deslizar (para cima ou para baixo).

    Captura de tela mostrando a animação para seleção.
  3. O item não é selecionado. Substitua o comportamento da seleção usando o gesto de deslizar para mover o item.

    Captura de tela mostrando a animação para arrastar e soltar.

Use um único toque para seleção em aplicativos em que esta é a única ação primária. A animação autorreveladora de deslizamento transversal é exibida para remover a ambiguidade dessa funcionalidade da interação por toque padrão para ativação e navegação.

Cesta de seleção

A cesta de seleção é uma representação visualmente distinta e dinâmica de itens que foram selecionados na lista principal ou coleção no aplicativo. Esse recurso é útil para acompanhar os itens selecionados e deve ser usado pelo aplicativos quando:

  • Os itens podem ser selecionados de vários locais.
  • Muitos itens podem ser selecionados.
  • Uma ação ou um comando depende da lista de seleção.

O conteúdo da cesta de seleção persiste entre ações e comandos. Por exemplo, se você selecionar uma série de fotografias em uma galeria, aplicar uma correção de cor a cada fotografia e compartilhar as fotografias de alguma forma, os itens permanecerão selecionados.

Se nenhuma cesta de seleção for utilizada em um aplicativo, a seleção atual deve ser limpa após uma ação ou comando. Por exemplo, se você selecionar uma música em uma lista de reprodução e classificá-la, a seleção deve ser limpa.

A seleção atual também deve ser limpa quando nenhuma cesta de seleção for usada e outro item na lista ou coleção for ativado. Por exemplo, se você selecionar uma mensagem da caixa de entrada, o painel de visualização será atualizado. Então, se você selecionar uma segunda mensagem da caixa de entrada, a seleção da mensagem anterior será cancelada e o painel de visualização será atualizado.

Filas

Uma fila não é equivalente à lista da cesta de seleção e não deve ser tratada como tal. As principais diferenças são:

  • A lista de itens na cesta de seleção é apenas uma representação visual; os itens em uma fila são montados com uma ação específica em mente.
  • É possível representar os itens apenas uma vez na cesta de seleção, mas várias vezes na fila.
  • A ordem dos itens na cesta de seleção representa a ordem de seleção. A ordem dos itens na fila está diretamente relacionadas à funcionalidade.

Por esses motivos, a interação de seleção de deslizamento transversal não deve ser usada para adicionar itens a uma fila. Em vez disso, os itens devem ser adicionados a uma fila por meio de uma ação de arrastar.

Arrastar

Use o gesto de arrastar para mover um ou mais objetos de um local para outro.

Se for necessário mover mais de um objeto, permita que os usuários selecionem vários itens e depois arrastem todos eles de uma só vez.

Tópicos relacionados

Para designers
Diretrizes para interações comuns do usuário
Diretrizes de movimento panorâmico
Design da 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
GestureRecognizer.CrossSliding
Para desenvolvedores (XAML)
Guia de início rápido: entrada por toque
Guia de início rápido: manipulando a entrada do ponteiro
GestureRecognizer.CrossSliding
Para desenvolvedores (aplicativos do Tempo de Execução do Windows em DirectX com C++)
Respondendo à entrada por toque (DirectX e C++)
GestureRecognizer.CrossSliding
Exemplos
Entrada: amostra de gestos e manipulações com o GestureRecognizer
Amostra de rolagem, movimento panorâmico e aplicação de zoom em HTML
Entrada: amostra de gestos instanciáveis (usando MSGesture)
Entrada: amostra de eventos de entrada do usuário XAML
Amostra de rolagem, movimento panorâmico e aplicação de zoom em XAML
Amostra de entrada por toque do DirectX

 

 

Mostrar:
© 2015 Microsoft