Estabelecendo o layout da sua interface do usuário (aplicativos da Windows Store usando C#/VB/C++ e XAML)

Saiba mais sobre o layout de aplicativos da Windows Store e até que ponto eles são diferentes dos aplicativos desktop tradicionais. Há diversas superfícies que você pode usar no seu aplicativo da Windows Store, como a janela de aplicativo, menus suspensos, caixas de diálogo e barras de aplicativo. Escolher a superfície certa na hora certa pode fazer a diferença entre um aplicativo fácil ou difícil de usar.

Veja esses recursos em ação como parte da nossa série Recursos do aplicativo, do começo ao fim:  Interface do usuário de aplicativo da Windows Store, do início ao fim

A página de aplicativo, ou tela

A página de aplicativo, às vezes chamada de tela, é a base da sua interface do usuário. A tela contém todo o seu conteúdo e controles. Sempre que possível, você deve considerar integrar seus elementos da interface do usuário nesta superfície de base. Por exemplo, em vez de usar um pop-up para exibir um erro, você pode suavemente mostrar, ocultar ou alternar a mensagem de erro na janela com as animações integradas. Apresentar sua interface do usuário embutida permite que os usuários mergulhem completamente em seu aplicativo e permaneçam em contexto.

Página do aplicativo (ou tela)

Você pode criar quantas páginas de aplicativo quiser para dar suporte aos cenários dos usuários. Veja os artigos sobre planejamento de aplicativos da Windows Store e design de navegação para saber mais sobre como definir layouts de páginas de aplicativo para dar suporte a cenários de usuários.

Redimensionamento

As pessoas podem redimensionar seu aplicativo para poder usar outro aplicativo ou vice-versa. Você pode projetar seu aplicativo de forma que o conteúdo possa fluir dinamicamente para otimizar a experiência do usuário com redimensionamentos.

Tela inteira

Tela inteira

O aplicativo preenche toda a tela.

Redimensionado, aplicativo estreito

Redimensionado, aplicativo largo

Redimensionado

O aplicativo é redimensionado para uma região estreita da tela inteira.

Outros aplicativos preenchem a área da tela restante não ocupada pelo aplicativo no estado redimensionado.

 

Para saber mais, veja Diretrizes de redimensionamento.

Teclado virtual e painel de manuscrito

O teclado virtual e o painel de manuscrito fornecem uma interface do usuário de comandos secundários para entrada de texto. Esse painel é exibido quando um usuário toca em um campo de entrada editável em um aplicativo da Windows Store ou quando clica no ícone de teclado na barra de tarefas da área de trabalho. O painel é ignorado quando o campo de entrada perde foco.

O teclado virtual habilita a entrada e edição de texto para fatores forma que não têm um teclado físico ou outros dispositivos de teclado periféricos. O painel de manuscrito habilita a entrada e edição de texto para fatores forma que utilizam caneta.

De modo semelhante aos estados de exibição mencionados antes, você pode desenvolver seu aplicativo de forma que o conteúdo flua dinamicamente para otimizar a experiência do usuário quando o teclado virtual e o painel de manuscrito são exibidos.

Veja Diretrizes de teclado virtual e painel de manuscrito para saber mais sobre como oferecer suporte a esses modos de entrada de texto.

Barras do aplicativo

Fora da página de aplicativo, a barra de aplicativos é a interface de comando principal para o seu aplicativo. Use a barra de aplicativos para apresentar navegação, comandos e ferramentas aos usuários. A barra de aplicativos é oculta por padrão e aparece quando os usuários passam o dedo na ponta superior ou inferior da tela. Ela cobre o conteúdo do aplicativo e pode ser ocultada pelo usuário pressionando a ponta ou interagindo com o aplicativo.

Barra de aplicativos na borda inferior da tela

Veja Design de comandos, para saber mais sobre como projetar o seu comando, e Diretrizes de barras de aplicativo, para conhecer diretrizes de experiências de usuário

Botões

Os símbolos de eventos são um conjunto de botões específico e consistente para os usuários em cada aplicativo: pesquise, compartilhe, conecte, configure e inicie. Acreditamos que esses são os cenários centrais que cada usuário deseja usar em quase todos os aplicativos.

  • Pesquisa Os usuários podem pesquisar o conteúdo de seu aplicativo ou da Web de qualquer lugar no sistema.
  • Compartilhar Os usuários podem compartilhar conteúdo de seu aplicativo com pessoas ou serviços.
  • Dispositivos Os usuários podem se conectar a dispositivos e enviar conteúdo, transmitir mídia e imprimir.
  • Configurações Os usuários podem configurar o seu aplicativo de acordo com suas preferências e podem acessar a ajuda do usuário.
  • Iniciar Os usuários podem ir diretamente para a tela Inicial.
Aplicativo com botões

Para saber mais, confira estas diretrizes: pesquisa, compartilhamento, configurações do aplicativo e ajuda do aplicativo

Menus contextuais

O menu contextual, às vezes chamado de menu pop-up, mostra ações que os usuários podem executar em elementos de texto ou de interface do usuário em um aplicativo. Você pode usar até cinco comandos em cada menu contextual, como recortar, copiar ou abrir com. Esse limite mantém o menu contextual organizado, fácil de ler e diretamente relevante ao texto ou objeto em que os comandos atuam.

Menus contextuais

Não use menus contextuais como a interface de comandos principal para um aplicativo. É para isso que serve a barra de aplicativos. Para saber mais, veja Diretrizes de menus de contexto.

Caixas de diálogo de mensagem

Caixas de diálogo de mensagem são aquelas que requerem interação explícita com o usuário. Elas escurecem a janela do aplicativo e requerem uma resposta do usuário para continuar. Use caixas de diálogo de mensagem somente quando quiser interromper o usuário e solicitar uma resposta.

Caixa de diálogo de mensagem

No exemplo acima, a janela do aplicativo é escurecida, e o usuário deve pressionar um dos dois botões para rejeitar a caixa de diálogo. Ou seja, a mensagem na caixa de diálogo não pode ser ignorada.

Para saber mais, veja Diretrizes de caixas de diálogo de mensagens.

Menus suspensos

Menus suspensos mostram a interface do usuário temporária e rejeitável relativa às ações do usuário no momento. Por exemplo, você pode usar menus suspensos para solicitar que o usuário confirme uma ação, para mostrar um menu suspenso de um botão na barra de aplicativos ou para mostrar mais detalhes sobre um item. Menus suspensos são diferentes de caixas de diálogo de mensagem porque você deve mostrar um menu suspenso apenas como resposta para quando o usuário pressionar ou clicar, e sempre deve ignorar o menu suspenso quando o usuário pressionar fora dele; você deve mostrar uma caixa de diálogo de mensagem somente quando precisar interromper o usuário e solicitar algum tipo de interação.

menu suspenso

No exemplo acima, o aplicativo permanece ativo, e o usuário pode pressionar o botão ou pressionar fora do menu suspenso para ignorá-lo. Ou seja, a mensagem no menu suspenso pode ser ignorada. Para saber mais, veja Diretrizes de menus suspensos.

Notificações do sistema

Notificações do sistema são mensagens que você mostra aos usuários quando seu aplicativo está em segundo plano. Notificações do sistema são excelentes para atualizar os usuários com informações que eles querem obter em tempo real, mas que não irão causar problemas se não forem lidas. Os usuários pressionam a notificação para alternar para seu aplicativo e aprender mais.

Lembre-se de que algumas pessoas podem achar que notificações do sistema são irritantes e importunas. Portanto, considere com atenção em que situações você quer mostrar uma notificação do sistema para os usuários. Para saber mais, veja Diretrizes de notificações do sistema.

Blocos

Blocos na Tela inicial

Blocos aparecem na tela inicial e substituem os atalhos de aplicativo que apareciam na tela da área de trabalho e no menu Iniciar antigo. As pessoas tocam no bloco do seu aplicativo para iniciar o aplicativo. Para saber mais, veja Diretrizes de blocos.

 

Erros

Os erros em um aplicativo podem ser comunicados ao usuário por meio de três áreas principais. A área direita de um erro é escolhida pelo desenvolvedor de aplicativo com base no conteúdo e nas consequências do erro.

Para mostrar:Use esta superfície:

Um erro não crucial específico a um elemento no aplicativo. Seu aplicativo não pode corrigir o problema, mas os usuários podem.

Interação com o usuário: os usuários podem continuar interagindo com o aplicativo, os componentes do sistema e outros aplicativos sem descartar o erro.

Exemplo: o usuário insere uma cadeia de caracteres inválida em uma caixa de texto e a redigita.

Texto embutido na tela

  • Somente texto
  • Descartado pelo aplicativo
  • Aparece embutido próximo à origem do erro

Um erro não crucial que se aplica ao aplicativo inteiro. Seu aplicativo não pode corrigir o problema, mas os usuários podem.

Interação com o usuário: os usuários podem continuar interagindo com o aplicativo, os componentes do sistema e outros aplicativos sem descartar o erro.

Exemplo: os emails não podem ser sincronizados no momento.

Texto no início da página

  • Somente texto
  • Descartado pelo aplicativo
  • Aparece no início da página

Um erro significativo porém não crucial que se aplica ao aplicativo inteiro; seu aplicativo pode sugerir uma solução.

Interação com o usuário: os usuários podem responder ao prompt ou continuar interagindo com o aplicativo, os componentes do sistema e outros aplicativos sem descartar o erro.

Barra de erro e aviso

  • Texto, dois botões
  • Descartado pelo usuário
  • Aparece próximo ao início da página

Um erro crucial que se aplica ao aplicativo inteiro e evita sua utilização pelo usuário.

Interação com o usuário: os usuários não podem continuar interagindo com o aplicativo, a menos que descartem o erro. Os usuários ainda podem interagir com os componentes do sistema e usar outros aplicativos.

Caixa de diálogo de mensagem

  • Texto, de 1 a 3 botões, título (opcional)
  • Descartado pelo usuário
  • Aparece centralizado no aplicativo

 

Não use menus suspensos, notificações do sistema ou superfícies de interface do usuário personalizadas para exibir erros.

Erros: Texto embutido

No geral, o erro embutido é a primeira opção de superfície. Um erro de texto embutido apresenta mensagens no contexto das ações atuais do usuário ou na página do aplicativo atual em si. Um erro embutido não exige uma ação explícita do usuário para que descarte a mensagem. A mensagem vai embora automaticamente quando não se aplica mais.

Faça istoAlinhar a mensagem com o controle ou elemento ao qual a mensagem está relacionada.
Criar um layout da mensagem com amplo espaço ao redor para aumentar sua força de foco.

 

O exemplo a seguir mostra uma mensagem de erro embutido associada a uma caixa de texto específico.

Mensagem de erro embutida associada a uma caixa de texto específica

 

Não faça istoIncluir ações ou comandos na mensagem.

 

No exemplo a seguir, uma barra de Erro e Aviso seria uma escolha mais acertada.

Ação que seria mais conveniente como uma barra de erros ou de avisos

Erros: Barra de erros ou de avisos

Use uma barra de Erros ou de Avisos para notificar os usuários sobre erros e avisos importantes, e para incentivar o usuário a executar a ação. As mensagens de erro informam aos usuários que um problema ocorreu, explicam as causas e fornecem uma solução para que os usuários possam corrigi-lo. As mensagens de aviso alertam um usuário sobre uma condição que pode causar um problema posteriormente.

Faça istoPosicionar a barra no topo da tela, incentivando o usuário a percebê-la e executar uma ação.
Colorir a barra com uma cor da paleta do aplicativo.
Usar a mesma cor e layout para todas as barras de erros e avisos.

 

Barra de erros

 

Não faça istoExibir barras com cores ou glifos diferentes (como um escudo ou ponto de exclamação) com base na gravidade percebida.
Usar um glifo 'X' para fechar a barra; em vez disso, é necessário usar um botão Fechar identificado.
Usar uma barra de erro e aviso para uma mensagem meramente informativa.

 

A mensagem no exemplo a seguir é meramente informativa e nenhuma ação é necessária. Nesse caso, uma mensagem embutida no topo da tela deveria ser usada.

Uso indevido da barra de erros ou de avisos

Erros: Caixas de diálogo de mensagem

Use uma caixa de diálogo de mensagem somente se for necessária uma mensagem de janela restrita, bloqueando a interação do usuário com o aplicativo.

Faça istoUsar uma caixa de diálogo de mensagem se o usuário precisar executar uma ação antes de continuar usando o aplicativo.

 

O exemplo a seguir é um uso apropriado de uma caixa de diálogo de erro porque os usuários não podem usar o aplicativo a menos que tenham uma conta ativa.

Uso apropriado de uma caixa de diálogo de mensagem de erro

 

Não faça istoUsar uma caixa de diálogo se o usuário puder ignorar a mensagem.

 

No exemplo a seguir, não há nenhuma informação sobre o erro que exigiria que você bloqueasse os usuários até que eles o corrigissem. Uma barra de erro ou aviso teria sido uma escolha mais acertada.

Uso indevido de uma caixa de diálogo de mensagem de erro

Tópicos relacionados

Diretrizes de barras de aplicativo
Diretrizes para configurações de aplicativos
Diretrizes de pesquisa
Diretrizes de compartilhamento de conteúdo
Diretrizes de menus suspensos
Diretrizes de caixas de diálogo de mensagens
Diretrizes de menus de contexto
Diretrizes de configurações de aplicativos
Diretrizes de telas iniciais
Diretrizes de ajuda do aplicativo

 

 

Mostrar:
© 2014 Microsoft. Todos os direitos reservados.