Medien-Apps

Während App-Entwickler die Kerninhalte, Symbole und benutzerdefinierten Aktionen für ihre Medien-Apps bereitstellen, haben Autohersteller die Flexibilität, das gesamte visuelle Erlebnis anzupassen. Dadurch wird sichergestellt, dass sich Medien-Apps von Drittanbietern wie ein integraler Bestandteil des Infotainmentsystems im Fahrzeug anfühlen.

Was Autohersteller individualisieren können

Konfigurieren Sie die App-Leiste

Die App-Leiste ist das primäre Navigations- und Branding-Element für Medien-Apps in Autos mit integriertem Google. Sie bietet Nutzern Kontextinformationen darüber, wo sie sich in der App befinden, und ermöglicht ihnen den schnellen Zugriff auf wichtige Funktionen wie Suche und Browser.

Sie können die App-Leiste an die Marke Ihres Autos anpassen, indem Sie Design-Tokens verwenden, um deren Aussehen, Layout und Funktionalität zu verändern.

Anatomie

Die Medien-App-Leiste besteht typischerweise aus folgenden Elementen:

  • Navigationssymbol: Normalerweise ein Zurück-Pfeil, um zum vorherigen Bildschirm zurückzukehren.
  • App-Branding: Das Logo oder der Name Ihrer App.
  • Registerkarten: Navigationslinks für Kategorien der obersten Ebene, wie z. B. „Durchsuchen“ oder „Suchen“.
  • Aktionssymbole: Kontextbezogene Aktionen wie das Suchsymbol.

Passen Sie das Erscheinungsbild an

Verwenden Sie Design-Tokens, um sicherzustellen, dass die App-Leiste zum Systemdesign Ihres Fahrzeugs passt. Mit Tokens können Sie Farben und Typografie definieren, die automatisch in der gesamten Benutzeroberfläche aktualisiert werden.

  • Hintergrund: Legen Sie die Hintergrundfarbe und Deckkraft der App-Leiste mithilfe der entsprechenden Oberflächen-Token fest.
  • Typografie: Verwenden Sie die Schriftart und -stärke Ihrer Marke für den App-Titel und die Tab-Beschriftungen, indem Sie diese den Systemtypografie-Tokens zuordnen.
  • Symbole: Achten Sie darauf, dass Navigations- und Aktionssymbole einheitliche Größen und Farben verwenden, um die Lesbarkeit während der Fahrt zu gewährleisten.

Funktionale Konfigurationen

Registerkarten verwalten

Sie können anhand der Struktur Ihrer App auswählen, welche Tabs in der App-Leiste angezeigt werden. Gängige Konfigurationen sind:

  • Standardmäßige Navigation: Registerkarten für Kategorien wie Wiedergabelisten, Künstler und Alben.
  • Suchintegration: Ein eigener Such-Tab oder ein Suchsymbol in der App-Leiste für den schnellen Zugriff auf die Tastatur- oder Sprachsuche.

Markenpräsentation

Um ein einheitliches Erscheinungsbild zu gewährleisten, können Sie festlegen, wie das Logo oder Branding der App in der App-Leiste angezeigt wird. Sie haben folgende Möglichkeiten:

  • Logo anzeigen: Platzieren Sie das App-Logo neben dem Navigationssymbol.
  • Zeigen Sie den Titel an: Verwenden Sie Text als App-Namen, falls kein Logo angegeben ist.

Stil-Browseransichten

Die Browseransichten ermöglichen es Nutzern, Medieninhalte in Rastern und Listen zu erkunden. Automobilhersteller können diese Ansichten anpassen, um sicherzustellen, dass das Medienerlebnis mit dem Branding des Fahrzeugs und dem systemweiten Design übereinstimmt.

Anpassung der Kopfzeile

Die Browser-Kopfzeile liefert Kontextinformationen zum aktuellen Standort des Nutzers in der Inhaltshierarchie. Sie können die folgenden Aspekte der Kopfzeile anpassen:

  • Position und Gestaltung: Passen Sie die vertikale Platzierung und das visuelle Design der Kopfzeile an, einschließlich Höhe und Hintergrundgestaltung.
  • Header-Elemente: Passen Sie bestimmte Komponenten an, wie z. B. die Formatierung des Titeltextes und das Aussehen sekundärer Symbole.

Raster- und Listenelemente

Medieninhalte werden in Rastern oder Listen organisiert, um Nutzern ein effizientes Durchsuchen zu ermöglichen. Sie können diese Layouts anpassen, um die Lesbarkeit und Erfassbarkeit zu verbessern:

  • Elementgestaltung: Passen Sie das visuelle Erscheinungsbild einzelner Elemente an, einschließlich der Größe und Form der Vorschaubilder sowie der Typografie für Titel und Untertitel.
  • Layoutauswahl: Wählen Sie je nach Art des anzuzeigenden Inhalts zwischen Raster- und Listenformat (z. B. Raster für Albumcover und Listen für Titelnamen).
  • Fokuszustände: Definieren Sie, wie Elemente angezeigt werden, wenn sie vom Benutzer ausgewählt oder hervorgehoben werden.

Wiedergabe-Layouts

Die Wiedergabeansicht bietet Nutzern Steuerelemente und Metadaten für die aktuell wiedergegebenen Medien. Automobilhersteller können das Erscheinungsbild dieser Ansicht und der minimierten Steuerleiste anpassen, um ein einheitliches Nutzererlebnis zu schaffen, das zur Fahrzeugmarke passt.

Wiedergabeansicht Anatomie

Die Wiedergabeansicht umfasst typischerweise die folgenden Komponenten:

  • Albumcover: Die visuelle Repräsentation der aktuellen Medien.
  • Metadaten: Informationen wie der Titel des Musikstücks, der Name des Künstlers und der Albumtitel.
  • Wiedergabesteuerung: Wichtige Aktionen wie Wiedergabe, Pause, Überspringen und Zufallswiedergabe.
  • Fortschrittsanzeige: Eine visuelle Anzeige des aktuellen Fortschritts des Titels, oft mit einem Such-/Sende-Symbol.

Anpassungsoptionen

Sie können Design-Tokens verwenden, um den visuellen Stil des Wiedergabeerlebnisses zu verändern.

Hauptwiedergabebildschirm

  • Hintergrund und Überlagerungen: Passen Sie die Hintergrundfarbe, Farbverläufe oder Deckkraftstufen an Ihr Systemdesign an.
  • Typografie: Legen Sie Schriftart, Größe und Strichstärke für Titel und Künstlerinformationen mithilfe von Systemtypografie-Tokens fest.
  • Steuerelementgestaltung: Passen Sie Form, Farbe und Symbolstil der Wiedergabetasten (z. B. Wiedergabe, Pause, Weiter) an, um sicherzustellen, dass sie mit anderen Systemsteuerelementen konsistent sind.
  • Fortschrittsanzeige: Gestalten Sie die Spur und den Zeiger der Fortschrittsanzeige mit markenspezifischen Farben.

Minimierter Bedienbalken (MCB)

Die minimierte Steuerleiste ermöglicht es Benutzern, Medien zu steuern, während sie andere Teile des Systems bedienen. Sie können Folgendes anpassen:

  • Position und Layout: Legen Sie fest, wo der MCB auf dem Bildschirm erscheint und wie die Elemente darin angeordnet sind.
  • Element-Sichtbarkeit: Wählen Sie aus, welche Steuerelemente (z. B. Wiedergabe/Pause oder Überspringen) im minimierten Zustand angezeigt werden sollen.
  • Gestaltung: Verwenden Sie einheitliche Farben und abgerundete Ecken, damit sich das MCB wie ein integraler Bestandteil der Systembenutzeroberfläche anfühlt.

Die In-App-Suche ist eine wichtige Funktion, die es Nutzern ermöglicht, Medien im Fahrzeug schnell zu finden. Während App-Entwickler die Suchinhalte bereitstellen, sind die Autohersteller für die Gestaltung der Suchoberfläche verantwortlich, einschließlich der Tastatur und der Ergebnisdarstellung.

Tastaturdesign

Die Suchanzeige nutzt je nach Fahrzustand des Fahrzeugs unterschiedliche Tastaturkonfigurationen, um Sicherheit und Benutzerfreundlichkeit zu gewährleisten.

  • Standardtastatur: Wird angezeigt, wenn das Fahrzeug geparkt ist. Dies ist eine vollwertige Tastatur zur manuellen Texteingabe.
  • Fahroptimierte Tastatur: Wird während der Fahrt angezeigt. Diese Version priorisiert in der Regel die Spracheingabe und bietet gegebenenfalls vereinfachte manuelle Eingaben oder Vorschläge, um die Ablenkung des Fahrers zu minimieren.

Die Autohersteller können den visuellen Stil dieser Tastaturen – wie Tastenform, Hintergrundfarbe und Typografie – mithilfe von Systemdesign-Tokens an das Branding des Fahrzeugs anpassen.

Sobald ein Benutzer eine Suchanfrage eingibt, werden die Ergebnisse in einem Overlay angezeigt. Sie können die folgenden Aspekte dieser Ansicht anpassen:

  • Layout und Abstände: Definieren Sie, wie Suchergebnisse gruppiert werden und wie viel Platz zwischen den Einträgen für eine bessere Lesbarkeit vorgesehen ist.
  • Darstellung der Elemente: Passen Sie die Darstellung der Listenelemente in den Suchergebnissen an, einschließlich Schriftarten für Titel und Untertitel sowie die Größe der zugehörigen Miniaturansichten.
  • Leere Zustände und Fehlerzustände: Gestalten Sie das Aussehen des Overlays, wenn keine Ergebnisse gefunden werden oder ein Verbindungsfehler auftritt.

App-Branding anzeigen

Um in Fahrzeugen mit integriertem Google ein einheitliches Medienerlebnis zu schaffen, können Sie die Einbindung des Brandings von Drittanbieter-Apps in die Systembenutzeroberfläche individuell anpassen. So wird sichergestellt, dass der Nutzer zwar erkennt, welche App er verwendet, die visuelle Darstellung aber dennoch mit dem Gesamtdesign des Fahrzeugs übereinstimmt.

Markenelemente

Sie können die Platzierung und Integration der folgenden app-spezifischen Elemente anpassen:

  • App-Symbol: Das primäre visuelle Erkennungsmerkmal des Mediendienstes.
  • Akzentfarbe: Die vom App-Entwickler vorgegebene markenspezifische Farbe.
  • App-Name: Der textbasierte Name des Mediendienstes.

Anpassungsoptionen

Verwenden Sie Design-Tokens, um festzulegen, wie diese Branding-Elemente auf verschiedenen Medienbildschirmen dargestellt werden.

Platzierung und Gestaltung von Symbolen

Sie haben die Möglichkeit, die Darstellung des App-Symbols innerhalb der Medienoberfläche flexibel zu gestalten:

  • Positionierung: Legen Sie fest, wo das App-Symbol auf den Inhaltsbildschirmen angezeigt wird, z. B. in der App-Leiste oder in der Wiedergabeansicht.
  • Skalierung und Form: Verwenden Sie Systemtoken, um die Größe und den Eckenradius des Symbols zu definieren und so sicherzustellen, dass es zu anderen Symbolen auf Systemebene passt.

Akzentfarben integrieren

App-Akzentfarben können verwendet werden, um einen dezenten Hinweis auf die Marke der App zu geben, ohne die Benutzeroberfläche des Fahrzeugs zu überladen:

  • Adaptives Styling: Sie können auswählen, wie die Akzentfarbe der App in UI-Komponenten wie Fortschrittsbalken, Aktiv-Tab-Indikatoren oder Schaltflächen integriert werden soll.
  • Farbnormalisierung: Durch Anwendung systemdefinierter Farbtransformationen wird sichergestellt, dass die von der App bereitgestellten Farben die Kontrastanforderungen für Sicherheit und Lesbarkeit erfüllen.

Best Practices im Design

  • Systemharmonie wahren: Sicherstellen, dass das App-Branding nicht von der primären Fahraufgabe ablenkt oder mit dem systemweiten Design des Fahrzeugs kollidiert.
  • Priorität hat die Lesbarkeit: Wenn Sie die Akzentfarbe einer App für Text oder Symbole verwenden, stellen Sie sicher, dass sie die erforderlichen Kontrastverhältnisse zum gewählten Hintergrund aufweist.
  • Einheitliche Anwendung: Die Markenrichtlinien sollten in allen Medien-Apps von Drittanbietern einheitlich angewendet werden, um ein vorhersehbares Nutzererlebnis zu gewährleisten.
  • System-Token verwenden: Um die Kompatibilität mit zukünftigen Systemaktualisierungen zu gewährleisten, sollten Branding-Anpassungen stets den bereitgestellten Design-Token zugeordnet werden.