Gráficos, indicadores visuais e notificações essenciais (aplicativos da Loja do Windows Phone)

A beleza é algo fundamental em aplicativos móveis, além de sinônimo de uma operação intuitiva. No Windows Phone, os elementos visuais de seu bloco, sua tela inicial, seus ícones, controles e navegação devem chamar a atenção para tarefas, prioridades ou operações relevantes do aplicativo, bem como apresentar as informações de forma inovadora e atrativa. Seu aplicativo precisará de um design personalizado para o bloco dinâmico ou um ícone animado, além de uma imagem de tela inicial que o apresente para o usuário enquanto é carregado. Esses e outros indicadores visuais são o tópico desta seção.

Seja econômico com os gráficos. Lembre-se de usar conteúdo e tipografia que sejam visualmente atrativos e jamais use elementos visuais puramente decorativos.

Não se esqueça de que, em plataformas móveis, a simplicidade é a fonte de atração mais apreciada. Embora seja interessante usar algum tipo de arte, prefira fotografias, marcas ou artes gráficas originais de alta qualidade. Verifique se essa arte atinge ou excede as dimensões de seu aplicativo e se ela aparece nítida e inteligível.

Blocos

Um bloco é um atalho visual facilmente reconhecido para um aplicativo ou para seu conteúdo e que pode ser posicionado pelo usuário na tela inicial do telefone. O usuário pode personalizar quais blocos aparecerão na tela inicial fixando na exibição o bloco de determinado aplicativo. Um bloco dinâmico é mais valorizado do que um ícone, pois pode apresentar informações relevantes sobre o aplicativo. Por exemplo, o bloco de um aplicativo de clima pode mostrar a temperatura de forma dinâmica. É altamente recomendado que você aproveite esse recurso, pois ele torna seu aplicativo muito mais útil.

Os melhores blocos são aqueles que comunicam alguma informação sobre o aplicativo, exibem a personalidade de sua marca e ficam bonitos ao lado dos outros blocos na tela. Os blocos podem comunicar informações ao usuário através da exibição de um contador que usa a fonte do sistema, da atualização das imagens de fundo do bloco fornecidas por você, ou através da exibição de um bloco opcional que use a fonte do sistema em uma cor e tamanho fixo. O contador, a imagem de fundo e as atualizações do bloco são controlados pelo serviço de notificação de bloco. A cor de destaque do contador é sempre a cor de destaque selecionada pelo usuário. A exibição do contador é opcional.

Os dispositivos Windows Phone vêm com alguns blocos já instalados pela Microsoft e por suas operadoras e fabricantes parceiras. Esses blocos refletem de forma consistente a experiência exclusiva do Windows Phone.

Para saber mais, veja Diretrizes de blocos e notificações.

A arte do bloco é importante

Se você usar várias imagens de bloco, elas devem ser visualmente consistentes umas com as outras, além de ter um tema ou estilo identificável. Você não pode alterar a cor, a fonte, a cor da fonte ou o tamanho do contador.

Os aplicativos que não incorporarem uma imagem de bloco ou um título exibirão um ícone genérico definido pelo sistema e o nome do projeto. Se você estiver desenvolvendo um aplicativo com um orçamento apertado para o design, há diversos sites na Internet nos quais você pode comprar ícones por um preço justo. Não importa se você está criando o bloco por conta própria ou se está terceirizando essa tarefa: mantenha-o simples. Os ícones devem ter uma geometria simples e limitar a quantidade de detalhes. Se possível, devem usar metáforas que já são familiares para as pessoas.

Observação  Seja conservador no uso das notificações de bloco. O uso excessivo dessas notificações reduz a duração da bateria.

Estilos a serem evitados

• Tipografia em 3D
• Ícones ou planos de fundo com gradiente, ângulos ou sombreados
• Cantos arredondados
• Planos de fundo preto ou branco, pois o fundo do bloco desaparecerá em um tema escuro ou claro
• Ícones não descritivos ou ambíguos
• Planos de fundo transparentes com imagens coloridas

Uso correto e incorreto do bloco

Cores de fundo do bloco

Há dois elementos fundamentais para um bloco: o ícone e o logotipo que aparecem em primeiro plano, e o plano de fundo quadrado e colorido. Ambos os elementos devem se complementar.

Escolha uma cor de plano de fundo que represente sua marca e que permita uma fácil leitura do seu ícone em primeiro plano. A figura a seguir mostra três exemplos que seguem essas diretrizes.

Phone Company, Adatum, Margie’s Travel

Evite usar a cor preta ou branca no plano de fundo, pois o fundo do bloco desaparecerá em temas escuros ou claros.

Uso inadequado da cor preta no plano de fundo de um bloco

Se quiser que o plano de fundo de seu bloco tenha a mesma cor da interface do usuário do telefone, deixe o plano de fundo do bloco transparente. Se fizer isso, é importante lembrar:

• Deixe apenas o bloco transparente. Os demais ícones enviados com o aplicativo não devem ter planos de fundo transparentes.
• Deixe seu primeiro plano da cor branca. Se o primeiro plano for colorido, o ícone não será visível ou será desconfortável olhar para ele em alguns dos temas do telefone, conforme podemos ver na figura a seguir.

Problemas ao não deixar o ícone do primeiro plano da cor branca

Telas iniciais

Muitos aplicativos levam algum tempo para carregar. Use essa oportunidade para apresentar seu aplicativo ao usuário com uma tela inicial. A tela inicial fica visível por apenas alguns segundos, então recomendamos que você evite usar qualquer texto que exija a atenção do usuário ou que leve algum tempo para ser lido. Em vez disso, use esse espaço para induzir a transição do olhar do usuário para seu aplicativo com os gráficos. Uma boa tela inicial funciona como um anúncio para seu aplicativo e, para isso, faz uso de cores e gráficos.

Uso correto e incorreto de telas iniciais

Ao planejar a abertura de seu aplicativo, lembre-se do seguinte:

• Se seu aplicativo precisa carregar ou usa páginas de introdução, elas não devem ser incluídas na pilha do segundo plano. Em outras palavras, elas devem ser ignoradas se o usuário pressionar o botão Voltar.
• Há diversos requisitos de certificação de aplicativos relacionados ao botão Voltar e à tela inicial do aplicativo. Para saber mais, veja Requisitos técnicos para a certificação da Windows Store.

Indicadores visuais

O Windows Phone usa três tipos diferentes de indicadores para mostrar o progresso das tarefas, as exibições de rolagem, a força do sinal, a duração da bateria e outras informações fundamentais.

Indicador de progresso

O indicador de progresso mostra atividades dentro do aplicativo relacionadas a uma atividade ou a uma série de eventos. Esse é um controle do sistema integrado à barra de status e que pode ser exibido em diversas páginas do aplicativo. Para saber mais sobre a barra de status, consulte a seção "Barra de status" mais adiante neste tópico.

Observação  Assim como a barra de progresso padrão, o indicador de progresso da barra de status pode ser determinado ou indeterminado. Os indicadores com status determinado possuem um ponto inicial e um ponto final. Já os indicadores com status indeterminado continuam até que a tarefa seja terminada.

Você pode usar esse indicador no modo determinado para tarefas de download de conteúdo, enquanto o modo indeterminado pode ser usado para tarefas como conexões remotas.

Para saber mais sobre como o progresso de tarefas é exibido para os usuários, consulte controles de progresso.

Indicadores de rolagem

A rolagem pela página ocorre quando o conteúdo na tela—por exemplo, uma imagem ou uma seção de texto muito longa—excede os limites de visibilidade da página, e o usuário precisa fazer um movimento panorâmico ou mexer o aparelho. Quando o usuário rola pela página, os indicadores de rolagem ficam visíveis à direita na rolagem vertical e na parte de baixo na rolagem horizontal. Essas barras de rolagem indicam que o conteúdo é maior que a página e representam a posição atual na página. Quando a rolagem termina, os indicadores desaparecem após um segundo.

Eles não podem ser acionados pelo usuário e sobrepõem-se ao conteúdo da tela. Sua função primária é dar ao usuário uma dica do tamanho da página.

Você pode implementar a rolagem em seu aplicativo usando um controle de movimento panorâmico e zoom, chamado visualizador de rolagem. Esse recurso normalmente preenche a tela e possui um conteúdo maior do que ele próprio. Dessa forma, o usuário pode navegar por uma área de conteúdo que pode ser ampliada para além dos limites da tela.

Barra de status

A barra de status é um indicador que exibe informações sobre o status no nível do sistema de forma simples e prática em uma área reservada do espaço de trabalho do aplicativo. Ela atualiza automaticamente para oferecer diferentes notificações e manter os usuários informados do status no nível do sistema.

Para saber mais, consulte a seção "Barra de status" no Primeiro contato com o Windows Phone.

Barra de aplicativos

A barra de aplicativos consiste em um local para exibir até quatro tarefas comuns de aplicativos como ícones de botões. Ela oferece uma exibição dos ícones de botões com dicas de texto e um menu estendido opcional chamado menu da barra de aplicativos, que é exibido quando o usuário toca no indicador visual dos pontos sequenciais ou mexe a barra de aplicativos para cima.

Barra de aplicativos

Use a barra de aplicativos em vez criar seu próprio sistema de menus. Isso o ajuda a criar uma experiência de usuário consistente com todos os aplicativos do dispositivo. A barra de aplicativos oferece suporte à rotação e à animação de menu.

Você pode adicionar uma barra de aplicativos a uma página em seu aplicativo completamente em marcação.

Considerações de design:

• Use a cor de tema definida pelo usuário para o sistema, a menos que haja um motivo maior para ignorá-la. Usar uma cor personalizada pode afetar a qualidade da exibição dos ícones dos botões, criar efeitos visuais incomuns nas animações de menu e reduzir a duração da bateria em alguns dispositivos.
• A opacidade da barra de aplicativos pode ser ajustada com precisão, mas recomendamos que você use apenas os valores de opacidade 0, 0,5 e 1.
• Essa barra sempre fica na mesma extremidade da tela que os botões de direção (Voltar, Iniciar e Pesquisar) e se estende para a tela cheia quando no modo de retrato ou de paisagem. Os ícones de botões também giram para se alinhar à orientação do telefone.
• A altura da barra de aplicativos no modo de retrato, bem como sua largura no modo de paisagem, é fixa e não pode ser modificada. Ela pode ser definida para ser exibida ou oculta.

Para ver uma explicação e um exemplo de como localizar a barra de aplicativos, consulte Como criar um aplicativo localizado para o Windows Phone.

Menu de barra de aplicativos

O menu da barra de aplicativos oferece uma maneira opcional para que os usuários acessem tarefas específicas da barra de aplicativos. Coloque tarefas pouco usadas no menu da barra de aplicativos.

Esse menu é ativado quando o usuário toca no indicador visual dos pontos sequenciais ou mexe a barra de aplicativos para cima. Para descartar essa exibição, basta que ele toque fora da área do menu ou nos pontos, use o botão Voltar, ou ainda, selecione um item de menu ou um ícone da barra de aplicativos.

Menu de barra de aplicativos

Considerações de design:

• Para evitar a necessidade de que o usuário precise rolar pelo menu, o número de itens exibidos deve ser limitado a cinco.
• O texto de um item de menu da barra de aplicativos fica fora da tela se for muito longo. O tamanho máximo recomendado para o texto de um item é entre 14 e 20 caracteres. De novo, nesse espaço, menos é mais.
• Se não houver nenhum item de menu, serão exibidas apenas as dicas de texto dos ícones.
• O menu da barra de aplicativos permanece na tela até que o usuário execute uma ação.

Ícones da barra de aplicativos

Os ícones da barra de aplicativos devem ser claros e compreensíveis e devem usar metáforas do mundo real que sejam familiares para os usuários. Os melhores ícones costumam ter uma geometria simples e limitar a quantidade de detalhes.

Os botões devem ter um ícone e uma dica de texto. As dicas de texto devem ser curtas e dar informações sobre o que o botão faz. Além disso, elas não precisam ser totalmente descritivas. Um exemplo disso é um botão que gira a imagem horizontalmente. Em vez de "girar horizontalmente", apenas "girar" já é o suficiente.

Observação  Os botões devem ter um ícone e uma dica de texto.

Os botões da barra de aplicativos podem ser exibidos em estado ativado ou desativado. Um exemplo de botão desativado seria o botão Excluir nos cenários somente leitura.

Ícones da barra de aplicativos

Use botões de ícone para as principais ações do aplicativo. Não aplique mais ícones apenas para usá-los.

Considerações sobre o uso:

• Algumas ações são difíceis de serem claramente transmitidas por um ícone. Em vez disso, coloque essas ações no menu da barra de aplicativos.
• As dicas de texto dos ícones da barra de aplicativos são exibidas quando o usuário exibe o menu da barra de aplicativos.
• Não use um ícone para um botão Voltar cuja função seja navegar de volta pela pilha de páginas. Todos os dispositivos Windows Phone possuem um botão de hardware Voltar dedicado que sempre deve ser usado para a navegação reversa.
• Escolha ícones que tenham significados claros mesmo quando a barra de aplicativos é girada. A barra de aplicativos lida automaticamente com as mudanças na orientação da tela. Quando o dispositivo é colocado na orientação de paisagem, o menu é exibido verticalmente na lateral da tela. Os botões de ícone são girados de modo que apareçam verticalmente para o usuário, mas a ordem deles na lista não é alterada. Pense se os significados pretendidos para seus ícones ficarão confusos quando isso ocorrer, especialmente para pares de ícones simétricos ou semelhantes.

Considerações de design:

• As imagens dos ícones devem ter um tamanho de 76 x 76 pixels.
• Elas devem usar um primeiro plano branco sobre um plano de fundo transparente usando um canal alfa. O gráfico do primeiro plano em branco para o botão deve caber em uma área quadrada, de 41 x 41, no centro da imagem, de forma que não se sobreponha ao círculo.
• As imagens que têm um tamanho diferente daquele recomendado são dimensionadas para caber no espaço e podem reduzir a qualidade geral da imagem do ícone da barra de aplicativos.
• O círculo exibido em cada botão de ícone é desenhado pela barra de aplicativos e não deve ser incluído na imagem de origem.

Exemplos de recursos de ícones

Um conjunto de recursos de ícones da barra de aplicativos (tanto escuros como claros) em formato PNG é instalado como parte do Windows Phone SDK. Apenas os ícones brancos (aqueles na pasta denominada "Escuros") devem ser usados na barra de aplicativos. Para localizar esses itens, navegue até:

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\<versão>\Icons\Dark

Notificações

Para o desenvolvimento de aplicativos, o Serviço de Notificação do Windows foi criado para fornecer um serviço de nuvem com um canal dedicado, resiliente e persistente para enviar notificações para um dispositivo móvel.

Quando o serviço de nuvem precisa enviar uma notificação por push para um dispositivo, ele envia uma solicitação de notificação para o Serviço de Notificação do Windows que, por sua vez, encaminha a notificação para o aplicativo ou para o dispositivo como uma notificação de bloco, notificação do sistema ou notificação bruta.

Há três métodos para exibir notificações por push: notificações de bloco, notificações do sistema e notificações brutas.

Notificações de bloco

Uma notificação de bloco informa o usuário das mudanças ou eventos que podem ter ocorrido e que não interrompem seu fluxo de trabalho. Elas aparecem nos blocos da tela inicial. Ao usar uma notificação de bloco, você pode definir as propriedades de forma dinâmica em um bloco, como no contador, na imagem de fundo ou no título.

Notificação de bloco

Use notificações de bloco somente para notificações de reconhecimento.

Notificações do sistema

Um serviço da Internet pode gerar um tipo especial de notificação por push conhecida como notificação do sistema e que exige uma ação do usuário. Uma notificação do sistema causa o aparecimento de uma faixa, que é uma barra opaca na cor de destaque na parte superior da tela, exibindo uma versão em menor escala do ícone do aplicativo no canto esquerdo. Há dois campos de texto disponíveis: um título em negrito e uma legenda normal. Se o texto for maior que a área de exibição, ele será truncado.

A faixa é exibida por 10 segundos antes de desaparecer. Se o usuário tocar na faixa, o aplicativo que enviou a notificação do sistema será aberto. Trata-se de uma notificação do sistema completo, mas que não interrompe o fluxo de trabalho do usuário, nem exige algum tipo de intervenção dele. Um exemplo dessa notificação é quando o usuário recebe uma mensagem de texto ou uma mensagem instantânea.

Faixa

Use a notificação do sistema para uma notificação que exige uma ação. Alguns exemplos podem ser notificações geradas por um cliente de mensagens instantâneas ou por um aplicativo voltado para ponto a ponto. Mas use-as com moderação. Todos os aplicativos têm acesso a notificações do sistema, e o excesso de faixas incomoda o usuário.

Os aplicativos devem deixar as notificações do sistema desativadas por padrão. As notificações do sistema devem ser pessoalmente relevantes para o usuário, além de críticas em termos de tempo. Geralmente, elas são reservadas para comunicações de ponto a ponto, como um aplicativo de SMS.

Notificações brutas

Notificações que exigem uma ação dentro de um aplicativo são totalmente controladas por um aplicativo e afetam apenas a ele. Elas são chamadas de notificações brutas. Elas podem ser geradas pelo próprio aplicativo ou enviadas por um serviço da Web. Não existe uma forma geral para que o sistema exiba uma notificação bruta.

Notificação não processada

Use uma notificação bruta para notificações de aplicativos que exigem uma ação do usuário.

Em interrupções da rede

• Se não houver conexão de rede, o aplicativo deverá fornecer um aviso adequado. Você pode usar o modo de avião para testar seu aviso.
• Verifique se ainda é possível navegar pelo aplicativo quando não há uma rede disponível. Embora possa não haver entrada de dados, a navegação pelo aplicativo deve estar funcionando.
• Se uma interrupção na rede interromper uma operação ou um recurso, sempre informe o usuário do erro.

Inclua um acordo de licença do usuário final

O acordo de licença do usuário final (ou EULA) consiste em um conjunto de diretrizes de uso que devem ser aceitas pelo usuário na primeira vez que ele inicia o aplicativo. Ele também descreve os direitos do usuário, conforme a sua visão. Trata-se de um acordo entre você e a pessoa que está adquirindo o aplicativo e que estipula que o usuário não fará um uso indevido do aplicativo.

O uso de um aplicativo deve depender da aceitação do EULA pelo usuário. Se o usuário não aceitar os termos de seu EULA, ele não terá autorização para usar o aplicativo.

Esse documento deve discutir os comportamentos e os usos do aplicativo endossados por você, inclusive termos específicos relacionados ao conteúdo, licença, instalação, ativação, validação, serviços de Internet ou uso de determinadas informações. Também é um bom local para informar o usuário sobre seus planos de atualização e ofertas de upgrades para o aplicativo, ou ainda seu uso de formatos e padrões de software. Se seu aplicativo for associado a uma empresa, seu EULA também deve indicar onde a empresa é registrada e se você oferece algum tipo de garantia.

Tópicos relacionados

Diretrizes de design de blocos para o Windows Phone

Modelos de ícones para o Windows Phone 8

Modelos de design de tela para o Windows Phone 8

Blocos e notificações para o Windows Phone

Como criar uma tela inicial para o Windows Phone

Como criar uma barra de progresso indeterminada personalizada para o Windows Phone

Barra de aplicativos para o Windows Phone