Diretrizes e lista de verificação de barras de aplicativos (aplicativos da Windows Store)
Siga estas diretrizes ao trabalhar com barras de aplicativos para aplicativos da Windows Store.
Mapa: Como este tópico está relacionado aos outros? Veja:
- Mapa para os aplicativos da Windows Store usando C# ou Visual Basic
- Mapa para aplicativos da Windows Store em C++
- Interface do usuário de aplicativo da Windows Store, do começo ao fim, realçada em nossa série Recursos do aplicativo, do começo ao fim
Diretrizes de experiência do usuário
As barras de aplicativos dão acesso fácil a comandos quando os usuários precisam deles. O usuário pode passar o dedo na borda inferior da tela para fazer as barras de aplicativos aparecerem e pode 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.
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.
Diretrizes para comandos na barra de aplicativos
Siga estas diretrizes ao colocar seus comandos na barra de aplicativos.
Separe os grupos de comandos distintos em lados opostos da 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.
Mantenha 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.
Defina o modo de descarte da barra de aplicativos como aderência ao exibir comandos contextuais.
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 as pessoas selecionam uma imagem, mas você quer permitir que as pessoas continuem 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.
Use menus e menus suspensos quando tiver muitos comandos.
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.
.png "Menu de barra de aplicativos")
Use agrupamentos lógicos dos comandos, por exemplo, colocando Responder, Responder a Todos e Encaminhar em um menu Responder.
Não crie um menu como "Mais" ou "Avançado" para comandos diversos não relacionados. Esses tipos de comandos genéricos fazem o aplicativo parecer mais complicado, e apenas uma pequena parte dos usuários os explora. Se você precisa de um estouro e não há agrupamentos lógicos disponíveis, pense em simplificar o aplicativo.
Crie a barra de aplicativos para a exibição ajustada e de retrato.
Confira se os comandos da barra de aplicativos são mostrados corretamente nos modos de exibição ajustado e retrato.
Para saber mais, veja Como usar uma barra de aplicativos em diferentes modos de exibição.
Crie um design para rolagem horizontal.
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.
Use os estilos padrão para comandos, menu e menu suspensos.
As pessoas se acostumam ao posicionamento e aos tamanhos dos botões, então, se você quiser personalizar uma barra de aplicativos, nós recomendamos personalizar as cores da tela de fundo, ícones e rótulos, mas não o tamanho ou o preenchimento dos botões. O layout padrão é projetado para dar suporte ao toque e para ajustar dez comandos em todas as larguras de tela compatíveis. A mudança do layout pode resultar em comportamentos indesejáveis.
Para mais informações, veja Guia de início rápido: definindo estilos dos botões da barra de aplicativos.
Use a barra de aplicativos inferior para comandos e a barra de navegação para navegação.
Em geral, use a barra de aplicativos inferior para comandos que atuam na página atual. Use a barra de navegação para elementos de navegação que movem o usuário para outra página.
Não use ícones incorporados para comandos.
Para mais informações, veja Guia de início rápido: definindo estilos dos botões da barra de aplicativos.
Não coloque comandos críticos na barra de aplicativos.
Não coloque comandos fundamentais, que tornam um aplicativo atraente, 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.
Não coloque comandos de texto da área de transferência na barra de aplicativos.
Coloque os comandos Recortar, Copiar e Colar em um menu de contexto na página do aplicativo e não em uma barra de aplicativos.
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.
Manipulando o botão direito do mouse
Para manter seu aplicativo consistente com os outros aplicativos da Windows Store, os usuários clicam 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.
- Se houver áreas da superfície do Microsoft DirectX que não precisam de ações contextuais de clique no botão direito específicas do aplicativo, como menus de bordas, exiba a barra de aplicativos quando o usuário clicar com o botão direito nessas regiões.
- Se o suporte para o botão direito do mouse for necessário em toda a tela, 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, coloque um controle personalizado na superfície do DirectX para permitir que gestos do mouse abram a barra de aplicativos.
- Use os eventos da classe MouseDevice, como MouseMoved, para implementar menus de contexto com comportamentos personalizados.
- Ao usar o toque, um pressionamento prolongado ou o gesto de pressionar e segurar equivale 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, defina a propriedade GestureSettings para permitir esse gesto com a entrada de toque e caneta. Para habilitar o comportamento de manter pressionado com um mouse, defina HoldWithMouse na propriedade GestureSettings.
- Não forneça um comportamento alternativo para a combinação de teclas Windows+Z em seu aplicativo. Desenvolva uma barra de aplicativos ou menu de contexto semelhante e exiba-o quando o usuário pressionar a tecla Windows juntamente com a tecla Z. Registre os eventos KeyDown e AcceleratorKeyActivated para determinar quando essas duas teclas forem pressionadas.
Tópicos relacionados
Guia de início rápido: Adicionando barras de aplicativos
Guia de início rápido: definindo estilos dos botões da barra de aplicativos
Como usar uma barra de aplicativos em diferentes modos de exibição