Você não está conectado. Conecte-se ou registre-se

Power Pixel » Design Zone » Tutoriais e Dicas » Dicas e Conceitos » Projetando ícones de produtos Android

Projetando ícones de produtos Android

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 Projetando ícones de produtos Android em Sex 24 Nov 2017 - 13:41

BSVS

Administrador


avatar
Projetando ícones de produtos Android


No final do ano passado, o Google revelou suas novas diretrizes para os ícones do Iniciador de Android, ou "Ícones do Produto", como eles são agora referidos. É um esforço fantásticamente bem documentado para guiar mais fortemente os designers para uma linguagem visual unificada e provavelmente é a melhor coisa ter acontecido nos ícones no Android. Por conseguinte, é muito atrasado que eu lance um novo modelo para ícones de produtos Android. Os membros podem avançar e baixar o modelo aqui, ou leia um pouco mais detalhadamente sobre os principais diferenciadores de ícones de produtos no Android.





As restrições são uma lei natural quando se trabalha com ícones e, durante muitos anos, ícones no Android tem sido uma terra desavergonhada. Isso tem sido em grande parte devido à falta de restrições e a um conjunto unificador de diretrizes exigíveis. No iOS estamos todos vinculados pelo squirclee, sem transparência permitida, os designers são canalizados para uma tela mais simplificada. Se você já projetou um ícone para qualquer versão do Android, você saberá que você pode fazer basicamente tudo o que quiser dentro desses 512 × 512 pixels. Sem restrições no canal alfa, todas as formas e efeitos concebíveis são encontradas em todos os ícones no Google Play. Alguns poucos tamanhos e formas comuns dentro dessas vastas telas transparentes foram tentados, mas mesmo o próprio Google mudaram de idéia em mais de uma ocasião. Então a liberdade é boa, certo? Não quando você está olhando para o ponto de vista da consistência da experiência do usuário. Tendo compartilhado semelhanças entre ícones, crie um sistema operacional muito mais agradável, explorável e confiável. O Google sabe disso e o Google deu grandes passos na limpeza do micro cosmos que são aplicativos Android de terceiros com suas diretrizes de design de materiais bem documentadas. Os ícones agora também são parte desse esforço e com um modelo atualizado, espero que seja mais fácil para você fazer parte desse movimento também.


É assim que o novo Modelo de Ícone do Produto parece


~



Então, como as diretrizes do Ícone do Produto Android ajudam os desenvolvedores do Android a unificar seus projetos de ícones? Através de uma série de guias em vários aspectos. Ao invés de parafrasear a diretriz de estilo de ícone de produto inteiro (e muito excelente) , eu vou me concentrar em algumas coisas que meu modelo também irá ajudá-lo. Quando você terminar de ler isso, você deve entender os conceitos básicos que compõem o design do ícone do produto e como esse modelo o ajudará a dominar esses.




A Grade de Ícones do Produto Android






A grade para ícones de produtos Android não só ajuda a orientar a composição de elementos dentro de um ícone, mas também descreve as principais formas de linha chave. No novo modelo você obviamente encontrará o sistema de grade para guiá-lo no seu layout, mas você também encontrará formas base pré-renderizadas dos retângulos quadrados, circulares, horizontais e verticais. Cada forma de linha-chave descrita na orientação de material do Google e cada forma disponível como pastas individuais no modelo.


As formas padronizadas do Keyline do ícone do produto Android, todas agrupadas no modelo mais recente





Você não tem para seguir essas formas, mas é um excelente começo e provavelmente serve como uma das mais fortes fontes de consistência em ícones criados sob essa nova direção. Construir uma dessas formas básicas irá, desde o início, dar alguma legitimidade ao seu ícone. Naturalmente, irá se encaixar com outros ícones, homenageando a nova grade e criando uma maior sensação de coesão. Conforme descrito acima, tanto a força quanto a fraqueza dos ícones de aplicativos para Android é a capacidade de criar silhuetas únicas - algo que não podemos fazer no iOS. É uma força porque o designer é menos restrito na busca de conceitos inovadores que podem se destacar mais facilmente. É uma fraqueza porque abre a porta à fragmentação visual. A grade e as formas de linha-chave são a maneira do Google de tentar unir esses dois opostos.


Iluminação e cores


A abordagem de design é inspirada pela qualidade tátil e física do material. Aqui está um protótipo físico, estudo de iluminação, protótipo de material e estudo de cores (da diretriz de design de material)









O núcleo do design de material é a tactilidade e a física sutil das coisas. Para a maioria das intenções e propósitos isso é alcançado através da iluminação. O Google usa a analogia do papel cortado, dobrado e aceso. 


"A qualidade do material é robusta, com dobras limpas e bordas frescas. O acabamento Matte-like interage com a luz através de destaques sutis e sombras consistentes. "- Google


Isso dá origem a um padrão de iluminação geralmente previsível; uma sombra de gota sutil diretamente embaixo de componentes, seguida da agora longa e famosa sombra. Normalmente, um gradiente de 45 graus que passou de preto para preto translúcido caiu para cerca de 20-40% de opacidade. Estes são todos os estilos de camada que podem ser encontrados dentro do modelo para que você possa criar suas próprias sombras.


A infame sombra longa também foi agrupada como um estilo no PSD





Além disso, o esquema de cores é ordenadamente organizado e você não precisa passar muito tempo na apresentação impressionante das paletas para apreciar a quantidade de trabalho e cuidados que tem escolhido. O modelo de Ícone do Produto Android vem incluído com as 28 cores base combinadas com as 5 cores sombra do núcleo e brancas para matiz.









O acima é as cores sugeridas para ícones de produtos Android a partir da seção de ícone nas diretrizes do material. 
"As bordas superior e inferior dos elementos materiais proporcionam uma sensação de profundidade e superfície "- Google





As bordas de materiais têm uma espessura de 1 dp de matiz transparente de 20% (acima) ou sombra (de baixo). O esquema de cores determina quais matizes e sombras vão com os agrupamentos de cores. Todos estes são agrupados com o modelo como camadas mascaradas separadas que podem ser ativadas e desativadas para uma fácil experimentação


Cada cor nas diretrizes é ordenadamente organizada como camadas mascaradas no PSD para fácil experimentação e valor correto de matiz e sombra.





A maioria dos ícones apresenta um acabamento muito sutil consistindo de uma fonte de luz virtual de 45 graus. Ele se estende do canto superior esquerdo para a borda exterior da silhueta dos ícones. Isso é fornecido como uma única camada recortada no modelo para que você possa aplicá-lo facilmente aos seus próprios ícones.


Geometria e Anatomia
 Vale a pena examinar os padrões predefinidos que foram determinados para cada forma de linha chave específica. Uma série de círculos, quadrados, retângulos, ortogonais e diagonais compõem uma pequena paleta de elementos que tentam unificar a linguagem visual geométrica e sistematizar sua colocação na grade.


Aprenda a linguagem geométrica para criar experiências visivelmente coesivas e consistentes.





Por causa da abordagem muito física, faz sentido pensar sobre a anatomia do ícone e sobre como cada componente é construído em cima de outros componentes no ícone. O Google descreve a construção clássica de ícones como um conjunto de componentes em camadas: Terminar 
Material de fundo 
Material de primeiro plano 
Cor 
Sombra


Componentes vistos diretamente de cima. Direito: um exemplo de perspectiva explodida da construção de componentes.





Vale a pena familiarizar-se com esses elementos e o Google tem uma repartição muito boa nas diretrizes . 
Há muito mais nas diretrizes oficiais e eu sugiro que você examine isso antes de criar sua obra-prima. O Google fez seu dever de casa e produziu um documento de design estelar que estabelece regras para um ambiente muito mais eficiente de ícones na plataforma. O modelo PSD que forneci fornece uma base que facilita a construção com o benefício óbvio de que você esperou desses modelos; escala de objeto inteligente, visualização de meio ambiente e ação de ação de um clique de exportação de todos os tamanhos. O modelo antigo foi há muito atrasado para uma atualização e, espero, este ajudará a habilitar os ícones do Android para começar a produzir gemas fantásticas sob a forte orientação das diretrizes relevantes do Google.




Traduzido por Google Tradutor
Créditos ApplyPixels



Ver perfil do usuário

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum