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. Darüber hinaus ist ein Apostroph (') im Anzeigenamen der App für Android nicht zulässig. |
|
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 | |
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 | |
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-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. ü). |
|
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. |
|
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. |
|
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 |
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:
- Rasterbilder
- Textobjekte (Text sollte zu Pfaden erweitert werden)
- Clipping-Maske
- Transparenzmasken
- Gruppierung (nur eine Ebene mit einer Stufe)
- Bitmaps
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. |
|
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. |
|
|
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.
|
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:
|
|
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. |
|
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. |
|
|
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.
|
|
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. |
|
|
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.
|
|
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.
Bitte verwende den untenstehenden Text als Vorlage.
|
|
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örternclip
oderclipping
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.
Das obige Logo besteht aus einer Teekannenform und einem kreisförmigen Clipping-Pfad
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.
A
Rasterkreis (rot) vs. Vektorkreis (grün)