Ein praktischer Leitfaden für Android-App-Symbole: Adaptive Symbole erklärt (und wie Sie Ihre Symbole richtig generieren)
Es ist eine häufige Überraschung für Android-Neulinge: Sie polieren ein einzelnes quadratisches PNG für Ihr App-Symbol, exportieren es in einer ordentlichen Größe von 512 x 512 und es sieht in Ihrem Bildeditor perfekt aus. Dann installieren Sie einen Debug-Build auf einem Samsung-Telefon und das Symbol sieht plötzlich abgeschnitten und leicht außermittig aus, als ob ein Teil des Logos weggeschnitten worden wäre. An der Datei selbst ist nichts falsch. Das Problem besteht darin, dass ein einzelnes quadratisches Bild den Kontakt mit der realen Welt der Android-Launcher, die Symbole jeweils unterschiedlich zuschneiden, maskieren und umformen, niemals überleben würde. Wenn Sie noch nicht darauf gestoßen sind, ist es nur eine Frage der Zeit, bis Ihnen das passiert. Sehen wir uns also an, was unter der Haube passiert und wie Sie es gleich beim ersten Mal richtig machen.
Warum ein einzelnes quadratisches PNG nicht mehr ausreicht
In den Anfangsjahren von Android waren App-Symbole genau das, was sie aussahen: ein einzelnes quadratisches (oder gelegentlich frei geformtes) PNG, das in jedem Launcher so angezeigt wurde, wie es ist. Das funktionierte gut, bis die Hersteller begannen, ihre Telefone optisch zu unterscheiden, und einer der einfachsten Orte, dies zu tun, war der Startbildschirm. Samsung wollte abgerundete Quadrate, einige chinesische OEM-Skins wollten unterschiedliche Eckenbehandlungen und Standard-Android entschied sich schließlich für Kreise. Plötzlich sah genau dieselbe Symboldatei merklich anders und manchmal sogar sichtbar schlechter aus, je nachdem, auf welchem Telefon sie landete.
Die mit Android 8.0 Oreo eingeführte Antwort von Google war das adaptive Icon-System. Anstatt eine feste Form bereitzustellen, stellen Entwickler mehrschichtige Grafiken bereit, die das Betriebssystem selbst in die von einem bestimmten Launcher bevorzugte Form maskiert. Die visuelle Identität bleibt konsistent; nur die äußere Silhouette verändert sich.
Was genau ist ein adaptives Symbol?
Ein adaptives Symbol besteht aus zwei separaten Ebenen, die jeweils eine Leinwand von 108 x 108 dp einnehmen: einer Hintergrundebene und einer Vordergrundebene. Android setzt die beiden zusammen und wendet dann die vom aktuellen Launcher verwendete Maskenform an, sei es ein Kreis, ein abgerundetes Quadrat, eine Träne oder etwas ganz anderes. Durch die zweischichtige Struktur kann Android auch subtile Parallaxen- und Bewegungseffekte hinzufügen, da sich die Ebenen unabhängig voneinander verschieben können, wenn Sie auf ein Symbol tippen oder ziehen.
In den Ressourcen einer App wird dies normalerweise durch eine XML-Datei wie mipmap-anydpi-v26/ic_launcher.xml definiert, die lediglich auf die Hintergrund- und Vordergrund-Drawables verweist, anstatt selbst Pixeldaten zu enthalten. Ein traditionelles flaches ic_launcher.png wird immer noch als Ersatz für Geräte mit Android 7.1 oder früher verwendet, die älter als das adaptive Symbolsystem sind.
Warum die sichere Zone wichtig ist
Das ist der Teil, der die Leute am meisten aus der Fassung bringt. Obwohl die Leinwand für jede Ebene 108 dp x 108 dp groß ist, ist garantiert nur der innere 66 dp x 66 dp große Kreis in der Mitte dieser Leinwand sichtbar, unabhängig davon, welche Maskenform angewendet wird. Dieser innere Bereich wird allgemein als sichere Zone bezeichnet. Alles, was darüber hinausgeht, wird möglicherweise auf einer kreisförmigen Maske angezeigt und dann abrupt auf einer aggressiveren Squircle- oder Teardrop-Maske abgeschnitten, oder umgekehrt.
Dies ist genau die Art von Problem, die auftritt, wenn ein Logo nahe an den Rändern der Leinwand gezeichnet wird, um seine visuelle Größe zu maximieren: Es kann auf einer kreisförmigen Maske perfekt aussehen, wird aber auf der Squircle-Maske von Samsung ungleichmäßig beschnitten. Bei der Korrektur handelt es sich nicht um eine Neugestaltung, sondern lediglich um eine leichte Verkleinerung des Bildmaterials, sodass der aussagekräftige Inhalt im sicheren Bereich bleibt, unabhängig davon, welche Form letztendlich angewendet wird.
Launcher-Formen, denen Sie begegnen werden
| Form | Wo Sie es sehen werden |
|---|---|
| Kreis | Stock Android, Pixel Launcher (der langjährige Standard) |
| Squircle (abgerundetes Quadrat) | Samsung One UI und mehrere andere Android-Skins |
| Abgerundetes Quadrat (Superellipse) | iOS, automatisch vom System angewendet, ohne Kontrolle des Entwicklers |
| Träne | Wird bei einigen Samsung-Softwareversionen als auswählbare Option angeboten |
| Quadratisch mit weichen Ecken | Verschiedene Launcher-Skins anderer Hersteller |
Der praktische Vorteil besteht darin, dass Sie nicht entscheiden können, welche dieser Formen Ihr Symbol letztendlich trägt. Benutzer von Standard-Android-Launchern können oft sogar ihre bevorzugte Form aus einem Einstellungsmenü auswählen. Ihr einziger wirklicher Hebel besteht darin, dafür zu sorgen, dass das Kunstwerk selbst sie alle problemlos übersteht, und genau das soll durch die Sicherheitszone gewährleistet werden.
Aufbau der Vermögenswerte: Größen und Dichten, die Sie benötigen
| Dichteeimer | Größe des Launcher-Symbols |
|---|---|
| mdpi | 48 x 48 Pixel |
| hdpi | 72 x 72 Pixel |
| xhdpi | 96 x 96 Pixel |
| xxhdpi | 144 x 144 Pixel |
| xxxhdpi | 192 x 192 Pixel |
| Symbol für den Play Store-Eintrag | 512 x 512 Pixel |
Wenn Sie die App auch auf iOS ausliefern, fügen Sie einen kompletten weiteren Satz hinzu, da die App Store-Symbolanforderungen von Apple bei 1024 x 1024 liegen und ein völlig anderes, nicht geschichtetes Format ohne jegliche Transparenz verwenden.
Der manuelle Weg vs. die Verwendung eines Generators
Sie können jede dieser Größen manuell in einem Bildeditor oder über das in Android Studio integrierte Image Asset Studio erstellen, das die Dichteskalierung und Maskenvorschau für ein einzelnes Projekt einigermaßen gut handhabt. Dies kann dann mühsam werden, wenn Sie ein Designsystem über mehrere Apps hinweg verwalten, passende iOS-Exporte aus demselben Master-Artwork benötigen oder einfach schnell überprüfen möchten, wie sich ein Design über alle Formen hinweg verhält, bevor Sie es übernehmen.
Generieren Sie jede Größe aus einem Masterbild
Unser App-Icon-Generator nimmt ein einzelnes hochauflösendes Quellbild und erzeugt den vollständigen Satz von Android-Dichte-Buckets, die adaptive Symbol-Vorder-/Hintergrundstruktur und die Play-Store-Eintragsgröße, alles mit einem einzigen Upload, sodass Sie nicht ein Dutzend Dateien manuell exportieren und umbenennen müssen.
Extrahieren von Symbolen aus einer vorhandenen APK
Manchmal läuft der Bedarf in die entgegengesetzte Richtung. Vielleicht haben Sie ein Projekt ohne die Original-Designdateien geerbt, oder Sie möchten genau sehen, wie ein Mitbewerber sein Symbol strukturiert hat, bevor Sie Ihr eigenes entwerfen, oder Sie müssen einfach ein Symbol aus einem erstellten APK zurückziehen, um es in einem zugehörigen Tool oder Marketing-Asset wiederzuverwenden. Da es sich bei einem APK praktisch um ein strukturiertes Archiv handelt, das alle Ressourcen einer App enthält, sind die darin enthaltenen Launcher-Symboldateien physisch vorhanden und können direkt extrahiert werden, anstatt von Grund auf neu erstellt zu werden.
Unser Icon-Extraktor ruft genau diese Dateien aus jedem von Ihnen hochgeladenen APK ab und stellt Ihnen die rohen Symbolressourcen in der Auflösung zur Verfügung, die der ursprüngliche Entwickler bereitgestellt hat. Dies ist oft der schnellste Weg, eine verlorene Quelldatei wiederherzustellen oder zu untersuchen, wie eine andere App das gleiche Designproblem angegangen ist.
Häufige Symbolfehler, die bei der Überprüfung hervorgehoben werden
- Backen in extra Polsterung oder UI-Chrom. Ein manuell im Bild hinzugefügter Schlagschatten, ein Rand oder ein Effekt mit abgerundeten Ecken steht in Konflikt mit der systemeigenen Maskierung und sieht oft doppelt oder falsch ausgerichtet aus.
- Verwendung eines reinweißen Hintergrunds ohne deutliche Kante. Bei Licht-Launchern kann das Symbol vor dem Hintergrund des Startbildschirms nahezu unsichtbar werden.
- Zu feine Details. Texte und komplizierte Linien, die bei 512 Pixel scharf aussehen, werden bei der Verkleinerung auf 48 Pixel häufig zu einem unleserlichen Fleck, wie es die meisten Benutzer täglich sehen.
- Es besteht eine Diskrepanz zwischen dem Play Store-Eintragssymbol und dem Symbol, das installiert wird. Sowohl Rezensenten als auch Benutzern fällt es auf, wenn diese beiden nicht übereinstimmen, und es erscheint als schlampig oder, schlimmer noch, verdächtig.
- Den Legacy-Fallback völlig vergessen. Wenn Ihre App noch Android-Versionen vor 8.0 unterstützt, kann das Überspringen des flachen PNG-Fallbacks dazu führen, dass diese Benutzer ein defektes oder allgemein aussehendes Symbol erhalten.
Testen Sie Ihr Symbol in verschiedenen Formen, bevor Sie es versenden
Bevor Sie ein Symbol fertigstellen, sollten Sie es zumindest unter einer kreisförmigen Maske und einer Kreismaske nebeneinander in der Vorschau betrachten, anstatt davon auszugehen, dass es sauber übersetzt werden kann. Aus genau diesem Grund bietet das Image Asset Studio von Android Studio eine Live-Vorschau über mehrere Launcher-Shapes hinweg und es dauert nur eine Minute, um ein Problem zu erkennen, das sonst erst nach der Veröffentlichung auftauchen würde, wenn ein Benutzer auf dem „falschen“ Launcher-Shape meldet, dass etwas nicht stimmt.
Wichtige Erkenntnisse
- Adaptive Symbole verwenden zwei Ebenen, Hintergrund und Vordergrund, auf einer 108-dp-Leinwand, die das System pro Launcher in unterschiedliche Formen maskiert.
- Nur die innere 66dp-Sicherheitszone ist bei jeder Maskenform garantiert sichtbar. Bewahren Sie bedeutungsvolle Kunstwerke darin auf.
- Für Geräte mit Android 7.1 oder früher benötigen Sie weiterhin ein flaches Legacy-Symbol.
- Ein Generator kann jede erforderliche Dichte und Play-Store-Eintragsgröße aus einem Masterbild erzeugen, wodurch erhebliche manuelle Exportarbeiten eingespart werden.
- Symbole können direkt aus einer vorhandenen APK extrahiert werden, wenn Quelldateien verloren gehen oder Sie die Assets einer anderen App untersuchen müssen.
Häufig gestellte Fragen (FAQ)
Welche tatsächliche Pixelgröße ist für ein Play Store-Eintragssymbol erforderlich?
512 x 512 Pixel, ein 32-Bit-PNG mit Alphakanal. Dies unterscheidet sich von den im APK selbst gebündelten Launcher-Symbolgrößen.
Muss die Hintergrundebene meines adaptiven Symbols einfarbig sein?
Nicht unbedingt eine flache Farbe, aber im Allgemeinen sollte sie undurchsichtig und einfach sein, da sie auf eine Weise verschoben, skaliert oder maskiert werden kann, die Sie nicht vollständig kontrollieren können. Unruhige oder transparente Hintergründe sehen bei verschiedenen Launchern tendenziell inkonsistent aus.
Kann ich mein adaptives Android-Icon-Design direkt für iOS wiederverwenden?
Nicht direkt. iOS verwendet ein einzelnes flaches quadratisches Bild mit vom System angewendeter Eckenrundung anstelle separater Ebenen, sodass Sie normalerweise eine vereinfachte, abgeflachte Version derselben Grafik für iOS exportieren.
Warum sieht mein Symbol auf meinem Telefon gut aus, aber im Play Store-Eintrag verschwommen?
Dies geschieht normalerweise, wenn das Auflistungssymbol von einem kleinen Quellbild vergrößert wurde. Beginnen Sie immer mit einer Masterdatei von mindestens 1024 x 1024 Pixeln und exportieren Sie jede erforderliche Größe ab dieser Größe.
Was passiert, wenn ich den Legacy-Icon-Fallback für ältere Android-Versionen überspringe?
Geräte mit Android 7.1 oder früher, die keine adaptiven Symbole unterstützen, greifen möglicherweise auf ein generisches Systemsymbol zurück oder stellen Ihr Symbol falsch dar. Das Überspringen ist nur dann sicher, wenn die unterstützte Android-Mindestversion Ihrer App 8.0 oder höher ist.
Dafür benötigen Sie keine Vorkenntnisse in der Designtheorie, sondern lediglich das Bewusstsein, dass Ihr Symbol in dem Moment, in dem es Ihre Hände verlässt, auf eine Art und Weise verändert wird, auf die Sie keinen Einfluss haben. Entwerfen Sie für die sichere Zone, behalten Sie ein Legacy-Fallback bei, generieren Sie jede erforderliche Größe aus einer sauberen Masterdatei, und Ihr Symbol bleibt erhalten, egal auf welchem Launcher es landet.