Diretrizes para movimento panorâmico

O movimento panorâmico ou de rolagem permite que os usuários naveguem em uma única visão para mostrar o conteúdo que não se encaixa na janela de visualização. Exemplos de exibições incluem a estrutura de pastas de um computador, uma biblioteca de documentos ou um álbum de fotos.

APIs importantes: Windows.UI.Input, Windows.UI.Xaml.Input

O que fazer e o que não fazer

Indicadores de navegação e barras de rolagem

• Verifique se o movimento panorâmico/rolagem é possível antes de carregar conteúdo em seu aplicativo.

• Exiba indicadores panorâmicos e barras de rolagem para fornecer indicações de localização e tamanho. Oculte-os se você fornecer um recurso de navegação personalizado.

  Nota Ao contrário das barras de rolagem padrão, os indicadores de movimentação são puramente informativos. Eles não são expostos a dispositivos de entrada e não podem ser manipulados de forma alguma.

   

Movimento panorâmico de eixo único (estouro unidimensional)

• Use o movimento panorâmico de eixo único para regiões de conteúdo que vão além do limite de um visor (vertical ou horizontal).

  • Deslocamento panorâmico vertical para uma lista linear de itens.
  • Movimento panorâmico horizontal para uma grade de itens.

• Não use pontos de ajuste obrigatórios com rolagem de um único eixo se um usuário precisar ser capaz de movimentar e interromper entre os pontos de ajuste. Os pontos de encaixe obrigatórios garantem que o usuário pare em um ponto de encaixe. Em vez disso, use pontuação de proximidade.

Movimento panorâmico de forma livre (estouro bidimensional)

• Use o movimento panorâmico de dois eixos para regiões de conteúdo que vão além dos dois limites do visor (vertical e horizontal).

  • Substitua o comportamento de trilhos padrão e use o movimento panorâmico de forma livre para conteúdo não estruturado em que o usuário provavelmente se moverá em várias direções.

• O movimento panorâmico de forma livre é normalmente adequado para navegar por imagens ou mapas.

Exibição paginada

• Use pontos de ajuste obrigatórios quando o conteúdo for composto por elementos discretos ou você quiser exibir um elemento inteiro. Isso pode incluir páginas de um livro ou revista, uma coluna de itens ou imagens individuais.

  • Um ponto de encaixe deve ser colocado em cada limite lógico.
  • Cada elemento deve ser dimensionado ou escalado para se ajustar à visualização.

Pontos lógicos e principais

• Utilize pontos de ajuste de proximidade, se houver pontos-chave ou locais lógicos no conteúdo onde um usuário provavelmente irá parar. Por exemplo, um cabeçalho de seção.

• Se restrições de tamanho máximo e mínimo ou limites forem definidos, use comentários visuais para demonstrar quando o usuário atingir ou exceder esses limites.

Encadeamento de conteúdo inserido ou aninhado

• Use rolagem panorâmica de eixo único (normalmente horizontal) e layouts baseados em colunas para conteúdo baseado em texto e grade. Nesses casos, o conteúdo normalmente encapsula e flui naturalmente de coluna em coluna e mantém a experiência do usuário consistente e detectável em aplicativos do Windows.

• Não use regiões roláveis embutidas para exibir listagens de texto ou de itens. Como os indicadores panorâmicos e as barras de rolagem são exibidos somente quando o contato de entrada é detectado dentro da região, não é uma experiência de usuário intuitiva ou detectável.

• Não encadeie ou coloque uma região deslizável dentro de outra região deslizável se ambas deslizam na mesma direção, conforme mostrado aqui. Isso pode fazer com que a área pai seja deslocada involuntariamente quando um limite para a área filha é atingido. Considere tornar o eixo panorâmico perpendicular.

  

Diretrizes de uso adicionais

O movimento panorâmico com toque, usando um gesto de arrastar ou deslizar com um ou mais dedos, é similar a rolar com o mouse. A interação panorâmica é mais semelhante a girar a roda do mouse ou deslizar a caixa de rolagem, em vez de clicar na barra de rolagem. A menos que uma distinção seja feita em uma API ou exigida por alguma interface do usuário do Windows específica do dispositivo, referimo-nos simplesmente a ambos os tipos de interações como deslizamento.

Atualização de Criadores de Outono do Windows 10 – Alteração de comportamento Por padrão, em vez de selecionar texto, uma caneta ativa agora rola/desloca em aplicativos do Windows (como toque, touchpad e caneta passiva). Se o seu app depender do comportamento anterior, você pode substituir a rolagem com caneta e reverter para o comportamento anterior. Para obter detalhes, consulte o tópico de referência da API para a classe ScrollViewer.

Dependendo do dispositivo de entrada, o usuário navega em uma região passível de rolagem usando um destes:

• Um mouse, touchpad ou caneta/caneta ativa para clicar nas setas de rolagem, arrastar a caixa de rolagem ou clicar dentro da barra de rolagem.
• O botão de roda do mouse para usar e emular o arraste da barra de rolagem.
• Os botões estendidos (XBUTTON1 e XBUTTON2), se houver suporte para o mouse.
• As teclas de seta do teclado para emular arrastando a caixa de rolagem ou as teclas de página para emular clicando na barra de rolagem.
• Toque, use o touchpad ou uma caneta ou estilete passivo para deslizar os dedos na direção desejada.

Deslizar envolve mover os dedos lentamente na direção desejada. Isso resulta em uma relação um-para-um, em que o conteúdo se desloca à mesma velocidade e distância que os dedos. O ato de deslizar os dedos, que envolve deslizar rapidamente e levantar os dedos, resulta na seguinte física sendo aplicada à animação de panorama:

• Desaceleração (inércia): levantar os dedos faz com que o pan comece a desacelerar. Isso é semelhante a deslizar e parar em uma superfície escorregadia.
• Absorção: o movimento panorâmico durante a desaceleração causará um leve efeito de recuperação se um ponto de ajuste ou um limite de área de conteúdo for atingido.

Tipos de panorâmica

O Windows dá suporte a três tipos de panorama:

• Eixo único – o suporte para movimento panorâmico é oferecido apenas em uma direção (horizontal ou vertical).
• Trilhos – o arrasto é suportado em todas as direções. No entanto, uma vez que o usuário cruza um limite de distância em uma direção específica, o movimento panorâmico fica restrito a esse eixo.
• Forma livre – o movimento panorâmico tem suporte em todas as direções.

Interface do usuário de movimento panorâmico

A experiência de interação para a navegação panorâmica é exclusiva do dispositivo de entrada, ao mesmo tempo em que oferece uma funcionalidade similar.

Há dois modos de exibição de panorâmica baseados no dispositivo de entrada detectado:

• Indicadores de deslocamento para toque.
• Barras de rolagem para outros dispositivos de entrada, incluindo mouse, touchpad, teclado e caneta.

Nota Indicadores de movimento panorâmico só ficam visíveis quando o contato por toque está dentro da região pannável. Da mesma forma, a barra de rolagem só fica visível quando o cursor do mouse, o cursor de caneta/estilo ou o foco do teclado está dentro da região rolável.

Indicadores panorâmicos Indicadores panorâmicos são semelhantes à caixa de rolagem de uma barra de rolagem. Eles indicam a proporção do conteúdo exibido em relação à área rolável total e a posição relativa do conteúdo exibido na área rolável.

O diagrama a seguir mostra duas áreas deslocáveis de comprimentos diferentes e seus indicadores de deslocamento.

Comportamentos panorâmicosPontos de ajuste o movimento panorâmico com o gesto de deslizar o dedo introduz um comportamento de inércia na interação quando o contato do toque é levantado. Com a inércia, o conteúdo continua a deslizar até que algum limite de distância seja atingido sem a intervenção direta do usuário. Utilize pontos de encaixe para modificar esse comportamento de inércia.

Os pontos de ajuste especificam paradas lógicas no conteúdo do aplicativo. Cognitivamente, os pontos de ancoragem atuam como um mecanismo de paginação para o usuário e minimizam a fadiga de deslizar ou passar em extensas regiões pannáveis. Com eles, você pode lidar com a entrada imprecisa do usuário e garantir que um subconjunto específico de conteúdo ou informações de chave seja exibido no visor.

Há dois tipos de snap-points:

• Proximidade – Depois que o contato é levantado, um ponto de ajuste é selecionado se a inércia parar dentro de um limite de distância do ponto de ajuste. O movimento panorâmico ainda pode parar entre pontos de ajuste de proximidade.
• Obrigatório - O ponto de encaixe selecionado é aquele que precede ou sucede imediatamente o último ponto de encaixe cruzado antes que o contato seja levantado (dependendo da direção e da velocidade do gesto). O movimento panorâmico deve parar em um ponto de ajuste obrigatório.

Os pontos de ajuste panorâmicos são úteis para aplicativos como navegadores da Web e álbuns de fotos que emulam conteúdo paginado ou têm agrupamentos lógicos de itens que podem ser reagrupados dinamicamente para caber em um visor ou exibição.

Os diagramas a seguir mostram como o movimento panorâmico em determinado ponto e a liberação faz com que o conteúdo seja automaticamente agrupado em um local lógico.

Rails O conteúdo pode ser mais largo e mais alto do que as dimensões e a resolução de uma tela. Por esse motivo, o pan/varrimento bidimensional (horizontal e vertical) geralmente é necessário. Os trilhos melhoram a experiência do usuário nesses casos ao enfatizar o movimento de deslocamento ao longo do eixo de movimento (vertical ou horizontal).

O diagrama a seguir demonstra o conceito de trilhos.

Encadeamento de conteúdo inserido ou aninhado

Depois que um usuário atinge um limite de zoom ou rolagem em um elemento aninhado dentro de outro elemento passível de zoom ou passível de rolagem, você pode especificar se esse elemento pai deve continuar a operação de zoom ou rolagem iniciada em seu elemento filho. Isso é chamado de encadeamento de zoom ou encadeamento de rolagem de tela.

O encadeamento é usado para deslocamento em uma área de conteúdo de eixo único que contém uma ou mais regiões de deslocamento de eixo único ou de forma livre (quando o contato por toque está dentro de uma dessas regiões filhas). Quando o limite panorâmico da região filho é atingido em uma direção específica, o movimento panorâmico é ativado na região pai na mesma direção.

Quando uma região pannável está aninhada dentro de outra região pannável, é importante especificar espaço suficiente entre o contêiner e o conteúdo embutido. Nos diagramas a seguir, uma região deslizável está colocada dentro de outra região deslizável, cada uma se movendo em direções perpendiculares. Há muito espaço para os usuários navegarem em cada região.

Sem espaço suficiente, conforme mostrado no diagrama a seguir, a região rolável inserida pode interferir na rolagem no contêiner e resultar em movimento de rolagem não intencional em uma ou mais regiões roláveis.

Essa orientação também é útil para aplicativos como álbuns de fotos ou aplicativos de mapeamento que suportam o movimento panorâmico irrestrito em uma imagem ou mapa individual, ao mesmo tempo em que suportam o movimento panorâmico de eixo único dentro do álbum (para as imagens anteriores ou próximas) ou na área de detalhes. Em aplicativos que fornecem uma área de detalhes ou opções correspondente a uma imagem ou mapa de movimentação livre, recomendamos que o layout da página comece com a área de detalhes e opções, pois a área de movimentação livre da imagem ou do mapa pode interferir no movimento até a área de detalhes.

Artigos relacionados

• Interações personalizadas do usuário
• Otimizar ListView e GridView
• Acessibilidade do teclado

Amostras

• Exemplo básico de entrada
• Exemplo de entrada de baixa latência
• Exemplo de modo de interação do usuário
• Exemplo de elementos visuais de foco

Amostras de arquivo

• Entrada: exemplo de eventos de entrada do usuário XAML
• Entrada: exemplo de funcionalidades do dispositivo
• Entrada: exemplo de teste de clique por toque
• Amostra de aplicação de rolagem, movimento panorâmico e zoom em XAML
• Entrada: amostra de tinta simplificada
• Entrada: exemplo de manipulações e gestos
• Exemplo de entrada por toque do DirectX