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

[ 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. 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.
• Configurações para fornecer privacidade, ajuda e outras informações do aplicativo.
• Roaming de dados para sincronizar seu aplicativo nas sessões e nos dispositivos.
• 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.

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.

 

O controle Hub da Biblioteca do Windows para JavaScript foi projetado 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 do	Descriçã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.

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.

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

Abra o Exemplo de navegação hierárquica ou comece com o modelo de projeto Aplicativo de Hub no Visual Studio. Se desejar, examine essas visões gerais de modelos: Modelos de projeto JavaScript para aplicativos do Tempo de Execução do Windows: resume os detalhes de implementação sobre o modelo de navegação, o modelo de dados, a manipulação do estado da exibição e assim por diante. Modelos de item JavaScript para aplicativos da Windows Store: inclui código comumente usado que pode reduzir o tempo de desenvolvimento.

Usar 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.

 

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.

 

	Escolher imagens para representar 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.
	Adicionar recursos de arquivo ou imagem Siga estas instruções para nomear e organizar seus recursos de arquivo em pastas.
	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.
	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 HTML.
	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 aplicativos

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

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

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

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.

Você concluiu as tarefas de desenvolvimento e está pronto para enviar seu aplicativo para a Loja. Destine seu aplicativo ao público correto antes de submetê-lo. Faça a descrição de seu aplicativo a mais detalhada possível para que represente claramente o que seu aplicativo faz. 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.

 

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

• Exemplo de controle AppBar em HTML
• Navegação e exemplo de histórico de navegação
• Amostra de blocos e notificações do aplicativo
• Amostra da tela inicial
• Amostra de configurações do aplicativo
• Recursos de aplicativos e amostra de localização