Designing Android Produkt Icons - Anwenden Pixel

Ende letzten Jahres enthüllt Google ihre neuen Leitlinien für Android Launcher Symbole oder ‚Produkt Icons', wie sie jetzt genannt werden. Es ist ein fantastisch gut dokumentiert Bemühungen stärker Designer in Richtung einer einheitlichen Bildsprache zu führen, und es ist wahrscheinlich das Beste, was jemals auf Symbole auf Android passiert ist. Es ist daher schon lange überfällig, dass ich eine neue Vorlage für Android Produkt Icons zu starten. Die Mitglieder können nach rechts weiter gehen und die Vorlage hier herunterladen. oder lesen Sie weiter für ein wenig mehr in die Tiefe auf den wichtigsten Unterscheidungsmerkmale der Produktsymbole auf Android.

Wie funktioniert die Android Produkt Icon Richtlinien helfen Android-Entwickler ihre Icon-Designs vereinen? Durch eine Reihe von Führungen zu verschiedenen Aspekten. Anstatt die gesamte (und sehr sehr gut) Material-Design Produkt Ikonenart Richtlinie paraphrasieren. Ich werde auf ein paar Dinge konzentrieren, die meine Vorlage wird Ihnen auch helfen, mit. Wenn Sie dies getan lesen, sollten Sie die grundlegenden Konzepte verstehen, die Produkt Icon Design bilden und wie diese Vorlage wird Ihnen helfen, diese zu meistern.

Gitter und Keyline Formen

Das Raster für Android Produktsymbole nicht nur helfen, die Zusammensetzung der Elemente in einem Symbol führen, umreißt auch die keyline Formen Kern. In der neuen Vorlage finden Sie natürlich die Gittersystem Sie in Ihrem Layout zu führen, aber Sie werden auch vorgerenderten Grundformen der Quadrat, Kreis, horizontale und vertikale Rechtecke finden. Jede keyline Form beschrieben in der Google-Material-Richtlinie und jede Form als einzelne Ordner in der Vorlage.

Beleuchtung - Farben

Der Kern des Materialdesigns ist Taktilität und die subtile Körperlichkeit der Dinge. Für die meisten Absichten und Zwecke wird dies durch Beleuchtung erreicht. Google verwendet die Analogie Papier, das geschnitten, gefaltet und lit.

Die Qualität des Materials ist robust, mit sauberen Falte und scharfen Kanten. Die Matte artige Oberfläche in Wechselwirkung mit Licht, das durch subtile Highlights und konsistente Schatten.“- Google

Dies gebiert ein allgemein vorhersagbar Beleuchtungsmuster; ein subtiler Schlagschatten direkt unter Komponenten, durch die inzwischen berühmten langen Schatten gefolgt. Normalerweise wird eine 45-Grad-Steigung von schwarz zu schwarz transluzent gehen sank auf etwa 20-40% Opazität. Diese sind alle Ebenenstile, die in der Vorlage gefunden werden kann, so dass Sie Ihre eigenen Schatten zu bauen.

Des Weiteren wird das Farbschema ordentlich organisiert und man muss nicht lange verbringen an der beeindruckenden Präsentation der Paletten suchen, um die Menge an Arbeit und Sorgfalt zu schätzen, die in der Auswahl diejenigen gegangen ist. Die Android-Produkt Icon Vorlage kommt mit den 28 Grundfarben gebündelt mit den 5 Kernschatten kombiniert Farben und Weiß für Farbton.

Die oben sind die vorgeschlagenen Farben für Android Produktsymbole aus dem Symbol Abschnitt in den Materialrichtlinien.

Die oberen und unteren Ränder der Materialelementen ein Gefühl der Tiefe und Fläche“- Google

Materialkanten weisen jeweils eine 1dP Dicke von 20% transparent Farbton (von oben) oder im Schatten (von unten). Die Farbgebung diktiert, was Farbtöne und Schattierungen mit dem, was Gruppierungen von Farben. Alle diese werden mit der Vorlage als separate maskierte Schichten gebündelt, die auf und ab für die einfache Experimente gedreht werden kann.

Die meisten Icons verfügen über eine sehr feine Oberfläche, bestehend aus einer virtuellen 45-Grad-Lichtquelle. Es erstreckt sich von der linken oberen Ecke an der Außenkante der Schattenbild-Icons. Dies wird als eine einzelne Schicht abgeschnitten in der Vorlage vorgesehen, so dass Sie leicht auf Ihre eigenen Icons anwenden können.

Geometrie - Anatomie

Es lohnt sich einen Blick auf die vorgegebenen Standards nehmen, die für jede spezifische keyline Form bestimmt wurden. Eine Reihe von Kreisen, Quadraten, Rechtecke, Orthogonalen und Diagonalen bildet eine kleine Palette von Elementen, bis versucht wird, die geometrische Bildsprache und systematisiert ihre Platzierung auf dem Netz zu vereinigen.

Aufgrund des sehr physischen Ansatzes macht es Sinn, über die Anatomie des Symbols zu denken und wie jede Komponente auf anderen Komponenten in dem Symbol aufgebaut ist. Google beschreibt den klassischen Bau von Symbolen als eine Reihe von geschichteten Komponenten:

1. Fertig
2. Material Hintergrund
3. Material Vordergrund
4. Farbe
5. Schatten

Es lohnt sich, sich mit diesen Elementen vertraut zu machen und Google hat eine sehr ordentliche Aufschlüsselung in den Leitlinien.

Wie man besser App Icons Entwerfen