Informações
O tópico solicitado está sendo mostrado abaixo. No entanto, este tópico não está incluído nesta biblioteca.

Diretrizes de barras do aplicativo

Applies to Windows and Windows Phone

Uma amostra da aparência de um controle de barra de navegação padrão

Uma amostra da aparência de um controle de barra de aplicativos padrão

Descrição

As barras de aplicativos dão acesso fácil a comandos quando os usuários precisam deles. Os usuários podem passar o dedo na ponta superior ou inferior da tela para fazer as barras de aplicativos aparecerem e podem interagir com seu conteúdo para fazer as barras de aplicativos desaparecerem. As barras de aplicativos também podem ser usadas para mostrar comandos ou opções específicos do contexto do usuário, como o modo de desenho ou seleção de fotos. Elas podem ser usadas também para navegação entre páginas ou seções do aplicativo.

Explore a funcionalidade de navegação mais profundamente como parte de nossa série Recursos para aplicativos, do início ao fim:  Navegação simples, do início ao fim (HTML e XAML) e Navegação hierárquica, do início ao fim (HTML e XAML)

Se existem comandos necessários para que um usuário conclua um fluxo de trabalho (como a compra de um produto), coloque-os na tela e não nas barras de aplicativos.

Barra de aplicativos superior

A barra de navegação, ou barra de aplicativos superior, é o local recomendado para colocar os controles de navegação que permitem que o usuário acesse outras áreas do aplicativo. Ao usar a barra de aplicativos superior para a navegação, você fornece uma experiência do usuário consistente e previsível para navegar em aplicativos da Windows Store. A consistência dá aos usuários confiança para se movimentar pelo sistema e os ajuda a transferir seu conhecimento de navegação de um aplicativo para outro.

Os usuários devem ser capazes de concluir os principais cenários somente usando a tela. A barra de navegação é um local secundário para os controles de navegação. A barra de navegação pode ajudar a orientar o usuário em todas as partes de um aplicativo, fornecer acesso rápido à home page ou incentivar os usuários a explorar saltando para partes diferentes do aplicativo.

Você também pode optar por incluir outras funcionalidades na barra de aplicativos superior, como adicionar um botão '+' para criar algo novo ou integrar uma caixa de pesquisa. Ao adicionar outras funcionalidades, recomendamos que elas sejam colocadas à direita a barra de aplicativos.

Embora você pode estilizar os itens na barra de navegação, sua aparência padrão é um simples botão. No entanto, outro tratamento visual típico é o uso do botão e da miniatura, conforme mostrado na imagem anterior.

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

Barra de aplicativos inferior

A barra de aplicativos inferior é o local recomendado para colocar os comandos. Ao mover os comandos da tela do aplicativo para a barra de aplicativos, você oferece ao usuário a experiência mais imersiva possível.

O controle de barra de aplicativos padrão destina-se a desenvolvedores interessados e implementar uma barra de aplicativos com pouco ou nenhum trabalho de personalização. Embora seja fácil criar uma barra de aplicativos, não é fácil garantir que ela se comporte de acordo com as orientações e os padrões do Windows. A CommandBar class e o WinJS.UI.AppBar object foram criados para se alinhar com o design e os comportamentos pretendidos, de forma que o desenvolvedor não precise pensar em cada detalhe, e para provavelmente não divergir do padrão comum de comandos.

Para ir além da experiência padrão e personalizar suas barras de aplicativos, use o controle AppBar em vez do controle CommandBar no XAML.

Você pode usar os ícones incorporados para comandos ou pode criar os seus próprios. Para obter a lista de ícones disponíveis, consulte:

Exemplos

Barra de aplicativos superior

Uma captura de tela que ilustra o controle de barra de navegação padrão

 

Barra de aplicativos inferior

Uma captura de tela ilustrando o controle de barra de aplicativos padrão

O que fazer e o que não fazer

  • Separar navegação e comandos. De modo ideal, coloque os comandos na barra inferior e a navegação na barra superior do aplicativo. Considere a possibilidade de exibir a ajuda na primeira vez que o aplicativo for executado para que os usuários conheçam os comandos importantes na barra de aplicativos.

  • Se você tiver conjuntos diferentes de comandos (como um conjunto para criar novo conteúdo e outro para filtrar a exibição), coloque um do lado direito e outro do lado esquerdo da barra de aplicativos. Se você tiver mais de dois conjuntos, divida-os com um separador.

  • Coloque os comandos em um local consistente em todo o aplicativo. Embora cada página deva conter apenas os comandos relevantes para a página em questão, se alguns comandos forem compartilhados entre elas, eles deverão ficar o mais próximo possível do mesmo local, para que os usuários possam presumir onde os comandos estarão.

  • Siga as convenções de posicionamento:

    • Coloque o botão Novo/Adicionar/Criar (ícone +) na extrema direita.
    • Agrupe os botões de alternância de modo de exibição e coloque-os na extrema esquerda.
    • Coloque os comandos Aceitar, Sim, OK à esquerda de Rejeitar, Não, Cancelar.
  • Mostre os comandos de forma contextual em uma barra de aplicativos quando um item for selecionado e mostre a barra de aplicativos automaticamente. A maioria das pessoas é destra, então quando as pessoas selecionam um item na página de aplicativos, mostre todos os comandos relevantes para esse item no lado esquerdo da barra de aplicativos. Dessa forma, seus braços ou mãos não irão bloquear a visualização dos comandos.

  • Se você tiver comandos contextuais em uma barra de aplicativos, defina o modo como fixo enquanto esse contexto existir, para que a barra não seja automaticamente ocultada quando o usuário interagir com o aplicativo. Desative o modo fixo quando o contexto não estiver mais presente. Por exemplo, talvez você queira mostrar comandos contextuais para manipulação de fotos quando um usuário seleciona uma imagem, mas você quer permitir que o usuário continue trabalhando com a imagem, podendo girá-la ou cortá-la. Nesse caso, a barra fica visível até que o usuário remova a seleção da imagem ou descarte a barra de aplicativos passando o dedo na borda.

  • Se não for possível ajustar todos os comandos em uma barra de aplicativos como botões separados, agrupe os comandos semelhantes e coloque-os em menus que possam ser acessados por botões da barra de aplicativos. Use agrupamentos lógicos dos comandos, por exemplo, colocando Responder, Responder a Todos e Encaminhar em um menu Responder.

    Imagem de um menu suspenso e de um menu

  • Crie a barra de aplicativos para a exibição redimensionada e de retrato. Se você tiver dez comandos ou menos, o Windows ocultará automaticamente os rótulos e ajustará o preenchimento para você quando as pessoas redimensionarem seu aplicativo ou girarem para o modo de exibição retrato, então forneça dicas de ferramentas para todos os seus comandos. Se você quiser um modo de exibição mais personalizado, poderá agrupar os comandos em menus ou fornecer uma experiência mais focada que requer menos comandos no modo de exibição redimensionada ou retrato.

    Nos aplicativos em JavaScript, é recomendável colocar comandos globais antes de comandos contextuais no DOM, para obter o melhor layout quando as pessoas redimensionam seu aplicativo. Para saber mais, veja Adicionando uma barra de aplicativos com comandos e Definindo estilos das barras de aplicativos.

    Nos aplicativos C#/C++/VB, o redimensionamento será manipulado por você se você usar o controle CommandBar. Para saber mais, veja Como usar uma barra de aplicativos em diferentes tamanhos.

  • Se o seu aplicativo tiver uma área de rolagem horizontal na parte inferior da página do aplicativo, reduza a altura da área de rolagem quando a barra de aplicativos aparecer no modo fixo. Caso contrário, a barra de aplicativos poderá cobrir a barra de rolagem e as pessoas poderão precisar desviar do trajeto para descartar a barra de aplicativos para manter a rolagem. Você deve tentar manter a borda inferior da barra de rolagem liberada em relação à borda superior da barra de aplicativos.

  • Não coloque comandos críticos na barra de aplicativos. Por exemplo, em um aplicativo de câmera, coloque o comando "Tirar uma foto" na página do aplicativo e não em uma barra de aplicativos. Você pode adicionar um botão na página do aplicativo ou simplesmente deixar que as pessoas toquem na visualização para tirar a foto.

  • Não coloque o logon, logout ou outros comandos de gerenciamento de conta na barra de aplicativos. Todos os comandos de gerenciamento de conta, como logon, logout, configurações da conta ou criar uma conta deve ficar em um menu suspenso de Configurações. Se for fundamental que as pessoas efetuem logon em uma determinada página, forneça o botão de logon na página do aplicativo. Para saber mais, veja Diretrizes para logon.

  • Não coloque configurações do aplicativo na barra de aplicativos. Todos os comandos de configurações do aplicativo, como padrões e preferências, devem ficar em um menu suspenso Configurações. O menu suspenso Configurações também é o melhor lugar para comandos de gerenciamento raramente usados, como aqueles para limpar histórico.

Diretriz de uso adicional

Dimensionamento para tamanhos de janela diferentes

Quando as pessoas redimensionam uma janela com uma barra de aplicativos, o sistema redimensiona os comandos e pode descartar rótulos. Quando os comandos em tamanho reduzido não se ajustam mais em uma única linha na tela, o sistema os quebra em uma segunda linha.

  • Crie pelo menos dois modos de exibição da barra de aplicativos, um em tamanho total e um em tamanho reduzido (com pelo menos 500 px ou 320 px). A maioria das pessoas usa apenas tamanhos de janela comuns, em tela inteira ou 50/50 com outro aplicativo.
  • Agrupe os comandos ao criar modos de exibição menores. Se não é possível agrupar os comandos de maneira significativa, coloque-os em um grupo "outros" usando o ícone de reticências.
Resoluções comuns de janela (em pixels)Número de botões em tamanho reduzido sem rótulos em uma única linhaNúmero de botões em tamanho total com rótulos em uma única linha
13662213
10241610
768127
50085
32053

 

Manipulando o botão direito do mouse

Para manter seu aplicativo consistente com os outros aplicativos da Windows Store, os usuários devem clicar no botão direito do mouse para acionar a barra de aplicativos que você oferece. Se o seu aplicativo precisar usar o botão direito do mouse para outra finalidade, como um tiro secundário em um jogo ou um trackball virtual em um visualizador 3D, o aplicativo poderá ignorar os eventos que chamam a barra de aplicativos. Mesmo assim, você deve levar em consideração a função da barra de aplicativos (ou de um menu de contexto semelhante) no modelo de controle do seu jogo, pois trata-se de uma parte importante da experiência dos aplicativos da Windows Store.

Siga estas diretrizes ao projetar os controles do seu aplicativo:

  • Se o aplicativo precisar usar o botão direito do mouse para uma função importante, use-o para executá-la diretamente. Não ative uma interface de usuário contextual ou a barra de aplicativos se isso não for importante para o fluxo de trabalho.
  • Mostre a barra de aplicativos quando o usuário clicar com o botão direito do mouse em regiões do seu aplicativo que não precisam de ações contextuais no botão direito do mouse, como menus de bordas.
  • Se o suporte para o botão direito do mouse for necessário em todos os lugares, você poderá exibir a barra de aplicativos quando o usuário clicar com o botão direito na primeira ou na última linha horizontal de pixels (ou em ambas).
  • Se nenhuma dessas soluções for suficiente, use os controles de interação do usuário personalizados para abrir a barra de aplicativos com o mouse.
  • Use os eventos da classe MouseDevice, como MouseMoved, para implementar menus de contexto com comportamentos personalizados.
  • Lembre-se de que o gesto de pressionar e manter pressionado é igual a um clique com o botão direito do mouse. Manipule ambos os eventos de maneira semelhante. Para manipular esse evento e definir um comportamento personalizado para ele, registre o evento Holding. Para habilitar o gesto de manter pressionado, configure Hold (para entrada por toque e caneta) e HoldWithMouse na propriedade GestureSettings.
  • Não altere o comportamento da combinação de teclas Win+Z. O seu aplicativo deve exibir a barra de aplicativos ou um menu de contexto. Registre os eventos KeyDown e AcceleratorKeyActivated para determinar quando essas duas teclas forem pressionadas.

Tópicos relacionados

Para designers
Padrões de comando
Padrões de navegação
Tornando acessível a barra de aplicativos
Para desenvolvedores (HTML)
WinJS.UI.AppBar object
WinJS.UI.NavBar object
Exemplo de controle AppBar em HTML
Exemplo de controle NavBar em HTML
Navegação e exemplo de histórico de navegação
O seu primeiro aplicativo - Parte 3: Objetos PageControl e navegação
Adicionando barras de aplicativos
Adicionando barras de navegação
Navegando entre páginas (HTML)
Para desenvolvedores (XAML)
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
Amostra de controle AppBar em XAML
Exemplo de navegação XAML
Seu primeiro aplicativo - Parte 3: navegação, layout e modos de exibição
Seu primeiro aplicativo - Adicionar navegação e exibições no aplicativo da C++ Windows Store (tutorial 3 de 4)
Adicionando barras de aplicativos (XAML)
Navegando entre páginas (XAML)
Para desenvolvedores (Aplicativos do Tempo de Execução do Windows em DirectX com C++)
Criando uma barra de aplicativos ou Configuração

 

 

Mostrar:
© 2014 Microsoft