Navegação hierárquica
Idioma: HTML | XAML

Navegação hierárquica, do início ao fim (XAML)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Use o padrão de navegação hierárquica para seu aplicativo da Windows Store quando seu conteúdo puder ser separado em seções ou categorias distintas, embora relacionadas, com diferentes níveis de detalhes. Esse é um padrão comum e familiar que funciona bem com uma arquitetura de informação relacional, percorrida em uma sequência ou ordem preferida.

O padrão de navegação que você escolher dependerá dos cenários que o seu aplicativo suporta. Se o seu aplicativo oferece uma variedade de experiências e conteúdo com organização e estrutura, um padrão hierárquico provavelmente é mais adequado. Entretanto, se seu aplicativo não tiver um pouco de densidade de informações ou hierarquia organizacional, veja o tópico Navegação simples, do início ao fim, destinado a permitir que os usuários naveguem rapidamente entre um pequeno conjunto de páginas relacionadas.

Aqui, descrevemos como você cria um aplicativo da Windows Store em C++, C# ou Visual Basic que utiliza o padrão de navegação hierárquico e atende a todos os requisitos básicos de certificação da Windows Store, do início ao fim. Isso inclui:

  • Recursos de imagem para expor seu aplicativo a todo o sistema operacional.
  • Barras de aplicativos para suporte de navegação e sistema de comandos.
  • Roaming de dados para sincronizar seu aplicativo nas sessões e nos dispositivos.
  • Configurações para fornecer privacidade, ajuda e outras informações do aplicativo.
  • Globalização para alcançar clientes em países e regiões do globo.
  • Acessibilidade para ajudar os usuários a realizarem as tarefas, independentemente das características físicas e do dispositivo de entrada.

As orientações, tarefas e código de exemplo aqui são específicos para desenvolver aplicativo da Windows Store em C++, C# ou Visual Basic. Para aplicativos da Windows Store que usam a versão JavaScript, consulte Navegação hierárquica, do início ao fim.

Aqui está uma estrutura hierárquica básica juntamente com um diagrama do padrão de navegação hierárquica em um aplicativo da Windows Store.

Uma implementação básica do padrão de navegação hierárquica

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

 

O controle Hub é destinado especificamente a esse tipo de aplicativo. Do geral para específico, esse controle utiliza hub, seção e páginas de item/detalhes para ajudar você a reunir uma variedade de informações em uma estrutura intuitiva e consistente.

Página doDescrição

Hub

O hub é a página de entrada do seu aplicativo e onde você pode visualizar o escopo completo do seu aplicativo. Ele mostra uma ou mais seções de conteúdo, cada um com uma pequena amostra de itens associados a essa seção. Vários critérios (dependendo das preferências do usuário ou do aplicativo) podem ser aplicados para controlar quais seções e itens são exibidos. Normalmente, cada item exibirá uma visualização, um resumo ou um trecho de seu conteúdo.

A partir dessa página, os usuários podem navegar até uma página de detalhes de item ou seção.

Recomendamos que você projete seu hub com bastante variedade visual para envolver os usuários e atraí-los para as diferentes áreas do seu aplicativo.

Seção

As páginas de seção são o segundo nível de um aplicativo, no qual uma visualização, um resumo ou um trecho de itens associados à seção é exibido. Os itens dessa página podem ser exibidos de qualquer forma que represente melhor o cenário e o conteúdo da seção.

Normalmente, você exibe mais itens nessa página do que na página de hub. Cada item é vinculado a uma página de detalhes.

Item/detalhes

As páginas de detalhes são o terceiro nível de um aplicativo, no qual a maioria de conteúdo ou funcionalidade, se não todos, é exibida para o item selecionado em particular na página de hub ou seção. Alguns aplicativos, como leitores de feeds, talvez não vinculem para sites e artigos de origem se o conteúdo for considerado muito extenso para ser exibido dentro do aplicativo.

As páginas de detalhes podem conter muitas informações, um único objeto, como uma foto ou um vídeo, ou outra funcionalidade do aplicativo.

 

A barra de navegação, normalmente usada em aplicativos de navegação simples, também pode ser útil para percorrer o conteúdo de um aplicativo hierárquico. Essa barra é um elemento transitório que pode ser revelado na borda superior da tela quando os usuários passam o dedo a partir da borda superior ou inferior (botão direito do mouse, tecla de logotipo do Windows + Z ou tecla de menu do teclado).

Tente criar seu aplicativo de forma que a própria estrutura do conteúdo leve os usuários intuitivamente pelo aplicativo, sem a necessidade da barra de navegação. Nos casos em que isso não é possível, use a barra de navegação em vez dos cabeçalhos das seções na página de hub como meio de fornecer controles de navegação globais. Ela deve ser mostrada em todas as páginas e em todos os níveis do aplicativo.

Observação  Assegure-se de que os usuários possam navegar na ordem inversa da que foi navegada até sua página atual. Para isso, use um botão da barra de aplicativos (como um botão Voltar em um cabeçalho da página) em conjunto com os objetos Frame e Page.
 

Usar o padrão de navegação correto, junto com o layout da interface do usuário apropriado, ajuda você a eliminar a poluição de controles persistentes e permite que os usuários se concentrem no conteúdo importante em seu aplicativo.

Exemplo de navegação hierárquica

O Exemplo de navegação hierárquica básico é um ponto inicial para você preencher com conteúdo e experiências. Ele demonstra os princípios, as recomendações e os detalhes de implementação discutidos aqui em um aplicativo que atende a todos os requisitos de certificação básicos da Windows Store. Conforme você pode ver abaixo, o exemplo inclui uma página de hub com várias seções, uma página de seção baseada em dados (Seção 3) e páginas de detalhes do item para essa seção. Estenda o aplicativo com páginas adicionais, conforme necessário. Veja como colocar em prática nossas diretrizes. Em seguida, você pode economizar tempo e usar esse exemplo como a base para sua inspiração.

Aplicativo de exemplo exibindo a página de hub

Aplicativo de exemplo exibindo uma página de seção

Aplicativo de exemplo exibindo uma página de item

Conformidade com a Windows Store

A Windows Store é o principal meio de distribuição de aplicativos da Windows Store para clientes e para conectar esses clientes com o maior número possível de aplicativos. Os aplicativos da Loja devem estar de acordo com as Políticas da Windows Store e da Loja do Windows Phone.

O exemplo complementar implementa a funcionalidade discutida aqui e os requisitos básicos de todos os aplicativos da Windows Store para serem aprovados na certificação, incluindo:

  • Imagens de blocos e tela inicial
  • Suporte integral para toque, mouse e entrada por teclado
  • Suporte para vários tamanhos de janela, orientações de dispositivo e tamanhos de exibição
  • Estado de sessão e roaming
  • Otimizado para globalização, localização e acessibilidade

Como desenvolvedor de aplicativos, considere as Políticas da Windows Store e da Loja do Windows Phone e tente evitar falhas comuns de certificação.

Implementar navegação

ícone de etapa

Abra o Exemplo de navegação hierárquica ou comece com o modelo de projeto Aplicativo de Hub no Visual Studio. Se quiser, consulte estes tópicos para saber mais sobre modelos:

ícone de etapa

Navegar entre páginas

Veja detalhes sobre como objetos Frame e Page suportam navegação de página única. (A classe Frame exibe e gerencia a navegação entre as páginas).

 

Adicionar interface do usuário e imagens

Especifica recursos de imagem (ativos visuais, como imagens de blocos e tela inicial) para seu aplicativo na guia Interface do usuário do aplicativo do manifesto do aplicativo. Para fazer isso, abra package.appxmanifest a partir do Gerenciador de Soluções. Consulte Usando o Designer de Manifesto.

Observação  O aplicativo complementar inclui imagens de espaço reservado que atendem aos requisitos da Windows Store. Para fins de demonstração, imagens adicionais que oferecem suporte à acessibilidade com configurações de contraste variadas e localização em francês (fr-FR) foram incluídas com o modelo. A maioria das imagens é fornecida em várias resoluções.
 
ícone de etapa

Escolher as imagens do aplicativo

Especifique as imagens que oferecem a melhor experiência possível. Inclua versões dimensionadas para resoluções de tela diferentes.

Seu aplicativo requer um conjunto básico de imagens para obter a certificação da loja.

  • Logotipo da loja

    Exibido com os detalhes do seu aplicativo nos resultados da pesquisa e com a descrição do aplicativo na página de listagem.

  • Logotipo

    Exibido no bloco quadrado para o aplicativo na tela Inicial. Consulte Criando blocos e Amostra de blocos e notificações do aplicativo.

  • Logotipo pequeno

    O logotipo pequeno é mostrado com o nome de exibição do aplicativo nos resultados de pesquisa retornados na tela Inicial. Ele aparece também na lista de aplicativos pesquisáveis e quando a página inicial é reduzida.

  • Tela inicial

    Exibida quando um aplicativo é iniciado e ignorada assim que o aplicativo fica pronto para interação. A tela inicial é composta por uma imagem e uma cor de fundo, ambas as quais podem ser personalizadas. Consulte Adicionando uma tela inicial e Amostra de tela inicial.

ícone de etapa

Otimizar imagens para diferentes resoluções de tela

Crie recursos de imagem para seu aplicativo, adicione-os ao seu projeto e identifique-os no manifesto do aplicativo.

ícone de etapa

Usar recursos de arquivo ou imagem

Siga estas instruções para nomear e organizar seus recursos de arquivo em pastas. Para ver um exemplo mais detalhado, consulte a Amostra de blocos e notificações do aplicativo.

ícone de etapa

Adicionar barras de aplicativos

Apresente a navegação, os comandos e as ferramentas aos usuários sob demanda. A barra de aplicativo mostra comandos importantes ao contexto do usuário, normalmente a página ou seleção atual. Personalize, conforme necessário. Para obter um exemplo mais detalhado, veja Exemplo de controle AppBar em XAML.

ícone de etapa

Adicionar configurações de aplicativo

Forneça acesso a todas as configurações relevantes ao contexto atual do usuário. Personalize, conforme necessário. Consulte Exemplo de configurações do aplicativo. O aplicativo complementar inclui uma política de privacidade e o conteúdo da ajuda acessíveis pelo botão Configurações.

 

Mover dados de aplicativo

ícone de etapa

Gerenciar dados de aplicativo

Gerencie dados de aplicativo, incluindo estado de tempo de execução, preferências de usuário e outras configurações. Esses dados são criados, lidos, atualizados e excluídos durante a execução do aplicativo.

ícone de etapa

Mover dados de aplicativos

Mantenha o estado e os dados do seu aplicativo sincronizados em vários dispositivos e reduza as tarefas de configuração e o trabalho repetitivo para os usuários nos outros dispositivos deles. O Windows replica os dados para a nuvem quando eles são atualizados e sincroniza os dados com os outros dispositivos nos quais o aplicativo está instalado.

 

Globalizar

Seja consistente com a globalização e verifique se suas capturas de tela demonstram que você traduziu o aplicativo. Tenha em mente que idiomas não são a mesma coisa que mercados.

ícone de etapa

Saiba mais sobre localização e recursos do aplicativo

Crie aplicativos da Windows Store de forma que seus recursos possam ser mantidos e localizados de forma independente, e também personalizados para diferentes fatores de escala, opções de acessibilidade e outros contextos do usuário e do computador. Consulte Recursos de aplicativos e amostra de localização.

ícone de etapa

Localizar o manifesto do pacote

Localize o nome para exibição, a descrição e outras características de identificação do seu aplicativo descritas no manifesto do aplicativo.

ícone de etapa

Globalizar o aplicativo

Adapte seu software para idiomas, mercados, culturas e regiões adicionais.

 

Oferecer suporte à acessibilidade

Não declare seu aplicativo como acessível, a menos que ele seja especificamente projetado e testado para cenários de acessibilidade.

ícone de etapa

Testar a acessibilidade do aplicativo

Descubra as ferramentas de teste de acessibilidade, incluídas no Software Development Kit do Windows (SDK) para Windows 8, que o ajudam a verificar a acessibilidade do seu aplicativo.

ícone de etapa

Declarar que seu aplicativo é acessível na Windows Store

Caso tenha testado seu aplicativo para acessibilidade, indique isso marcando a caixa de seleção Acessibilidade na página Detalhes de venda.

 

Concluir o processo

ícone de requisitos da loja

Certifique seu aplicativo com o Kit de Certificação de Aplicativos Windows.

Execute o Kit de Certificação de Aplicativos Windows para ajudar a garantir que o aplicativo atenda aos requisitos da Windows Store. Faça isso sempre que adicionar funcionalidade importante em seu aplicativo.

ícone de parada

Você concluiu as tarefas de desenvolvimento e está pronto para enviar seu aplicativo para a Loja.

 

Quer saber mais?

Planejando aplicativos da Windows Store

Saiba mais sobre o tipo de experiência que você deseja fornecer a seus usuários.

Design para acessibilidade

Saiba mais sobre a ampla variedade de habilidades, deficiências e preferências de seus usuários.

Design para diferentes fatores forma

Saiba mais sobre como lidar com diferentes dispositivos, métodos de entrada e orientações de tela.

Diretrizes de experiência do usuário do índice

Navegue em uma lista completa de diretrizes de experiência do usuário.

Exemplos

 

 

Mostrar:
© 2017 Microsoft