Kioskgestaltung und Branding

Schritte und Einstellungen

Sehen Sie sich zunächst die anpassbaren Bereiche und mögliche Ergebnisse an. Die Nummern der schematischen Abbildungen entsprechen den folgenden Schritten. Alle Optionen sind freiwillig. Ändern Sie nur, was Sie benötigen.

Kioskdarstellung im Quer- und Hochformat

Lokalisierte Illustration auf Grundlage des bereitgestellten Screenshots. Die Beschriftungen im installierten Menü können abweichen.

Derselbe Kiosk im Quer- und Hochformat. Dies ist ein Gestaltungsbeispiel. Die gezeigte Anwendungsanzahl schreibt kein festes Layout vor.

Aufbau einer Anwendungskachel

Touchscreen-Hinweis

Lokalisierte Illustration auf Grundlage des bereitgestellten Screenshots. Die Beschriftungen im installierten Menü können abweichen.

Grün steht für die Anwendungs-, Blau für die Präsentationsebene. Die transparente Fläche davor ist der Touch-Hinweis. Farbige Umrisse dienen nur der Erklärung und gehören nicht zur hochgeladenen Grafik. Konfigurieren Sie Ihren Touch-Hinweis in Schritt 5.

Layout mit Fotogalerie

Das Fotogalerie-Layout verändert die Menüanordnung (3). Fügen Sie in Schritt 4 Fotos hinzu und stellen Sie den Zuschnitt ein. Zuschnitt füllt den Bereich und kann Ränder abschneiden. Ohne Zuschnitt erscheint das vollständige Foto vor unscharfem Hintergrund.

Globaler Hintergrund und Dialogtext

11

Inaktivitätswarnung

Die Anwendung wird geschlossen.

Fortfahren

Praxisbeispiele der Anwendungsebene (Kiosk): eigene Gestaltung und Inhalte

Diese Beispiele zeigen Anwendungsebenen im realen Einsatz: von Benutzern gestaltete Menüs mit eigenen Logos, Farben und Inhalten. Die Anwendungsebene unterstützt Bildschirme im Quer- und Hochformat.

1. Wählen Sie das Logo der Anwendungsebene. Wählen Sie ein Logobild aus Ihren Medien. Verwenden Sie einen transparenten Hintergrund, wenn sich das Logo in den Bereich einfügen soll. Eine Änderung der Bereichsfarbe entfernt kein weißes Rechteck, das Teil des Bildes ist. Logo und Logofarben werden nicht automatisch umgefärbt.
2. Geben Sie die Menüüberschrift ein. Geben Sie die für Besucher sichtbare Menüüberschrift ein, etwa „Besucherzentrum“. Standortname in der Administration und Menüüberschrift sind getrennte Felder.
3. Wählen Sie Menüanordnung und Symbolgröße.
   • Layouttyp der Anwendungen — Wählen Sie „Mit Fotogalerie“ oder „Ohne Fotogalerie“. Fotos verändern verfügbaren Platz und Menüanordnung. Ohne Galerie wird dieser Platz für Anwendungen genutzt.
   • Symbolgröße der Anwendungen — Der Regler ändert die Bildgröße innerhalb einer Kachel. 60 % skaliert etwa das Bild in seinem Bereich, nicht die Anwendungsanzahl oder Kachelgröße. Der Bereich reicht von 0 bis 100 %. Bei 0 % ist das Symbolbild unsichtbar.

   Der Kiosk bestimmt Kachelgrößen und Anordnung nach Anwendungsanzahl, Ausrichtung und gewähltem Layout. Die Raster 5 × 3 und 4 × 5 sind Beispiele, keine Einstellung der Spaltenanzahl. Ist nur eine Anwendung verfügbar, kann das Gerät diese direkt statt des Menüs öffnen.

4. Fügen Sie Fotos hinzu und legen Sie den Zuschnitt fest.

   Fügen Sie Fotos auf der separaten Registerkarte „Fotogalerie der Anwendungsebene“ hinzu oder entfernen Sie sie dort. Wählen Sie anschließend unter Branding „Mit Fotogalerie“. Das Hochladen allein aktiviert das Galerie-Layout nicht.

   • Medienzuschnitt in der Fotogalerie der Anwendungsebene — Aktiviert: Das Foto füllt seinen Bereich, dabei können Ränder abgeschnitten werden. Deaktiviert: Das ganze Foto wird angezeigt; eine unscharfe Version desselben Bildes füllt den Rest.

   Diese Galerie gehört zum Kioskmenü. Sie ist von der Galerie-Anwendung und von Kampagnenbildern getrennt.

5. Legen Sie den Touchscreen-Hinweis fest.

   Ein Overlaybild liegt über der Präsentationsebene und weist Besucher darauf hin, dass sie per Berührung die Anwendungsebene öffnen können. Es ist von Menülogo und Galeriefotos getrennt. Wählen Sie für jede verwendete Ausrichtung ein eigenes Bild. Transparente Bereiche lassen den Inhalt darunter sichtbar.

   Der Touch-Hinweis ersetzt keine Websitenavigation. Verwenden Sie die Website-Anwendung ohne Systembedienelemente, kann der Entwickler Schaltflächen zur Rückkehr ins Menü oder zur Kampagnenwiedergabe ergänzen. Beispiel und technische Anleitung finden Sie unter Ebenensteuerung über Ihre Website.
   • Bildschirm im Querformat: 16:9
   • Bildschirm im Hochformat: 9:16
   • Eigene Grafik: Erstellen Sie für jede verwendete Quer- oder Hochformatausrichtung ein transparentes Bild in der Zielauflösung. Laden Sie es hoch und wählen Sie es in der entsprechenden Overlayeinstellung aus.
   • Gestaltung und Position: Platzieren Sie Symbol oder Text frei in der Datei. Transparente Bereiche halten laufende Inhalte sichtbar.
   • Wirkung des Overlays: Es ist eine Ergänzung über der Präsentationsebene, keine dritte unabhängige Inhaltsebene. Die Position eines gezeichneten Symbols bestimmt nicht die Touchfläche. Den Übergang steuern Ebenen- und Anwendungseinstellungen.

   Sie können auch die folgenden transparenten Original-PNGs verwenden. Laden Sie sie im Standort-Branding in das Feld der passenden Ausrichtung hoch. Das Schachbrettmuster der Vorschau kennzeichnet Transparenz und gehört nicht zur Datei.

   Querformat

   

   PNG · 2048 × 1152 px

   PNG herunterladen – Querformat

   Hochformat

   

   PNG · 1152 × 2048 px

   PNG herunterladen – Hochformat

   In den Schritten 6–11 legen Sie die Farben einzelner Kioskelemente fest. Jede Einstellungsgruppe gilt für ein bestimmtes Element, etwa den primären Bereich oder den Symbolhintergrund.

   Jede Gruppe hat zwei Felder: „Hintergrundfarbe“ bestimmt den Hintergrund, „Text- und Symbolfarbe“ die zugehörigen Vordergrundelemente. Beginnen Sie mit Bereichen und Kacheln und prüfen Sie nach jeder Änderung die Lesbarkeit von Text und Bedienung.

   Klicken Sie auf das Farbfeld neben dem Eingabefeld. Passen Sie Farbton, Helligkeit und Transparenz an und bestätigen Sie mit OK. Einen bekannten exakten Markenfarbcode können Sie direkt eingeben.

   Achten Sie auf ausreichenden Kontrast: dunkler Text auf hellem oder heller Text auf dunklem Hintergrund. Oberflächenfarben färben weder Fotos, Videos und hochgeladene Logos noch Inhalte fremder Websites um.
6. Legen Sie die Farben des primären Bereichs fest. Der Bereich mit Logo, Überschrift und Uhr: im Querformat links, im Hochformat oben.
   • Hintergrundfarbe: Der Hintergrund des primären Bereichs.
   • Text- und Symbolfarbe: Text und Symbole mit der Vordergrundfarbe des primären Bereichs.
7. Legen Sie die Farben des sekundären Bereichs fest. Der Menüinhaltsbereich: im Querformat rechts, im Hochformat unter dem primären Bereich.
   • Hintergrundfarbe: Der Hintergrund des sekundären Bereichs, auch in anderen Anwendungsansichten verwendet.
   • Text- und Symbolfarbe: Zugehöriger Text und Symbole auf diesem Hintergrund.
8. Legen Sie den Hintergrund der Anwendungssymbole fest. Der Bereich hinter dem Bild eines Anwendungssymbols.
   • Hintergrundfarbe: Der Symbolhintergrund, besonders um kleine oder transparente Bilder sichtbar.
   • Text- und Symbolfarbe: Wird von bestimmten weiteren Bedienelementen verwendet. Es färbt das Symbolbild im Menü nicht um.
9. Legen Sie die Hintergründe von Schaltflächen und Anwendungsnamen fest. Der Hintergrund hinter Anwendungsnamen und Schaltflächen dieser Farbgruppe.
10. Legen Sie Text- und Symbolfarben von Schaltflächen und Anwendungen fest. Anwendungsnamen und zugehörige Bediensymbole.
11. Legen Sie den globalen Anwendungshintergrund fest.

    Der globale Hintergrund wird etwa im Inaktivitäts-Countdown und in einigen Anwendungen wie USB-Player und Labyrinth verwendet. Er legt nicht den Haupthintergrund des Kachelmenüs fest. Prüfen Sie den Textkontrast und behalten Sie bei fehlendem Änderungsbedarf die Standardwerte.

    • Hintergrundfarbe: Der Hintergrund von Elementen dieser Farbgruppe.
    • Text- und Symbolfarbe: Zugehöriger Text und Symbole, etwa in der Inaktivitätswarnung.

Speichern Sie abschließend. Der Server stellt die aktualisierte Anwendungsebene zur Übertragung an die Standortgeräte bereit. Sie müssen verbunden sein; neue Bilder müssen vollständig heruntergeladen werden. Prüfen Sie das Ergebnis an einem zugewiesenen Gerät. Das Speichern des Formulars allein bestätigt keine Übertragung.