Interface do usuário de aplicativo da Windows Store, do início ao fim (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]

Como fazer uma ótima interface do usuário? Qual é o melhor layout para seu aplicativo? O que torna seu aplicativo mais intuitivo e rápido de navegar?

Faça essas perguntas ao iniciar a fase de design de desenvolvimento de seu aplicativo. Em seguida, aprenda como implementar seu design.

Com o uso das diretrizes, práticas recomendadas e exemplos, ajudaremos você a obter todo benefício com os recursos da interface do usuário do Windows 8.1. Você pode definir a interface do usuário de seu aplicativo de maneira que ele fique intuitivo, bonito e consistente com outros aplicativos da Windows Store.

As seções a seguir fornecem uma estrutura de tarefas para ajudá-lo no design da interface do usuário de seu aplicativo. Elas seguem as práticas recomendadas descritas nas Diretrizes para a experiência do usuário.

Se você for iniciante no desenvolvimento de aplicativo da Windows Store, ou se não estiver familiarizado com o layout de aplicativo, navegação, controles e comandos, talvez possa ser muito útil rever cada etapa. Caso contrário, sinta-se à vontade para rever quando quiser. Agrupamos aspectos relacionados do desenvolvimento da interface do usuário do aplicativo. As diretrizes, tarefas e código de exemplo aqui são específicos para desenvolver aplicativos da Windows Store em JavaScript e HTML. Para versão de C#/VB/C++ e XAML, consulte Interface do usuário do aplicativo da Windows Store, do início ao fim (XAML).

O exemplo

O Exemplo de galeria de controles e layout inclui todos os elementos da interface do usuário que falamos aqui. Podemos nos referir muitas vezes a esse exemplo e apontá-lo para lugares em que são implementados recursos específicos.

O aplicativo de amostra é uma galeria de controles do aplicativo da Windows Store. Com o exemplo, você pode navegar pelos controles e códigos para implementar cada controle. Também pode ver como implementamos cada uma das etapas nas seções abaixo.

Etapa 1: preparar-se para começar e aprender o que vai aonde

Antes de iniciar o design e desenvolvimento de seu aplicativo, verifique seu planejamento. Reserve um tempo para pensar sobre em que seu aplicativo é bom, qual seu público alvo, quais cenários deseja implementar e para quais recursos oferecerá suporte. Para obter mais informações sobre como planejar seus aplicativos, veja Definindo a visão.

Comece decidindo qual estratégia de navegação deseja que seu aplicativo use. Nesse tutorial, começamos com o modelo Hub. Para projetar e desenvolver a interface do usuário de seu aplicativo, você pode baixar o modelo e tentar fazer algo na medida em que segue a estrutura. Para obter mais informações, consulte Padrões de navegação e Navegação hierárquica (HTML). Ou, se deseja ir direto e explorar o código, passe diretamente para o exemplo de Galeria de controles e layout.

Definindo o layout da interface do usuário O que vai aonde em um aplicativo da Windows Store? Aprenda a diretriz de posicionamento da interface do usuário. No exemplo, mostraremos como usamos a diretriz para projetar nosso aplicativo. Na página principal, colocamos os seguintes elementos na tela: Lista de grupos de controles. Estão agrupados por função para tornar rápida a navegação por tipos de controles. Lista de todos os controles. Estão classificados alfabeticamente por nome para tornar fácil a pesquisa de um controle específico. Em cada página, adicionamos um elemento de navegação na barra superior do aplicativo, assim você pode voltar rapidamente para a página inicial. Cada página de seção segue o padrão de navegação hierárquica normal. Isso inclui uma lista de itens de controle e links para página de detalhes de cada seção. Cada página de seção e cada página de detalhes inclui um botão voltar que o leva direto para página de onde você veio. Em cada página de detalhe, colocamos o conteúdo principal na tela principal do aplicativo: Descrição do controle Exemplos do controle, se ele puder ser exibido na tela Trechos de código para implementar o controle

 

Etapa 2: escolher controles para adicionar

Adicionar controles e definir o layout de seu aplicativo são tarefas de mãos dadas. É necessário saber quais controles adicionar e você precisa definir o design de seu layout antes de escolher os controles. Entender como os controles funcionam ajuda a tomar boas decisões para o layout.

Nesse tutorial, primeiro veremos os controles individuais. Na etapa 3, aprenderemos como organizá-los em um layout. Se preferir aprender como definir o design do layout primeiro, você pode ir direto para a próxima seção e retornar aos controles depois.

Veja o código de exemplo para saber como adicionamos cada controle na galeria.

	Controles por função Lista de controles Familiarize-se com a lista completa de controles disponíveis e o objetivo de cada um, em seguida, escolha os controles necessários a seu aplicativo.
	Guia de início rápido: adicionando controles HTML e manipulando eventos Use controles HTML, como botões, caixas de seleção e listas suspensas.
	Guia de início rápido: exibindo texto Use controles HTML como rótulos, div, parágrafos e área de texto para exibir o texto.
	Guia de início rápido: entrada e edição de texto Use controles HTML como caixa de texto, área de texto, caixa de entrada de senha e caixa de edição RTF/rich text para inserir e editar texto.
	Guia de início rápido: adicionando controles e estilos WinJS Use controles na Biblioteca do Windows para JavaScript, como controle de ListView, controle de classificação e controle de submenus.

 

Etapa 3: compilar o layout

	Definindo o layout de uma página de aplicativo Aprenda sobre o sistema de grade, cabeçalhos, margens e espaçamento e como isso cria uma experiência consistente para os usuários.
	Diretrizes de experiência do usuário para layout e dimensionamento Um usuário pode redimensionar um aplicativo de uma largura mínima para tela inteira e pode exibi-lo em telas de diferentes tamanhos, com resoluções diferentes e em orientações diferentes. Você pode definir o design de seu aplicativo de modo a ficar ótimo em qualquer tamanho. No exemplo, usamos a largura mínima padrão de 500 pixels.
	Guia de início rápido: definindo layouts de aplicativo Crie uma interface do usuário flexível, com boa aparência e que funcione bem em qualquer tamanho.
	Guia de início rápido: projetando aplicativos para diferentes tamanhos de janela Saiba como alterar a largura mínima de um aplicativo de 500 para 320 pixels e como alterar o design para que o aplicativo tenha uma boa aparência e funcione bem em larguras estreitas. Saiba como projetar um aplicativo com movimento panorâmico horizontal, de modo que ele mude para um layout vertical sempre que a altura do aplicativo for maior do que a largura.
	Diretrizes de experiência do usuário para layout e dimensionamento Conforme a densidade de pixels da tela de um dispositivo aumenta, os tamanhos físicos dos objetos na tela ficam menores. Quando a interface do usuário fica pequena demais para ser tocada e o texto pequeno demais para ser lido, o Windows ajusta a escala do sistema e da interface do usuário do aplicativo usando uma porcentagem da escala: Saiba como assegurar uma ótima aparência de seu aplicativo quando dimensionado.

 

Etapa 4: escolher onde colocar os comandos e como usar botões

	Padrões de comando Saiba onde colocar os comandos - na tela, em pop-ups, em caixas de diálogo ou em barras de aplicativos - e decida onde os comandos de seu aplicativo devem funcionar.
	Diretrizes e lista de verificação para barras de aplicativos Guia de início rápido: adicionando uma barra de aplicativos com comandos Diretrizes de barras de navegação Guia de início rápido: adicionando uma barra de navegação Aprenda sobre agrupamento de comandos, posicionamento consistente, estilos e ícones e outras diretrizes importantes das barras de comandos e barras de navegação. No exemplo, implementamos um botão inicial na barra superior do aplicativo para ajudar na navegação.
	Diretrizes e lista de verificação para adicionar menus de contexto Use menus de contexto para acesso imediato às ações, como Cortar e Colar. Mantenha os menus de contexto breves e relevantes à seleção.
	Diretrizes e lista de verificação para pesquisa Guia de início rápido: adicionando pesquisa a um aplicativo Saiba quando usar o controle da caixa de pesquisa no aplicativo e quando usar o contrato de pesquisa.
	Diretrizes para compartilhamento de conteúdo Início rápido: compartilhando conteúdo Se o seu aplicativo tiver conteúdo para compartilhar, ele será uma fonte de compartilhamento. Se o seu aplicativo pode receber conteúdo de outros aplicativos, ele é um destino de compartilhamento.
	Diretrizes para configurações de aplicativos Guia de início rápido: adicionando configurações de aplicativo Saiba como usar com inteligência o botão Configurações. Mantenha as configurações simples e em uma quantidade pequena. Conheça as configurações certas para o painel de Configurações.
	Diretrizes de ajuda do aplicativo Diretrizes para a interface do usuário instrucional Guia de início rápido: adicionar ajuda ao aplicativo Saiba quando e como implementar a Ajuda do aplicativo no painel de Configurações e saiba quando usar outros meios para fornecer ajuda; como dicas, demos ou interface do usuário reprojetada.

 

Etapa 5: Conclua o processo

	Executar o Kit de Certificação de Aplicativos Windows. Recomendado. A execução de um kit de certificação ajuda você a assegurar que seu aplicativo atenda aos requisitos da Windows Store, portanto você deve fazer isso quando tiver acabado de adicionar a principal funcionalidade a seu aplicativo.
	Pronto! Depois de já ter considerado as diretrizes de experiência do usuário e projetado a interface do usuário, seu aplicativo deve refletir as práticas recomendadas para fornecer uma excelente experiência aos usuários.

 

Próximas etapas

Agora que já compreendeu os fundamentos, dê uma olhada nos outros exemplos nas séries Recursos de aplicativos, do início ao fim.

Deseja mais?

Diretrizes de experiência do usuário do índice

Navegue em uma lista completa de diretrizes de experiência do usuário.

Interação com o usuário: Entrada por toque... e muito mais

Siga a história do início ao fim para definir o design da experiência de interação do usuário para seu aplicativo.

Crie seu primeiro aplicativo da Windows Store

Siga estas séries de tutoriais se for iniciante no desenvolvimento de aplicativos da Windows Store e deseja dar início a seu primeiro aplicativo.