L'écran de commandes multimédias est essentiel pour aider les utilisateurs à contrôler les contenus multimédias qu'ils écoutent. Créez des commandes multimédias à l'aide d'une mise en page à cinq boutons pour vérifier que le nombre minimal de cibles tactiles est atteint. Sur les écrans plus grands (225 dp ou plus), vous pouvez ajouter de la valeur en incluant un bouton de raccourci pour une action importante, comme la file d'attente de lecture.
Sections de mise en page
L'écran des commandes multimédias a une hauteur fixe. Elle se compose de trois sections verticales avec des mises en page et des comportements responsifs différents.
- Section supérieure : contient les informations sur le contenu multimédia.
- Section du milieu : commandes multimédias
- Section inférieure : boutons secondaires configurables
Considérations pour les grands écrans
Les adaptations pour grand écran des contenus multimédias sont uniquement axées sur l'écran des commandes multimédias. Tous les autres éléments sont capturés dans les éléments de chip, de bouton et de boîte de dialogue, ou dans la répartition des listes du comportement sur grand écran.
Boutons
Vous pouvez ajouter de la valeur en incluant un bouton de raccourci pour une action importante, telle que la file d'attente de lecture. L'utilisation du menu à développer permet de vérifier que la fonctionnalité supplémentaire reste cohérente et accessible quelle que soit la taille de l'écran. La section inférieure gagne un emplacement supplémentaire pour un bouton après le point d'arrêt de 225 dp. Le nombre maximal de boutons est donc de deux sur les petits écrans et de trois sur les grands écrans.
Commande principale
La commande principale est généralement un bouton de lecture et de pause. Après le point d'arrêt de 225 dp, le contrôle passe de 64 dp à 80 dp, ce qui augmente les zones tactiles pour tous les contrôles qu'il contient.
- Cercle de progression : 64 x 64 dp / 3 dp de contour
- Bouton = 54 x 54 dp / taille de l'icône : 26
- Cercle de progression : 80 x 80 dp / contour de 4 dp
- Bouton : 70 x 70 dp / taille de l'icône : 32
Configuration des boutons
Pour respecter les principes de taille de la cible tactile, n'affichez que la mise en page à deux boutons avant le point d'arrêt de 225 dp et celle à trois boutons après.
Les exemples suivants montrent différentes configurations de boutons :
Mise en page à un bouton avec un menu dépassement, petit écran (192 dp)
Mise en page à un bouton avec dépassement de capacité, grand écran (225 dp)
Mise en page à deux boutons avec un bouton de menu "overflow", petit écran (192 dp)
Mise en page à deux boutons avec dépassement, grand écran (225 dp)
Mise en page à deux boutons (maximum) avec dépassement, petit écran (192 dp)
Mise en page à trois boutons avec un menu de dépassement, grand écran (225 dp)
Comportement de la bannière
L'en-tête a été modifié pour améliorer la lisibilité et l'expérience générale :
- Une marge supérieure de 12 % sur les petits écrans et de 13,2 % sur les grands écrans.
- Marges latérales de 17,6 % pour le titre du morceau
- Marge de 12,5 % pour le titre de l'artiste sur les petits écrans et de 14,5 % sur les grands écrans.
- Le titre de l'artiste est tronqué, tandis que des dégradés de 8 dp sont utilisés pour faire défiler les titres des chansons. Si une icône est présente, un espace supplémentaire de 8 dp sépare le titre du morceau de l'icône. (L'icône ne défile pas avec le titre du morceau.)
Avec une icône
Titre de chanson non défilant (court) sur les petits écrans (192 dp)
Titre de chanson non défilant (court) sur les grands écrans (225 dp)
Titre de chanson long et défilant (aligné à gauche) sur les petits écrans (192 dp)
Titre de chanson (long) défilant (aligné à gauche) sur les grands écrans (225 dp)
Titre de chanson long et défilant (aligné au centre) sur les petits écrans (192 dp)
Titre de chanson long (défilant) centré sur les grands écrans (225 dp)
Sans icône
Titre de chanson non défilant (court) sur les petits écrans (192 dp)
Titre de chanson non défilant (court) sur les grands écrans (225 dp)
Titre de chanson long, non défilant et aligné à gauche sur les petits écrans (192 dp)
Titre de chanson (long) non défilant et aligné à gauche sur les grands écrans (225 dp)
Titre de chanson long et défilant (aligné au centre) sur les petits écrans (192 dp)
Titre de chanson long (défilant) centré sur les grands écrans (225 dp)
Cibles tactiles
Les commandes principales et les boutons inférieurs utilisent l'espace disponible pour maximiser la zone cible du doigt. La taille minimale de la cible tactile est de 48 x 48 dp sur les appareils Wear OS, avec des icônes et des boutons alignés au centre de la cible tactile.
Commandes principales
Petit écran (192 dp) :
- Contrôle principal : 64 x 64 dp
- Commandes latérales : 64 x 64 dp
Grand écran (225 dp) :
- Contrôle principal : 80 x 80 dp
- Commandes latérales = 72,5 x 80 dp
Commandes en bas de l'écran
Écrans plus petits (192 dp) avec un maximum de deux boutons :
Les deux boutons : 68 x 60 dp
Écrans plus grands (225 dp) avec un maximum de trois boutons :
Tous les boutons = 58 x 72,5 dp