Les mises en page sont des modèles de structure qui fournissent un cadre pour maintenir la cohérence visuelle dans votre application. En définissant des grilles visuelles, l'espacement et les sections, les mises en page établissent une structure cohérente et organisée pour la présentation des informations et des éléments d'interface utilisateur.
Sélection
- Contrairement au Web ou aux appareils mobiles, les téléviseurs ont un format d'écran fixe de 16:9.
- Optimisez les mises en page le long d'axes horizontal et vertical pour faciliter l'utilisation et le contrôle.
Principes
Consignes pour vous aider à prendre des décisions de conception lorsque vous concevez des mises en page TV.
Conception pour les grands écrans
Depuis la popularisation de la télévision HD, les téléviseurs rectangulaires au format 16:9 sont devenus la norme. À l'origine, les téléviseurs étaient fabriqués dans une forme carrée appelée 4:3 ou 1,33:1.
Conception sur la plateforme Android
Lors de la conception, utilisez dp pour afficher les éléments de manière uniforme sur des écrans de densités différentes, comme avec tout autre appareil Android. Concevez toujours votre appareil à une résolution MDPI de 960 x 540 pixels.
À MDPI 1 px = 1 dp.
Les assets doivent viser 1080p. Cela permet au système Android de réduire la taille des éléments de mise en page à 720p, si nécessaire.
Garantir la sécurité de la visibilité et du surbalayage
Assurez-vous que les éléments importants sont toujours visibles pour les utilisateurs. Pour ce faire, positionnez les éléments avec une marge de 5% de 48 dp sur les côtés gauche et droit, et de 27 dp en haut et en bas d'une mise en page. Cela permet de s'assurer que les éléments d'écran de la mise en page se trouvent dans le surbalayage.
Remplir tout l'écran
N'ajustez pas et ne rognez pas les éléments d'arrière-plan dans la zone de sûreté du surbalayage. À la place, autorisez l'affichage partiel d'éléments hors écran. Cela garantit que tous les écrans affichent correctement l'arrière-plan et les éléments hors écran.
Optimiser avec des axes
Réfléchissez à la façon dont les gens utilisent la télécommande avec leur téléviseur. Assurez-vous que l'interface de votre téléviseur est facile à utiliser avec la télécommande. Concevez chaque direction (haut, bas, gauche, droite) de manière à avoir un objectif et un modèle de navigation clairs pour aider les utilisateurs à comprendre comment se déplacer dans les grands groupes d'options.
Mise en page
La taille des écrans de télévision varie d'un appareil à l'autre. Étant donné qu'un téléviseur moderne est au format 16:9, nous vous recommandons de concevoir votre application avec une taille d'écran de 960 x 540 pixels. Cela garantit que tous les éléments peuvent être redimensionnés proportionnellement pour les écrans HD ou 4K.
Marges du surbalayage
Les marges de surbalayage correspondent aux espaces entre le contenu et les bords gauche et droit de l'écran.
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
Ces marges de bordure protègent les éléments principaux des éventuels problèmes de surbalayage. Pour protéger votre contenu et vos informations, utilisez une mise en page avec une marge de 5 % (58 dp sur les côtés et 28 dp sur les bords supérieur et inférieur).
Colonnes et gouttières
Le contenu est placé dans des zones de l'écran comportant des colonnes et des gouttières. Le système de grille comporte 12 colonnes. Les gouttières sont les espaces entre les colonnes qui aident à diviser le contenu.
Utilisez 12 colonnes de 52 dp de large avec un espace de 20 dp entre elles. Il doit y avoir un espace de 58 dp de chaque côté et un espace vertical de 4 dp entre les lignes.
Modèles de mise en page
Trois modèles de mise en page sont disponibles en fonction de votre objectif et de l'appareil d'affichage: la mise en page à pile horizontale, la mise en page de la pile verticale et la mise en page sous forme de grille.
Mise en page de la pile horizontale
Une mise en page à pile horizontale organise les composants horizontalement. Leur taille, leur format ou leur format peuvent varier. Cette mise en page est souvent utilisée pour regrouper du contenu et des composants.
Mise en page de la pile verticale
Une mise en page de pile verticale organise les composants de manière verticale, ce qui permet une taille, un format et un format flexibles. Il est couramment utilisé pour regrouper divers types de texte, composants interactifs et modèles de mise en page.
Mise en page sous forme de grille
Une grille est un ensemble de colonnes et de lignes qui s'entrecroisent, tandis qu'une mise en page en grille affiche du contenu dans cette grille. Il organise le contenu de manière logique, ce qui facilite la navigation et la navigation des utilisateurs.
Pour éviter le chevauchement, il est important de tenir compte de la marge intérieure entre les éléments et de l'augmentation de la taille des états sélectionnés. (par exemple, lorsqu'un composant sélectionné (comme une carte) est mis en surbrillance.) Si vous utilisez notre mise en page en grille suggérée (12 colonnes à 52 dp, avec des gouttières de 20 dp), consultez la section "Cards" pour obtenir des mises en page et des aperçus de composants recommandés.
Structures de mise en page
Voici quelques structures de mise en page pour vous aider à prendre de meilleures décisions lorsque vous concevez des mises en page TV. En divisant les écrans TV horizontalement, cela peut aider à séparer différents types de composants et à communiquer la hiérarchie des informations et la logique de navigation. Un volet peut contenir plusieurs colonnes d'unités. Chaque panneau peut héberger différents modèles de mise en page, tels que la mise en page de la pile et la mise en page sous forme de grille.
Mise en page à un seul volet
Une mise en page à un seul volet peut aider à attirer l'attention sur le contenu principal. Utilisez-le avec une expérience centrée sur le contenu et des pages d'informations essentielles.
Mise en page à deux volets
Une mise en page à deux volets est plus performante lorsque la page affiche un contenu hiérarchique. Elle est largement utilisée dans les expériences centrées sur les tâches.
Surcharge cognitive
Un contenu compliqué et peu clair peut être source de confusion, d'agacement et de baisse d'engagement. Faites en sorte que votre conception soit lisible, épurée et ne présente que les informations essentielles.
Évitez d'utiliser trop de panneaux pour regrouper des contenus. Cela crée une charge et une hiérarchie cognitives inutiles pour les utilisateurs.
À faire
À éviter
Exprimez la hiérarchie et la navigation
Les panneaux séparent et organisent visuellement le contenu. Ils aident à guider les utilisateurs et permettent de créer une interface plus intuitive qui améliore l'expérience.
À faire
À éviter
Modèles de mise en page
Les modèles de mise en page favorisent l'ordre, la cohérence et la familiarité. La conception crée une expérience d'interface utilisateur confortable qui communique clairement où se trouve l'utilisateur et où il peut aller.
Parcourir
Le modèle de navigateur affiche des "clusters" ou des lignes de contenu multimédia dans une pile verticale. Les utilisateurs défilent vers le haut et vers le bas pour parcourir les lignes, et vers la droite et vers la gauche pour parcourir le contenu d'une ligne spécifique.
Superposition de gauche
Le modèle de navigation de gauche affiche un panneau en superposition sur le côté gauche de l'écran. Elle affiche généralement en arrière-plan des éléments de navigation ou des éléments sur lesquels vous pouvez agir en fonction du contenu.
Superposition droite
Le modèle en superposition de droite affiche un panneau en superposition sur le côté droit de l'écran. Il fait généralement apparaître des éléments sur lesquels vous agissez indépendamment du contenu en arrière-plan.
Centrer la superposition
Le modèle de superposition centrale affiche un élément modal qui se superpose à une vue existante. Elle est utilisée pour communiquer des informations urgentes ou inciter à une décision.
Superposition inférieure
Le modèle de superposition inférieure est généralement utilisé pour les bottom sheets. Les bottom sheets sont des surfaces contenant des contenus complémentaires ancrés au bas de l'écran. Ils vous permettent de créer des mini-flux sans perdre le contexte de la page actuelle.
Actions
Le modèle d'action affiche le titre et le sous-titre à gauche, et les options ou les actions à droite. Les utilisateurs sont généralement invités à faire une option ou à effectuer une action avec ce modèle.
Détails sur le contenu
Le modèle "Détail du contenu" affiche le contenu dans une mise en page empilée horizontale. Le contenu inclut généralement un titre, des métadonnées, une brève description, des actions rapides et des groupes d'informations connexes.
Compilation
Le modèle de compilation affiche les détails d'un élément sur le côté gauche de l'écran, comme un podcast, ainsi que ses éléments, comme ses épisodes, dans le panneau de droite.
GRid
Le modèle en grille affiche des collections de contenu dans une grille organisée. Elle affiche le contenu avec une logique de navigation à distance claire et une expérience de navigation optimale.
Alerte
Le modèle d'alerte affiche un message en plein écran. Cela nécessite généralement une action pour débloquer l'alerte et revenir à l'écran précédent.
Colonnes de la fiche
Mise en page à une carte
Largeur de la fiche : 844 dp
Mise en page à deux cartes
Largeur de la fiche : 412 dp
Mise en page à 3 cartes
Largeur de la fiche : 268 dp
Mise en page à quatre cartes
Largeur de la fiche : 196 dp
Mise en page à cinq cartes
Largeur de la fiche : 124 dp
