30.01.2017 in entwicklung

App Icon und Splashscreen in Ionic Apps

was bei der entwicklung beachtet werden muss

Für den Launch einer App in die App Stores, sind ein App Icon und ein Splashscreen nötig. Diese sollten ansprechend gestaltet sein und vor Allem das richtige Format haben. Welche Funktion ein App Icon hat, liegt auf der Hand. Doch welchen Sinn hat eigentlich ein Splashscreen?

Wenn eine App lädt und gestartet wird, sieht man einen statischen, meist einfachen Screen mit einer Grafik oder dem Logo der App. Diesen grafischen Platzhalter, der beim Öffnen einer App angezeigt wird, nennt man Splashscreen oder auch Loading Screen. Er überbrückt die Wartezeit bis mit der App interagiert werden kann (time to interaction).

Splashscreens von Hybrid Heroes Apps

#Splashscreen

Da das Format für jede Plattform und jedes Device variiert, muss bei der Entwicklung sichergestellt werden, dass der Splashscreen immer passt. Um nicht selber unzählige Splashscreens in allen Größen anlegen zu müssen, bietet Ionic Abhilfe. Im Projekt muss nur ein einziger Splashscreen mit der Bezeichnung splash im /resources Ordner abgelegt werden. Diese Grafik sollte eine Auflösung von 2208x2208 px haben und im Format .ai, .psd oder .png angelegt sein. Das Wichtigste, wie zum Beispiel das Logo, sollte sich in einem zentrierten Quadrat mit den Maßen 1200x1200 px befinden. Alles was darüber hinaus platziert ist, könnte abgeschnitten werden. Mit dem Befehl $ionic resources generiert Ionic automatisch Splashscreens in allen benötigten Smartphone Abmessungen - für Landscape und Portrait.

#App Icon

Auch für das App Icon bietet Ionic eine solche Funktion: Um die nötigen Dateien zu erhalten, muss das gewünschte App Icon mit dem Namen icon im Projektordner unter /resources als .ai, .psd oder .png Datei abgelegt werden. Hier sollte die Grafik eine Auflösung von mindestens 192x192 px und keine abgerundeten Ecken haben. Ionic fügt dem Icon für jede Plattform ihre eigenen individuellen Effekte hinzu, wie bei iOS die abgerundeten Ecken.

Die so generierten Icons und Splashscreens werden zudem in die config.xml eingetragen und sind von dem Zeitpunkt an beim Starten auf dem Gerät oder im Simulator sichtbar. Weitere Informationen und Photoshop Vorlagen für den Splashscreen und das App Icon findet ihr hier.

11.04.2019

How to build an app?

A step-by-step guide from kickoff to submission
lesen
08.04.2019

Automate Ionic Builds With Gitlab CI

Walkthrough and Tutorial
lesen
05.04.2019

Flutter vs. React Native

Das sind die Unterschiede der beiden Cross-Platform Frameworks
lesen
11.04.2019

How to build an app?

A step-by-step guide from kickoff to submission
lesen
08.04.2019

Automate Ionic Builds With Gitlab CI

Walkthrough and Tutorial
lesen

Newsletter abonnieren

Erhalten Sie eine monatliche Zusammenfassung der neuesten Trends in Sachen Cross-platform App Entwicklung.

Jetzt anmelden!