Asset-Katalog für die White Label Mobile App

Dieser Artikel enthält die Assets und Informationen, die Du Haiilo nach dem Kauf des White Label Mobile App Add-ons bereitstellen musst. Du musst die erforderlichen Assets und Informationen über ein Formular bereitstellen.

Jeder Abschnitt in diesem Artikel entspricht einem Abschnitt im Formular. Du solltest alle Assets und Informationen sammeln, bevor Du das Formular ausfüllst, da alles zusammen eingereicht werden muss. Das Formular ist nur auf Englisch verfügbar.

Wenn Du bereit bist, die erforderlichen Assets und Informationen einzureichen, verwende dieses Formular:

Informationen zur White Label App findest Du in diesen Artikeln: White Label Mobile App und Rollout der White Label Mobile App. Bitte lies die Artikel sorgfältig durch, damit Du den Prozess verstehst.

Grundlegende Informationen

Feld Information Eingabeanforderungen
Deine E-Mail-Adresse

Gib die E-Mail-Adresse des Nutzers ein, der das Formular einreicht.

Diese E-Mail wird auch verwendet, wenn wir Dich für Rückfragen kontaktieren müssen.

Format: jane.smith@haiilo.com
Tenant-Domain Gib die URL Deiner Haiilo-Plattform ein Format: beispiel.haiilo.app / beispiel.coyocloud.com
Server

Wähle die Cloud aus, auf der Deine Plattform gehostet ist: Cloud oder Private Cloud.

Du findest die Informationen dazu in Deinem Vertrag.

 
E-Mails und Passwörter für zwei Testkonten

Gib die Anmeldedaten (E-Mail und Passwort) für zwei reguläre Nutzerkonten auf Deiner Plattform an, die für Tests verwendet werden können. Diese Konten werden von unseren Entwicklern benötigt, um zu überprüfen, ob die White-Label-App funktioniert, bevor wir sie veröffentlichen können.

Die Konten müssen grundlegende Berechtigungen haben, um auf die Funktionen der Mobile App zugreifen zu können, einschließlich der Chat-Berechtigung.

Wir empfehlen, zwei neue lokale Nutzerkonten für diesen Zweck zu erstellen. So können die Konten deaktiviert werden, nachdem die App veröffentlicht wurde.

Es gibt separate Felder für jedes Testkonto. Zuerst wirst Du gebeten, die Anmeldedaten für Testkonto 1 einzugeben, gefolgt von den Anmeldedaten für Testkonto 2.

App-Informationen

Feld Information Eingabeanforderungen Beispiel (Klick, um anzuzeigen)

App-Anzeigenname

(App display name)

Gib den offiziellen Namen für Deine App ein, der auf dem Bildschirm des mobilen Endgeräts angezeigt wird. Dies kann vom App-Namen in den App-Stores abweichen (der später angegeben wird).

Es gibt nur begrenzten Platz für einen App-Namen. Ist ein Name zu lang, wird er vom mobilen Endgerät abgeschnitten. Die tatsächliche Grenze vor dem Abschneiden hängt von der tatsächlichen Breite der Zeichen (z. B. iiiiiiiii vs. www) und den Schriftgrößeneinstellungen des jeweiligen mobilen Endgeräts ab.

Du kannst den Namen "Connect" nicht als Anzeigenamen verwenden, da er von Apple reserviert ist. "XYZ Connect" kann jedoch verwendet werden. App-Anzeigenname.png

Akzentfarbe

(Accent color)

Gib den HEX-Code der Farbe ein, die als Akzentfarbe verwendet werden soll. Die Akzentfarbe wird für hervorgehobene Elemente innerhalb der App verwendet (z. B. die blaugrüne Farbe im Beispiel). Format: #313131 Akzentfarbe

Feedback senden Button

(Send feedback button)

Gib die E-Mail-Adresse ein, an die Einsendungen über den Feedback senden Button geleitet werden sollen.

Wir empfehlen die Verwendung einer Sammel-E-Mail-Adresse, wie z. B. communications@acme.com.

Format: communications@acme.com Feedback senden Schaltfläche.png

App-Sperre

(App lock)

Wähle aus, ob Du die App-Sperrfunktion für jeden Nutzer erzwingen möchtest. Wenn die App-Sperre erzwungen wird, kann der Nutzer sie nicht deaktivieren.

Entscheidest Du Dich gegen die erzwungene App-Sperre, hat jeder Nutzer dennoch die Möglichkeit, sie für seine App in seinen Einstellungen zu aktivieren.

  App-Sperre.png

App-Store

Feld Information Eingabeanforderungen Beispiel (Klick, um anzuzeigen)

vollständiger App-Name

(App full name)

Gib den offiziellen Namen für Deine App in den App Stores ein.

Da der App-Name im App Store vom App-Anzeigenamen abweichen kann (siehe oben), könntest Du beispielsweise Deinen Firmennamen im App-Store-Namen einschließen (Haiilo GmbH - Haiilo).

Der Name muss einzigartig sein, darf nicht länger als 30 Zeichen sein und darf keine Umlaute enthalten (z.B. ü).

App-Vollständiger Name.png

 

Vollständige Beschreibung

(Full description)

Definiere eine vollständige Beschreibung für Deine App auf Englisch und/oder Deutsch. Die Beschreibung wird in den App Stores angezeigt.

Jede Beschreibung kann maximal 4000 Zeichen lang sein.

Es gibt separate Felder für jede Sprachversion der Beschreibung. Wenn Du keine Beschreibung auf Englisch oder Deutsch bereitstellen möchtest, lasse das zweite Beschreibungsfeld unbeantwortet.

Vollständige Beschreibung, Android.png

Kurzbeschreibung

(Short description)

Definiere eine Kurzbeschreibung für Deine App auf Englisch und/oder Deutsch. Die Beschreibung wird in den App Stores angezeigt.

Jede Beschreibung kann maximal 80 Zeichen lang sein.

Es gibt separate Felder für jede Sprachversion der Beschreibung. Wenn Du keine Beschreibung auf Englisch oder Deutsch bereitstellen möchtest, lasse das zweite Beschreibungsfeld unbeantwortet.

Kurzbeschreibung, Android.png

Screenshot-Hintergrundfarbe

(Screenshot background color)

Gib den HEX-Code der Farbe ein, die für die Hintergrundfarbe der Screenshots in den App Stores verwendet werden soll.

Die Screenshots selbst können nicht geändert werden und sind immer fest codiert.

Format: #313131 Screenshot-Hintergrundfarbe.png

Allgemeine App-Assets

Alle Android- und die meisten iOS-Symbole (siehe Details unten) müssen als .svg-Dateien bereitgestellt werden, die nur Formen, Pfade oder zusammengesetzte Pfade enthalten. Darüber hinaus dürfen die .svg-Dateien keine der folgenden Elemente enthalten:

Die häufigsten Probleme im Zusammenhang mit der Vorbereitung visueller Assets für die White Label-App und wie man sie beheben kann, findest Du am Ende dieses Artikels. Bitte überprüfe die Vorschläge, um sicherzustellen, dass Deine visuellen Assets den Anforderungen von Haiilo entsprechen.

Feld Information Eingabeanforderungen Beispiel (Klick, um anzuzeigen)

Firmenlogo im App-Header

(Company logo in the app header)

Lade das Firmenlogo hoch, das oben in der App erscheinen wird.

  • Größe: 450 x 100 px
  • Format: Echter Vektor (.svg)
  • Hintergrund: Transparent oder weiß
Firmenlogo im App-Header.png

iOS-App-Assets

Feld Information Eingabeanforderungen Beispiel (Klick, um anzuzeigen)

iOS-Bereitstellungsmethode

(iOS rollout method)

Wähle Deine Bereitstellungsmethode für die App auf iOS.

Die Richtlinien von Apple verhindern, dass die App im öffentlichen Apple App Store veröffentlicht wird. Daher müssen wir die App als privates nicht gelistetes App im Apple App Store hochladen.

  • BYOD / MDM: Wähle diese Option, wenn Du sowohl BYOD (bring dein eigenes Gerät) Nutzer hast, die nicht von MDM (Mobile Device Management) verwaltet werden, als auch Unternehmensnutzer, deren Geräte von MDM verwaltet werden. Deine Nutzer erhalten die App wie folgt:
    • Die BYOD-Nutzer werden einen URL zum Herunterladen der App verwenden. Du erhältst den Download-URL, nachdem wir die App fertiggestellt haben.
    • Die MDM-Nutzer erhalten die App von Deinem MDM-System. Du musst die App nach Fertigstellung der App zum MDM hinzufügen.
  • Nur MDM: Wähle diese Option, wenn Du nur verwaltete Geräte in Deinem Unternehmen hast und die App über MDM verteilen möchtest. Wir werden die App aus dem privaten App Store mit Deinem Apple Business Manager verknüpfen (siehe folgende Fragen).
  • Kein iOS: Wähle diese Option, wenn Du überhaupt keine iOS-App benötigst.

 

Name der Apple Business Manager Organisation

(Apple Business Manager organization name)

Gib den Namen der Apple Business Manager Organisation Deines Unternehmens ein

Du füllst dieses Feld nur aus, wenn Du in der Frage zur iOS-Bereitstellungsmethode Nur MDM ausgewählt hast

 

ID der Apple Business Manager Organisation

(Apple Business Manager organization ID)

Gib die ID der Apple Business Manager Organisation Deines Unternehmens ein

Du füllst dieses Feld nur aus, wenn Du in der Frage zur iOS-Bereitstellungsmethode Nur MDM ausgewählt hast

 

iOS-App-Symbol

(iOS app icon)

Lade eine .zip-Datei der App-Symbole für die iOS-App hoch.

Jedes Symbol sollte im .png-Format vorliegen, aber die Symbole müssen vor dem Einreichen in ein Archiv gezippt werden.

  • Du kannst in der nächsten Spalte oder unter Apple's Icon-Richtlinien mehr über die verschiedenen App-Symbole und Größen erfahren.
  • Du kannst Online-Tools verwenden, um diese Symbole basierend auf einem einzelnen Symbol zu generieren, z.B. EasyAppIcon.com.

Einzelsymbole im .png-Format, alle vor dem Einreichen in einem Archiv (.zip) gezippt.

Hier sind die erforderlichen Symbolgrößen. Alle Größen müssen bereitgestellt werden:

  • 20 x 20 px
  • 40 x 40 px
  • 60 x 60 px
  • 29 x 29 px
  • 58 x 58 px
  • 87 x 87 px
  • 80 x 80 px
  • 120 x 120 px
  • 180 x 180 px
  • 76 x 76 px
  • 152 x 152 px
  • 167 x 167 px
  • 1024 x 1024 px

App-Symbol, iOS.png


iPad empty state-Symbol
(iPad empty state icon)

Lade eine .svg-Datei des Symbols hoch, um es anzuzeigen, wenn Du die iPhone-App auf einem iPad verwendest und kein Inhalt (wie ein Blog Artikel) geöffnet ist.

  • Größe: 350 x 350 px
  • Format: Echter Vektor (.svg)
  • Hintergrund: Transparent
iPad-Leerzustandsymbol.png

Android-App-Ressourcen

Feld Information Eingabeanforderungen Beispiel (Klick, um anzuzeigen)

Android-Rollout-Methode

(Android rollout method)

Wähle Deine gewünschte Rollout-Methode. Im Gegensatz zur iOS-App kann die Android-App im öffentlichen Google Play Store veröffentlicht werden.
  • BYOD / MDM: Wähle diese Option, wenn Du sowohl BYOD (bring dein eigenes Gerät) Nutzer hast, die nicht von MDM (Mobile Device Management) verwaltet werden, als auch Unternehmensnutzer, deren mobile Endgeräte von MDM verwaltet werden. Deine Nutzer erhalten die App wie folgt:
    • Die BYOD-Nutzer finden und laden die App aus dem öffentlichen Google Play Store herunter, nachdem wir die App fertiggestellt haben.
    • Die MDM-Nutzer erhalten die App von Deinem MDM-System. Du musst die App nach Fertigstellung in das MDM hinzufügen.
  • Nur MDM: Wähle diese Option, wenn Du nur verwaltete Geräte in Deinem Unternehmen hast und die App über MDM verteilen möchtest. Wir verknüpfen die App mit Deiner Google Workspace Organisation (siehe folgende Fragen).
  • Kein Android: Wähle diese Option, wenn Du überhaupt keine Android-App benötigst.

 

Name der Google Workspace Organisation

(Google Workspace organization name)

Gib den Namen der Google Workspace Organisation Deines Unternehmens ein

Du füllst dieses Feld nur aus, wenn Du in der Frage zur Android-Rollout-Methode Nur MDM ausgewählt hast

 

ID der Google Workspace Organisation

(Google Workspace organization ID)

Gib die ID der Google Workspace Organisation Deines Unternehmens ein

Du füllst dieses Feld nur aus, wenn Du in der Frage zur Android-Rollout-Methode Nur MDM ausgewählt hast

 

Android-App-Symbol

(Android app icon)

Lade .svg-Dateien der App-Symbole für die Android-App hoch. Du musst das Symbol in zwei Größen bereitstellen.

Diese Symbole müssen einen leeren Rand haben, und das eigentliche Symbol sollte im mittleren Bereich liegen. Lies mehr unten.

  • Größe des ersten Uploads: 512 x 512 px (zentriert 312 px)
  • Größe des zweiten Uploads: 108 x 108 px (zentriert 66 px)
  • Format: Echter Vektor (.svg)

App-Symbol, Android.png

Push-Benachrichtigungs-Symbol

(Push notification icon)

Lade eine .svg-Datei des Symbols für Push-Benachrichtigungen hoch. Das Symbol wird angezeigt, wenn Du eine Push-Benachrichtigung auf Android erhältst.

  • Größe: 96 x 96 px
  • Format: Echter Vektor (.svg)
  • Hintergrund: Transparent
  • Symbolfarbe: Einfaches Weiß
Push-Benachrichtigungs-Symbol.png

Splash-Screen-Symbol

(Splash screen icon)

Lade eine .svg-Datei des Symbols für den Splash-Screen hoch. Das Symbol wird angezeigt, wenn die App auf Android geladen wird.

Das Logo im Symbol muss auf beiden Seiten einen Abstand haben, da es immer rund ist.

  • Größe: 220 x 300 px
  • Format: Echter Vektor (.svg)
  • Hintergrund: Transparent

Splash-Screen-Symbol, Android.png

Erklärung zur Nutzung der Marken des Kunden auf Englisch

(Statement for usage of the client's brand in English)

Lade eine schriftliche und unterschriebene .pdf-Datei auf Englisch hoch, die beweist, dass wir die Erlaubnis haben, Dein geistiges Eigentum in "unserer" App oder Store-Liste zu verwenden (z. B. Markennamen, Logos, Grafik-Assets usw.).

Die Erklärung muss auf Deinem eigenen Firmenpapier verfasst und unterschrieben sein.

  • Format: .pdf

Bitte verwende den untenstehenden Text als Vorlage.

  • Authorization for usage of logo and title in app stores
    To whom it may concern,

    We hereby authorize Haiilo GmbH to place our company logo and title in order to distribute the app via the Google Play Store.

    Haiilo GmbH shall use the logo solely in the manner, for the purpose, and in the media described above and in no other manner, for no other purpose and in no other media.
     
    All rights remain with COMPANY NAME.

    Best regards,
    Signer

 

Gängige Probleme im Zusammenhang mit der Vorbereitung von visuellen Assets

Clipping-Pfade

Im Kontext von Vektorgrafiken sind Clipping-Pfade grafische Elemente, die keine visuelle Darstellung haben, da sie nur dazu dienen, Teile einer anderen Form oder Ebene zu verbergen. Viele Designer verwenden sie, um komplexe Formen zu erzeugen, indem sie Teile davon mit anderen Formen verbergen. Einige Rendering-Bibliotheken, wie die von Apple verwendeten, interpretieren die Clipping-Pfade jedoch als reguläre Formen, indem sie den verborgenen Inhalt anzeigen und/oder die Clipping-Pfade selbst anzeigen. Aus diesem Grund können Clipping-Pfade nicht in den Asset-Dateien verwendet werden.

  • Wie man es identifiziert: Jede Vektorbearbeitungssoftware kennzeichnet einen Clipping-Pfad auf unterschiedliche Weise, aber normalerweise wird die Clipping-Pfad-Ebene einen clip in ihrem Namen haben. Alternativ kannst Du die .svg-Datei mit einem Texteditor öffnen und nach den Schlüsselwörtern clip oder clipping suchen.
  • Wie man es behebt: Es gibt zwei Möglichkeiten:
    • Entferne das Clipping-Pfad-Objekt/Ebene vollständig, wenn es das Erscheinungsbild des Assets nicht beeinträchtigt.
    • Falls die Entfernung das Erscheinungsbild beeinflusst, verwende ein Bearbeitungswerkzeug, das einen Ausschnitt einer Form mithilfe der Kontur einer anderen Form erstellen kann. In Adobe Illustrator ist dieses Werkzeug der Pathfinder im Crop-Modus.

Eine grüne Teekanne mit Henkel

Das obige Logo besteht aus einer Teekannenform und einem kreisförmigen Clipping-Pfad

Eine grüne Teekanne mit einem grünen Henkel

Dieselbe Form, bei der der Clipping-Pfad mit dem Pathfinder-Werkzeug von Illustrator entfernt wurde (Crop-Modus)

Nicht bearbeitbare Textformen

Textobjekte, die nicht erweitert sind (das heißt, bearbeitbare Textobjekte), verursachen viele Probleme beim Rendern, z.B. nicht vorhandene Schriftarten und ungenaue Kerning/Leading. Aus diesem Grund müssen alle Texte im Asset in Formen umgewandelt/erweitert werden.

  • Wie man es identifiziert: Der Text kann leicht mit Vektorgrafiksoftware bearbeitet werden.
  • Wie man es behebt: Fast alle Vektorbearbeitungssoftware bietet ein spezifisches Werkzeug dafür an. In Adobe Illustrator wird dies über Objekt > Erweitern durchgeführt.

Bearbeitbarer Text (oben) und erweiterter Text (unten)

Falsch skalierte Assets

Android-Icons werden umfangreich beschnitten, um sie an den Menüstil anzupassen. Aus diesem Grund muss das tatsächliche Icon in der Mitte in einer sogenannten Sicherheitszone sein.

  • Für das 512 px-Icon wird alles außerhalb eines zentrierten 312 px-Durchmesser-Kreises abgeschnitten.
  • Für das 108 px-Icon wird alles außerhalb eines zentrierten 66 px-Durchmesser-Kreises abgeschnitten.
  • Wie man es behebt: Das Logo, Symbol oder relevante Elemente des Bildes sollten verkleinert (gezoomt) werden, um sie innerhalb des sichtbaren Teils des Assets zu halten.

Die sichtbaren Bereiche (nicht maßstabsgetreu) der Symbole

Rasterbilder innerhalb von Vektorgrafiken

Es ist ratsam, Rasterbilder wie Fotos nicht in der .svg-Datei einzubetten, es sei denn, es ist unbedingt erforderlich. Dies liegt daran, dass Rasterbilder die Dateigröße erhöhen, die Leistung der Anwendung negativ beeinflussen und zu einer schlechten Nutzererfahrung führen können, wenn die Bildqualität bei Vergrößerung abnimmt.

  • Wie man es erkennt: Bei Vergrößerung beginnen die Rasterbilder an Qualität zu verlieren.
  • Wie man es behebt: Wenn möglich, sollte das Rasterbild durch Formen ersetzt werden.

Ein Screenshot eines Computers

Automatisch generierte BeschreibungA

Rasterkreis (rot) vs. Vektorkreis (grün)

War dieser Beitrag hilfreich?