Lors de l’Android Developer Summit 2022, Google a partagé un « Galerie grand écran » qui fournit des conseils de mise en page pour les applications pour tablettes et pliables par catégorie : médias sociaux et communication, médias, productivité, achats et lecture.

Selon Google, ces « mises en page canoniques sur grand écran sont des mises en page d’applications éprouvées et polyvalentes qui offrent une expérience utilisateur optimale sur les appareils à grand écran » (tablettes, pliables et ChromeOS), ainsi que sur les téléphones. Ils sont basés sur les conseils de Material Design et réactifs, ainsi qu’adaptatifs, par nature. L’objectif est d’être « à la fois esthétique et fonctionnel ».

Les mises en page canoniques sont des compositions sur grand écran qui servent de points de départ pour la conception et la mise en œuvre.

Il y a trois mises en page pour organiser les éléments communs de l’application tablette/pliable :

• Vue détaillée de la liste: « De nombreuses mises en page peuvent être établies sur la base de la relation entre une liste et une vue détaillée. La relation s’établit spatialement en prenant le côté gauche de l’écran pour afficher une liste et le côté droit pour afficher le détail de la liste.
• Panneau de support: « La disposition du panneau de support est une méthode pour étendre un écran. Les dispositions de panneau de support sont différentes des dispositions de vue de détail de liste car les points focaux principaux et secondaires sont considérés comme tout aussi importants et intégrés les uns aux autres, simultanément.
• Alimentation: « Les flux sont une mise en page courante pour les actualités et le contenu social. Les flux utilisent une composition de grille pour permettre la navigation et la découverte de contenu. »
  • « Sur les pliables, cependant, le flux peut être conçu comme une vue plus immersive en raison de la plus grande taille de l’écran. »

Applications de médias sociaux et de communication

• Utilisation vue détaillée de la liste pour:
  • « Liste des conversations côte à côte avec les détails de la conversation »
  • « une compilation de vidéos que les utilisateurs peuvent parcourir et sélectionner, lire et mettre en pause, le tout sur le même écran »
• Utilisation panneau de support pour:
  • Outils : par exemple, retouche d’image
  • commentaires
• Utilisation nourrir pour:
  • « un collage de messages dans un format de grille flexible. Utilisez la taille et la position pour créer des groupes ou attirer l’attention sur des publications importantes. »

• Expériences différenciées :
  • Dessus de la table: Google recommande de prendre en charge une vue de table mains libres sur les appareils pliables où l’écran est ouvert à un angle de 90 degrés.
  • Glisser déposer: « interactions glisser-déposer sans tâtonnement – au sein des applications et, en mode multi-fenêtres, entre les applications »
  • Image dans l’image
  • Multi fenêtre: « Permettez aux utilisateurs de rechercher tout en écrivant, de rechercher tout en discutant, de programmer tout en faisant des appels vidéo. »

Médias

• Utilisation nourrir pour:
  • Découverte de médias : « Créez un flux multimédia riche qui permet aux utilisateurs de découvrir de nouveaux contenus, de nouveaux artistes, de nouvelles recommandations et des avis. »
  • Navigation multimédia : « Créez un kiosque multimédia qui permet aux utilisateurs de parcourir, trier, filtrer et sélectionner leurs films, musiques ou émissions de télévision préférés à partir d’une vaste collection multimédia sur un écran de grande production. »
• Utilisation panneau de support pour:
  • Media+ : « Améliorez l’expérience de visionnage ou d’écoute des médias dans l’espace élargi des grands écrans avec une liste déroulante de titres similaires, de critiques publiées ou d’œuvres supplémentaires des mêmes artistes ou acteurs. »
  • Mode immersif : « Intégrez un panneau de support pour le contexte, la pertinence ou la référence tout en conservant une expérience visuelle immersive. »
• Utilisation vue détaillée de la liste pour:
  • Exploration facile : « Créez un navigateur multimédia interactif pour rendre les recherches multimédias productives et attrayantes. Permettre aux utilisateurs de naviguer tout en regardant ou en écoutant. »

• Expériences différenciées :
  • Dessus de la table: « Placez le support de lecture au-dessus du pli, les commandes et le contenu supplémentaire en dessous, pour une expérience de visionnage ou d’écoute mains libres. »
  • Image dans l’image
  • Multi fenêtre: « Permettez aux utilisateurs d’effectuer plusieurs tâches avec deux applications côte à côte pour parcourir une collection de films tout en vérifiant les distributions et les personnages, ou écoutez de la musique tout en recherchant des couvertures ou les dernières nouvelles et critiques musicales. »

Productivité

• Utilisation nourrir pour:
  • Parcourir et filtrer les fichiers
• Utilisation vue détaillée de la liste pour:
• Utilisation panneau de support pour:
  • Outils et paramètres
  • Avis et commentaires

• Expériences différenciées :
  • Multi fenêtre: Voir Google Docs/Sheets/Slides comme exemple d’ouverture de plusieurs instances de document
  • Glisser déposer: Partage plus rapide (tel qu’adopté par les applications Workspace)
  • Dessus de la table: « Concevez des mises en page de table qui permettent aux utilisateurs de laisser tomber ce qu’ils font et de se concentrer sur ce qui est important – la présentation d’un collègue, une vidéoconférence – tout en ayant un accès facile à d’autres contenus et commandes d’application mains libres. »

Achats

• Utilisation vue détaillée de la liste pour:
• Utilisation nourrir pour:
• Utilisation panneau de support pour:
  • Soutenir la vente : « des fonctionnalités d’assistance telles que des filtres de produits pour des recherches ciblées ou une liste de contrôle d’options de produits pour une vente incitative subtile. »

• Expériences différenciées :
  • Multi fenêtre: « permettre aux acheteurs de voir les produits dans une fenêtre tout en recherchant les évaluations, les avis et les rapports sur les produits dans une autre »
  • Glisser déposer: « Faites vos achats rapidement et facilement avec un panier d’achat par glisser-déposer. Capturez les achats potentiels dans une liste de souhaits par glisser-déposer. »

En lisant

• Utilisation mode immersif pour:
  • Lisibilité plein écran : « Les grands écrans en mode immersif optimisent la lisibilité avec de longues lignes et beaucoup d’espace blanc pour une expérience de lecture agréable et confortable pour les yeux. »
• Utilisation nourrir pour:
  • Listes de livres et achats : « permettez aux acheteurs de livres de parcourir ligne après ligne les dernières éditions dans une grande grille à plusieurs colonnes qui présente les meilleurs vendeurs ou les meilleures affaires avec une taille et une position importantes. »
  • Qu’y a-t-il à l’intérieur : « Rendez la navigation dans les livres informative et engageante en incluant des synopsis ou des extraits de texte pour certains titres dans les listes de livres à plusieurs titres. »
• Utilisation panneau de support pour:
  • Contenu complémentaire : « Complétez le contenu principal de votre application avec des informations éclairantes et édifiantes dans un panneau de support. »
  • Outils de balisage

• Expériences différenciées :
  • Multi fenêtre: Livre d’un côté et prise de notes de l’autre
  • Posture du livre: « Capturez l’expérience de la lecture d’un vrai livre avec une mise en page de deux pages sur un grand écran pliable ouvert comme un livre relié. »
  • Glisser déposer: Pour une copie plus facile dans des applications de notes/documents ou de messagerie

FTC : Nous utilisons des liens d’affiliation automatique générateurs de revenus. Suite.

Publicité

---

Découvrez 9to5Google sur YouTube pour plus d’informations :