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

Artigo
04/07/2015

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

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.
Rótulos de categoria ou seção

Esses rótulos movem o usuário para diferentes seções ou categorias de conteúdo.
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