Zoom óptico e redimensionamentoOptical zoom and resizing

Este artigo 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.This article describes Windows zooming and resizing elements and provides user experience guidelines for using these interaction mechanisms in your apps.

APIs importantes: Windows.UI.Input, Input (XAML)Important APIs: Windows.UI.Input, Input (XAML)

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 própria área de conteúdo), 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).Optical zoom lets users magnify their view of the content within a content area (it is performed on the content area itself), whereas resizing enables users to change the relative size of one or more objects without changing the view of the content area (it is performed on the objects within the content area).

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) ou 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 não esteja disponível) e pressionando a tecla mais (+) ou menos (-).Both optical zoom and resizing interactions are performed through the pinch and stretch gestures (moving fingers farther apart zooms in and moving them closer together zooms out), or by holding the Ctrl key down while scrolling the mouse scroll wheel, or by holding the Ctrl key down (with the Shift key, if no numeric keypad is available) and pressing the plus (+) or minus (-) key.

Os diagramas a seguir demonstram as diferenças entre redimensionamento e zoom óptico.The following diagrams demonstrate the differences between resizing and optical zooming.

Zoom óptico: o usuário seleciona uma área e amplia a área inteira.Optical zoom: User selects an area, and then zooms into the entire area.

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.Resize: User selects an object within an area, and resizes that object.

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.Note   Optical zoom shouldn't be confused with Semantic Zoom. 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).Although the same gestures are used for both interactions, semantic zoom refers to the presentation and navigation of content organized within a single view (such as the folder structure of a computer, a library of documents, or a photo album).

 

O que fazer e o que não fazerDos and don'ts

Use as diretrizes a seguir para aplicativos compatíveis com redimensionamento ou zoom óptico:Use the following guidelines for apps that support either resizing or optical zooming:

  • 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.If maximum and minimum size constraints or boundaries are defined, use visual feedback to demonstrate when the user reaches or exceeds those boundaries.

  • Use pontos de ajuste para influenciar o comportamento de zoom e de 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.Use snap points to influence zooming and resizing behavior by providing logical points at which to stop the manipulation and ensure a specific subset of content is displayed in the viewport. 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.Provide snap points for common zoom levels or logical views to make it easier for a user to select those levels. 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.For example, photo apps might provide a resizing snap point at 100% or, in the case of mapping apps, snap points might be useful at city, state, and country views.

    Pontos de ajuste permitem que os usuários sejam imprecisos e ainda atinjam suas metas.Snap points enable users to be imprecise and still achieve their goals. Se estiver usando XAML, veja as propriedades dos pontos de ajuste do ScrollViewer.If you're using XAML, see the snap points properties of ScrollViewer. Para JavaScript e HTML, use -ms-content-zoom-snap-points.For JavaScript and HTML, use -ms-content-zoom-snap-points.

    Existem dois tipos de pontos de ajuste:There are two types of snap-points:

    • 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.Proximity - After the contact is lifted, a snap point is selected if inertia stops within a distance threshold of the snap point. Os pontos de ajuste de proximidade ainda permitem que um zoom ou redimensionamento seja finalizado entre pontos de ajuste.Proximity snap points still allow a zoom or resize to end between snap points.
    • 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).Mandatory - The snap point selected is the one that immediately precedes or succeeds the last snap point crossed before the contact was lifted (depending on the direction and velocity of the gesture). Uma manipulação precisa ser finalizada em um ponto de ajuste obrigatório.A manipulation must end on a mandatory snap point.
  • Use a física da inércia.Use inertia physics. Entre elas estão as seguintes:These include the following:

    • Desaceleração: ocorre quando o usuário para de pinçar ou ampliar.Deceleration: Occurs when the user stops pinching or stretching. Isso é semelhante a deslizar até parar em uma superfície escorregadia.This is similar to sliding to a stop on a slippery surface.
    • Salto: um efeito de leve salto ocorre quando uma restrição ou limite de tamanho é passada.Bounce: A slight bounce-back effect occurs when a size constraint or boundary is passed.
  • Posicione os controles de acordo com as Diretrizes de direcionamento.Space controls according to the Guidelines for targeting.

  • Forneça alças de dimensionamento para redimensionamento restrito.Provide scaling handles for constrained resizing. O redimensionamento isométrico ou proporcional será o padrão se as alças não forem especificadas.Isometric, or proportional, resizing is the default if the handles are not specified.

  • 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.Don't use zooming to navigate the UI or expose additional controls within your app, use a panning region instead. Para saber mais sobre movimento panorâmico, veja Diretrizes de movimento panorâmico.For more info on panning, see Guidelines for panning.

  • Não coloque objetos redimensionáveis em uma área de conteúdo redimensionável.Don't put resizable objects within a resizable content area. Algumas exceções:Exceptions to this include:

    • Aplicativos de desenho em que itens redimensionáveis podem aparecer em uma tela ou quadro redimensionável.Drawing applications where resizable items can appear on a resizable canvas or art board.
    • Páginas da Web com um objeto incorporado, como um mapa.Webpages with an embedded object such as a map.

    Observação    Em todos os casos, a área de conteúdo é redimensionada, a menos que todos os pontos de toque estejam dentro do objeto redimensionável.Note   In all cases, the content area is resized unless all touch points are within the resizable object.

ExemplosSamples

Exemplos de arquivo-mortoArchive samples