Idioma: HTML | XAML

Interface do usuário de aplicativo da Windows Store, do início ao fim (HTML)

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.

Página principal do aplicativo StumbleUpon

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 de 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 Exemplo de galeria de controles e layout

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.

ícone de início

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.

ícone de etapa

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.

ícone de etapa

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.

ícone de etapa

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.

ícone de etapa

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.

ícone de etapa

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.

ícone de etapa

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

ícone de etapa

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.

ícone de etapa

Diretrizes para tamanhos de janelas e dimensionamento de telas

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.

ícone de etapa

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.

ícone de etapa

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.

ícone de etapa

Diretrizes de dimensionamento para densidade de pixels

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

ícone de etapa

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.

ícone de etapa

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.

ícone de etapa

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.

ícone de etapa

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.

ícone de etapa

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.

ícone de etapa

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.

ícone de etapa

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

ícone de requisitos de armazenamento

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.

ícone de parada

Pronto! Depois de já ter considerado as diretrizes de experiência do usuário e projetado a interface de 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.

 

 

Mostrar:
© 2014 Microsoft