×
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:

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

×