Aplicativos do Windows
Recolher sumário
Expandir sumário

Diretrizes de zoom óptico e redimensionamento

Este tópico descreve a nova IU do Windows para zoom e redimensionamento de elementos. Também apresenta diretrizes para a experiência do usuário para o uso desses novos mecanismos de interação em seus aplicativos da Windows Store.

Veja este recurso em ação como parte da nossa série sobre recursos para aplicativos, do início ao fim:  Interação do usuário: entrada por toque e muito mais

Visão geral de zoom óptico e redimensionamento

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 na área de conteúdo (isso é executado em objetos na área de conteúdo).

Observação  

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

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

Diretrizes de experiência do usuário para zoom óptico e redimensionamento

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.

    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.
  • A física da inércia deve ser empregada. 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.
  • 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.

Utilize as seguintes diretrizes para aplicativos compatíveis com redimensionamento.

  • 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.
  • Na maioria dos casos, você não deve colocar 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

Conceitual
Diretrizes para interações comuns do usuário
Design da interação por toque
Tutorial (aplicativos da Windows Store usando JavaScript)
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
Tutorial (aplicativos da Windows Store usando C#/VB/C++ e XAML)
Guia de início rápido: entrada por toque
Guia de início rápido: ponteiros
Tutorial (aplicativos da Windows Store em C++ e DirectX)
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:
© 2017 Microsoft