App multimediali

Mentre gli sviluppatori di app forniscono i contenuti principali, le icone e le azioni personalizzate per le loro app multimediali, le case automobilistiche hanno la flessibilità di personalizzare l'esperienza visiva complessiva. Questo garantisce che le app multimediali di terze parti siano percepite come parte integrante dell'esperienza di infotainment a bordo del veicolo.

Cosa possono personalizzare le case automobilistiche

Configura la barra delle applicazioni

La barra delle applicazioni è l'elemento principale di navigazione e branding per le app multimediali nelle auto con Google integrato. Fornisce agli utenti informazioni contestuali sulla posizione in cui si trovano nell'app e consente loro di accedere rapidamente a funzioni essenziali come la ricerca e la navigazione.

Puoi personalizzare la barra delle applicazioni per adattarla al marchio della tua auto utilizzando token di design per modificarne l'aspetto, il layout e la funzionalità.

Anatomia

La barra delle applicazioni multimediali è in genere composta dai seguenti elementi:

  • Icona di navigazione: solitamente una freccia indietro per tornare alla schermata precedente.
  • Branding dell'app: il logo o il nome della tua app.
  • Schede: collegamenti di navigazione per categorie di primo livello, come "Sfoglia" o "Cerca".
  • Icone di azione: azioni contestuali come l'icona Cerca.

Personalizza l'aspetto

Utilizza i token di design per assicurarti che la barra delle applicazioni corrisponda al tema di sistema della tua auto. I token ti consentono di definire colori e tipografia che si aggiornano automaticamente nell'interfaccia utente.

  • Sfondo: imposta il colore di sfondo e l'opacità della barra delle applicazioni utilizzando i token di superficie appropriati.
  • Tipografia: utilizza il carattere e il peso del tuo marchio per il titolo dell'app e le etichette delle schede, mappandoli ai token tipografici del sistema.
  • Icone: assicurarsi che le icone di navigazione e di azione utilizzino dimensioni e colori coerenti per una migliore leggibilità durante la guida.

Configurazioni funzionali

Gestisci schede

Puoi scegliere quali schede visualizzare nella barra delle applicazioni in base alla struttura della tua app. Le configurazioni più comuni includono:

  • Navigazione standard: schede per categorie come Playlist, Artisti e Album.
  • Integrazione della ricerca: una scheda o un'icona di ricerca dedicata nella barra delle applicazioni per un rapido accesso alla tastiera o alla ricerca vocale.

Visualizza il marchio

Per mantenere un aspetto coerente, puoi decidere come visualizzare il logo o il marchio dell'app nella barra delle applicazioni. Puoi scegliere di:

  • Mostra il logo: posiziona il logo dell'app accanto all'icona di navigazione.
  • Mostra il titolo: usa il testo per il nome dell'app se non viene fornito alcun logo.

Visualizzazioni di navigazione dello stile

Le viste di navigazione consentono agli utenti di esplorare i contenuti multimediali tramite griglie ed elenchi. Le case automobilistiche possono personalizzare queste viste per garantire che l'esperienza multimediale sia in linea con il branding del veicolo e con il design dell'intero sistema.

Personalizzazione dell'intestazione

L'intestazione di navigazione fornisce il contesto per la posizione corrente dell'utente nella gerarchia dei contenuti. È possibile personalizzare i seguenti aspetti dell'intestazione:

  • Posizione e stile: regola il posizionamento verticale e il design visivo dell'intestazione, inclusi altezza e trattamento dello sfondo.
  • Elementi dell'intestazione: personalizza componenti specifici, come lo stile del testo del titolo e l'aspetto delle icone secondarie.

Elementi della griglia e dell'elenco

I contenuti multimediali sono organizzati in griglie o elenchi per facilitare la navigazione degli utenti. È possibile personalizzare questi layout per migliorare la leggibilità e la leggibilità a colpo d'occhio:

  • Stile degli elementi: personalizza l'aspetto visivo dei singoli elementi, tra cui le dimensioni e la forma delle miniature e la tipografia per titoli e sottotitoli.
  • Selezione del layout: scegli tra formati griglia o elenco in base al tipo di contenuto visualizzato (ad esempio, utilizzando griglie per le copertine degli album ed elenchi per i nomi delle tracce).
  • Stati di messa a fuoco: definiscono come appaiono gli elementi quando vengono selezionati o evidenziati dall'utente.

Layout di riproduzione dello stile

La vista di riproduzione fornisce agli utenti controlli e metadati per i contenuti multimediali in riproduzione. Le case automobilistiche possono personalizzare l'aspetto di questa vista e la barra di controllo ridotta al minimo per creare un'esperienza coerente e in linea con il marchio del veicolo.

Anatomia della vista di riproduzione

La visualizzazione di riproduzione in genere include i seguenti componenti:

  • Copertina dell'album: la rappresentazione visiva dei media attuali.
  • Metadati: informazioni quali il titolo del brano, il nome dell'artista e il titolo dell'album.
  • Controlli di riproduzione: azioni essenziali come riproduzione, pausa, salto e riproduzione casuale.
  • Barra di avanzamento: indicatore visivo dell'avanzamento della traccia corrente, spesso comprensivo di un cursore ricercabile.

Opzioni di personalizzazione

È possibile utilizzare i token di progettazione per modificare lo stile visivo dell'esperienza di riproduzione.

Schermata di riproduzione principale

  • Sfondo e sovrapposizioni: personalizza il colore di sfondo, le sfumature o i livelli di opacità in base al tema del tuo sistema.
  • Tipografia: definire il carattere, la dimensione e il peso dei titoli delle tracce e delle informazioni sull'artista utilizzando i token tipografici del sistema.
  • Stile dei controlli: personalizza la forma, il colore e lo stile delle icone dei pulsanti di riproduzione (ad esempio, riproduci, pausa, successivo) per assicurarti che siano coerenti con gli altri controlli di sistema.
  • Barra di avanzamento: personalizza la traccia e il cursore della barra di avanzamento utilizzando i colori specifici del marchio.

Barra di controllo ridotta al minimo (MCB)

La barra di controllo ridotta al minimo consente agli utenti di controllare i contenuti multimediali mentre navigano in altre parti del sistema. È possibile personalizzare:

  • Posizione e layout: determina dove appare l'MCB sullo schermo e come sono disposti gli elementi al suo interno.
  • Visibilità dell'elemento: scegli quali controlli (ad esempio riproduci/pausa o salta) vengono visualizzati nello stato ridotto a icona.
  • Stile: applica colori uniformi e angoli arrotondati per garantire che l'MCB sembri una parte nativa dell'interfaccia utente del sistema.

La ricerca in-app è una funzionalità fondamentale che consente agli utenti di trovare rapidamente contenuti multimediali mentre sono a bordo del veicolo. Mentre gli sviluppatori di app forniscono i contenuti di ricerca, le case automobilistiche sono responsabili della progettazione dell'interfaccia di ricerca, inclusa la tastiera e la presentazione dei risultati.

Progettazione della tastiera

La sovrapposizione di ricerca utilizza diverse configurazioni della tastiera a seconda dello stato di guida del veicolo, per garantire sicurezza e facilità d'uso.

  • Tastiera standard: visualizzata quando il veicolo è parcheggiato. Si tratta di una tastiera completa per l'inserimento manuale di testo.
  • Tastiera ottimizzata per la guida: visualizzata quando il veicolo è in movimento. Questa versione in genere dà priorità all'input vocale e può offrire un inserimento manuale semplificato o suggerimenti per ridurre al minimo la distrazione del conducente.

Le case automobilistiche possono personalizzare lo stile visivo di queste tastiere, ad esempio la forma dei tasti, il colore dello sfondo e la tipografia, utilizzando token di progettazione del sistema in modo che corrispondano al marchio del veicolo.

Una volta che un utente inserisce una query, i risultati vengono visualizzati in una sovrapposizione. È possibile personalizzare i seguenti aspetti di questa visualizzazione:

  • Layout e spaziatura: definisci come raggruppare i risultati della ricerca e quanto spazio lasciare tra gli elementi per una migliore leggibilità.
  • Aspetto degli elementi: personalizza lo stile degli elementi dell'elenco nei risultati di ricerca, inclusi gli stili dei caratteri per titoli e sottotitoli e le dimensioni delle miniature associate.
  • Stati vuoto ed errore: progetta l'aspetto della sovrapposizione quando non vengono trovati risultati o se si verifica un errore di connessione.

Visualizza il marchio dell'app

Per creare un'esperienza multimediale coerente nelle auto con Google integrato, è possibile personalizzare il modo in cui il branding delle app di terze parti viene integrato nell'interfaccia utente del sistema. In questo modo, l'utente sa esattamente quale app sta utilizzando e la presentazione visiva rimane coerente con il design generale del veicolo.

Elementi del marchio

È possibile personalizzare il posizionamento e l'integrazione dei seguenti elementi specifici dell'app:

  • Icona dell'app: identificatore visivo principale del servizio multimediale.
  • Colore di accento: il colore specifico del marchio fornito dallo sviluppatore dell'app.
  • Nome dell'app: nome testuale del servizio multimediale.

Opzioni di personalizzazione

Utilizza token di progettazione per definire come questi elementi del branding appaiono sui diversi schermi multimediali.

Posizionamento e stile delle icone

Puoi scegliere liberamente come visualizzare l'icona dell'app nell'interfaccia multimediale:

  • Posizionamento: determina dove appare l'icona dell'app nelle schermate dei contenuti, ad esempio nella barra dell'app o nella visualizzazione di riproduzione.
  • Ridimensionamento e forma: utilizzare i token di sistema per definire le dimensioni e il raggio dell'angolo dell'icona, per garantire che corrisponda alle altre icone a livello di sistema.

Integrare i colori di accento

I colori di accento dell'app possono essere utilizzati per fornire un sottile accenno al marchio dell'app senza sovraccaricare l'interfaccia utente del veicolo:

  • Stile adattivo: puoi scegliere come incorporare il colore principale dell'app nei componenti dell'interfaccia utente, come barre di avanzamento, indicatori di schede attive o pulsanti.
  • Normalizzazione del colore: assicurati che i colori forniti dall'app soddisfino i requisiti di contrasto per la sicurezza e la leggibilità applicando trasformazioni di colore definite dal sistema.

Progettare le migliori pratiche

  • Mantenere l'armonia del sistema: assicurarsi che il marchio dell'app non distragga dall'attività di guida principale o non entri in conflitto con il tema generale del sistema del veicolo.
  • Dai priorità alla leggibilità: se utilizzi il colore di accento di un'app per il testo o le icone, assicurati che rispetti i rapporti di contrasto necessari rispetto allo sfondo scelto.
  • Applicazione coerente: applica le regole del branding in modo coerente su tutte le app multimediali di terze parti per offrire un'esperienza utente prevedibile.
  • Utilizza token di sistema: associa sempre le personalizzazioni del branding ai token di progettazione forniti per mantenere la compatibilità con i futuri aggiornamenti di sistema.