Idioma: HTML | XAML

Navegação simples, do início ao fim (HTML)

Applies to Windows only

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
  • Roaming de dados para sincronizar seu aplicativo em sessões e dispositivos
  • Configurações para oferecer 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, tarefas e código de exemplo aqui são específicos para desenvolver 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 simples, do início ao fim.

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ãoExemplo de navegação simples: página da calculadora científicaExemplo de navegação simples: página da calculadora de conversão
Página da calculadora padrãoPágina da calculadora científicaPá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.

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 simples

Além dos exemplos e trechos de código incluídos nos tópicos referidos abaixo, desenvolvemos um exemplo de navegação simples básico. 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 atende a 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 duas páginas: uma página inicial que apresenta o aplicativo e uma segunda página, na qual você pode dispor seus artigos. Amplie o aplicativo com páginas adicionais, conforme necessário.

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

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 simples. Todas as tarefas se vinculam a um tópico correspondente com mais detalhes. Onde apropriado, também identificamos código relevante no exemplo complementar.

Nós recomendamos que você examine cada etapa se for iniciante no desenvolvimento de aplicativos da Windows Store. 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. 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

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 as Políticas da Windows Store e da Loja do Windows Phone e tente evitar falhas 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 navegação  da Windoes 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 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. São eles:

í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 complementar do Padrão de navegação simples para mostrar os conceitos discutidos aqui, então baixe o exemplo e experimente.

Depois de confirmar que o padrão de navegação simples é 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 projeto Aplicativo de navegação 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 fornece comandos de navegação que são acessíveis na barra de navegação. Outros comandos estão incluídos na barra padrão do aplicativo.

ícone de etapa

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

O aplicativo complementar inclui uma política de privacidade e o conteúdo da ajuda acessíveis a partir do botão Configurações. Se seu aplicativo exigir uma política de privacidade, ela também deverá ser mostrada na página de descrição do seu aplicativo na Windows Store. (Consulte as Políticas da Windows Store e da Loja do Windows Phone para saber mais).

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

í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 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! 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:
© 2015 Microsoft