Aplicativos do Windows
Recolher sumário
Expandir sumário

Diretrizes de deslizamento transversal

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 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

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.

Diretrizes da experiência do usuário em deslizamento transversal

Aqui estão algumas diretrizes a serem consideradas ao incluir a funcionalidade de deslizamento transversal em aplicativos da Windows Store.

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 captura de tela demonstra como funciona a animação de auto-revelação.

  1. Pressione e mantenha pressionado para iniciar a animação para a interação de auto-revelação. O estado de seleção do item afeta o que é revelado pela animação: uma marca de verificação se desmarcada e sem marca de verificação se selecionada.

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

    Captura de tela mostrando a animação para seleção.
  3. Agora o item está selecionado. Substitua o comportamento de seleção usando o gesto de passar o dedo 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

Conceitual
Diretrizes para interações comuns do usuário
Diretrizes de movimento panorâmico
Design da 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++)

 

 

Mostrar:
© 2017 Microsoft