Diretrizes para deslizamento cruzado

APIs importantes

• Deslizamento Cruzado
• CrossSlideThresholds
• Windows.UI.Input

Use o deslizamento cruzado para apoiar a seleção com o gesto de deslizar e as interações de arrastar (mover) com o gesto de deslizamento.

O que fazer e o que não fazer

• Use o cross-slide para listas ou coleções que se deslocam numa única direção.
• Use o deslizamento cruzado para seleção de itens quando a interação de toque for utilizada para outro propósito.
• Não uses o cross-slide para adicionar itens a uma fila.

Orientações adicionais de utilização

Selecionar e arrastar só são possíveis dentro de uma área de conteúdo que possa ser deslocável numa direção (vertical ou horizontal). Para que qualquer uma das interações funcione, uma direção de panorâmica deve estar bloqueada e o gesto deve ser executado na direção perpendicular à direção de panorâmica.

Aqui demonstramos a seleção e arrasto de um objeto usando um deslizamento cruzado. A imagem à esquerda mostra como um item é selecionado se um gesto de deslizamento não ultrapassar um limiar de distância antes do contacto ser levantado e o objeto libertado. A imagem à direita mostra um gesto de deslizar que atravessa um limiar de distância e faz com que o objeto seja arrastado.

As distâncias limiar usadas pela interação cruz-deslizamento são mostradas no diagrama seguinte.

Para preservar a funcionalidade de panorâmica, é necessário ultrapassar um pequeno limiar de 2,7 mm (aproximadamente 10 píxeis na resolução alvo) antes de ser ativada uma interação de seleção ou arrasto. Este pequeno limiar ajuda o sistema a diferenciar o deslizamento cruzado do deslocamento, e também ajuda a assegurar que um gesto de toque seja distinguível tanto do deslizamento cruzado como do deslocamento.

Esta imagem mostra como um utilizador toca num elemento da interface, mas move ligeiramente o dedo para baixo no contacto. Sem limiar, a interação seria interpretada como um deslizamento transversal devido ao movimento vertical inicial. Com o limiar, o movimento é interpretado corretamente como panorâmica horizontal.

Aqui estão algumas orientações a considerar ao incluir funcionalidade de cross-slide na sua aplicação.

Use o cross-slide para listas ou coleções que se deslocam numa única direção. Para mais informações, consulte Adicionar controlos no ListView.

Nota Em casos em que a área de conteúdo pode ser deslocada em duas direções, como em navegadores web ou leitores eletrónicos, a interação temporizada de pressionar e manter deve ser usada para invocar o menu contextual para objetos como imagens e hiperligações.

Seleção

A seleção é a marcação, sem lançamento ou ativação, de um ou mais objetos. Esta ação é análoga a um único clique do rato, ou a uma tecla Shift e um clique do rato, num ou mais objetos.

A seleção do deslizamento cruzado é conseguida tocando num elemento e libertando-o após uma breve interação de arrasto. Este método de seleção dispensa tanto o modo de seleção dedicado como a interação temporizada de pressionar e manter exigida por outras interfaces táteis e não entra em conflito com a interação de toque para ativação.

Para além do limiar de distância, a seleção transversal está limitada a uma área de limiar de 90°, como mostrado no diagrama seguinte. Se o objeto for arrastado para fora desta área, não é selecionado.

A interação de deslizar transversalmente é complementada por uma interação temporizada de pressionar e segurar, também chamada de interação "autoexplicativa". Esta interação suplementar ativa uma animação que indica que ação pode ser realizada sobre o objeto. Para mais informações sobre UI de desambiguação, consulte Diretrizes para feedback visual.

As capturas de ecrã seguintes demonstram como funciona a animação auto-reveladora.

1. Pressione e segure para iniciar a animação da interação de autodescoberta. O estado selecionado do item afeta o que é revelado pela animação: se não estiver selecionado, aparece uma marca de verificação; se estiver selecionado, não aparece nenhuma marca de verificação.

   

2. Selecione o item usando o gesto de deslizar (para cima ou para baixo).

   

3. O item está agora selecionado. Altere o comportamento de seleção usando o gesto de deslizar para mover o item selecionado.

   

Use um único toque para seleção em aplicações onde é a única ação principal. A animação auto-revelante de deslizamento cruzado é exibida para diferenciar esta funcionalidade da interação de toque padrão para ativação e navegação.

Cesto de seleção

O cesto de seleção é uma representação visualmente distinta e dinâmica dos itens que foram selecionados da lista ou coleção principal na aplicação. Esta funcionalidade é útil para acompanhar itens selecionados e deve ser utilizada por aplicações onde:

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

O conteúdo do cesto de seleção persiste em todas as ações e comandos. Por exemplo, se selecionar uma série de fotografias de uma galeria, aplicar uma correção de cor a cada fotografia e partilhar as fotografias de alguma forma, os itens continuam selecionados.

Se não for usado um cesto de seleção numa aplicação, a seleção atual deve ser apagada após uma ação ou comando. Por exemplo, se selecionares uma música de uma lista de reprodução e a avaliares, a seleção deve ser eliminada.

A seleção atual também deve ser apagada quando não for usada nenhuma cesta de seleção e outro item na lista ou coleção for ativado. Por exemplo, se selecionares uma mensagem na caixa de entrada, o painel de pré-visualização é atualizado. Depois, se selecionares uma segunda mensagem na caixa de entrada, a seleção da mensagem anterior é cancelada e o painel de pré-visualização é atualizado.

Queues

Uma fila não é equivalente à lista de cestos de seleção e não deve ser tratada como tal. As principais distinções incluem:

• A lista de itens no cesto de seleção é apenas uma representação visual; Os itens numa fila são reunidos com uma ação específica em mente.
• Os itens só podem ser representados uma vez no cesto de seleção, mas várias vezes numa fila.
• A ordem dos itens no cesto de seleção representa a ordem de seleção. A ordem dos itens numa fila está diretamente relacionada com a funcionalidade.

Por estas razões, a interação de seleção cross-slide não deve ser usada para adicionar itens a uma fila. Em vez disso, os itens devem ser adicionados à fila através de uma ação de arrastar.

Drag

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

Se mais do que um objeto precisarem de ser movidos, deixe os utilizadores selecionar vários itens e depois arrastar todos de uma só vez.

Artigos relacionados

Samples

• Amostra de entrada básica
• Amostra de entrada de baixa latência
• Exemplo de modo de interação do usuário
• Exemplo de visuais do Focus

Arquivar amostras

• Entrada: Exemplo de eventos de entrada de utilizador em XAML
• Entrada: Exemplo de recursos do dispositivo
• Entrada: Amostra de teste de acerto por toque
• Exemplo de rolagem, arrasto e zoom em XAML
• Entrada: Amostra de tinta simplificada
• Entrada: Amostra de manipulações e gestos
• Amostra de entrada tátil DirectX