Padrões de navegação (Aplicativos da Windows Store)

Applies to Windows only

Organize o conteúdo de seu aplicativo da Windows Store para que seus usuários possam navegar de maneira simples e intuitiva. Usar os padrões de navegação corretos ajuda a limitar controles que estão persistentemente na tela. Assim, os usuários podem se concentrar no conteúdo atual.

A navegação em aplicativos da Windows Store se baseia em dois padrões: hierárquico e simples. Um aplicativo pode usar um ou outro, ou uma combinação desses padrões.

Padrão hierárquico

Esse padrão torna os aplicativos da Windows Store rápidos e fluidos. Ele é mais adequado para aplicativos com grandes coleções de conteúdo ou muitas seções de conteúdo distintas para um usuário explorar. A maioria dos aplicativos da Windows Store usa um sistema hierárquico de navegação.

Explore esse recurso mais profundamente como parte da nossa série sobre recursos para aplicativos, do início ao fim:  Navegação hierárquica, do início ao fim (HTML e XAML)

Páginas de hub, seção e detalhes em um aplicativo da Windows Store

As páginas de hub são o ponto de entrada do usuário no aplicativo. Nelas, o conteúdo é mostrado em um modo de exibição avançado com movimento panorâmico, permitindo que os usuários vejam de relance as novidades e o que está disponível.

O Hub consiste em categorias de conteúdo diferentes, cada uma mapeia para as páginas de seção do aplicativo.

 

As páginas de seção são o segundo nível de um aplicativo. Nelas, o conteúdo pode ser exibido na forma que melhor represente o cenário e o conteúdo da seção.

A página de seção consiste em itens individuais, cada um com sua própria página de detalhes. As páginas de seção também podem aproveitar o agrupamento e um layout no estilo panorama.

 

As páginas de detalhes são o terceiro nível de um aplicativo. Nelas, os detalhes de itens individuais são exibidos, e seus formatos podem variar muito dependendo do tipo específico de conteúdo.

A página de detalhes consiste em detalhes ou funcionalidades de itens. As páginas de detalhes podem incluir muitas informações ou apenas um objeto, como uma foto ou vídeo.

 

Padrão simples

Muitos aplicativos da Windows Store usam um padrão simples de navegação. Aplicativos como jogos, navegadores ou aplicativos de criação de documentos usam esse padrão para permitir que o usuário navegue entre páginas, guias ou modos, todos residentes no mesmo nível hierárquico. Ao contrário do padrão hierárquico, em geral não há um botão Voltar persistente ou uma pilha de navegação. Por isso, a navegação entre as páginas normalmente é feita por meio de links diretos dentro do conteúdo, como no primeiro exemplo abaixo, ou por meio da barra de navegação, como no segundo exemplo.

Explore esse recurso mais profundamente como parte da nossa série sobre recursos para aplicativos, do início ao fim:  Navegação simples, do início ao fim (HTML e XAML)

exemplos de navegação simples

 

Esse padrão é melhor quando o cenário principal envolve a troca rápida entre um pequeno número de páginas ou guias, por exemplo, em aplicativos de navegadores da Web, como o Internet Explorer, livros eletrônicos e jogos.

Navegação na tela

 

cabeçalho, botão Voltar, cabeçalhos de seção e blocos como elementos de navegação

 

  1. Cabeçalho e botão Voltar

    O cabeçalho rotula a página atual, sendo útil para fins de orientação O botão Voltar permite que o usuário volte ao ponto anterior com facilidade.

  2. Rótulos de categoria ou seção

    Esses rótulos movem o usuário para diferentes seções ou categorias de conteúdo.

  3. Outros destinos

    Você pode usar blocos, setas, botões, resultados de pesquisa ou outros destinos personalizados como elementos de navegação. Em alguns jogos, você pode encontrar exemplos de elementos de navegação com formas interessantes.

 

Aplicativo Bing Notícias mostrando cabeçalho, rótulo de seção e link para mais detalhes

 

Barra de aplicativos superior

Ao passar o dedo a partir da borda superior ou inferior da tela, o usuário revela as barras de aplicativos. A barra de aplicativos superior também é chamada de barra de navegação. Você pode inserir elementos de navegação na barra de aplicativos superior para que uma área maior da tela fique disponível para destacar o conteúdo do seu aplicativo. Alternativamente, você pode colocar elementos de navegação na tela se os usuários necessitam deles com frequência ao usarem seu aplicativo e se sua presença na tela não afeta negativamente a experiência do aplicativo. Você decide se os elementos de navegação ficam na barra superior ou na tela.

 

acessando a barra de navegação

 

Comumente, rótulos de seção ou categoria ficam na barra de navegação, como no Hulu Plus.

 

barra de navegação do aplicativo hulu plus

 

Muitos aplicativos usam a barra de aplicativos superior para fornecer atalhos. Por exemplo, no aplicativo ESPN, um usuário pode navegar até uma página de jogo, clicando em um placar acima dos rótulos de seção na barra de aplicativos superior.

 

barra de navegação do aplicativo ESPN

 

A barra de aplicativos superior pode também dar aos usuários uma visualização do conteúdo na página de destino. No exemplo de aplicativo de compras a seguir, você pode visualizar as imagens dos produtos na barra de aplicativos antes de entrar em uma página de detalhes do produto.

 

barra de navegação do aplicativo vevo

 

Incentivamos a extensão do seu design usando as barras de aplicativos de maneiras criativas. Em Fresh Paint, a barra de aplicativos superior vai além da sua função de navegação dedicadas e funciona como uma caixa de ferramentas de pintura.

 

barra de navegação do fresh paint

 

Zoom semântico

O zoom semântico permite analisar e navegar por uma exibição de forma rápida e fluida, principalmente quando a exibição é uma longa lista com movimento panorâmico.

 

amostra de aplicativo em exibição ampliada e depois em exibição reduzida

 

Por exemplo, no aplicativo Great British Chefs, a página de hub tem uma seção de destaque, seguida por cinco seções de movimento panorâmico horizontal visualmente sofisticadas. O aplicativo uses zoom semântico para facilitar o salto para cada uma das cinco seções.

 

zoom semântico no aplicativo Great British Chefs

Para saber mais, veja Diretrizes para zoom semântico.

Tópicos relacionados

Para designers
Padrões de comando
Layout
Botão Voltar
Diretrizes para controles de Hub nos aplicativos da Windows Store
Diretrizes para controles de hub nos aplicativos da Loja do Windows Phone
Diretrizes para barras de aplicativos
Tornando acessível a barra de aplicativos
Para desenvolvedores (HTML)
WinJS.UI.Hub object
WinJS.UI.AppBar object
WinJS.UI.NavBar object
WinJS.UI.BackButton object
Amostra de controle Hub em HTML
Exemplo de controle AppBar em HTML
Exemplo de controle NavBar em HTML
Navegação e exemplo de histórico de navegação
O seu primeiro aplicativo – Parte 3: Objetos PageControl e navegação
Adicionando barras de aplicativos
Adicionando barras de navegação
Navegando entre as páginas (HTML)
Para desenvolvedores (XAML)
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
Exemplo de controle Hub XAML
Amostra de controle AppBar em XAML
Exemplo de navegação XAML
O seu primeiro aplicativo – Parte 3: Navegação, layout e exibições
Seu primeiro aplicativo - Adicionar navegação e exibições no aplicativo da C++ Windows Store (tutorial 3 de 4)
Adicionando barras de aplicativos (XAML)
Navegando entre as páginas (XAML)
Para desenvolvedores (aplicativos do Tempo de Execução do Windows em DirectX com C++)
Criando uma barra de aplicativos ou Configuração

 

 

Mostrar:
© 2014 Microsoft