Conception d'icônes adaptatives

Android O introduit un nouveau format d'icône d'application: les icônes adaptatives. Les icônes adaptatives peuvent rendre les appareils plus cohérents en unifiant la forme de toutes les icônes d'application et en ouvrant la porte à des effets visuels intéressants. Cet article explique comment ils fonctionnent et explore quelques techniques pour les concevoir.

Pour en savoir plus sur l'origine de cette fonctionnalité, voir:

Fondamentaux

La taille et la forme

Les icônes adaptatives ont une taille de 108dp * 108dp mais sont masquées à un maximum de 72dp * 72dp. Différents appareils peuvent fournir différents masques qui doivent être de forme convexe et atteindre au moins 33dp du centre par endroits.

Exemples de masques de différentes formes appliqués

En raison de la portée minimale du masque, vous pouvez considérer un cercle de 66dp de diamètre centré comme une zone sécurisée, garantie de ne pas être coupée.

Zone de sécurité dans un masque carré arrondi

Lignes de touche

Icône keylines

Les formes de trait de trait constituent la base de la grille d’icônes, permettant aux proportions visuelles de votre icône d’être cohérentes avec les icônes des autres applications. Les formes de trait sont:

  • Cercles: diamètre 52dp et 36dp
  • Carré: 44dp * 44dp, rayon de coin 4dp
  • Rectangles: 52dp * 36dp et 36dp * 52dp, rayon de coin 4dp

Voir les modèles inclus à la fin de cet article.

Couches

Les icônes adaptatives sont en réalité composées de deux couches; un premier plan et un fond. Les deux couches ont 108dp * 108dp; l'arrière-plan doit être complètement opaque, tandis que l'avant-plan peut comporter une transparence. Ces couches sont empilées les unes sur les autres.

Fournir des éléments dans deux calques séparés qui sont plus grands que la taille affichée (c'est-à-dire masquée) crée l'occasion de traitements et d'animations visuels intéressants. Exactement quels effets peuvent être appliqués et quand est encore une question ouverte; il appartient aux fabricants de périphériques et de lanceurs de décider. Voici quelques exemples simples que vous pouvez imaginer: parallaxe ou pulsation en traduisant indépendamment ou en redimensionnant chaque couche avant d’appliquer le masque.

Comme les icônes 108dp * 108dp sont masquées jusqu'à 72dp * 72dp, les 18dp externes de chaque côté peuvent être considérés comme du contenu «supplémentaire», révélé uniquement pendant le mouvement.

Considérations sur la conception

Les directives de conception des matériaux pour la création d’icônes de produits sont toujours valables. Plus précisément, l’anatomie, les ombres et la finition des icônes restent, mais vous pouvez maintenant placer des éléments dans les calques d’avant-plan ou d’arrière-plan, ce qui produit différents effets.

Maintenant, je suis sûr que de nombreuses icônes seront bien servies en plaçant leur marque au premier plan sur un fond de couleur unie et en l'appelant un jour. Cela garantira que votre icône s'intègre bien dans l'appareil. Ce qui me passionne, c’est comment notre communauté va explorer ces nouvelles contraintes et trouver des moyens intéressants, ludiques et novateurs de créer de ravissantes icônes. Voici quelques points à garder à l’esprit et quelques idées à explorer.

Coupure

En raison de la nature dynamique des icônes adaptatives, vous ne pouvez pas connaître la forme exacte du masque à appliquer. Pour cette raison, il est préférable de placer tout élément critique tel que votre marque dans la zone de sécurité et de rester à l’écart des bords du masque.

Ancrage de fond

En plaçant certains éléments qui peuvent sembler être au premier plan, en fait à l’arrière-plan, ils se déplaceront indépendamment. Par exemple, l'application de la calculatrice place la plupart des éléments au premier plan, mais le bouton égal à sur le bloc de couleur d'accent à l'arrière-plan:

Des éléments sur différentes couches soulignent la superposition

Cela crée des possibilités de mouvement intéressantes dans lesquelles vous ancrez visuellement le bloc de couleurs vives, mais qui se déplace moins que les éléments de premier plan, créant une sensation de profondeur.

Masques masqués

Je pense qu'il peut y avoir des possibilités intéressantes de placer des éléments de masquage au premier plan - c'est-à-dire des éléments solides avec des zones découpées. Considérons une icône possible pour le Google Play Store. Celle-ci pourrait être construite de manière "évidente", c'est-à-dire placer le triangle coloré au premier plan sur un fond blanc.

Un premier plan

Au lieu de cela, nous pourrions utiliser un arrière-plan coloré et un avant-plan blanc avec le triangle soustrait pour produire le même résultat statique:

Un fond coloré alternatif avec le masquage au premier plan

Cette configuration permettrait aux couleurs «survolant» de se déplacer indépendamment du masque, révélant différentes parties de l’arrière-plan lors de la traduction ou de la réduction.

Left est une composition régulière; À droite avec un premier plan masquant

Lumière et ombres

L'interaction des effets de lumière et des ombres placés dans des calques séparés peut avoir des résultats intéressants. Par exemple, l’utilisation de la technique des ombres portées sur l’élément de premier plan peut avoir une interaction ludique lorsqu’il se déplace dans la zone masquée. De même, les effets d'éclairage peuvent être placés dans la couche de premier plan plutôt que d'être cuits à l'arrière-plan. Par exemple, une couche "finition" peut être placée au premier plan pour émuler une source de lumière. Le placer au premier plan signifie qu'il sera lu par-dessus le calque d'arrière-plan, à une vitesse différente de celle du disque.

Exemple d'ombre au premier plan et de source de lumière (exagérée) sur l'arrière-plan

Veillez à ne pas créer d’effet qui n’a pas de sens, par exemple. une ombre se détachant d'un élément de premier plan ou se déplaçant derrière un élément de fond. N'oubliez pas non plus que de nombreuses icônes sont susceptibles d'être vues ensemble, alors soyez prudent avec des effets de lumière sur mesure et respectez les consignes relatives aux matériaux.

Laisser derrière

Vous pouvez placer des éléments dans le calque d'arrière-plan qui sont complètement masqués par le calque au premier plan et qui ne sont révélés que sous la forme d'un mouvement.

Éléments révélés uniquement sous mouvement

Ressources et outils

Voici mon fichier de croquis que vous pouvez utiliser comme modèle lors de la création d’icônes adaptatives. Il comprend la grille d'icônes, les formes de lignes de clé et la zone de sécurité. Il est implémenté en tant que symbole. Ainsi, si vous modifiez l’élément principal, les copies seront mises à jour, ce qui vous donnera un aperçu avec différents masques appliqués.

J’ai également téléchargé un modèle Adobe Illustrator si c’est plus votre choix.

Découvrez également ces autres ressources que j'ai rencontrées:

  • Outil de prévisualisation adaptatif d'icônes
  • Modèle de concepteur d'affinité
  • Les modèles Bjango incluent des icônes adaptatives
  • Modèle Figma (nécessite une connexion)
  • Modèle Adobe XD

Terrain de jeu d'icônes adaptatif

En développant des icônes adaptatives, j’ai fini par comprendre que bon nombre des subtilités proviennent de l’interaction des éléments d’avant-plan et d’arrière-plan lorsqu’on applique des effets de mouvement. C'est encore une question ouverte, car nous ne savons pas encore comment les fabricants de périphériques et de lanceurs vont implémenter cela. Pour aider à explorer cet espace, j'ai créé une petite application de test pour vous aider à l'évaluer tout en créant votre icône:

Expérimentez avec des masques et des effets de mouvement appliqués à vos icônes

L'application affiche toutes les applications installées sur votre appareil avec des icônes adaptatives. Faire défiler la grille applique des effets de parallaxe aux icônes et toucher une icône applique un effet d'échelle. Vous pouvez configurer la force des effets et changer le masque appliqué à toutes les icônes. J'espère que cet outil vous aidera à prévoir comment votre icône apparaîtra et pourra se déplacer sur différents appareils.

Vous pouvez télécharger un APK ou extraire le code source sur github:

Aller de l'avant et adapter

J'espère que cet article vous a fourni à la fois les informations et l'inspiration nécessaires pour concevoir une icône adaptative géniale pour votre application. En tant qu'utilisateur, je ne peux pas attendre que mes applications deviennent plus cohérentes. Ce qui me passionne encore plus, c’est de voir les solutions créatives que nous proposons en tant que communauté.

Si vous êtes un développeur qui souhaite créer une icône adaptative, rejoignez-moi dans la troisième partie: Implémentation des icônes adaptatives.