Compartilhar via


Navegação simples, 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 um padrão de navegação simples para seu aplicativo da Windows Store quando ele tiver um pequeno número de páginas e suas informações não estiverem organizadas em uma hierarquia. Em outras palavras, quando as páginas, as guias e os modos forem pares lógicos.

Seu aplicativo deve fazer os usuários se concentrarem na importância do que está no aplicativo, e não de onde e nem do porquê. Se seu aplicativo não tiver muita densidade de informação, muitas páginas ou cenários que precisem de hierarquia e estrutura, considere uma estrutura simples que permita que os usuários naveguem rapidamente entre as páginas. No entanto, se seu aplicativo fornece uma variedade de experiências e conteúdo com organização e estrutura que devem ser percorridos em uma sequência ou ordem preferida, dê uma olhada em Navegação hierárquica, do início ao fim.

Aqui, abordamos como criar um aplicativo da Windows Store em JavaScript que usa o padrão de navegação simples 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 suportar navegação e sistema de comandos
  • Configurações para oferecer privacidade, ajuda e outras informações do aplicativo
  • Roaming de dados para sincronizar seu aplicativo em sessões e 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 simples básica ao lado de uma estrutura delineada do padrão de navegação simples em um aplicativo da Windows Store.

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

Estrutura delineada do aplicativo de exemplo.

 

Como demonstram estas imagens, a estrutura de conteúdo simples definida por esse padrão requer que cada página no aplicativo fique acessível a partir de todas as outras páginas. O usuário pode ir aleatoriamente para frente e para trás pelas páginas, sem nenhuma ramificação.

Use a barra de aplicativos de navegação (mostrada na estrutura delineada acima) para a troca rápida entre páginas em aplicativos de navegação simples. 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).

Veja aqui como nosso aplicativo Calculadora implementa o padrão de navegação simples. Observe como ele usa uma barra de navegação persistente em vez da barra de navegação transitória padrão. Este é um exemplo de como a plataforma de aplicativos da Windows Store pode se adaptar a cenários específicos exclusivos de seus aplicativos.

Exemplo de navegação simples: página da calculadora padrão Exemplo de navegação simples: página da calculadora científica Exemplo de navegação simples: página da calculadora de conversão
Página da calculadora padrão Página da calculadora científica Página da calculadora de conversão

 

Usar o padrão de navegação correto, juntamente com o layout de interface do usuário apropriado (consulte Interface do usuário de aplicativo da Windows Store, do início ao fim), 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 simples

O Exemplo de navegação simples 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. Como você pode ver abaixo, o exemplo contém duas páginas: uma página inicial que apresenta o aplicativo e uma segunda página, na qual você pode dispor seus artigos. 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 1

Aplicativo de exemplo exibindo a página 1 com a barra de aplicativos de navegação

Aplicativo de exemplo exibindo a página 2

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 a navegação simples

ícone de etapa

Abra o Exemplo de navegação simples ou comece com o modelo de projeto Aplicativo de navegação no Visual Studio. Se desejar, examine essas visões gerais de modelos:

ícone de etapa

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

 

ícone de etapa

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.

ícone de etapa

Adicionar recursos de arquivo ou imagem

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

í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

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.

í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