×
Namespaces

Variants
Actions
Revision as of 21:30, 30 December 2011 by quezado (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Anatomia de um Tile

From Nokia Developer Wiki
Jump to: navigation, search

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 meu amigo desenvolvedor Awdren Fontão. This article is also available in english.

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:

94 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.

×