Idioma: HTML | XAML

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

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çã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. No entanto, se o seu aplicativo não tiver muita densidade de informação ou hierarquia organizacional, dê uma olhada em Navegação simples, do início ao fim, destinada a permitir que os usuários naveguem rapidamente entre um pequeno conjunto de páginas relacionadas.

Aqui, abordamos como criar um aplicativo da Windows Store em JavaScript que usa o padrão de navegação hierárquica e atende a todos os requisitos de certificação básicos da Windows Store, do início ao fim. Isso inclui:

  • Recursos de imagem para exibir seu aplicativo em 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 em todo o mundo.
  • Acessibilidade para ajudar os usuários a realizarem as tarefas, independentemente das características físicas e do dispositivo de entrada.

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

Veja aqui uma estrutura hierárquica básica ao lado de uma estrutura delineada 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

 

A biblioteca do Windows para controle de JavaScript Hub foi projetada especificamente para esse tipo de aplicativo. Do geral para o específico, esse controle usa páginas de hub, seção e item/detalhe para ajudá-lo a unir uma variedade de informações em uma estrutura consistente e intuitiva.

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  Verifique se os usuários podem navegar na ordem inversa na qual navegaram até a página atual. Para isso, o WinJS oferece o BackButton, junto com o PageControl.

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

Pré-requisitos

Se você for iniciante no desenvolvimento de aplicativos da Windows Store em JavaScript, 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. Este exemplo de aplicativo da Windows Store demonstra os princípios, as recomendações e os detalhes de implementação discutidos aqui em um aplicativo que cumpre todos os requisitos de certificação básicos da Windows Store.

Veja como colocar em prática nossas diretrizes. Depois você pode poupar tempo e usar este exemplo como base para sua inspiração!

Aqui está uma breve descrição do exemplo

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

Veja aqui capturas de tela do exemplo de aplicativo que mostram a funcionalidade básica do exemplo. Ele inclui uma página de hub com várias seções, uma página orientada a dados (Seção 3) e páginas de detalhes do item para essa seção. Amplie o aplicativo com páginas adicionais, conforme necessário.

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

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 a conformidade com a loja. Cada tarefa é vinculada a tópico correspondente com mais detalhes. Onde apropriado, também identificamos código relevante no exemplo complementar.

Recomendamos que revise cada etapa se você for iniciante no desenvolvimento de aplicativos do Windows Store ou se não estiver familiarizado com os diversos 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 de conexão desses clientes ao máximo de aplicativos possível. 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:

  • 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
  • Declaração de privacidade na página de descrição e no botão de configurações do Windows
  • Otimizado para globalização, localização e acessibilidade

Veja aqui algumas dicas gerais para ajudar a guiá-lo e colocar seu aplicativo pequeno (ou não tão pequeno) 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 aqui para criar seu próprio aplicativo de navegação simples. Você pode começar com o modelo de acompanhamento Padrão de navegação simples 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 hierárquica 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 tem uma chamada "Encontre no exemplo" para ajudá-lo a encontrar o código rapidamente.

Alguns desses detalhes podem não se aplicar ao seu aplicativo. 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 elas:

ícone de etapa

Padrões de navegação

Escolha o melhor padrão de navegação para seu aplicativo e 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 confirmar que o padrão de navegação hierárquica é a estrutura mais adequada para seu aplicativo, continue a seguir estas etapas ou pule isso e use o exemplo como um modelo no design e desenvolvimento de seu próprio aplicativo.

ícone de etapa

Inspiração

Seja inspirado pelos exemplos de navegação nestes estudos de caso e manual de ideias.

 

Implementação da navegação

ícone de etapa

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

ícone de etapa

Usando a navegação de página única

Entra em detalhes sobre como o objeto PageControl oferece suporte à navegação de página única. Adicionando controles de página explica as várias maneiras nas quais eles podem ser implementados.

Encontre no exemplo: O PageControl é definido no arquivo \js\navigator.js e usado no \pages\home\home.js e no \pages\page2\page2.js.

 

Recursos de imagem

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

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 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 notificações 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

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

Siga estas instruções para nomear e organizar seus recursos de arquivo em pastas.

 

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

Adicionando barras de aplicativos

Forneça navegação, comandos e 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. Consulte Exemplo de controle AppBar em HTML.

 

Dados de aplicativos em roaming

ícone de etapa

Acessando 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

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

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.

 

Configurações

Dependendo dos recursos e das declarações no manifesto do aplicativo, seu aplicativo pode precisar fornecer uma declaração de privacidade no 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 exibida 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 na globalização e envie capturas de tela que demonstrem o aplicativo traduzido. Tenha em mente que idiomas não são a mesma coisa que mercados. Veja Globalizando seu aplicativo para obter mais ajuda.

í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 para exibição, a descrição e outras características de identificação do seu aplicativo descritas no manifesto do aplicativo.

ícone de etapa

Globalizando seu aplicativo

Adapte 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 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

Pronto! Seu aplicativo deve ser compacto, sem desorganização e fácil de navegar.

Agora, relaxe e aproveite seu sucesso.

 

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:
© 2014 Microsoft