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).
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.] (http://ionicframework.com/docs/cli/icon-splashscreen.html)
