Diretrizes de zoom semântico

Applies to Windows and Windows Phone

Aplicativo do Windows: exibições ampliadas e reduzidas de um controle de zoom semântico

Aplicativo do Windows: exibições ampliadas e reduzidas de um controle de zoom semântico

Aplicativo do Windows Phone: exibições reduzidas e ampliadas de um controle de zoom semântico

Aplicativo do Windows Phone: exibições reduzidas e ampliadas de um controle de zoom semântico

Descrição

Um controle de zoom semântico permite que o usuário aplique zoom entre duas diferentes exibições do mesmo conjunto de dados. Uma exibição contém uma lista de itens agrupados por uma chave, e a outra exibição contém uma lista de chaves de grupo. Tocar em uma chave de grupo reduzirá a imagem de modo que os itens no grupo fiquem visíveis.

Se o conjunto de dados fosse uma lista de exercícios físicos agrupados pela parte do corpo que cada um beneficiasse, a exibição ampliada seria uma lista de exercícios agrupados por parte do corpo (os itens) e a exibição reduzida seria uma lista das partes do corpo (as chaves de grupo). Com um conjunto de dados grande, conseguir reduzir a imagem e conferir todos as chaves de grupo em uma página auxiliará o usuário a acessar rapidamente um item distante que, de outra forma, precisaria de uma boa quantidade de rolagem para ser atingido.

Exemplos

Uma captura de tela que ilustra o controle de zoom semântico padrão

O que fazer e o que não fazer

  • Use o tamanho correto de alvo de toque para elementos que são usáveis e interativos. Para saber mais, veja Diretrizes de direcionamento.
  • Forneça uma região de Zoom Semântico adequada e intuitiva. Usuários que comumente iniciam o Zoom Semântico dentro da área que cerca os itens exibidos. Torne a região do Zoom Semântico grande o suficiente para abranger essa área. Por exemplo, a Windows Store oferece uma grande quantidade de espaço em branco ao redor da lista de aplicativos onde o usuário pode colocar os dedos e aumentar ou reduzir o zoom.
  • Use a estrutura e a semântica que são intrínsecas à exibição.
    • Use os nomes dos grupos para itens em uma coleção agrupada.
    • Use ordens de classificação (como ordem cronológica para datas e ordem alfabética para uma lista de nomes) para uma coleção desagrupada, porém classificada.
    • Use páginas para representar uma coleção de documentos.
  • Certifique-se de que o layout de itens e a direção do movimento panorâmico não mudem com base no nível de zoom. Layouts e interações de movimento panorâmico devem ser consistentes e previsíveis em todos os níveis de zoom.
  • Limite o número de páginas (ou telas) no modo de zoom reduzido para três. O Zoom Semântico permite a um usuário pular rapidamente para um conteúdo. Inserir movimentos panorâmicos em excesso elimina esse benefício.
  • Não use o Zoom Semântico para alterar o escopo do conteúdo. Por exemplo, um álbum de fotografias não deve nunca alternar para uma exibição de pasta no Gerenciador de Arquivos.
  • Não defina uma borda nos controles filhos do controle do zoom semântico. Se definir bordas no zoom semântico e seus controles filhos, a borda do zoom semântico e a borda do controle filho que estiver na exibição serão visíveis. Ao ampliar ou reduzir, as bordas do controle filho são dimensionadas juntamente com o conteúdo e não ficam com uma boa aparência. Defina uma borda apenas no controle de zoom semântico.

Diretrizes de uso adicional

O zoom óptico altera a escala e ampliação do conteúdo. O zoom semântico alterna a semântica (o significado) do conteúdo apresentado entre itens agrupados por chaves, e uma lista dessas chaves. Considere usar um controle de zoom semântico sempre que desejar exibir uma lista comprida de dados agrupados (por exemplo, exercícios agrupados por partes do corpo ou nomes agrupados por iniciais).

Rolar de nomes que comecem com "A" até nomes que comecem com "Z" pode levar um grande número de gestos com o dedo. Com um controle de zoom semântico, isso pode ser tão rápido quanto dois toques: um para reduzir a lista de iniciais e outro para ampliar o "Z".

O zoom semântico concilia o zoom entre suas duas exibições. Uma exibição é uma exibição de lista ou de grade, contendo os itens ou as chaves de grupo, conforme apropriado.

O zoom semântico usa dois modos distintos de classificação (ou níveis de zoom) para organizar e apresentar o conteúdo: um modo em nível baixo (ou ampliado), que é normalmente usado para exibir itens em uma estrutura plana e completa, e, o outro, é um modo em nível alto (ou reduzido), que exibe itens em grupos e permite que um usuário navegue e procure rapidamente pelo conteúdo.

A interação do zoom semântico é realizada com os gestos de pinça e de ampliar (afastar os dedos ampliará o zoom e aproximar os dedos reduzirá o zoom), ou mantendo a tecla Ctrl pressionada enquanto girar 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 (-).

Assista a este vídeo rápido para ter uma visão geral do zoom semântico.

Exemplos de aplicativos que podem usar o zoom semântico incluem:

  • Um catálogo de endereços que organiza os contatos em ordem alfabética (ou por alguma outra categoria) e apresenta os dados usando letras do alfabeto. O usuário pode ampliar uma letra para ver os contatos associados a ela.
  • Um álbum de fotos que organiza as imagens por metadados (como a data em que uma foto foi tirada). O usuário pode ampliar uma data específica para exibir a coleção de imagens associadas a essa data.
  • Um catálogo de produtos que organiza os itens por categoria.

  • Outros exemplos de layouts de Zoom Semântico:
    AmpliadoReduzido
    Exemplo de layout com zoom reduzidoExemplo de layout com zoom aumentado
    Exemplo de layout com zoom reduzidoExemplo de layout com zoom aumentado
    Exemplo de layout com zoom reduzidoExemplo de layout com zoom aumentado
    Exemplo de layout com zoom reduzidoExemplo de layout com zoom aumentado

     

Navegando com o zoom semântico

Embora navegar no conteúdo seja possível somente com o movimento panorâmico e a rolagem (consulte Diretrizes para movimento panorâmico), uma navegação dinâmica e capacidades organizacionais são possíveis quando combinadas com o zoom semântico.

O movimento panorâmico e a rolagem são úteis para pequenos conjuntos de conteúdos e distâncias curtas. Contudo, a navegação logo se torna incomoda para conjuntos grandes de conteúdos. O zoom semântico reduz significativamente a percepção de grandes distâncias ao navegar por grandes quantidades de conteúdos e fornece um acesso fácil e rápido aos locais no conteúdo.

Observação  

O zoom semântico não deve ser confundido com o zoom óptico (consulte Diretrizes de zoom óptico e redimensionamento). Mesmo compartilhando a mesma interação e o comportamento básico (exibindo mais ou menos detalhes com base em um fator de zoom), o zoom óptico refere-se ao ajuste da ampliação de uma área de conteúdo ou um objeto como uma fotografia.

  • Pulo de rolagem

    Tocar no conteúdo no modo de exibição reduzido aproxima a exibição e faz o movimento panorâmico no ponto tocado, como mostrado nestes três diagramas.

    Captura de tela mostrando a exibição semântica original.
    Zoom reduzido, todo o conteúdo pode ser um alvo tocável.
    Captura de tela mostrando um gesto de tocar em uma seção da exibição semântica original.
    Um toque em uma seção do conteúdo.
    Captura de tela mostrando a nova exibição semântica no alvo do toque.
    Zoom aumentado e movimento panorâmico na área tocada.

     

  • Transições

    Uma animação com dimensionamento e fading cruzado suave é usado para a transição de um nível de zoom semântico para outro. Esse é o comportamento padrão do Windows Touch e não pode ser personalizado.

Considerações e recomendações

Você é responsável por definir os dois níveis semânticos em seus aplicativos.

Leve em conta estas perguntas ao criar o modo reduzido:

  • Como a estrutura e a apresentação das informações mudam com base no nível de zoom?
  • Dicas ou "postes de aviso" são úteis para navegar pelos dados?
  • Que quantidade de conteúdo proporciona um modo de exibição semântico útil ao minimizar o movimento panorâmico e a rolagem?

Essas considerações estão frequentemente em conflito uma com a outra. Você pode desejar um conteúdo rico com muitas informações para que os usuários saibam para onde estarão pulando, mas é necessário equilibrar essas informações pelo comprimento total do nível semântico. Se os usuários precisarem fazer o movimento panorâmico várias vezes no modo de zoom reduzido, você estará perdendo o principal benefício do Zoom Semântico—, a navegação rápida.

Laboratórios práticos do Windows 8

Se você quiser tentar trabalhar com o Zoom Semântico e outros recursos importantes do Windows 8, baixe os laboratórios práticos do Windows 8. Esses laboratórios fornecem uma apresentação modular e passo a passo para a criação de um exemplo de aplicativo da Windows Store na linguagem de programação de sua escolha (JavaScript e HTML ou C# e XAML).

Aparência e interação

A aparência de um controle de zoom semântico dependerá de qual de suas exibições estiver sendo mostrada (cada exibição sendo um controle de exibição de lista ou um controle de exibição de grade). Quando ampliado, o zoom semântico aparecerá como uma lista de itens agrupados em cabeçalhos de chave; quando reduzido, aparecerá como uma lista de chaves.

Tocar em um item com o zoom ampliado selecionará o item ou navegará o usuário a sua página de detalhes. Quando o zoom estiver reduzido, tocar em uma chave de grupo ampliará o zoom com esse grupo em exibição.

  • Applies to Windows

Windows: a interação do zoom semântico é realizada com os gestos de pinça e de ampliar (aproximar os dedos reduzirá o zoom e afastar os dedos ampliará o zoom), ou mantendo a tecla Ctrl pressionada enquanto girar 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 (-).

  • Applies to Windows Phone

Windows Phone: quando ampliado, tocar em um cabeçalho de chave de grupo reduzirá o zoom.

Tópicos relacionados

Para designers
Diretrizes para interações comuns do usuário
Interações por toque
Para desenvolvedores (HTML)
Adicionando controles do Zoom Semântico
Quickstart: adicionando um Zoom Semântico
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
SemanticZoom
Windows.UI.Input
Para desenvolvedores (XAML)
Guia de início rápido: entrada por toque
Guia de início rápido: manipulando a entrada do ponteiro
Windows.UI.Xaml.Input
Para desenvolvedores (aplicativo do Tempo de Execução do Windows em DirectX com C++)
Respondendo à entrada por toque (DirectX e C++)
Amostras (WinJS)
Exemplo de SemanticZoom HTML para controles personalizados
Exemplo de agrupamento ListView HTML e SemanticZoom
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