Conception d'icônes de produits Android - Appliquer Pixels

Fin de l'année dernière, Google a révélé leurs nouvelles lignes directrices pour les icônes Android Launcher, ou « icônes produit comme on les appelle maintenant. Il est un effort bien documenté fantastiquement pour guider plus fortement les concepteurs vers un langage visuel unique et il est probablement la meilleure chose à avoir jamais arrivé icônes sur Android. Il est donc très en retard que je lance un nouveau modèle pour Android icônes produit. Les membres peuvent aller à droite avant et télécharger le modèle ici. ou lire un peu plus en profondeur sur les principaux différenciateurs d'icônes produit sur Android.







Conception d'icônes de produits Android - Appliquer Pixels

Alors, comment les lignes directrices Icon produit Android aident les développeurs Android unifient leurs conceptions icône? Grâce à une série de guides sur plusieurs aspects. Plutôt que de paraphraser l'ensemble (et très excellent) guide la conception de matériel de style icône du produit. Je vais me concentrer sur un certain nombre de choses que mon modèle aussi vous aider. Lorsque vous avez fini de lire cela, vous devez comprendre les concepts de base qui composent la conception icône du produit et comment ce modèle vous aidera à maîtriser ceux-ci.

Grille et formes Keyline

La grille pour les applications icônes produit non seulement aider à guider la composition des éléments à l'intérieur d'une icône, il présente également les formes de base Keyline. Dans le nouveau modèle, vous trouverez évidemment le système de grille pour vous guider dans votre mise en page, mais vous trouverez également des formes de base pré-rendus des carrés, des rectangles, cercle horizontal et vertical. Chaque forme Keyline décrit dans la ligne directrice de matériel de Google et chaque forme disponible sous forme de dossiers individuels dans le modèle.

Éclairage - Couleurs

Le cœur même de la conception matérielle est tactilité et le subtil aspect physique des choses. Pour la plupart des fins ceci est réalisé grâce à l'éclairage. Google utilise l'analogie du papier découpé, plié et lit.

La qualité du matériau est solide, avec des plis propres et des bords nets. La finition mate comme interagit avec la lumière à travers de subtiles lumières et les ombres cohérentes « -. Google

Cela donne naissance à un modèle d'éclairage généralement prévisible; une ombre subtile composants directement en dessous, suivi de l'ombre longue désormais célèbre. Habituellement, un 45 gradient de degré allant du noir au noir translucide a chuté jusqu'à environ 20 à 40% d'opacité. Ce sont tous les styles de calque qui peuvent être trouvés à l'intérieur du modèle afin que vous puissiez créer vos propres ombres.







En outre, le schéma de couleurs est parfaitement organisé et vous n'avez pas à passer de longues regarder la présentation impressionnante des palettes d'apprécier la quantité de travail et de soins qui ont été consacrés à la sélection ceux-ci. Le modèle Icon produit Android est livré avec les 28 couleurs de base combiné avec les couleurs d'ombre 5 de base et blanc pour la teinte.

Conception d'icônes de produits Android - Appliquer Pixels
Conception d'icônes de produits Android - Appliquer Pixels
Conception d'icônes de produits Android - Appliquer Pixels
Conception d'icônes de produits Android - Appliquer Pixels
Conception d'icônes de produits Android - Appliquer Pixels

Ce qui précède est les couleurs proposées pour Android Icônes des produits de la section d'icône dans les lignes directrices matérielles.

Les bords supérieur et inférieur des éléments matériels fournissent un sens de la profondeur et de surface » - Google

Conception d'icônes de produits Android - Appliquer Pixels

bords de matériau ont chacune une épaisseur de 1DP de teinte transparente à 20% (ci-dessus) ou la nuance (par le bas). La palette de couleurs dicte ce que les teintes et les nuances vont avec quels groupes de couleurs. Tous ces éléments sont fournis avec le modèle en tant que couches masquées séparées qui peuvent être activées et désactivées pour l'expérimentation facile.

La plupart des icônes disposent d'une finition très subtile composé d'une source lumineuse virtuelle de 45 degrés. Il étend à partir du coin supérieur gauche au bord extérieur de la silhouette des icônes. Ceci est fourni en une seule couche clipsé dans le modèle afin que vous puissiez facilement l'appliquer à vos propres icônes.

Géométrie - Anatomie

Il vaut la peine de jeter un oeil aux normes prédéfinies qui ont été déterminées pour chaque forme Keyline spécifique. Une série de cercles, des carrés, des rectangles, orthogonales et diagonales forment une petite palette d'éléments qui tentent d'unifier le langage visuel géométrique et systématiser leur placement sur la grille.

En raison de l'approche très physique, il est logique de penser à l'anatomie de l'icône et comment est construit chaque composant au-dessus des autres composants de l'icône. Google décrit la construction classique des icônes comme un ensemble de composants en couches:

  1. terminer
  2. Renseignements généraux
  3. premier plan matériel
  4. Couleur
  5. Ombre

Il vaut la peine de vous familiariser avec ces éléments et Google a une répartition très propre dans les lignes directrices.

Conception d'icônes de produits Android - Appliquer Pixels

Comment concevoir une meilleure appli Icônes