Diretrizes de movimento panorâmico

Applies to Windows and Windows Phone

O deslocamento horizontal ou rolagem da imagem permite aos usuários navegar dentro de um único ponto de vista, para visualizar o conteúdo da exibição que não se encaixa dentro do visor. Exemplos da exibição incluem a estrutura das pastas de um computador, uma biblioteca de documentos, ou um álbum de fotos.

Veja este recurso em ação como parte da nossa série sobre recursos para aplicativos, 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

Indicadores de movimento panorâmico e barras de rolagem

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

  • Exiba indicadores de movimento panorâmico e barras de rolagem para fornecer dicas de localização e tamanho. Oculte-os se o aplicativo fornecer um recurso de navegação personalizado.

    Observação  Diferentemente das barras de rolagem padrão, os indicadores de movimento panorâmico são meramente informativos. Eles não são expostos para dispositivos de entrada e não podem ser manipulados de nenhuma maneira.

Movimento panorâmico de eixo único (estouro de capacidade 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).

    • Movimento panorâmico vertical para uma lista de itens unidimensional.
    • Movimento panorâmico horizontal para uma grade de itens.
  • Não use pontos de ajuste obrigatórios com movimento panorâmico de eixo único se for permitir que o usuário gire e pare entre os pontos de ajuste. Pontos de ajuste obrigatórios garantem que o usuário irá "parar" em um ponto de ajuste. Em vez disso, use pontos de ajuste de proximidade.

Movimento panorâmico de forma livre (estouro de capacidade bidimensional)

  • Use o movimento panorâmico de dois eixos para regiões de conteúdo que vão além dos limites de visor (vertical ou 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 realizará deslocamento em várias direções.
  • O movimento panorâmico de forma livre é adequado para navegação em 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 uma revista, uma coluna de itens ou imagens individuais.

    • Um ponto de ajuste deve ser colocado em cada limite lógico.
    • Cada elemento deve ser dimensionado ou escalonado para caber no modo de exibição.

Pontos lógicos e chaves

  • Use pontos de ajuste de proximidade se houver pontos chave ou casas lógicas no conteúdo em que o usuário provavelmente irá parar. Por exemplo, um cabeçalho de seção.

  • Se forem definidas restrições de tamanho máximo e mínimo ou limites, use o retorno visual para demonstrar quando o usuário atinge ou excede esses limites.

Encadeamento incorporado ou conteúdo aninhado

  • Use o movimento panorâmico de eixo único (tipicamente horizontal) e layouts de colunas para conteúdo baseado em texto e grade. Nesses casos, o conteúdo costuma se ajustar e fluir naturalmente de coluna para coluna e manter a experiência do usuário consistente e detectável nos aplicativos da Windows Store.

  • Não use regiões giráveis incorporadas para exibir texto ou listas de itens. Como os indicadores de movimento panorâmico e as barras de rolagem são exibidos apenas quando o contato de entrada é detectado na região, essa não é uma experiência do usuário intuitiva ou detectável.

  • Não encadeie nem coloque uma região com movimento panorâmico dentro de outra região com movimento panorâmico se ambas girarem na mesma direção, como mostrado no diagrama em . Isso pode fazer com que a área pai seja girada involuntariamente quando um limite para a área filho for atingido. Considere tornar o eixo de movimento panorâmico perpendicular.

    Imagem demonstrando uma área girável incorporada que rola na mesma direção do seu contêiner.

Diretrizes de uso adicional

Deslocamento horizontal com o uso de toque, com gestos de passar o dedo ou deslizar usando um ou mais dedos, é o mesmo que fazer a rolagem com o mouse. A interação do deslocamento horizontal é similar ao ato de girar a roda do mouse ou deslizar a barra de rolagem, ao invés de clicar na barra de rolagem. A menos que seja feita uma distinção em uma API ou que haja qualquer exigência em alguma interface do usuário do Windows específica do dispositivo , vamos nos referir às duas interações simplesmente como movimento panorâmico.

Dependendo do dispositivo de entrada, o usuário faz o deslocamento horizontal dentro da região com o movimento panorâmico usando um dos seguintes:

  • Um mouse, um touchpad ou uma caneta para clicar nas setas de rolagem, arrastar a caixa de rolagem ou clicar na barra de rolagem.
  • O botão de roda do mouse para emular a caixa de rolagem sendo arrastada.
  • Os botões estendidos (XBUTTON1 e XBUTTON2), se tiverem suporte no mouse.
  • As teclas de seta do teclado para emular a caixa de rolagem sendo arrastada ou as teclas de página para emular o clique na barra de rolagem.
  • Toque, touchpad ou caneta passiva para deslizar ou passar o dedo na direção desejada.

Deslizamento envolve mover os dedos lentamente na direção do movimento panorâmico. Esta ação gera movimentos de um-em-um, nos quais o conteúdo é deslocado horizontalmente na mesma velocidade e distância dos dedos. O deslizamento (rapidamente deslizar e levantar os dedos) resulta na aplicação da seguinte função à animação panorâmica:

  • Desaceleração (inércia): levantar os dedos faz com que o movimento panorâmico seja desacelerado. Isso é semelhante a deslizar até parar em uma superfície escorregadia.
  • Absorção: a cinética de movimento panorâmico durante a desaceleração provoca um ligeiro efeito de recuperação se um ponto de ajuste ou um limite da área de conteúdo for atingido.

Tipos de movimento panorâmico

O Windows 8 aceita três tipos de movimento panorâmico:

  • Eixo único: o movimento panorâmico é possível somente em uma direção (horizontal ou vertical).
  • Trilhos: o movimento panorâmico é possível em todas as direções. No entanto, depois que o usuário cruza um limite de distância em uma direção específica, o movimento panorâmico fica limitado ao eixo em questão.
  • Forma livre: o movimento panorâmico é possível em todas as direções.

Interface do usuário do movimento panorâmico

A experiência de interação do movimento panorâmico é exclusiva no dispositivo de entrada, embora ele ainda forneça funcionalidade similar.

Regiões que permitem movimento panorâmico

Os comportamentos da região que permite movimento panorâmico são expostos no aplicativo da Windows Store usando desenvolvedores JavaScript no tempo de design, por meio de CSS (Folhas de Estilos em Cascata) apenas.

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

  • Indicadores de movimento panorâmico para toque.
  • Barras de rolagem para outros dispositivos de entrada, incluindo mouse, touchpad, teclado e caneta.

Observação  Os indicadores de movimento panorâmico só ficam visíveis quando o contato por toque é feito na região que permite tal movimento. Da mesma forma, a barra de rolagem só fica visível quando o cursor do mouse, o cursor da caneta ou o foco do teclado está na região rolável.

Indicadores panorâmicos

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

O diagrama a seguir mostra duas áreas giráveis de diferentes tamanhos e seus indicadores de movimento panorâmico.

Imagem mostrando duas áreas giráveis de diferentes tamanhos e seus indicadores de movimento panorâmico.

Comportamentos de movimento panorâmico
Pontos de ajuste

O movimento panorâmico com o gesto de passar o dedo introduz comportamento inercial na interação quando o contato por toque é retirado. Com inércia, o conteúdo continua a se mover panoramicamente até que algum limite de distância seja atingido sem entrada direta do usuário. Use pontos de alinhamento para modificar esse comportamento inercial.

Pontos de alinhamento especificam paradas lógicas no conteúdo do aplicativo. De forma cognitiva, os pontos de alinhamento atuam como um mecanismo de paginação para o usuário e minimizam o trabalho cansativo de deslizar ou passar o dedo excessivamente em grandes regiões deslocáveis. Com eles, você pode manipular entradas imprecisas do usuário e garantir que um subconjunto específico de conteúdo ou informações importantes sejam exibidas no visor.

Existem dois tipos de pontos de ajuste:

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

Pontos de ajuste de movimento panorâmico são úteis para aplicativos como navegadores da Web e álbuns de fotos que emulam conteúdo paginado ou possuem agrupamentos lógicos de itens que podem ser reagrupados dinamicamente para caber em um visor ou tela.

Os diagramas a seguir mostram como girar até um determinado ponto e liberar faz com que o conteúdo seja girado automaticamente até uma localização lógica.

Imagem mostrando uma área girável.Imagem mostrando uma área girável sendo girada para a esquerda.Imagem mostrando uma área girável que parou de girar em um ponto de ajuste lógico.
Passe o dedo para realizar o movimento panorâmicoRetire o contato por toque.A região que permite movimento panorâmico para no ponto de alinhamento, não onde o contato por toque foi retirado.

 

Trilhos

O conteúdo pode ser mais largo ou mais longo do que a dimensão e a resolução de um dispositivo de exibição. Por isso, o movimento panorâmico bidimensional (horizontal e vertical) é geralmente necessário. Os trilhos melhoram a experiência do usuário nesses casos enfatizando o movimento panorâmico ao longo do eixo de movimento (vertical ou horizontal).

O diagrama a seguir demonstra o conceito de trilhos.

Diagrama de uma tela com trilhos que limitam o movimento panorâmico

Encadeamento incorporado ou conteúdo aninhado

Após o usuário atingir o limite de zoom ou rolagem em um elemento que foi aninhado dentro de outro elemento ampliável ou rolável, é possível especificar se o elemento pai deve continuar a operação de ampliar ou rolar iniciada no respectivo elemento filho. Isso é chamado encadeamento de zoom ou de rolagem.

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

Quando uma região que permite movimento panorâmico é colocada dentro de outra região de mesmo tipo, é importante especificar espaço suficiente entre o contêiner e o conteúdo inserido. Nos diagramas a seguir, uma região que permite movimento panorâmico é colocada dentro de outra região de mesmo tipo, cada uma delas em direções perpendiculares. Há muito espaço para que os usuários girem em cada região.

Imagem demonstrando uma área girável incorporada.

Sem espaço suficiente, como mostrado no diagrama a seguir, a região girável incorporada pode interferir no movimento panorâmico do contêiner e resultar em movimento panorâmico não intencional em uma ou mais das regiões giráveis.

Imagem demonstrando preenchimento insuficiente para uma área girável incorporada.

Essa diretriz também é útil para aplicativos como, por exemplo, álbuns de fotografias e aplicativos de mapeamento que dão suporte ao movimento panorâmico irrestrito em cada imagem ou mapa e que, ao mesmo tempo, dão suporte ao movimento panorâmico de eixo único no álbum (para as imagens anteriores ou seguintes) ou na área de detalhes. Nos aplicativos que fornecem uma área de detalhes ou opções correspondente a uma imagem ou mapa de forma livre do movimento panorâmico, recomendamos que o layout da página comece com a área de detalhes e opções, pois a área de movimento panorâmico irrestrito da imagem ou do mapa pode interferir com o movimento panorâmico na área de detalhes.

Tópicos relacionados

Para designers
Diretrizes para interações comuns do usuário
Respondendo a interações por mouse
Respondendo a interações por teclado
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
Implementando a acessibilidade pelo teclado
Para desenvolvedores (XAML)
Carregue, armazene e mostre grandes conjuntos de dados com eficiência
Atualize os itens GridView e ListView de forma incremental
Melhore o tempo de inicialização de aplicativos com os controles GridView e ListView
Guia de início rápido: entrada por toque
Guia de início rápido: manipulando a entrada do ponteiro
Implementando a acessibilidade pelo teclado
Para desenvolvedores (aplicativo do Tempo de Execução do Windows em DirectX com C++)
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:
© 2014 Microsoft