Controlli multimediali
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
La schermata dei controlli multimediali è essenziale per aiutare gli utenti a controllare i contenuti multimediali che
stanno ascoltando. Crea controlli multimediali utilizzando un layout a 5 pulsanti per verificare
che i target di tocco minimi siano soddisfatti. Su schermi più grandi di 225 dp o più,
puoi aggiungere valore includendo un pulsante di scorciatoia per un'azione importante come
la coda di riproduzione.
Sezioni del layout
La schermata dei controlli multimediali ha un'altezza fissa. È composto da tre
sezioni verticali con layout e comportamenti adattabili diversi.
- Sezione superiore:contiene i dettagli dei contenuti multimediali.
- Sezione centrale: controlli multimediali
- Sezione inferiore:pulsanti secondari configurabili
Considerazioni per schermi più grandi
Gli adattamenti per schermi di grandi dimensioni per i contenuti multimediali si concentrano esclusivamente sulla schermata dei controlli multimediali. Tutti gli altri elementi vengono acquisiti in chip, pulsanti e elementi di dialogo o nella suddivisione degli elenchi del comportamento su schermi di grandi dimensioni.
Puoi aggiungere valore includendo un pulsante di scorciatoia per un'azione importante, ad esempio
la coda di riproduzione. L'utilizzo del menu overflow verifica che la funzionalità
aggiuntiva sia ancora coerente e accessibile indipendentemente dalle dimensioni
dello schermo. La sezione inferiore acquisisce un ulteriore spazio per un pulsante dopo il punto di interruzione di 225 dp, il che porta il numero massimo di pulsanti a 2 sugli schermi più piccoli e a 3 su quelli più grandi.
Controllo principale
Il controllo principale è solitamente un pulsante di riproduzione e pausa. Dopo il punto di interruzione di 225 dp, il controllo viene scalato da 64 dp a 80 dp, il che aumenta i target di tocco per tutti i controlli al suo interno.
Schermo più piccolo (meno di 225 dp)
- Anello di avanzamento = 64 x 64 dp / tratto di 3 dp
- Pulsante = 54 x 54 dp / dimensioni icona 26
Schermo più grande (225 dp e più)
- Anello di progresso = 80 x 80 dp / tratto di 4 dp
- Pulsante = 70 x 70 dp / dimensioni icona 32
Per rispettare i principi relativi alle dimensioni del touch target, mostra solo il layout a 2 pulsanti prima del
breakpoint di 225 dp e i layout a 3 pulsanti dopo.
I seguenti esempi mostrano diverse configurazioni dei pulsanti:
<img 1.2%="" 14 dp="" 18 dp="" 24 dp="" 32 dp="" 44 dp="" 60 dp="" 6 dp="" aligned.""="" alt="" and="" area="" be="" beneath="" bottom="" button="" center="" dots="" entire="" equal="" have="" height.="" high="" icon="" icon,="" main="" margin="" of="" optional="" right="" screen's="" secondary="" should="" square,="" src="/static/wear/images/design/media-1-button-small.png" the="" to="" top="" wide.="" with="" />
Layout con 1 pulsante con overflow, schermo più piccolo (192 dp)
<img 14 dp="" 18 dp="" 24 dp="" 44 dp="" 48 dp="" 72.5 dp="" aligned.""="" alt="" and="" area="" be="" bottom="" button="" center="" entire="" high="" icon="" icon,="" main="" of="" optional="" right="" secondary="" should="" square,="" src="/static/wear/images/design/media-1-button-large.png" the="" to="" top="" wide.="" with="" />
Layout con 1 pulsante con overflow, schermo più grande (225 dp)
Layout a 2 pulsanti con overflow, schermo più piccolo (192 dp)
Layout a 2 pulsanti con overflow, schermo più grande (225 dp)
Layout a 2 pulsanti (max) con overflow, schermo più piccolo (192 dp)
Layout a 3 pulsanti con overflow, schermo più grande (225 dp)
Comportamento del marquee
L'intestazione è stata aggiornata per migliorare la leggibilità e l'esperienza
generale:
- Un margine superiore del 12% sugli schermi più piccoli e del 13,2% su quelli più grandi.
- Margini laterali per il titolo del brano del 17,6%
- Margine del titolo dell'artista del 12,5% sugli schermi più piccoli e del 14,5% su quelli più grandi.
- Il titolo dell'artista viene troncato, mentre per i titoli delle canzoni scorrevoli vengono utilizzati gradienti di 8 dp. Se è presente un'icona, un ulteriore spazio di 8 dp separa il titolo del brano
dall'icona. L'icona non scorre insieme al titolo del brano.
Con un'icona
Titolo del brano non scorrevole (breve) su schermi più piccoli (192 dp)
Titolo del brano non scorrevole (breve) su schermi più grandi (225 dp)
Titolo del brano a scorrimento (lungo) allineato a sinistra su schermi più piccoli (192 dp)
Titolo del brano (lungo) scorrevole (allineato a sinistra) su schermi più grandi (225 dp)
Titolo del brano a scorrimento (lungo) allineato al centro su schermi più piccoli (192 dp)
Titolo del brano (lungo) scorrevole (allineato al centro) su schermi più grandi (225 dp)
Senza un'icona
Titolo del brano non scorrevole (breve) su schermi più piccoli (192 dp)
Titolo del brano non scorrevole (breve) su schermi più grandi (225 dp)
Titolo del brano allineato a sinistra / non scorrevole (lungo) su schermi più piccoli (192 dp)
Titolo del brano allineato a sinistra / non scorrevole (lungo) su schermi più grandi (225 dp)
Titolo del brano a scorrimento (lungo) allineato al centro su schermi più piccoli (192 dp)
Titolo del brano (lungo) scorrevole (allineato al centro) su schermi più grandi (225 dp)
Target dei tocchi
I controlli principali e i pulsanti in basso utilizzano lo spazio disponibile per massimizzare il target di tocco. La dimensione minima del target di tocco è 48 x 48 dp sui dispositivi Wear OS, con
icone e pulsanti allineati al centro del target di tocco.
Controlli principali
Schermo piccolo (192 dp):
- Controllo principale = 64 x 64 dp
- Controlli laterali = 64 x 64 dp
Schermo grande (225 dp):
- Controllo principale = 80 x 80 dp
- Controlli laterali = 72,5 x 80 dp
Controlli in basso
Schermi più piccoli (192 dp) con un massimo di 2 pulsanti:
Entrambi i pulsanti = 68 x 60 dp
Schermi più grandi (225 dp) con un massimo di 3 pulsanti:
Tutti i pulsanti = 58 x 72,5 dp
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-07-27 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2025-07-27 UTC."],[],[],null,["# Media controls\n\nThe media controls screen is essential to help users control the media that\nthey're listening to. Create media controls using a 5-button layout to verify\nthat minimum tap targets are met. On larger screens that are 225 dp or larger,\nyou can add value by including a shortcut button for an important action such as\nplayback queue.\n\nLayout sections\n---------------\n\nThe media controls screen is a fixed height screen. It's made up of three\nvertical sections that have different responsive layouts and behavior.\n\n1. **Top section:** Contains media details\n2. **Middle section:** Media controls\n3. **Bottom section:** Configurable secondary buttons\n\nConsiderations for larger screen\n--------------------------------\n\nThe large screen adaptations for media are solely focused on the media controls\nscreen. All other elements are captured in chip, button, and dialog items or in\nthe lists breakdown of large screen behavior.\n\n### Buttons\n\nYou can add value by including a shortcut button for an important action, such\nas playback queue. Using the overflow menu verifies that the additional\nfunctionality is still consistent and accessible no matter what's the screen\nsize. The bottom section gains an additional slot for a button after the 225 dp\nbreakpoint making the maximum number of buttons 2 on smaller screens and 3 on\nlarger screens.\n\n### Main control\n\nThe main control is usually a play and pause button. After the 225 dp\nbreakpoint, the control scales from 64dp to 80dp, which increases tap targets\nfor all controls within it.\n\nSmaller screen (smaller than 225 dp)\n\n\u003cbr /\u003e\n\n- **Progress ring** = 64 x 64 dp / 3 dp stroke\n- **Button** = 54 x 54 dp / 26 icon size \nLarger screen (225 dp and larger)\n\n\u003cbr /\u003e\n\n- **Progress ring** = 80 x 80 dp / 4 dp stroke\n- **Button** = 70 x 70 dp / 32 icon size\n\n\u003cbr /\u003e\n\nButton configuration\n--------------------\n\nTo follow touch target size principles, show only the 2-button layout before the\n225 dp breakpoint and 3-button layouts past it.\n\nThe following examples show different button configurations: \n\n\u003cbr /\u003e\n\n1 Button Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n1 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n2 Button Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n2 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n2 Button (max) Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n3 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\nMarquee behavior\n----------------\n\nThe header has a number of updates to improve readability and general\nexperience:\n\n- A top margin of 12% on smaller screens and 13.2% on larger screens.\n- Side margins for the song title of 17.6%\n- Artist title margin of 12.5% on smaller screens and 14.5% on larger screens.\n- Artist title truncates, while 8-dp gradients are used for scrolling song titles. If an icon is present, an additional 8 dp gap separates the song title from the icon. (The icon doesn't scroll with the song title.)\n\n### With an icon\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (left-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (left-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n### Without an icon\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nLeft aligned / non-scrolling (long) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nLeft aligned / non-scrolling (long) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\nTap targets\n-----------\n\nMain controls and bottom buttons use the available space to maximize the tap\ntarget. The minimum tap target size is 48 x 48 dp on Wear OS devices, with\nicons and buttons aligned to the center of the tap target.\n\n### Main controls\n\n\u003cbr /\u003e\n\nSmall screen (192dp):\n\n- **Main control** = 64 x 64 dp\n- **Side controls** = 64 x 64 dp \n\nLarge screen (225dp):\n\n- **Main control** = 80 x 80 dp\n- **Side controls** = 72.5 x 80 dp\n\n### Bottom controls\n\n\u003cbr /\u003e\n\nSmaller screens (192 dp) with a maximum of 2 buttons:\n\n**Both buttons** = 68 x 60 dp\n\n\u003cbr /\u003e\n\nLarger screens (225 dp) with a maximum of 3 buttons:\n\n**All buttons** = 58 x 72.5 dp\n\n\u003cbr /\u003e"]]
