Personalizzare i controlli di riproduzione

Una volta deciso come organizzare i contenuti dell'app per la navigazione e la ricerca, valuta se vuoi una coda o controlli personalizzati per la riproduzione dei contenuti.

Le case automobilistiche e Google si occupano dell'implementazione e dello stile della visualizzazione della riproduzione, della barra di controllo ridotta e della coda. Forniscono inoltre un insieme di base di controlli di riproduzione, tra cui:

  • Riproduci/Metti in pausa
  • Avanti (se supportato dalla tua app)
  • Precedente (se supportato dall'app)
  • Overflow

Tuttavia, se vuoi personalizzare la coda o fornire azioni di riproduzione aggiuntive, devi decidere:

  • Se mostrare le miniature per gli elementi della coda
  • Se visualizzare un'icona o il tempo trascorso per l'elemento attualmente in riproduzione nella coda
  • Se includere o meno gli elementi riprodotti in precedenza nella coda
  • Quali azioni personalizzate vuoi visualizzare sulla barra di controllo e se devono sostituire i controlli Avanti e Indietro dei produttori di auto
  • Aspetto delle icone che rappresentano gli stati pertinenti di ogni azione (ad esempio disponibile e disattivata)

Esempi di visualizzazione della riproduzione

Brano attualmente in riproduzione
La visualizzazione della riproduzione mostra il brano attualmente in riproduzione.


Menu extra a destra
L'utente ha aperto il menu extra sul lato destro dello schermo, che offre più funzionalità.

Controlli di riproduzione in un'app multimediale
Una visualizzazione di esempio dei controlli di riproduzione in un'app multimediale.

Requisiti per il controllo della riproduzione

Quando progetti i controlli di riproduzione, dai la priorità a quanto segue:

  • UI dell'app coerente: gli sviluppatori di app devono rendere i controlli di riproduzione multimediale personalizzati nelle auto coerenti con le esperienze degli utenti su altre app e dispositivi
  • Leggibilità: il testo può apparire più piccolo se abbinato a icone, quindi il testo nelle icone deve essere massimizzato nello spazio disponibile.

Questi requisiti e consigli ti aiuteranno a creare controlli efficaci.

Livello del requisito Requisiti
MUST
  • Fornisci icone vettoriali monocromatiche per le azioni personalizzate che aggiungi e modificale dinamicamente per indicare lo stato
  • SHOULD
  • Se utilizzi testo o numeri in un'icona, utilizza lo spazio massimo nel riquadro di selezione per rendere il testo il più grande e leggibile possibile.
  • MAG
  • Fornisci fino a 6 customactions (o fino a 8, se non utilizzi Next e Previous)
  • Coda

    Devi anche fornire all'utente un modo semplice e veloce per sfogliare la coda dei contenuti multimediali in arrivo. La coda dei contenuti multimediali in arrivo può includere artisti e miniature, come mostrato negli esempi seguenti.

    Coda in modalità verticale
    Coda in modalità Ritratto


    Coda in modalità orizzontale
    Coda in modalità orizzontale

    Requisiti della coda

    Per ridurre al minimo le distrazioni durante la guida, assicurati che gli utenti possano vedere a colpo d'occhio cosa è in riproduzione.

    Livello del requisito Requisiti
    SHOULD
  • Fornisci un indicatore per l'elemento della coda di riproduzione corrente
  • Includi nella coda gli elementi riprodotti in precedenza
    Per saperne di più sugli indicatori di avanzamento e sulla coda, consulta Attivare il controllo della riproduzione.
  • MAG
  • Fornisci miniature per gli elementi della coda