Diretrizes para panorâmica

A panorâmica ou rolagem permite aos utilizadores navegar dentro de uma única visão, para mostrar o conteúdo da visão que não cabe na área visível da janela. Exemplos de vistas incluem a estrutura de pastas de um computador, uma biblioteca de documentos ou um álbum de fotografias.

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

O que fazer e o que não fazer

Indicadores panorâmicos e barras de deslocação

• Certifique-se de que é possível fazer panorâmica/scroll antes de carregar conteúdo na sua aplicação.

• Mostre indicadores de panorâmica e barras de deslocamento para fornecer indicadores de localização e tamanho. Esconda-os se forneceres uma funcionalidade de navegação personalizada.

  Nota Ao contrário das barras de scroll padrão, os indicadores de panorâmica são puramente informativos. Não estão expostos a dispositivos de entrada e não podem ser manipulados de forma alguma.

   

Panorâmica de eixo único (desbordamento unidimensional)

• Utilize o deslocamento em um eixo para regiões de conteúdo que se estendem além de um limite de visualização (vertical ou horizontal).

  • Panorâmica vertical para uma lista de itens de uma única dimensão.
  • Deslocamento horizontal para uma grade de itens.

• Não utilize pontos de encaixe obrigatórios com panorâmica de eixo único se o utilizador precisar de conseguir fazer a panorâmica e parar entre os pontos de encaixe. Os pontos de encaixe obrigatórios garantem que o utilizador irá parar num ponto de encaixe. Use antes pontos de encaixe de proximidade.

Panorâmica livre (transbordo bidimensional)

• Use o movimento panorâmico de dois eixos para regiões de conteúdo que se estendem além dos limites da janela de visualização (vertical e horizontal).

  • Substitua o comportamento padrão dos trilhos e use o deslocamento livre para conteúdo não estruturado, onde o utilizador provavelmente se movimenta em várias direções.

• A panorâmica livre é tipicamente adequada para navegar dentro de imagens ou mapas.

Vista paginada

• Utilize pontos de encaixe obrigatórios quando o conteúdo for composto por elementos distintos ou quando quiser exibir um elemento inteiro. Isto pode incluir páginas de um livro ou revista, uma coluna de itens ou imagens individuais.

  • Deve ser colocado um ponto de ancoragem em cada limite lógico.
  • Cada elemento deve ser dimensionado ou escalado para se adequar à vista.

Pontos lógicos e chave

• Use pontos de encaixe de proximidade caso existam pontos-chave ou locais lógicos no conteúdo onde o utilizador provavelmente irá parar. Por exemplo, um cabeçalho de secção.

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

Encadeamento de conteúdos embutidos ou aninhados

• Use movimento de eixo único (tipicamente horizontal) e layouts de colunas para texto e conteúdo baseado em grelha. Nestes casos, o conteúdo normalmente enrola-se e flui naturalmente de coluna em coluna e mantém a experiência do utilizador consistente e fácil de descobrir em todas as aplicações Windows.

• Não uses regiões panorâmicas embutidas para mostrar texto ou listas de itens. Como os indicadores de panorâmica e as barras de scroll só são apresentados quando o contacto de entrada é detetado na região, não é uma experiência de utilizador intuitiva ou fácil de descobrir.

• Não encadeiem nem coloquem uma região deslizável dentro de outra região deslizável se ambas se deslocarem na mesma direção, como mostrado aqui. Isto pode resultar em que a área principal seja panorada inadvertidamente quando se atinge um limite para a área filha. Considere fazer com que o eixo de panorâmica fique perpendicular.

  

Orientações de utilização adicionais

Mover com toque, utilizando um gesto de deslizar ou arrastar com um ou mais dedos, é semelhante a rolar com o rato. A interação de panorâmica é mais semelhante a rodar a roda do rato ou deslizar a caixa de scroll, em vez de clicar na barra de scroll. A menos que seja feita uma distinção numa API ou exigida por alguma interface específica do Windows do dispositivo, referimo-nos simplesmente a ambas as interações como deslocamento.

Atualização do Windows 10 Fall Creators - Mudança de comportamento Por padrão, a caneta ativa agora desliza/panorama nas aplicações do Windows em substituição à seleção de texto (como acontece com o touch, touchpad e caneta passiva). Se a sua aplicação depender do comportamento anterior, pode sobrescrever o deslocamento da caneta e reverter para o comportamento anterior. Para mais detalhes, consulte o tópico de referência da API para a Classe ScrollViewer.

Dependendo do dispositivo de entrada, o utilizador navega dentro de uma área navegável usando uma destas:

• Um rato, touchpad ou caneta/stylus ativo para clicar nas setas de scroll, arrastar a caixa de scroll ou clicar dentro da barra de scroll.
• O botão de roda do rato para emular a rolagem da barra de rolagem.
• Os botões estendidos (XBUTTON1 e XBUTTON2), se suportados pelo rato.
• As teclas de seta do teclado para emular arrastar a caixa de scroll ou as teclas de página para emular clicar dentro da barra de scroll.
• Toque, touchpad ou caneta/stylus passivo para deslizar ou movimentar os dedos na direção desejada.

Deslizar envolve mover os dedos lentamente na direção da panorâmica. Isto resulta numa relação um-para-um, onde o conteúdo se move à mesma velocidade e distância que os dedos. Deslizar rapidamente e levantar os dedos resulta na aplicação das seguintes leis da física à animação de panorâmica.

• Desaceleração (inércia): Levantar os dedos faz com que a panorâmica comece a desacelerar. Isto é semelhante a deslizar até parar numa superfície escorregadia.
• Absorção: O momento panorâmico durante a desaceleração provoca um ligeiro efeito de ressalto se for atingido um ponto de encaixe ou um limite de área de conteúdo.

Tipos de panorâmica

Windows suporta três tipos de panorâmica:

• Eixo único – a panorâmica é suportada apenas numa direção (horizontal ou vertical).
• Rails - o deslocamento panorâmico é suportado em todas as direções. No entanto, uma vez que o utilizador se desloca além de um limiar de distância numa direção específica, a movimentação fica restrita a esse eixo.
• A panorâmica livre é suportada em todas as direções.

Interface de panorâmica

A experiência de interação para rolar a imagem é única para o dispositivo de entrada, mas ainda assim oferece uma funcionalidade semelhante.

Existem dois modos de visualização panorâmica baseados no dispositivo de entrada detetado:

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

Nota Os indicadores de panorâmica só são visíveis quando o contacto tátil ocorre dentro da região navegável. De forma semelhante, a barra de scroll só é visível quando o cursor do rato, o cursor da caneta/stylus ou o foco do teclado está dentro da região deslizável.

Indicadores de panorâmica Os indicadores de panorâmica são semelhantes à caixa de deslocamento numa barra de deslocamento. Indicam a proporção de conteúdo apresentado em relação à área total paneável e a posição relativa do conteúdo apresentado na área paneável.

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

Comportamentos de deslocamentoPontos de estalo O deslocamento com o gesto de deslizar introduz comportamento de inércia na interação quando o contacto de toque é retirado. Com a inércia, o conteúdo continua a deslocar-se até atingir um certo limiar de distância sem intervenção direta do utilizador. Use pontos de encaixe para modificar este comportamento de inércia.

Os snap points especificam paradas lógicas no conteúdo da sua aplicação. Cognitivamente, os snap points funcionam como mecanismo de paginação para o utilizador e minimizam a fadiga causada por deslizar ou passar o dedo em excesso em grandes regiões paneáveis. Com eles, pode lidar com entradas imprecisas do utilizador e garantir que um subconjunto específico de conteúdo ou informação chave é exibido na viewport.

Existem dois tipos de snap-points:

• Proximidade - Depois de o contacto ser levantado, é selecionado um ponto de encaixe se a inércia parar dentro de um limiar de distância desse ponto. A panorâmica ainda pode parar entre pontos de encaixe de proximidade.
• Obrigatório - O ponto de snap selecionado é aquele que imediatamente precede ou sucede o último ponto de snap cruzado antes do contacto ser levantado (dependendo da direção e velocidade do gesto). A panorâmica deve parar num ponto de encaixe obrigatório.

Os snap-points panorâmicos são úteis para aplicações como navegadores da web e álbuns de fotos que emulam conteúdos paginados ou têm agrupamentos lógicos de itens que podem ser reagrupados dinamicamente para caber num viewport ou num ecrã.

Os diagramas seguintes mostram como, ao mover para um determinado ponto e ao soltar, o conteúdo se desloca automaticamente para uma localização lógica.

Rails O conteúdo pode ser mais largo e mais alto do que as dimensões e a resolução de um dispositivo de ecrã. Por esta razão, a panorâmica bidimensional (horizontal e vertical) é frequentemente necessária. Os guias melhoram a experiência do utilizador nestes casos ao enfatizar o deslocamento ao longo do eixo de movimento (vertical ou horizontal).

Segue o diagrama que demonstra o conceito de trilhos.

Encadeamento de conteúdos embutidos ou aninhados

Depois de um utilizador atingir um limite de zoom ou deslocamento num elemento que foi aninhado dentro de outro elemento de zoom ou deslocável, pode especificar se o elemento pai deve continuar a operação de zoom ou deslocamento iniciada no seu elemento filho. Isto chama-se encadeamento de zoom ou scroll chaining.

O encadeamento é usado para deslocamento dentro de uma área de conteúdo mono-eixo que contém uma ou mais sub-regiões de deslocamento mono-eixo ou livre (quando o contato tátil está dentro de uma dessas sub-regiões). Quando a fronteira de panorâmica da região filha é atingida numa direção específica, a panorâmica é então ativada na região principal na mesma direção.

Quando uma região paneável é aninhada dentro de outra região paneável, é importante especificar um espaço suficiente entre o contêiner e o conteúdo incorporado. Nos diagramas seguintes, uma região deslocável está colocada dentro de outra região deslocável, cada uma movendo-se em direções perpendiculares. Há bastante espaço para os utilizadores navegarem por cada região.

Sem espaço suficiente, como mostrado no diagrama seguinte, a região deslocável embutida pode interferir com o deslocamento do container e resultar num deslocamento não intencional em uma ou mais das regiões deslocáveis.

Esta orientação é também útil para aplicações como álbuns de fotos ou aplicações de mapas que suportam panorâmicas sem restrições dentro de uma imagem ou mapa individual, ao mesmo tempo que suportam panorâmicas de eixo único dentro do álbum (para as imagens anteriores ou seguintes) ou áreas de detalhes. Em aplicações que fornecem uma área de detalhe ou opções correspondente a uma imagem ou mapa com panorâmica livre, recomendamos que o layout da página comece pela área de detalhes e opções, já que a área de panorâmica não restrita da imagem ou mapa pode interferir na panorâmica para a área de detalhes.

Artigos relacionados

• Interações personalizadas com o utilizador
• Otimizar ListView e GridView
• Acessibilidade do teclado

Amostras

• 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

Amostras de arquivo

• 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