Definindo o layout de sua interface do usuário (HTML)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Saiba mais sobre o layout de aplicativos do Tempo de Execução do Windows e até que ponto eles são diferentes dos aplicativos tradicionais. Há diversas superfícies que você pode usar no seu aplicativo do Tempo de Execução do Windows, como a janela de aplicativo, submenus, 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.

A página do aplicativo, também chamada de tela

A página do aplicativo, às vezes chamada de tela, é a base de 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.

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.

Windows: Redimensionando sua IU

Um usuário pode 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 quando um usuário redimensiona o aplicativo.

	Tela inteira O aplicativo preenche toda a tela.
	Redimensionado O aplicativo é redimensionado para uma parte da tela inteira. Outros aplicativos podem preencher a área da tela remanescente.

 

Consulte Diretrizes de experiência do usuário para layout e dimensionamento para obter mais informações.

Teclado virtual e painel de manuscrito

O teclado virtual (e o painel de manuscrito no Windows) fornece 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 (ou quando clica no ícone de teclado na barra de tarefas da área de trabalho no Windows). O painel é ignorado quando o campo de entrada perde foco.

O teclado virtual habilita a entrada e edição de texto para tablets e telefones — isto é, fatores forma que não têm um teclado físico ou outros dispositivos de teclado periféricos. O painel de manuscrito no Windows 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 ou 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. No Windows Phone, o menu é ocultado por padrão e aparece quando o sinal de reticências é tocado. No Windows, a barra de aplicativos inteira é ocultada por padrão e aparece quando o usuário passa o dedo a partir da borda superior ou inferior da tela. A barra de aplicativos fecha o conteúdo do aplicativo e pode ser eliminada pelo usuário da mesma maneira que é mostrada, ou interagindo com o aplicativo.

Veja os artigos sobre design de comandos para saber mais sobre como criar comandos e sobre diretrizes de barras de aplicativos para obter diretrizes da experiência do usuário.

Windows: botões

São um conjunto de botões específico e consistente para os usuários em cada aplicativo: pesquisar, compartilhar, dispositivos, configurar e iniciar. 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.

Veja estas diretrizes para saber mais: 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 o usuário pode 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.

Não use menus contextuais como a interface de comandos principal para um aplicativo. É para isso que serve a barra de aplicativos. Veja o artigo sobre diretrizes de menus de contexto para saber mais.

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.

No exemplo do Windows 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.

Veja o artigo sobre diretrizes de caixas de diálogo de mensagens para saber mais.

Submenus

Submenus 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 submenus 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. Submenus são diferentes de caixas de diálogo de mensagem porque você deve mostrar um submenu apenas como resposta para quando o usuário pressionar ou clicar, e sempre deve ignorar o submenu 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.

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

Notificações do sistema (ou faixas)

Uma notificação do sistema (também conhecida como uma faixa no Windows Phone) é uma notificação que você mostra aos usuários quando seu aplicativo está no segundo plano. Uma notificação do sistema é excelente 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. O usuário pressiona a notificação para alternar para seu aplicativo e aprender mais.

Esteja ciente de que as pessoas podem considerar as notificações do sistema inconvenientes e incômodas, por isso seja prudente ao mostrar uma notificação do sistema aos usuários. Veja o artigo sobre diretrizes de notificações do sistema para saber mais.

Blocos

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

 

Erros

Os erros de um aplicativo podem ser comunicados ao usuário por meio de três áreas principais. A área correta 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 o usuário pode. Interação com o usuário: o usuário pode 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 entrada 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 o usuário pode. Interação com o usuário: o usuário pode 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: o usuário pode 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: o usuário não pode continuar interagindo com o aplicativo, a menos que descarte o erro. O usuário ainda pode 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 submenus, 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 isto	Alinhar 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 do Windows a seguir mostra uma mensagem de erro embutida associada a uma caixa de entrada de texto específica.

 

Não faça isto

Incluir ações ou comandos na mensagem.

 

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

Erros: Barra de erros ou de avisos

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

Faça isto	Posicionar 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.

 

Não faça isto	Exibir 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 do Windows a seguir é meramente informativa e nenhuma ação é necessária. Nesse caso, uma mensagem embutida no topo da tela deveria ser usada.

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 isto

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

 

O exemplo do Windows a seguir é um uso apropriado de uma caixa de diálogo de erro porque o usuário não pode usar o aplicativo a menos que tenha uma conta ativa.

Não faça isto

Usar 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 o usuário até que ele o corrigisse. Uma barra de erro ou aviso teria sido uma escolha mais acertada.

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 submenus

Diretrizes de caixas de diálogo de mensagens

Diretrizes de menus de contexto

Diretrizes de telas iniciais

Diretrizes de ajuda do aplicativo