Diretrizes de barras de navegação (aplicativos da Windows Store)

Siga estas diretrizes ao trabalhar com barras de navegação para aplicativos da Windows Store. Uma barra de navegação é uma barra de aplicativos que aparece na parte superior do aplicativo e contém controles de navegação. A barra de navegação é ótima para alternar entre vários contextos, incluindo guias, documentos e sessões de mensagens ou jogos.

Quando usar uma barra de navegação

Você pode colocar controles de navegação na tela principal do aplicativo ou na barra de navegação, e escolher a superfície certa pode fazer a diferença entre um aplicativo fácil ou difícil de usar. A barra de navegação é ideal quando você deseja fornecer acesso global sob demanda a todas as áreas do seu aplicativo. A tela é melhor quando a navegação é essencial para concluir uma tarefa. Por exemplo, em um aplicativo de navegação de fotos, que gira em torno de encontrar e visualizar arquivos de foto, toda a navegação deve ser feita na tela por meio de ações de toque, movimento panorâmico ou seleção de conteúdo, e a caixa de pesquisa deve ser inserida na tela para permitir que os usuários encontrem arquivos facilmente.

Anatomia da barra de navegação

A barra de navegação aparece quando os usuários passam o dedo a partir da borda superior ou inferior. A animação usada é igual à animação da barra de aplicativos, já que a Barra de Navegação está alojada dentro da barra de aplicativos superior. Embora você pode estilizar os itens na barra de navegação, sua aparência padrão é um simples botão. No entanto, um outro tratamento visual típico é o uso do botão e da miniatura.

Imagem da barra de navegação com botões e miniaturas

Você também pode optar por incluir outras funções na barra de aplicativos superior, como adicionar um botão '+' para criar uma nova guia ou sessão ou integrar uma caixa de pesquisa. Coloque essa funcionalidade extra no lado direito da barra de navegação.

Você também pode dividir a barra de navegação em várias áreas, como o aplicativo Loja costuma fazer. Aqui, você pode ver que a seção superior é para navegação global, enquanto a seção inferior é para categorias de aplicativos.

Imagem da barra de navegação do aplicativo Loja

O que fazer e o que não fazer

O que fazer
  • Mantenha a navegação e os comandos separados. De modo ideal, coloque a navegação na barra de navegação superior e os comandos na barra de aplicativos inferior.
  • Estilize os botões de navegação para otimizá-los de acordo com o conteúdo. Por exemplo: use um botão retangular maior para representar miniaturas.
  • Agrupe comandos e controles da barra de navegação em seções significativamente distintas. Por exemplo, no aplicativo Loja, a seção superior é para navegação global, enquanto a seção inferior é para categorias de aplicativos.
  • Use botões de divisão de navegação para organizar comandos de navegação de primeiro nível e segundo nível.
  • Mudar para o layout vertical em tamanhos menores de janela.
O que não fazer
  • Não esconda a interface do usuário que é crítica para o seu cenário central na barra de navegação. Em vez disso, coloque-a na tela do aplicativo. Por exemplo, se a pesquisa for fundamental para o seu cenário central, coloque uma caixa de pesquisa na tela, e não na barra de navegação ou na barra de aplicativos.
  • Não adicione um botão Voltar na barra de navegação.

 

Tópicos relacionados

Para designers
Comandando o projeto
Design de navegação
Para desenvolvedores (aplicativo da Windows Store que usa JavaScript)
Guia de início rápido: adicionando uma barra de navegação (NavBar)
Tornando acessível a barra de aplicativos
Para desenvolvedores (aplicativo da Windows Store que usa C++, C# ou Visual Basic)
Guia de início rápido: navegando entre as páginas
Para desenvolvedores (Aplicativo da Windows Store em DirectX com C++)
Criando uma barra de aplicativos ou Configuração

 

 

Mostrar:
© 2015 Microsoft