Les mises en page sont des modèles de structure qui fournissent un cadre pour la maintenance la cohérence visuelle de votre application. En définissant des grilles visuelles, l'espacement, les mises en page établissent une structure cohérente et organisée pour présentation des informations et des éléments de l'interface utilisateur.
Sélection
- Contrairement au Web ou aux appareils mobiles, les téléviseurs ont un format d'écran fixe de 16:9.
- Optimiser les mises en page le long des axes horizontal et vertical pour faciliter l'utilisation et de contrôle.
Principes
Directives pour vous aider à prendre des décisions de conception lors de la conception d'agences TV.
Conception pour les grands écrans
Depuis la popularisation des téléviseurs HD, les téléviseurs rectangulaires au format 16:9 sont devenus la norme. Auparavant, les téléviseurs étaient fabriqués dans un format carré (4:3 ou 1,33:1).
Concevoir sur la plate-forme Android
Lors de la conception, utilisez les dp pour afficher les éléments de manière uniforme sur des écrans de différentes densités, comme avec tout autre appareil Android. Concevez toujours avec une résolution MDPI de 960 x 540 px.
Pour MDPI, 1 px = 1 dp
Les assets doivent être en 1080p. Cela permet au système Android de réduire la taille des éléments de mise en page à 720p, si nécessaire.
Assurer la visibilité et la sécurité du surbalayage
S’assurer que les éléments importants sont toujours visibles par 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 garantit que les éléments à l'écran de la mise en page se trouvent dans le surbalayage.
Remplir tout l'écran
N'ajustez pas les éléments de l'arrière-plan de l'écran et ne les raccordez pas à la zone sûre pour le surbalayage. Autorisez plutôt l'affichage partiel des éléments hors écran. Cela garantit que tous les écrans affichent correctement les éléments en arrière-plan et hors écran.
Optimiser avec des axes
Réfléchissez à la façon dont les utilisateurs se servent de la télécommande sur leur téléviseur. Assurez-vous que l'interface de votre téléviseur est simple à utiliser avec la télécommande. Concevez chaque direction (haut, bas, gauche, droite) avec un objectif clair et un modèle de navigation afin d’aider les utilisateurs à comprendre comment se déplacer dans de 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 a un Il est recommandé de concevoir votre application au format 16:9 Taille d'écran de 960 x 540 pixels. Cela garantit que tous les éléments peuvent être redimensionnée proportionnellement pour les écrans HD ou 4K.
Marges de surbalayage
Les marges de surbalayage sont les espaces entre le contenu et les 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 contre d'é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 en haut et en bas).
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 d'une largeur de 52 dp et un espace de 20 dp entre elles. Vous devez avoir un espace de 58 dp des deux côtés et un espace de 4 dp à la verticale. l’espacement entre les lignes.
Modèles de mise en page
Trois modèles de mise en page sont disponibles en fonction de votre appareil à usage et d'affichage: Horizontal Stack Layout, Vertical Stack Layout, et mise en page sous forme de grille.
Mise en page de la pile horizontale
Une mise en page de pile horizontale organise les composants horizontalement. Leur taille, leur format ou leur format peuvent varier. Cette mise en page est souvent utilisés pour regrouper le contenu et les composants.
Mise en page de la pile verticale
Une mise en page de pile verticale organise les composants verticalement, ce qui permet une taille, un format et un format flexibles. Il est généralement utilisé pour regrouper différents types de texte, les composants interactifs et de modèles de mise en page.
Mise en page sous forme de grille
Une grille est un ensemble de colonnes et de lignes qui se croisent, et une grille La mise en page affiche le contenu de cette grille. Il organise le contenu de manière logique ce qui facilite la navigation pour les utilisateurs.
Pour éviter tout chevauchement, il est important de tenir compte de la marge intérieure entre et l'augmentation de la taille des états de ciblage. Par exemple, quand un internaute (une fiche, par exemple) est mis en surbrillance. Si vous utilisez nos suggestions Mise en page en grille (12 colonnes en 52 dp, avec des gouttières de 20 dp), consultez les fiches pour 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 à améliorer des décisions lors de la conception des mises en page TV. En divisant les écrans de télévision horizontalement, il peut aider à séparer différents types de composants, à communiquer des informations la hiérarchie 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 Stack Layout et 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-la avec une expérience centrée sur le contenu et les pages d'informations essentielles.
Mise en page à deux volets
Une mise en page à deux volets est plus efficace lorsque la page affiche un contenu hiérarchique. Il est largement utilisé dans les expériences centrées sur les tâches.
Surcharge cognitive
Les contenus compliqués et peu clairs peuvent être source de confusion, de gêne et d'immersion et l'engagement. Rendez votre conception lisible, épurée et présente que les informations essentielles.
Évitez d'utiliser trop de panneaux pour regrouper le contenu. Cela crée une charge cognitive et une hiérarchie inutiles aux utilisateurs.
À faire
À éviter
Hiérarchie et navigation express
Les panneaux permettent de séparer et d'organiser visuellement le contenu. Elles aident à guider les utilisateurs, et peuvent 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 interface utilisateur confortable qui indique clairement où l'utilisateur et où il peut aller.
Parcourir
Le modèle de navigateur affiche les "clusters" de contenu multimédia ou des lignes dans une pile verticale. Les utilisateurs peuvent faire défiler les lignes vers le haut ou vers le bas, et parcourir la droite ou la gauche pour parcourir le contenu d'une ligne spécifique.
Superposition de gauche
Le modèle de navigation de gauche affiche un panneau superposé sur le côté gauche de l'écran. Elle affiche généralement des éléments de navigation ou des éléments sur lesquels vous pouvez agir en rapport avec le contenu en arrière-plan.
Superposition de droite
Le modèle de superposition à droite affiche un panneau en superposition sur le côté droit de l'écran. Elle affiche généralement les éléments sur lesquels vous pouvez agir indépendamment du contenu en arrière-plan.
Superposition centrale
Le modèle de superposition centrale affiche un élément modal qui se superpose à une vue existante. Il est utilisé pour communiquer des informations urgentes ou inciter à prendre une décision.
Superposition inférieure
Le modèle de superposition inférieure est couramment utilisé pour les bottom sheets. Les bottom sheets sont des surfaces contenant du contenu complémentaire ancrées au bas de l'écran. Elles 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 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'informations sur le contenu affiche le contenu dans une mise en page empilée horizontale. Le contenu comprend généralement un titre, des métadonnées, une brève description, des actions rapides et des clusters d'informations associés.
Compilation
Le modèle de compilation affiche les détails d'un élément à gauche de l'écran, comme un podcast, avec ses éléments, comme ses épisodes, dans le panneau de droite.
Grille
Le modèle de grille affiche des collections de contenu dans une grille organisée. Elle présente des contenus 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. Une action est généralement requise pour débloquer l'alerte et revenir à l'écran précédent.
Colonnes de la fiche
Mise en page à 1 carte
Largeur de la fiche : 844 dp
Mise en page à 2 fiches
Largeur de la fiche : 412 dp
Mise en page à 3 fiches
Largeur de la fiche : 268 dp
Mise en page à 4 fiches
Largeur de la fiche : 196 dp
Mise en page à 5 fiches
Largeur de la fiche : 124 dp
