App-Symbole entwerfen und in der Vorschau ansehen

1. Einführung

Letzte Aktualisierung:04.08.2022

Ab Android 13 können Nutzer das Design ihrer adaptiven Launcher-Symbole anpassen. Mit dieser Funktion werden App-Symbole in unterstützten Android-Launchern so eingefärbt, dass sie die Farben des vom Nutzer ausgewählten Hintergrundbilds und anderer Designs übernehmen.

Erstellen Sie ganz einfach alle System-Assets, die für Ihre Android-App erforderlich sind, einschließlich der neuen adaptiven Farbsymbole.

Lerninhalte

Die verschiedenen Arten von App-Symbolen und Tipps für das Design.
Die Figma-Vorlage für den Android-Launcher verwenden.
Den Asset-Generator von Android Studio verwenden.
Eine Vorschau des Launcher-Symbols mit dem Android Studio-Emulator ansehen.

Vorbereitung

Grundlegende Kenntnisse in Figma
Optional: App-Symbol-Artwork (Vordergrund, Hintergrund und monochrom)

Voraussetzungen

2. Jetzt starten

Einrichtung

Zuerst müssen Sie auf die Figma-Datei für Android-App-Symbole zugreifen.

Melden Sie sich in Figma an oder erstellen Sie ein Konto.

Aus der Figma-Community duplizieren

Rufen Sie die Vorlagendatei für den Android-Launcher auf oder suchen Sie in der Figma-Community nach „Migrating to Variable fonts“ (Zu variablen Schriftarten migrieren). Klicken Sie rechts oben auf Get a Copy (Kopie erstellen), um die Datei in Ihre Dateien zu kopieren.

Vorlage verwenden

Die Android-Symbolvorlage besteht aus zwei Seiten:

Auf der Titelseite werden relevante Konzepte und die Verwendung der Vorlage kurz erläutert.
Die Vorlagenseite enthält alles, was Sie zum Erstellen der erforderlichen Assets benötigen. Sie ist in drei Frames unterteilt: „Color“ (Farbe), „Shape“ (Form) und „Play Store“.

Hinweis:Im linken Steuerfeld „Ebenen“ sind die meisten Ebenen und Gruppen gesperrt. Sie sollten gesperrt bleiben. Sie können Artwork in den entsperrten Artwork-Gruppen platzieren.

Bevor wir mit dem Erstellen von Assets beginnen, sehen wir uns an, was wir erstellen werden.

3. Android-Systemsymbole

Launcher-Symbole

Launcher-Symbole oder App-Symbole sind ein wesentlicher Bestandteil der App-Startseite. Sie werden auf dem Startbildschirm als Einstiegspunkt in Ihre App angezeigt.

Automatische Formanpassung

Ein adaptives Symbol oder AdaptiveIconDrawable kann je nach den individuellen Gerätefunktionen und dem Nutzerdesign unterschiedlich angezeigt werden. Adaptive Symbole werden hauptsächlich vom Launcher auf dem Startbildschirm verwendet, können aber auch in Verknüpfungen, in der App „Einstellungen“, in Dialogfeldern zum Teilen und auf dem Übersichtsbildschirm genutzt werden.

Ein adaptives Symbol kann auf verschiedenen Gerätemodellen in unterschiedlichen Formen dargestellt werden. Beispielsweise lässt sich ein adaptives Launcher-Symbol je nach OEM-Gerät entweder als Kreis oder als abgerundetes Quadrat darstellen. Jeder Geräte-OEM muss eine Maske bereitstellen, die vom System verwendet wird, um alle adaptiven Symbole mit derselben Form zu rendern.

Durch die Möglichkeit, die Form anzupassen, kann das System auch verschiedene Animationseffekte bei der Nutzerinteraktion anwenden.

Adaptive Farbe

Adaptive Symbole können jetzt dynamische Farben verwenden, um personalisierte Designs für App-Symbole zu ermöglichen.

Wenn ein Nutzer Symboldesigns aktiviert hat (d. h. in den Systemeinstellungen den Schalter „Symboldesigns“ aktiviert hat) und der Launcher diese Funktion unterstützt, verwendet das System die Farben des vom Nutzer ausgewählten Hintergrundbilds und Designs, um die Farbgebung zu bestimmen.

Ähnlich wie Symbole, die sich an die Form anpassen, bestehen auch adaptive Farbsymbole aus einem Vordergrund und einem Hintergrund. Es muss nur ein monochromatisches Vordergrundsymbol-Asset bereitgestellt werden. Das System kümmert sich um den Hintergrund und färbt beides mit dem extrahierten Farbschema ein.

Sie können dasselbe monochrome Symbol auch für ein Benachrichtigungssymbol verwenden.

Legacy

Legacy-Symbole sollten verwendet werden, um Geräte mit älteren Android-Versionen zu unterstützen oder Geräte, die keine adaptiven Funktionen unterstützen (vor 8.0).

Sie haben keine Vorder- und Hintergrundressourcen und können eine beliebige Form haben. Wenn Sie die bereitgestellte Vorlage verwenden, wird das endgültige Artwork für die adaptive Form in den erforderlichen Größen für Ihr Legacy-Symbol exportiert.

Benachrichtigungssymbole

Eine Benachrichtigung ist eine Meldung, die Android außerhalb der Benutzeroberfläche Ihrer App anzeigt. Darin zu finden sind Erinnerungen, Nachrichten von anderen Personen oder andere aktuelle Informationen aus Ihrer App. Das System zeigt Benachrichtigungen an verschiedenen Stellen und in unterschiedlichen Formaten an. So können sie als Symbol auf der Statusleiste, als etwas detaillierterer Eintrag auf der Benachrichtigungsleiste, als Kennzeichen auf dem App-Symbol und automatisch auf gekoppelten Wearables angezeigt werden.

Store-Artwork

So haben Sie auch die Möglichkeit, Ihre App bei Google Play und anderen Google-Werbekanälen hervorzuheben und zu bewerben.

Das App-Symbol ersetzt nicht das Launcher-Symbol Ihrer App, sondern sollte eine Version in besserer Qualität und mit höherer Auflösung sein.

Ähnlich wie beim Launcher-Symbol kann Artwork den gesamten Asset-Bereich einnehmen oder Sie können Artwork-Elemente wie Logos entwerfen und im Keyline-Raster positionieren.

Sie müssen ein quadratisches App-Symbol mit 512 × 512 Pixeln angeben, damit Ihr Store-Eintrag veröffentlicht werden kann. Wenn Sie die Vorlage für Android-App-Symbole verwenden, wird dies beim Export mit dem Artwork für die automatische Formanpassung bereitgestellt.

4. Best Practices für das Design

Launcher-Symbole starten Ihre App für den Nutzer. Als Einstiegspunkt in Ihre App müssen sie erkennbar und lesbar sein. Hier sind einige Best Practices, mit denen Sie diese Eigenschaften in Ihrem Launcher-Symbol sicherstellen können.

Artwork einfach halten Vermeiden Sie mehrere Ebenen, viele Effekte und Text. Diese Details gehen bei kleinen Größen verloren oder sind schwer zu erkennen.

Komplexe Formen vermeiden Dazu gehören auch Logos. Verwenden Sie nach Möglichkeit ein vereinfachtes Logo oder eine Symbolik, die Ihre Nutzer mit Ihrer App verbinden. Eine lesbare und unverwechselbare Form sorgt für Einheitlichkeit, sodass Nutzer Ihre App in verschiedenen Kontexten leicht erkennen können (adaptive Farbe und Benachrichtigung).

Raster verwenden Nutzen Sie ein Raster oder Keylines, um sicherzustellen, dass das Vordergrund-Artwork auch beim Zuschneiden funktioniert, einschließlich Illustrationen mit Überfüllung.

Kontrast berücksichtigen Achten Sie bei adaptiven Formen und Legacy-Symbolen darauf, dass Vordergrund und Hintergrund des Symbols einen gut lesbaren Kontrast haben. Verwenden Sie keine starken Schlagschatten, die mit dem Systemschatten verwechselt werden können.

Artwork innerhalb der sicheren Bereiche halten Halten Sie Vordergrund-Assets innerhalb von 72 × 72 Pixeln (es sei denn, Sie verwenden Überfüllung). Hintergründe sollten 108 × 108 Pixel groß sein. Hinweis: Der Artwork-Frame der Symbolvorlage ist größer als 72 × 72 Pixel, damit Sie das Symbol-Artwork erstellen können. Die Größe der Assets wird entsprechend den Spezifikationen angepasst.

Vektorformat Verwenden Sie nach Möglichkeit Artwork im Vektorformat (z. B. SVG-, AI-, PDF- und EPS-Dateien) anstelle eines Rasterformats (z. B. PNG-, JPG- und GIF-Dateien). So ist Ihr Artwork mit neueren Funktionen kompatibel und lässt sich leichter bearbeiten.

5. Adaptive Farb- und Benachrichtigungssymbole

Jetzt sind Sie an der Reihe, Ihre eigenen Android-Systemsymbole zu erstellen.

Suchen Sie die Figma-Datei für Android-App-Symbole.
Suchen Sie in der Datei nach dem Frame für die adaptive Farbe. Suchen Sie im linken Steuerfeld „Ebenen“ nach „Adaptive Farbe“ > „Komponenten“ > „Art“ > „Symbol-Artwork-Bereich“ > Themed Icon art < add your icon (Symbol-Artwork mit Design < Symbol hinzufügen). Wenn Sie ein monochromatisches Symbol haben, kopieren Sie es hier, um das Beispielsymbol „Bugdroid“ zu ersetzen, und fahren Sie mit Schritt 6 fort.
Wenn Sie kein monochromatisches Symbol haben, beginnen Sie mit einem Logo oder Symbol, das mit Ihrer App in Verbindung steht. Folgen Sie den Designtipps, um Ihr Symbol zu aktualisieren. Vereinfachen Sie es zuerst und vermeiden Sie komplexe Formen. Hier werden beispielsweise Illustrationen, die in der App verwendet werden, mit weniger komplexen Blattformen vereinfacht. Schatten und Liniendetails werden mit Leerraum simuliert.
Aktualisieren Sie nun die Größe mit dem Keyline-Raster. Hier haben wir die Größe auf Scale (Skalieren) festgelegt und darauf geachtet, dass sich das Artwork im sicheren Bereich des Vordergrunds befindet. Die Vorlage ist so eingerichtet, dass das Artwork in 4-facher Größe angezeigt wird und die Größe für den Export automatisch angepasst wird. So können Sie Ihre Symbole in einem größeren Maßstab entwerfen.
Die Datei ist so eingerichtet, dass sie mit dem Material Theme Builder funktioniert, um eine Vorschau der dynamischen Farbe zu ermöglichen. Verknüpfen Sie den Farbstil des Vordergrundsymbols mit On-surface-variant (Variante für Oberfläche).
Wenn Sie nun den Material Theme Builder über das Plug‑in-Steuerfeld öffnen, können Sie entweder die Quellfarbe mischen oder ein Bild hinzufügen,um die Farben mit der extrahierten Quellfarbe zu aktualisieren.
Wie sieht das bei verschiedenen Auflösungen oder auf einem Startbildschirm aus? Die Vorlage ist so eingerichtet, dass Artwork, das in den Artwork-Frames platziert wird, in den verschiedenen Vorschaukontexten angezeigt wird.
Das System verwendet das monochrome Symbol als Benachrichtigung und zeigt es in den Vorschauen entsprechend an.

6. Adaptive Formen und Legacy-Symbole

Jetzt erstellen wir die adaptiven Formen und Legacy-Symbole, um eine breite Unterstützung des Symbols zu gewährleisten.

Suchen Sie in der Datei nach dem Frame für die Form. Suchen Sie im linken Steuerfeld „Ebenen“ nach Icon background < add your icon (Symbolhintergrund < Symbol hinzufügen). Wenn Sie ein Symbol haben, kopieren Sie es hier, um das Beispielsymbol „Bugdroid“ zu ersetzen, und fahren Sie mit Schritt 5 fort.* Wenn Sie kein Symbol haben, beginnen Sie mit einem Logo oder Symbol, das mit Ihrer App in Verbindung steht, oder verwenden Sie das monochrome Symbol wieder.
Aktualisieren Sie das Vordergrundsymbol und berücksichtigen Sie dabei die Best Practices für Symbole. Hier habe ich die ursprünglichen Farben der Illustration wiederhergestellt, aber die Details auf ein Minimum reduziert.
Aktualisieren Sie nun die Größe mit dem Keyline-Raster. Hier haben wir die Größe auf Scale (Skalieren) festgelegt und darauf geachtet, dass sich das Artwork im sicheren Bereich des Vordergrunds befindet.
App-Symbole mit adaptiver Form können auch einen eigenen Hintergrund haben. So können die Ebenen des Symbols sicher zugeschnitten werden und bei der Interaktion subtile Bewegungseffekte erzielt werden. Sie können in Android Studio auch einen einfarbigen Hintergrund verwenden und definieren.
Die Vorschauen werden aktualisiert und zeigen, wie Vordergrund und Hintergrund zusammen auf dem Startbildschirm, in verschiedenen zugeschnittenen Formen und als Legacy-Symbol aussehen.

Die zum Zuschneiden verwendete Form kann in der Vorschau des Startbildschirms aktualisiert werden. Wählen Sie dazu die Symbole aus und ändern Sie die Option für die Formvariante.

7. Exportieren

Sehr gut, Sie haben die Vorlage jetzt mit Ihren App-Symbolen aktualisiert. Exportieren wir sie für die Implementierung.

Achten Sie darauf, dass auf der Arbeitsfläche nichts ausgewählt ist.
Rufen Sie das Figma-Menü auf > „Datei“ > Exportieren (Umschalt + Befehl + E).
Bestätigen Sie den Export im Exportmenü. Dadurch werden die Assets aus der Vorlage heruntergeladen.

Was ist im Export enthalten?

Die exportierten Assets enthalten alle erforderlichen Dateien, um Ihr App-Symbol zu implementieren:

Figma exportiert das monochrome Vordergrundsymbol für die adaptive Farbe als SVG-Datei sowie Vordergrund und Hintergrund für adaptive Symbole.
Figma bietet auch Legacy-Symbole in verschiedenen Mipmap-Verzeichnissen, organisiert nach Auflösung.

Jetzt weißt du Bescheid. Ihr Symbol kann an die Entwicklung gesendet werden.

Wenn Sie eine Vorschau Ihrer Symbole in Android Studio ansehen und diese SVGs in das endgültige Asset-Format konvertieren möchten, fahren Sie mit dem nächsten Schritt fort.

8. Image Asset Studio verwenden

Erste Schritte mit Android Studio

Laden Sie Android Studio herunter und installieren Sie es.
Starten Sie Android Studio.

Android Studio bietet Ihnen Optionen zum Starten eines neuen Projekts oder zum Auswählen vorhandener Projekte.

Wählen Sie jetzt ein neues Projekt aus. Auf den folgenden Bildschirmen werden Sie durch die Einrichtung Ihres neuen Projekts geführt.
Wählen Sie eine beliebige Vorlage aus den Startvorlagen aus, da wir uns nur die Launcher-Symbole ansehen.
Geben Sie dann einen Namen für Ihr neues Projekt ein und wählen Sie Fertigstellen aus. Das Erstellen des neuen Projekts dauert einige Sekunden.

Image Asset Studio verwenden

Jetzt können wir Ihre Symbole mit einem hilfreichen Tool, dem Asset-Studio, zum Projekt hinzufügen.

Wählen Sie dazu das Menü „Datei“ > „Neu“ > „Image Asset“ aus.
Wenn Image Asset Studio geöffnet wird, fügen Sie die Vordergrundebene hinzu, indem Sie in Pfad das Ordnersymbol auswählen. Wählen Sie die exportierte SVG-Datei als drawable-anydpi/ic_launcher.svg aus.
Wählen Sie den Tab Hintergrundebene aus und wählen Sie auf ähnliche Weise die exportierte Hintergrundebene aus. Alternativ können Sie als Asset-Typ „Farbe“ auswählen, um stattdessen einen einfarbigen Launcher-Hintergrund zu verwenden.
Kehren Sie zur Vordergrundebene zurück und prüfen Sie noch einmal, ob sich das Bild im sicheren Bereich befindet. Ändern Sie die Größe des Symbols so, dass es optisch am besten aussieht.
Klicken Sie auf Weiter , um festzulegen, wo die Symbole in Ihrem Projekt platziert werden sollen. Lassen Sie die Standardeinstellung oder wechseln Sie zu „Main“ (Haupt). Klicken Sie dann auf Fertigstellen. Sie finden Ihre Launcher-Assets unter res > „drawable“. Wenn Sie doppelt darauf klicken, wird eine Vorschau der endgültigen Vektorgrafiken geöffnet.

Kopieren Sie das monochrome Ebenen-Asset manuell und fügen Sie es in res/drawable oder res/drawable-v24 ein. Alternativ können Sie die monochrome Ebene manuell importieren, indem Sie mit der rechten Maustaste auf den Ordner res klicken und Neu > Vektor-Asset auswählen.
Fügen Sie in res/mipmap-anydpi-v26/ic_launcher.xml und res/mipmap-anydpi-v26/ic_launcher_round.xml die vorhandene Zeile android:monochrome="path/to/monochrome/asset hinzu oder ändern Sie sie so, dass sie auf das richtige monochrome Asset verweist.

9. Vorschau und Ressourcen

Vorschau im Emulator

Wir haben sie dem App-Projekt hinzugefügt, damit wir eine Vorschau auf einem echten Gerät oder Emulator ansehen können. Sehen wir uns an, wie unsere Symbole in der Realität aussehen.

Standardmäßig sollte ein Emulator eingerichtet sein. Wenn nicht, erstellen Sie ein virtuelles Android-Gerät. Klicken Sie auf die grüne Schaltfläche „Wiedergabe“. Dadurch wird das Projekt erstellt und der Emulator geöffnet.

Endgültige Assets

Sehr gut, Sie konnten mit dem Emulator sehen, wie Ihr Launcher-Symbol auf einem Gerät aussieht, und es einem App-Projekt hinzufügen. Dabei wurden sie in ihre endgültige Produktionsform konvertiert. Aber wo sind sie?

Assets sind Ressourcen in einer Android-App und können gefunden werden, indem Sie das Steuerfeld „Ressourcen“ öffnen (normalerweise auf der linken Seite). Gehen Sie in der App zu Ihrem Ordner Res. Klicken Sie mit der rechten Maustaste, um ein Menü zu öffnen, und wählen Sie Im Finder öffnen (auf einem Mac) aus. Dadurch wird ein Finder -Fenster geöffnet. Optional können Sie Entwicklungs- und Qualitätssicherungszeit sparen, indem Sie die restlichen Assets Ihrer App auf ähnliche Weise konvertieren und testen. Wenn Sie die restlichen Assets Ihrer App konvertiert haben, kann dieser Ordner für die Entwicklung freigegeben werden.

10. Glückwunsch

Sehr gut, Sie haben mehr über Android-Systemsymbole erfahren, die zum Erstellen einer Android-App erforderlich sind, Ihre eigenen Symbole entworfen, die Ressource für die Symbolvorlage erkundet und möglicherweise sogar Android Studio verwendet, um eine Vorschau der Assets für die Produktion anzusehen und sie zu konvertieren.

Wenn Sie Fragen haben, können Sie uns jederzeit über @MaterialDesign auf Twitter kontaktieren.

Weitere Designinhalte und Tutorials finden Sie auf youtube.com/MaterialDesign.