Diretrizes de zoom óptico e redimensionamento

Applies to Windows and Windows Phone

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.

Este tópico descreve o zoom e o redimensionamento de elementos do Windows e fornece as diretrizes da experiência do usuário para o uso desses mecanismos de interação em seus aplicativos.

Descrição

O zoom óptico permite que os usuários ampliem o modo de exibição do conteúdo em uma área de conteúdo (isso é executado na área de conteúdo em si), enquanto o redimensionamento permite que alterem o tamanho relativo de um ou mais objetos sem alterar o modo de exibição da área de conteúdo (isso é executado em objetos na área de conteúdo).

As interações de zoom óptico e de redimensionamento são realizadas com os gestos de pinçagem e ampliação (afastar os dedos aumenta o zoom e aproximar os dedos reduz o zoom), mantendo a tecla Ctrl pressionada e girando a roda de rolagem do mouse ou mantendo a tecla Ctrl pressionada (com a tecla Shift caso o teclado numérico esteja disponível) e pressionando a tecla mais (+) ou menos (-).

Os diagramas a seguir demonstram as diferenças entre redimensionamento e zoom óptico.

Zoom óptico: o usuário seleciona uma área e amplia a área inteira.

Juntar os dedos aumenta o zoom e afastar os dedos o diminui

Redimensionar: o usuário seleciona um objeto em uma área e redimensiona esse objeto.

Juntar os dedos reduz um objeto e separá-los o aumenta

Observação  

O zoom óptico não deve ser confundido com o Zoom Semântico. Embora essas interações compartilhem os mesmos gestos, o zoom semântico refere-se à apresentação e navegação de conteúdo organizado em um único modo de exibição (como a estrutura de pastas de um computador, uma biblioteca de documentos ou um álbum de fotografias).

O que fazer e o que não fazer

Use as diretrizes a seguir para aplicativos compatíveis com redimensionamento ou zoom óptico:

  • Se forem definidas restrições ou limites de tamanho máximo e mínimo, use o retorno visual para demonstrar quando o usuário atingiu ou excedeu esses limites.
  • Use pontos de ajuste para influenciar o comportamento de zoom e redimensionamento fornecendo pontos lógicos em que é necessário parar a manipulação e garantir que um subconjunto de conteúdo específico seja exibido no visor. Forneça pontos de ajuste para níveis de zoom comuns ou modos de exibição lógicos para que seja mais fácil para um usuário escolher esses níveis. Por exemplo, aplicativos de fotos podem fornecer um ponto de ajuste a 100% para o redimensionamento ou, no caso de aplicativos de mapas, os pontos de ajuste podem ser úteis para modos de exibição de cidade, estado e país.

    Pontos de ajuste permitem que os usuários sejam imprecisos e ainda atinjam suas metas. Se estiver usando XAML, veja as propriedades dos pontos de ajuste do ScrollViewer. Para JavaScript e HTML, use -ms-content-zoom-snap-points.

    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. Os pontos de ajuste de proximidade ainda permitem que um zoom ou redimensionamento seja finalizado entre pontos de ajuste.
    • Obrigatório - o ponto de ajuste escolhido é aquele que antecede ou sucede imediatamente o último ponto de ajuste cruzado antes que o contato fosse erguido (dependendo da direção e velocidade do gesto). Uma manipulação precisa ser finalizada em um ponto de ajuste obrigatório.
  • Use a física da inércia. Isso inclui:
    • Desaceleração: ocorre quando o usuário para de pinçar ou ampliar. Isso é semelhante a deslizar até parar em uma superfície escorregadia.
    • Salto: um efeito de leve salto ocorre quando uma restrição ou limite de tamanho é passada.
  • Posicione os controles de acordo com as Diretrizes de direcionamento.
  • Forneça alças de dimensionamento para redimensionamento restrito. O redimensionamento isométrico ou proporcional será o padrão se as alças não forem especificadas.
  • Não use o zoom para navegar pela interface do usuário ou expor controles adicionais no seu aplicativo. Em vez disso, use uma região de movimento panorâmico. Para saber mais sobre movimento panorâmico, veja Diretrizes para movimento panorâmico.
  • Não coloque objetos redimensionáveis em uma área de conteúdo redimensionável. Algumas exceções:
    • Aplicativos de desenho em que itens redimensionáveis podem aparecer em uma tela ou quadro redimensionável.
    • Páginas da Web com um objeto incorporado, como um mapa.

    Observação  

    Em todos os casos, a área de conteúdo será redimensionada, a menos que todos os pontos de toque estejam dentro do objeto redimensionável.

Tópicos relacionados

Para designers
Diretrizes para interações comuns do usuário
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
Para desenvolvedores (XAML)
Guia de início rápido: entrada por toque
Guia de início rápido: manipulando a entrada por ponteiro
Para desenvolvedores (aplicativo do Tempo de Execução do Windows em DirectX com C++)
Respondendo à entrada por toque (DirectX e C++)
Exemplos
Entrada: amostra de gestos e manipulações com o GestureRecognizer
Amostra de rolagem, movimento panorâmico e aplicação de zoom em HTML
Entrada: amostra de gestos instanciáveis (usando MSGesture)
Entrada: amostra de eventos de entrada do usuário XAML
Amostra de rolagem, movimento panorâmico e aplicação de zoom em XAML
Amostra de entrada por toque do DirectX

 

 

Mostrar:
© 2014 Microsoft