Técnico

Ícones do Menu


Segundo o padrão exigido do Android Guideline, os ícones do menu devem ser desenhados de maneira frontal, 2d, e não em 3D ou perspectiva.
Como disse, esse é um resumo, eles escrevem toda um detalhamento para o mais leigo dos leigos, acho que de forma geral dá para entender bem o que é essa exigência.

Não esqueça de aplicar as resoluções indicadas na Tabela1.

.

Estrutura

.

Com o objetivo de manter a coerência os ícones do menu devem usar a mesma paleta de cores e efeitos, abaixo vamos mostrar essa paleta e efeitos para você seguir o padrão.

Segundo a guideline, os ícones devem possuir cantos arrendondados, mas somente quando de maneira racional for necessário. Por exemplo, na FIGURA 7, o lugar racional para esse canto arredondado é o teto, e não o resto do objeto.

Todas as dimensões desta página se baseiam na resolução de um ícone 48 x 48px, com 6px de segurança em volta do ícone, totalizando 54 x 54 área total.

A arte final deve ficar com um arquivo PNG transparente.

Você pode conferir os ícones no pacote que postei no post Pacote para Download

.

Luzes, Efeitos e Sombras

.

Segue aqui alguns padrões que você deve usar para criar o efeito desejado, perceba a iluminação utilizada, as sombras e o tom.

.

Passo a passo

.
1.  Criar as formas básicas usando uma ferramenta como o Adobe Illustrator.
2. Importar a forma em uma ferramenta como o Adobe Photoshop e dimensionar uma imagem de 48×48 px em um fundo transparente. Cuidado com o safeframe.
3. Adicionar os efeitos observados, como descrito na Figura 8.
4. Exportar o ícone de 48×48 como um arquivo PNG com transparência habilitado.
.

“O que fazer e o que não se deve fazer”

.

Abaixo segue alguns exemplos do que se deve e não se deve fazer, ou seja, seguir os padrões é importante.

Autor(a)

Eduardo Horvath

Comentários (4)

  1. Android UI Guidelines | DClick Team Weblog [pt]
    29 de novembro de 2010

    […] Ícones do Menu […]

  2. Fernando Valentini
    2 de dezembro de 2010

    Estou tentar colocar um comentário e esta dando o erro 404

  3. eduardo.horvath
    3 de dezembro de 2010

    Acho que o problema já foi solucionado, tente novamente por favor.

  4. Emilly
    27 de maio de 2014

    muito massa ficar por detro

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *