Idioma: HTML | XAML

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

Applies to Windows only

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ções relacionais, passando por uma sequência ou ordem preferida.

O padrão de navegação que você escolher depende dos cenários compatíveis com seu aplicativo. Se seu aplicativo fornece uma variedade de experiências e conteúdo com organização e estrutura, um padrão hierárquico provavelmente será o mais apropriado. 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 de seu aplicativo e está onde você pode visualizar o escopo completo do aplicativo. Ele demonstra uma ou mais seções de conteúdo, cada uma com um pequeno exemplo de itens associados a essa seção. Vários critérios (dependendo do aplicativo e da preferência do usuário) podem ser aplicados para controlar quais seções e itens serão exibidos. Normalmente, cada item exibirá uma visualização, um resumo ou um sumário de seu conteúdo.

Nessa página, os usuários podem navegar para uma seção ou página de detalhes do item.

Recomendamos que você projete seu hub com uma grande variedade visual para envolver os usuários e chamar a atenção deles para diferentes áreas do seu aplicativo.

Seção

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

Geralmente, você exibe mais itens nesta página do que na página do hub. Cada item possui um link para uma página de detalhes.

Item/detalhes

As páginas de detalhes são o terceiro nível de um aplicativo, em que a maioria, mas não todo, do conteúdo ou da funcionalidade é exibido para o item específico selecionado na página do hub ou da seção. Alguns aplicativos, tais como leitores de feed, podem se desvincular dos artigos e sites-fonte se o conteúdo for considerado muito extenso para ser exibido no 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, geralmente usada em aplicativos de navegação simples, também pode ser útil para passar 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 na borda superior ou inferior (clicam com o botão direito do mouse, pressionando a tecla do logotipo do Windows + Z, ou a tecla de menu em um 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.

Pré-requisitos

Se você for iniciante no desenvolvimento de aplicativos da Windows Store em C++, C# ou Visual Basic, consulte esses tópicos para ficar familiarizado com as tecnologias discutidas aqui.

Exemplo de navegação hierárquica

Além dos exemplos e trechos de código incluídos nos tópicos referidos abaixo, desenvolvemos um Exemplo de navegação hierárquica. Esse exemplo de aplicativo da Windows Store demonstra os princípios, as recomendações e os detalhes da implementação discutidos aqui em um aplicativo que atenda aos requisitos básicos de certificação da Windows Store.

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!

A seguir, uma breve descrição do exemplo

No exemplo, fornecemos um shell, ou modelo, compatível com a certificação da Windows Store para você personalizar como necessário. É um ponto inicial para você preencher com seu conteúdo e suas experiências.

Aqui estão capturas de tela do aplicativo de exemplo que mostram a funcionalidade básica do 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.

Aplicativo de exemplo mostrando a página de hub

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

Aplicativo de exemplo mostrando uma página de item

Retorne rapidamente para o aplicativo de exemplo!

Por enquanto, este é um esboço livre das tarefas que ajudam você a criar um aplicativo básico que segue as práticas recomendadas para a criação de aplicativos da Windows Store usando o modelo de navegação hierárquica. Abrangemos detalhes de navegação e a funcionalidade mínima necessária para conformidade com a loja. Todas as tarefas se vinculam a um tópico correspondente com mais detalhes. Onde apropriado, também identificamos código relevante no exemplo complementar.

Recomendamos que você revise cada etapa se for um iniciante no desenvolvimento de aplicativos da Windows Store ou se não estiver familiarizado com os vários aspectos de conformidade com a loja. Você encontrará detalhes relacionados agrupados em conjunto.

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. A Windows Store é comissionada e os aplicativos devem ser certificados com relação à conformidade e conteúdo.

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:

  • Tela inicial e imagens de bloco
  • Suporte integral para toque, mouse e entrada por teclado
  • Suporte para vários tamanhos de janela, orientações de dispositivo e tamanhos de monitor
  • Roaming e estado da sessão
  • Declaração de privacidade na página Descrição e no botão Configurações do Windows
  • Otimizado para globalização, localização e acessibilidade

Aqui estão alguns indicadores gerais para ajudá-lo a se orientar e colocar seu pequeno (ou não tão pequeno) aplicativo no mercado.

ícone de início

Inscrever-se

Crie uma conta da Microsoft e uma conta de desenvolvedor na Windows Store se já não as tiver. Você precisará das duas para colocar seus aplicativos na Windows Store.

Como desenvolvedor de aplicativos, considere os requisitos de certificação de aplicativos do Windows 8 e tente evitar erros comuns de certificação.

ícone de etapa

Criar seu aplicativo

Siga as etapas descritas aqui para criar seu próprio aplicativo de navegação simples. Você pode iniciar com o modelo de acompanhamento do Padrão de navegação hierárquica ou pode criar um projeto Aplicativo de hub  da Windows Store no Microsoft Visual Studio.

ícone de etapa

Coloque seu aplicativo no mercado

Depois que você configurar sua conta e criar o aplicativo, coloque-o na Windows Store.

Destine seu aplicativo ao público correto antes de submetê-lo.

Comece o processo de distribuição.

Use as ferramentas de promoção disponíveis na Windows Store para ajudar os clientes a descobrirem o seu aplicativo.

Use dados de telemetria para analisar o uso de dados e melhorar a qualidade e o desempenho do aplicativo.

 

Agora, vamos tratar dos detalhes de como implementar a interface do usuário e a funcionalidade do padrão de navegação simples em um aplicativo da Windows Store.

O exemplo complementar implementa todos os itens a seguir, mas para manter as coisas fluindo, não podemos examinar o código aqui. Cada etapa possui um balão "Encontre-o no exemplo" para ajudá-lo a encontrar o código com rapidez.

Alguns desses detalhes podem não se aplicar a seu aplicativo. Selecione e escolha os detalhes que se aplicam a você.

Conceitos de navegação

Com as noções básicas de como colocar seu aplicativo no mercado explicadas, é hora de revisar os vários padrões de navegação normalmente usados pelos aplicativos da Windows Store e incluídos como modelos no Microsoft Visual Studio 2013. São eles:

ícone de etapa

Padrões de navegação

Escolha o melhor padrão de navegação para o seu aplicativo e o seu conteúdo.

Usamos o exemplo do Padrão de navegação hierárquica para mostrar os conceitos discutidos aqui, portanto baixe o exemplo complementar e experimente.

Depois de confirmado que o padrão de navegação hierárquica é a estrutura mais adequada para o seu aplicativo, continue a seguir essas etapas, ou vá direto e use o exemplo como um modelo no design e no desenvolvimento de seu próprio aplicativo.

ícone de etapa

Inspiração

Inspire-se pelos exemplos de navegação nesses estudos de caso e livros de ideias.

 

Implementação da navegação

ícone de etapa

O exemplo complementar para este tópico é derivado do modelo do projeto Aplicativo de hub no Visual Studio, de modo que seria útil revisar esses tópicos.

  • Modelos de projeto C#, VB e C++ para aplicativos da Windows Store

    Resume os aplicativos da Windows Store que usam modelos C++, C# ou Visual Basic. Isso inclui detalhes de implementação sobre o modelo de navegação, o modelo de dados e assim por diante.

    Os modelos de navegação destacados aqui carregam páginas XAML em um contexto amplo de aplicativo único, geralmente em resposta às ações do usuário. Isso é geralmente conhecido como navegação de página única.

  • Modelos de item C#, VB e C++ para aplicativos da Windows Store

    Arquivos de aplicativo que contêm código usado com frequência que podem ser adicionados a um modelo de projeto para reduzir o tempo de desenvolvimento.

ícone de etapa

Guia de início rápido: navegando entre as 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).

 

Recursos de imagem

Especifique recursos de imagem (recursos visuais, como tela inicial e imagens de bloco) para o 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 suportam acessibilidade com configurações de contraste variadas e localização em francês (fr-FR) foram incluídas no modelo. A maioria das imagens é fornecida em várias resoluções.

ícone de etapa

Otimizando 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

Escolhendo as imagens do seu aplicativo

Especifique imagens que forneçam a melhor experiência possível. Inclua versões dimensionadas para diferentes resolução de tela.

O seu aplicativo requer um conjunto básico de imagens para ser aprovado na certificação da loja.

  • Logotipo da loja

    Exibido com a listagem de seus aplicativos em resultados da pesquisa e com a descrição dos aplicativos na página da detalhes.

  • Logotipo

    Exibido no bloco quadrado do 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 consiste em uma imagem e uma cor de tela de fundo; as duas podem ser personalizadas. Consulte Adicionando uma tela inicial e Amostra de tela inicial.

ícone de etapa

Guia de início rápido: usando recursos de arquivo ou imagem

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

 

Barras de aplicativos

O aplicativo complementar implementa um único comando em uma barra de aplicativos padrão.

Lembre-se:  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.

ícone de etapa

Guia de início rápido: adicionando 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.

 

Dados de aplicativos em roaming

ícone de etapa

Acessando dados do aplicativo

Gerencie dados do aplicativo, incluindo estado de tempo de execução, preferências do 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

Guia de início rápido: dados de aplicativos em roaming

Mantenha os dados e o estado do seu aplicativo em sincronia com vários dispositivos e reduza as tarefas de configuração e o trabalho repetitivo do usuário nos outros dispositivos. 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.

 

Configurações

Dependendo dos recursos e das declarações no manifesto do aplicativo, o seu aplicativo pode precisar fornecer uma declaração de privacidade por meio do botão Configurações.

O recurso Redes privadas (Cliente e Servidor) é configurado no aplicativo complementar, o que requer que uma declaração de privacidade seja fornecida. Consulte Requisito de certificação 4.1.

O aplicativo complementar inclui uma declaração de privacidade e o conteúdo da ajuda acessíveis a partir do botão Configurações. A declaração de privacidade também deve ser mostrada na página de descrição do seu aplicativo.

ícone de etapa

Adicionando configurações do aplicativo

Fornece acesso a todas as configurações relevantes ao contexto atual do usuário. Personalize, conforme necessário. Consulte Amostra de configurações do aplicativo.

ícone de etapa

Descrição do aplicativo

Torne a descrição de seu aplicativo o mais detalhada possível para que represente claramente o que seu aplicativo faz.

 

Globalização

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

ícone de etapa

Recursos e localização de aplicativos

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

Localizando o manifesto do pacote

Localize o nome de exibição, a descrição e outros recursos de identificação do aplicativo, descritos no manifesto do aplicativo.

ícone de etapa

Globalizando seu aplicativo

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

 

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

Testando a acessibilidade do seu aplicativo

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

ícone de etapa

Declarando seu aplicativo como 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 de armazenamento

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

Pronto! O seu aplicativo deve ser compacto, sem confusão e fácil de navegar.

Agora, relaxe e aproveite seu sucesso.

 

Deseja 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 ou preferências de seus usuários.

Design para diferentes fatores forma

Saiba mais sobre manipular 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:
© 2014 Microsoft