Projetando ícones adaptáveis

O Android O introduz um novo formato de ícone de aplicativo: ícones adaptáveis. Os ícones adaptáveis ​​podem tornar os dispositivos mais coerentes, unificando a forma de todos os ícones de aplicativos e abrindo a porta para efeitos visuais interessantes. Este post explica como eles funcionam e explora algumas técnicas para projetá-los.

Para uma retrospectiva de onde esse recurso veio, consulte:

Fundamentos

Tamanho e forma

Os ícones adaptativos têm tamanho de 108dp * 108dp, mas são mascarados para um máximo de 72dp * 72dp. Dispositivos diferentes podem fornecer máscaras diferentes, que devem ter formato convexo e podem chegar a um mínimo de 33dp do centro em alguns locais.

Exemplos de máscaras de diferentes formatos sendo aplicadas

Devido ao alcance mínimo da máscara, você pode considerar um círculo centrado de 66dp de diâmetro como uma zona segura, garantida para não ser cortada.

Zona segura dentro de uma máscara quadrada arredondada

Keylines

Linhas principais do ícone

As formas das linhas principais são a base da grade de ícones, ajudando as proporções visuais do seu ícone a serem consistentes com os ícones de outros aplicativos. As formas das linhas principais são:

  • Círculos: 52dp e 36dp de diâmetro
  • Quadrado: 44dp * 44dp, raio de canto 4dp
  • Retângulos: 52dp * 36dp & 36dp * 52dp, raio de canto 4dp

Veja os modelos incluídos no final deste artigo.

Camadas

Ícones adaptativos são realmente compostos de duas camadas; um primeiro plano e um plano de fundo. Ambas as camadas são 108dp * 108dp; o plano de fundo deve ser totalmente opaco, enquanto o primeiro plano pode incluir transparência. Essas camadas são empilhadas umas sobre as outras.

O fornecimento de elementos em duas camadas separadas, maiores que o tamanho exibido (ou seja, mascarado), cria a oportunidade de tratamentos visuais e animações interessantes. Exatamente quais efeitos podem ser aplicados e quando ainda é uma questão em aberto; cabe aos fabricantes de dispositivos e lançadores decidirem. Aqui estão alguns exemplos simples que você pode imaginar: paralaxe ou pulsação, traduzindo ou dimensionando independentemente cada camada antes de aplicar a máscara.

Como os ícones 108dp * 108dp são mascarados até 72dp * 72dp, os 18dp externos de cada lado podem ser considerados o conteúdo "extra", revelado apenas durante o movimento.

Considerações sobre design

As diretrizes de design de material para a criação de ícones de produtos ainda se aplicam muito. Especificamente, a anatomia do ícone, as sombras e o acabamento permanecem, mas agora você pode colocar elementos nas camadas de primeiro ou segundo plano produzindo efeitos diferentes.

Agora, tenho certeza de que muitos ícones serão bem servidos colocando a marca em primeiro plano em um plano de fundo colorido e chamando-a de dia. Isso garantirá que seu ícone se encaixe bem no dispositivo. O que me excita é como nós, como comunidade, vamos explorar essas novas restrições e encontrar maneiras interessantes, divertidas e inovadoras de criar ícones deliciosos. Aqui estão algumas coisas a serem lembradas e algumas idéias a serem potencialmente exploradas.

Clipping

Devido à natureza dinâmica dos ícones adaptáveis, não é possível saber a forma exata da máscara que será aplicada. Por esse motivo, é melhor colocar elementos críticos como a marca da sua marca dentro da zona segura e ficar longe das bordas da máscara.

Ancoragem de fundo

Colocar alguns elementos que podem parecer em primeiro plano, na verdade, em segundo plano significa que eles se moverão independentemente. Por exemplo, o aplicativo da calculadora coloca a maioria dos elementos em primeiro plano, mas o botão igual no bloco de cores de destaque em segundo plano:

Elementos em diferentes camadas enfatizam as camadas

Isso cria oportunidades interessantes de movimento onde você ancora visualmente o bloco de cores brilhantes, mas move menos que os elementos do primeiro plano, criando uma sensação de profundidade.

Máscaras mascaradas

Eu acho que pode haver oportunidades interessantes para colocar elementos de máscara em primeiro plano - ou seja, elementos sólidos com áreas cortadas. Considere um possível ícone para a Google Play Store, que pode ser construído de maneira "óbvia", que é colocar o triângulo colorido em primeiro plano, sobre um fundo branco.

Um primeiro plano 'padrão' colocado sobre um fundo branco

Em vez de fazer isso, podemos usar um plano de fundo colorido e um primeiro plano branco com o triângulo subtraído para produzir a mesma saída estática:

Um fundo colorido alternativo com mascaramento de primeiro plano

Essa configuração permitiria que as cores "espreitando" se movessem independentemente da máscara, revelando diferentes partes do plano de fundo quando traduzidas ou redimensionadas.

Esquerda é uma composição regular; Direito com um primeiro plano de máscara

Luz e sombras

A interação de efeitos de iluminação e sombras colocadas em camadas separadas pode ter resultados interessantes. Por exemplo, o uso da técnica de sombra longa no elemento em primeiro plano pode ter uma interação divertida à medida que se move dentro da área mascarada. Da mesma forma, os efeitos de iluminação podem ser colocados na camada de primeiro plano, em vez de serem inseridos no fundo. Por exemplo, uma camada de 'acabamento' pode ser colocada em primeiro plano para emular uma fonte de luz. Colocar isso em primeiro plano significa que ele será reproduzido sobre a camada de fundo quando estiver em movimento, movendo-se a uma taxa diferente.

Exemplo de sombra de primeiro plano e fonte de luz (exagerada) lançada no fundo

Cuidado para não criar um efeito que não faça sentido, por exemplo uma sombra destacando-se de um elemento em primeiro plano ou movendo-se atrás de um elemento em segundo plano. Lembre-se também de que muitos ícones provavelmente serão vistos juntos; portanto, seja conservador com efeitos de iluminação sob medida e fique próximo às diretrizes do material.

Deixe para trás

Você pode colocar elementos na camada de plano de fundo que são completamente obscurecidos pela camada de primeiro plano e revelados apenas em movimento.

Elementos revelados apenas em movimento

Recursos e ferramentas

Aqui está o meu arquivo de esboço que você pode usar como modelo enquanto cria ícones adaptáveis. Inclui a grade de ícones, formas das linhas principais e área segura. Ele é implementado como um símbolo para que a alteração do elemento mestre atualize as cópias, fornecendo uma visualização com diferentes máscaras aplicadas.

Também enviei um modelo do Adobe Illustrator, se é isso que você gosta.

Além disso, confira esses outros recursos que encontrei:

  • Ferramenta de visualização de ícones adaptável
  • Modelo do Affinity Designer
  • Modelos de Bjango incluem ícones adaptáveis
  • Modelo Figma (requer login)
  • Modelo do Adobe XD

Campo de jogos adaptável do ícone

Ao desenvolver ícones adaptativos, percebi que muitas das sutilezas vêm da interação dos elementos de primeiro e segundo plano quando os efeitos de movimento são aplicados. Isso ainda é uma questão em aberto, pois ainda estamos para ver como os fabricantes de dispositivos e lançadores implementarão isso. Para ajudar a investigar esse espaço, criei um pequeno aplicativo de teste para ajudá-lo a avaliar enquanto cria seu ícone:

Experimente máscaras e efeitos de movimento aplicados aos seus ícones

O aplicativo exibe todos os aplicativos instalados no seu dispositivo com ícones adaptáveis. Rolar a grade aplica efeitos de paralaxe aos ícones e tocar em um ícone aplica um efeito de escala. Você pode configurar a força dos efeitos e alterar a máscara aplicada a todos os ícones. Esperamos que esta ferramenta ajude você a visualizar como o ícone aparecerá e poderá se mover em diferentes dispositivos.

Você pode baixar um APK ou fazer o checkout da fonte no github:

Vá em frente e se adapte

Esperamos que esta postagem tenha lhe dado as informações e alguma inspiração para criar um ícone adaptável incrível para o seu aplicativo. Como usuário, mal posso esperar para que meus aplicativos se tornem mais coerentes. O que mais me empolga ainda mais é ver que soluções criativas encontramos como comunidade.

Se você é um desenvolvedor que deseja criar um ícone adaptável, junte-se a mim na parte 3: Implementando ícones adaptáveis.