×
Namespaces

Variants
Actions
Revision as of 05:16, 27 August 2012 by hamishwillee (Talk | contribs)

Anatomia de um Tile

From Nokia Developer Wiki
Jump to: navigation, search
SignpostIcon WP7 70px.png
Article Metadata

Compatibilidade
Plataforma(s):
Windows Phone 7.5

Artigo
Tradução:
Por quezado
Última alteração feita por hamishwillee em 27 Aug 2012

Este artigo visa um breve estudo sobre UI e UX de um Tile. Detalhes técnicos, de codificação, podem ser encontrados na publicação Tile - Windows Phone - Coding (Porguese) do desenvolvedor Awdren Fontão. This article is also available in english.

Contents

Introdução

Um Tile é um atalho visual, facilmente reconhecível, para um aplicativo ou conteúdo específico, que o usuário pode por na Start (tela inicial) do Windows Phone.

Visualmente é um quadrado, daí vem o nome tile, que em português pode ser traduzido como ladrilho. Em casos excepcionais (da Microsoft e de parceiros) podem ser um retângulo que equivalem ao espaço de dois tiles na horizontal (Ex: Pictures e Calendar).

Pode chega na start por três caminhos:

  1. Adicionado de fábrica pela Microsoft (os padrões como Me, People, Pictures, etc), por um fabricante (Nokia Maps para aparelhos Nokia) ou pela operadora (conteúdo customizados da operadora);
  2. É adicionado pelo próprio usuário que, na Application List screen (Lista de Aplicativos), pode criar esta espécie de atalho na start, fixando (Pin to Start) um tile do aplicativo escolhido;
  3. É adicionado via código, de dentro de um aplicativo, levando para um conteúdo específico daquele aplicativo.

WPstart.png

Funcionalmente, é melhor que um ícone pois pode apresentar informações relevantes sobre o aplicativo. Por exemplo, o tile de um app de tempo poderia, dinamicamente, mostrar a temperatura da cidade do usuário. Designers e Desenvolvedores são fortemente encorajados a tirar vantagem destas características, pois isto torna o aplicativo muito mais interessante. Outros exemplos serão apresentados mais a frente no tópico Casos Interessantes.

Um bom tile comunica informações sobre o aplicativo, apresenta a personalidade de uma marca e pode se destacar entre os demais. Ao projetar tenha os princípios da UI Metro em mente. Boas referências visuais são sempre os padrões da Microsoft e parceiros que já estão instalados no aparelho.

A arte é importante

Tiles podem ter uma imagem de fundo que deve ter 173x173 pixels, 256 dpi e ser um PNG. Imagens maiores ou menores serão automaticamente reduzidas ou ampliadas usando o canto superior esquerdo como ponto de origem.

Aplicativo que não incorpore uma imagem ou título apresentará um ícone genérico gerado pelo sistema com o nome do projeto.

Na hora de desenhar o ícone use como referência os ícones padrões do aparelho (e-mail, sms, telefone, etc): completamente branco, formas geométricas simples, sem detalhes de refinamento e boas metáforas. Claro, isto não é um elemento obrigatório, ainda mais tratando-se de marcas, todavia este nível de simplicidade garante um bom nível de alinhamento com a UI do aparelho.

Elementos para evitar na hora de desenhar um tile (boa parte dos pontos são totalmente opostos aos princípios gerais Metro):

  1. Tipografia 3D;
  2. Ícones ou Fundos com gradientes, volumes, sombras;
  3. Bordas arredondadas;
  4. Fundo Preto ou Branco. O fundo do Tile vai desaparecer quando escolhido um dos temas básicos do Windows Phone (preto ou branco);
  5. Uso de ícones sem sentido ou ambíguo.

WPincorretotiles1.png

WPincorretotiles2.png

Visualmente a relação mais sensível de um tile é a do Fundo x Elemento de Primeiro Plano. O fundo pode ser uma transparência (o que mostra a cor do tema do aparelho como fundo), uma textura ou uma imagem. O elemento de primeiro plano pode ser um texto, um logotipo, um ícone ou uma marca.

Escolha um fundo de cor que represente sua marca e faça o seu ícone de primeiro plano fácil de ver e ler. Abaixo três interessantes exemplos:

WPnicetiles.png

Se você optar pelo fundo transparente (uso de PNG transparente) para ter a cor do tema como fundo do tile, tenha em mente que o ícone deve ser preferencialmente branco. Se o ícone for colorido, este poderá ter a visualização comprometida em algumas combinações de cores.

WPbadtiles.png

Uma boa oportunidade de uso da transparência do tile e o fundo do tema do usuário, que ficará exposto, é criar imagens “vazadas” de forma criativa, como por exemplo:

WPbgcolors1.png

WPbgcolors2.png

Aspectos técnicos

Tipos

O processo padrão para fixação de um tile na start acontece quando o usuário, na application list, pressiona o título do aplicativo, habilitando a opção contextual de fixar na start (Pin to Start). Neste momento nasce um Application Tile.

Um application tile não pode ser deletado. Ele pode ou não ser fixado na start, contudo, mesmo não estando lá este continua podendo ser atualizado via código do aplicativo. Assim, numa eventual adição para a start os dados já estarão atualizados.

Outro meio para criar um tile é via código, quando uma ação do usuário dentro do aplicativo demanda a criação de um atalho externo. Neste momento surge um Secondary Tile (Tile Secundário).

Um típico uso para um secondary tile, como já citado neste texto, pode ser um aplicativo de clima que fixa um tile na start screen com as informações de uma cidade desejada. Outra possibilidade é criar um secondary tile que mostre a chamada da última notícia de um dado canal de notícias.

Ao pressionar este secondary tile o usuário pode ser guiado diretamente para a tela do conteúdo apresentado, não precisando ir para a tela inicial do aplicativo.

Note que é possível adicionar o secondary tile de um aplicativo sem que o mesmo tenha um application tile na start screen.

“Ilimitados” secondary tiles podem ser adicionados na start screen, contudo, tenha em mente que cada uma poderá fazer requisições dinâmicas específicas e um grande número poderá implicar em alto consumo de dados, processamento e bateria.

Lados

Cada tile possui dois lados: Front (frente) e Back (costa). Se nenhuma propriedade for atribuída no back do tile, o mesmo não alternará, mostrando apenas o front.

Propriedades

As propriedades padrões de um application tile e um secondary tile são as mesmas. Para o front do tile:

WPtilefront.png

Title – Um texto indicando o título do aplicativo. O título deve caber numa única linha de texto e não deve ser mais longo do que o tile. Aproximadamente 15 caracteres é o ideal. Para efeito visual utiliza-se a Segoe WP Semibold com 15pt.

BackgroundImage – Uma imagem apresentada na front do tile. É recomendado que o front do tile sempre tenha um backgroundImage.

Count (ou Badge) – É um valor que vai de 1 até 99. Se o valor do contador não é fornecido ou for 0, o círculo não será apresentado.

Para o back do tile:

WPtileback.png

BackTitle – Características iguais ao Title.

BackBackgroundImage – Características iguais ao Backgroundimage.

BackContent – Um texto apresentado no corpo do Back. Existe quebra linha e podem ser usados até aproximadamente 40 caracteres. Para efeito visual utiliza-se a Segoe WP Regular com 24pt.

Sobre as imagens de background é importante destacar:

  1. Ao criar um secondary tile, as imagens de BackgroundImage e BackBackgroundimage devem ser um recurso local. Contudo, no caso de atualização, estas imagens podem ser local ou remota.
  2. Por conta de variações de rede e razões de performance, considere o uso de imagens locais.
  3. Imagens remotas devem ter no máximo 80Kb. Imagens maiores não serão baixadas.
  4. Imagens remotas devem ser baixadas em até 30 segundos. Do contrário, elas não serão baixadas.

Casos Interessantes

Notícias

O modelo mais comum de tiles deve ser o de notícias. Seja notícias texto, foto ou foto e texto. Aplicativos como Fox News, BBC News e USA Today são bons casos de exploração do conteúdo do tile.

Abaixo faço a simulação do application e secondary tile de um blog.

O application tile, como visto antes, é o acesso primário de um aplicativo, é aquele que nasce quando o usuário o seleciona na application list e fixa na start.

WPcasenews.jpg

O front do application tile apresenta uma backgroundImage (o fundo vermelho e ícone logo) e como title o nome do app “Quezado Blog”.

Alguns segundos depois o tile gira mostrando o back do tile apresentando um BackBackgroundImage e Content remotos. A imagem e o título da última notícia da categoria Featured do blog é mostrada.

O secondary tile apresenta um modelo diferente. Supondo que dentro do aplicativo exista uma área chamada Gallery, na mesma ou em uma tela de ajustes foi dada ao usuário a opção de fixar na start um tile que servirá de atalho para a última galeria publicada.

Uma vez inserido o secondary tile, que poderá ou não coexistir com o application tile deste aplicativo de notícias, o mesmo fará um loop com as duas imagens da última galeria publicada. Outro cenário seria mostrar uma imagem das duas últimas galerias publicadas nos lados front e back.

Diferente do application tile, que abrirá o aplicativo na tela inicial do mesmo, o secondary tile pode abrir numa tela específica. Neste caso, a galeria que estava sendo divulgada no tile.

Perceba que tratando-se de imagem de fundo remota, onde não existe o controle visual, no exemplo foi colocado uma camada de preto 30% do tamanho do tile. Assim, mesmo com uma imagem branca de fundo, é garantido uma leitura mínima do texto.

Conteúdos específicos

Um bom uso para um secondary tile é fazer o mesmo ser não só o atalho de um conteúdo específico do aplicativo, mas também trazer informações relevantes que atraiam o usuário.

O tile abaixo foi adicionado através de um aplicativo de gerenciamento de projetos. Neste foi adicionado o tile de um projeto específico “Bill Website” e apresenta o progresso do projeto e quantas atividades existem para serem feitas na referida data e quantas estão atrasadas.

WPcasemyprojects.jpg

Visualmente existe uma BackgroundImage de uma imagem rosa com um área cinza no topo. Sobre a área cinza é desenhado um retângulo na cor e tamanho que represente o status do projeto (neste caso, 80%). Perceba que é possível assim intercalar imagens, shapes e textos de formas diversas, buscando informações que estão dentro do aplicativo.

O modelo acima não tem um back mas poderia ter sido colocado o brand do aplicativo, caso julgasse interessante um reforço da marca, ou outros status do projeto.

Outros modelos de uso podem ser o brasão de um time específico, um atalho para uma ação de adicionar um conteúdo ou fazer uma foto. O aplicativo do Evernote é um bom exemplo, permite criar atalho de documentos específicos ou um secundary tile para adicionar novos conteúdos. Outro interessante exemplo é o Metro Tube, que permite criar secondary tiles de vídeos, criando um interessante atalho para os vídeos preferidos do usuário.

Um ótimo caso de uso é o Nokia Mapas que permite ao usuário criar o secondary tile de um local pesquisado. Ótimo para fazer consultas antes de uma viagem e no destino ter acesso rápido aos locais a serem visitados.

Considerações finais

Considerando que o usuário já fixou o tile de um aplicativo na start, este já tem um certo grau de importância para o usuário: ele quer acessar aquele conteúdo rapidamente.

Na disputa com outros tiles favoritos do usuário, aquele que é visualmente atrativo e tem um bom conteúdo dinâmico em exposição sempre será um bom convite para o usuário.

No fim este texto foi escrito para isso. Para incentivar designers e desenvolvedores a deixarem os tiles dos seus aplicativos mais atraentes. Assim, é possível chegar na meta final: que mais vezes o usuário entre nos aplicativos desenvolvidos.

Este texto condensa os princípios encontrados nos guidelines Microsoft e alguns meses desenhando tiles para aplicativos Windows Phone. No fim, seguir os guidelines, usar as boas práticas de design e prover bom conteúdo é a chave para criar um bom conteúdo.

Referências

Tiles Overview for Windows Phone

Essential Graphics, Visual Indicators, and Notifications for Windows Phone

Apresentações PDF de Arturo Toledo e Corina Black no Windows Phone Design Day Tour

107 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×