Utilisation des icônes et des images tvOS dans Xamarin

Article
03/16/2017

La création d’icônes et d’images captivantes est un élément essentiel du développement d’une expérience utilisateur immersive pour vos applications Apple TV. Ce guide décrit les étapes requises pour créer et inclure les ressources graphiques nécessaires pour vos applications Xamarin.tvOS :

Image de lancement : une image de lancement s’affiche lorsque votre application est démarrée pour la première fois et remplacée par le premier écran de l’application une fois le lancement terminé.
Images superposées : spécifiques à Apple TV, les nouvelles images superposées d’Apple fonctionnent avec l’effet Parallax pour créer un effet 3D pour les éléments sélectionnés. Il existe plusieurs façons de créer des images superposées.
Icône d’application : les icônes sont requises non seulement pour l’écran d’accueil Apple TV, mais pour l’App Store. Elles doivent être fournies en tant qu’image en couches.
Image de l’étagère supérieure : si votre application est placée sur la ligne supérieure de l’écran d’accueil, elle a besoin d’une image de étagère supérieure pour mettre en évidence les fonctionnalités de votre application. Si vous le souhaitez, vous pouvez fournir du contenu de l’étagère supérieure dynamique pour mettre en surbrillance le contenu de votre application.
Images Game Center : si votre application est un jeu et utilise Game Center, plusieurs images supplémentaires seront requises.
Définition des images de projet Xamarin.tvOS : décrit les étapes requises pour définir l’icône Lancer l’image et l’application pour votre application Xamarin.tvOS.

Important

Toutes les images sur Apple TV sont à la résolution 1x (@1x) et vous ne devez utiliser que des images de cette taille. L’ajout de graphiques plus volumineux et à résolution supérieure ne prend pas seulement le temps de télécharger et d’utiliser davantage de mémoire et de stockage, mais il doit être redimensionné dynamiquement au moment de l’exécution et affectera négativement les performances du dessin.

Lancer l’image

L’image de lancement est la première chose qui s’affiche lorsque votre application Xamarin.tvOS est initialement démarrée sur Apple TV et, par conséquent, chaque application tvOS doit fournir une image de lancement.

L’image de lancement s’affiche rapidement et donne l’impression que votre application est rapide et réactive. Apple TV remplacera l’image de lancement par le premier écran de votre application peu de temps après.

Les images de lancement ne sont pas une opportunité pour les publicités ou l’expression artistique, elles n’existent que pour donner l’impression que votre application démarre rapidement et est prête à être utilisée.

Lancer la taille de l’image	Notes
1920 x 1080 px	Fichiers .png non superposés uniquement

Apple fait les suggestions suivantes pour concevoir l’image de lancement de votre application :

Presque identique au premier écran : votre écran de lancement doit être le plus proche possible du premier écran de votre application. L’inclusion de graphiques ou d’éléments différents peut entraîner un « flash » ennuyeux lorsque le premier écran s’affiche.
Évitez d’utiliser du texte : les images de lancement sont statiques et, par conséquent, ne seront pas localisées avant d’être affichées.
Lancement de la version préliminaire - Étant donné que les utilisateurs Apple TV changent fréquemment d’applications, vous ne devez pas attirer l’attention sur le processus de lancement de l’application.
Aucune publicité ou personnalisation : votre image de lancement ne doit pas être utilisée comme écran À propos ou inclure une personnalisation, sauf si elle fait partie statique du premier écran de votre application. Les publicités sont strictement interdites.

Définition de l’image de lancement

Pour définir l’image de lancement de votre projet tvOS, procédez comme suit :

Dans le Explorateur de solutions, double-cliquez Assets.xcassets pour l’ouvrir pour modification :
Dans l’Éditeur de ressources, cliquez sur la LaunchImages ressource :
Cliquez sur l’entrée 1x Apple TV et sélectionnez l’image de lancement ou faites glisser éventuellement une nouvelle image à partir du système de fichiers :
Enregistrez vos modifications.

Images superposées

Nouveautés d’Apple TV, les images superposées fonctionnent avec l’effet Parallax pour produire un effet 3D qui permet de maintenir l’utilisateur sur le canapé connecté mentalement au contenu sur l’écran à travers la salle.

Les images en couches contiennent de deux (2) à cinq (5) couches distinctes combinées pour former une image complète. À l’exception de la couche d’arrière-plan, chaque couche utilise son ordre Z avec la transparence pour créer une illusion de profondeur. Lorsque l’utilisateur interagit avec une image en couches, les couches ordonnées Z supérieures sont mises à l’échelle et se chevauchent pour créer cet effet.

Important

Les images en couches sont requises pour les icônes de votre application et sont facultatives pour d’autres éléments focusables (par exemple, l’image supérieure). Toutefois, Apple suggère d’utiliser des images superposées pour n’importe quelle image qui peut se concentrer dans votre application.

Apple apporte les suggestions suivantes pour la conception de vos images en couches :

Rendre la couche d’arrière-plan opaque : votre couche d’arrière-plan (couche 1) doit être opaque ou vous obtiendrez une erreur lorsque vous essayez d’utiliser l’image superposée sur Apple TV. Toutes les autres couches peuvent contenir plusieurs niveaux de transparence pour améliorer l’effet 3D.
Isoler les éléments de premier plan, de milieu et d’arrière-plan : placez des éléments de premier plan (comme des personnages de jeu) au premier plan, utilisez le milieu pour les éléments secondaires ou les ombres. Enfin, incluez un arrière-plan neutre pour fournir une étape pour vos couches supérieures.
Conserver le texte au premier plan : sauf si vous souhaitez que votre texte soit masqué par des niveaux supérieurs, il doit généralement se trouver sur la couche la plus haute.
Utiliser la couche simple - L’effet parallaxe a été conçu pour être subtil afin de garder vos couches à un minimum pour empêcher les effets irréalistes de jarring.
Incluez une zone Coffre - Étant donné que les couches supérieures peuvent être rognées pendant un effet parallaxe, vous devez créer une bordure de zone Coffre dans chaque couche. Si vous fermez trop le contenu des couches, il peut être rogné. Les couches supérieures subissent davantage de mise à l’échelle et de rognage que les couches inférieures. Consultez la section Dimensionnement des couches d’images ci-dessous.
Aperçu souvent : les images en couches doivent être aperçues souvent pour s’assurer que l’effet 3D souhaité se produit et qu’aucun contenu sur les couches individuelles n’est rogné. Vous devez afficher un aperçu de vos images superposées sur du matériel Apple TV réel pour vous assurer qu’elles s’affichent comme prévu.

Dans la mesure du possible, vous devez toujours utiliser les contrôles intégrés UIKit pour afficher vos images superposées, car elles obtiennent automatiquement l’effet Parallax lorsqu’ils entrent en focus.

Dimensionnement des couches d’images

Il est important de ne pas oublier d’inclure une bordure de zone Coffre dans chaque couche qui compose votre image superposée. Étant donné que les couches individuelles peuvent être mises à l’échelle et rognées pendant l’effet parallaxe, le contenu des couches peut être rogné s’il est trop proche du bord de la couche :

Création d’images en couches

tvOS fonctionne avec des images superposées dans les formats suivants :

Fichiers CAR : il s’agit d’un format de catalogue de ressources propriétaire créé par Apple. Vous ne créez pas directement de fichiers CAR, ils sont créés au moment de la compilation à partir de tous les fichiers LSR et inclus dans votre offre groupée d’applications.
Images LSR : il s’agit d’un format d’image propriétaire créé par Apple. Utilisez le plug-in Parallax Exporter Adobe Photoshop ou le parallax Previewer pour créer et afficher un aperçu des images superposées au format LSR.
Assets.xcassets : de deux (2) à cinq (5) images au format standard .png incluses dans un catalogue d’éléments multimédia qui seront compilées dans une image au format CAR ou LSR au moment de la compilation.
Fichiers LCR : il s’agit d’un format de fichier propriétaire créé par Apple. Les fichiers LCR sont destinés à être utilisés comme contenu supplémentaire téléchargé à partir de l’un de vos serveurs de contenu. Le fichier LCR ne doit jamais être inclus dans votre offre groupée d’applications. Les fichiers LCR sont générés à partir de fichiers LSR ou Photoshop à l’aide de l’outil layerutil en ligne de commande inclus avec Xcode.

Le parallax Previewer

Apple a créé l’aperçu parallax pour afficher un aperçu et créer des images superposées requises pour les icônes d’application et les éléments pouvant être mis au point facultatifs. L’aperçu affiche chaque couche qui forme l’image superposée terminée :

Lors de l’aperçu d’une image superposée, vous pouvez utiliser la souris pour faire pivoter l’image et afficher un aperçu de l’effet Parallax. Utilisez les + boutons (plus) et - (moins) pour ajouter et supprimer des couches.

Lors de la création d’une image en couches, elle peut être exportée au format LSR et incluse dans l’offre groupée de votre application.

Pour plus d’informations sur la création et la préversion d’images en couches, consultez la section Création d’illustrations parallax d’Apple du Guide de programmation des applications pour tvOS.

Icônes d’application

Votre application Xamarin.tvOS nécessite non seulement une icône d’application pour l’écran d’accueil Apple TV, mais également une icône pour l’App Store. L’icône d’application est la première modification à faire une grande impression sur votre utilisateur potentiel et doit communiquer l’objectif de votre application en un clin d’œil.

Chaque application doit fournir une petite et une grande version de son icône d’application. La petite icône sera utilisée sur l’écran d’accueil Apple TV lorsque l’application est installée. La version volumineuse est utilisée par l’App Store. L’icône d’application volumineuse doit imiter l’apparence de la petite version de l’icône.

Petite icône	Résolution	Résolution
Taille réelle	400x240px	1280x768px
taille de zone Coffre	370x222px
Taille non focale	300x180px
Taille prioritaire	370x222px

Important

Vos icônes d’application doivent être fournies en tant qu’images en couches. Pour plus d’informations, consultez la section Image en couches ci-dessus.

Apple fournit les suggestions suivantes pour créer vos icônes d’application :

Fournissez un point de focus unique : concevez votre icône avec un point de focus unique placé directement au centre de l’icône.
Utilisez un arrière-plan simple : gardez votre arrière-plan d’icône simple afin que les couches supérieures se distinguent. Envisagez d’utiliser une couleur simple ou un dégradé subtil.
Limitez la quantité de texte : étant donné que le nom de l’application apparaît sous l’icône lorsqu’elle est sélectionnée par l’utilisateur, vous devez inclure du texte uniquement lorsqu’elle est essentielle à la conception de l’icône.
N’utilisez pas de captures d’écran : les captures d’écran sont trop complexes pour une icône et n’autorisent pas l’utilisateur à voir l’objectif de votre application en un clin d’œil.
Conserver le carré des icônes : tvOS applique automatiquement un masque qui arrondit subtilement les angles de vos icônes. N’incluez pas cette arrondie vous-même.
Séparez soigneusement vos couches : le texte doit se trouver sur la couche supérieure, les éléments secondaires au milieu et un arrière-plan neutre qui permet à vos couches supérieures de briller.
Utilisez des dégradés et des ombres soigneusement : les dégradés et les ombres peuvent se heurter à l’effet parallaxe afin qu’ils soient utilisés soigneusement. Les styles de dégradé simple de haut en bas et clair à foncé fonctionnent le mieux. Les ombres fonctionnent normalement mieux que les teintes nettes et arêtes.
Modifier la transparence de la couche : utilisez différents niveaux de transparence sur les niveaux supérieurs de votre icône d’application pour augmenter l’effet 3D. La couche d’arrière-plan doit être opaque ou elle entraîne une erreur.

Définition des icônes d’application

Pour définir les icônes d’application requises pour votre projet tvOS, procédez comme suit :

Dans le Explorateur de solutions, double-cliquez Assets.xcassets pour l’ouvrir pour modification :
Dans l’Éditeur de ressources, développez la App Icon & Top Shelf Image ressource :
Ensuite, développez la App Icon - Small ressource :
Développez ensuite la Back ressource, puis cliquez sur l’entrée Contents :
Cliquez sur l’entrée 1x Apple TV et sélectionnez un fichier image.
Répétez les étapes ci-dessus pour les ressources et Middle les Front ressources.
Répétez ensuite les mêmes étapes pour définir la App Icon - Large ressource.
Enregistrez vos modifications.

Image de l’étagère supérieure

Si l’utilisateur a placé votre application Xamarin.tvOS sur la ligne supérieure sur l’écran d’accueil Apple TV, une grande image de la tablette supérieure s’affiche lorsque votre application est sélectionnée par l’utilisateur. Cette image doit mettre en évidence les fonctionnalités de votre application ou fournir des liens directs vers son contenu.

L’image de l’étagère supérieure peut être fournie sous la forme d’un seul fichier statique .png ou .lsr de fichier (voir Création d’images en couches) ou être créée dynamiquement au moment de l’exécution sous la forme d’une seule ligne d’éléments focusables (voir Contenu de l’étagère supérieure dynamique ci-dessous).

Taille supérieure de l’image de l’étagère	Notes
1920x720px	Fichier .lsr .png statique ou en couches

Apple fournit les suggestions suivantes pour la création de vos images supérieures :

Utilisez Rich Static Imagery : si votre application ne fournit pas de contenu dynamique, son image supérieure est non focusable. Utilisez cette image pour mettre en évidence les fonctionnalités de l’application ou de votre marque.
Lien vers le contenu de l’application : les dispositions de l’étagère supérieure dynamique fournissent un lien rapide vers le contenu que votre utilisateur trouve le plus important dans votre application. Utilisez cette zone pour fournir un lien rapide pour démarrer votre application et accéder immédiatement au contenu donné.
Affichez le contenu le plus récent : le contenu riche en rayons peut dessiner un utilisateur dans votre application et les rendre plus utilisables. Utilisez-le comme zone pour présenter le contenu le plus élevé ou le plus récent.
Contenu personnalisé : les utilisateurs placent leurs applications les plus fréquemment utilisées ou favorites dans la ligne supérieure de l’écran d’accueil. Utilisez l’étagère supérieure pour afficher le contenu qui leur intéresserait le plus.
Publicités non autorisées : les publicités sont strictement interdites d’être affichées dans le haut de l’étagère. Vous pouvez afficher le contenu purchasable le plus récent, mais aucune information de tarification ne doit être affichée.

Définition de l’image de l’étagère supérieure

Pour définir l’image supérieure requise pour votre projet tvOS, procédez comme suit :

Dans le Explorateur de solutions, double-cliquez Assets.xcassets pour l’ouvrir pour modification :
Dans l’Éditeur de ressources, développez la App Icon & Top Shelf Image ressource :
Cliquez sur la Top Shelf Image ressource :
Cliquez sur l’entrée 1x Apple TV et sélectionnez un fichier image.
Enregistrez vos modifications.

Contenu de l’étagère supérieure dynamique

Au lieu d’afficher une image d’étagère supérieure statique, l’étagère supérieure peut contenir une ligne dynamique d’éléments focusables ou un ensemble dynamique de bannières de défilement. Ces deux styles dynamiques vous permettent de mettre en surbrillance le contenu fourni par votre application ou de passer à ses fonctionnalités les plus utilisées.

Ligne de contenu sectionnée

Ce type de contenu d’étagère supérieure dynamique présente une seule ligne de défilement, éléments pouvant faire l’objet d’un focus éventuellement divisé en sections. Il est généralement utilisé pour mettre en surbrillance du contenu d’application nouveau, favori ou récemment consulté.

Le contenu est présenté sous la forme d’une liste de défilement horizontale unique de contenu avec une étiquette apparaissant sous l’élément de contenu actuel sélectionné (qui a actuellement le focus). Si l’utilisateur sélectionne un élément de contenu donné, votre application est lancée et elle doit être prise directement dans ce contenu.

Les tailles de contenu suivantes sont requises :

Size	Affiche (2 :3)	Carré (1 :1)	HDTV (16 :9)
Taille réelle	404x608px	608x608px	908x512px
taille de zone Coffre	380x570px	570x570px	852x479px
Taille non focale	333x500px	500x500px	782x440px
Taille prioritaire	380x570px	570x570px	852x479px

Apple fournit les suggestions suivantes pour la ligne de contenu sectionnée :

Terminez la ligne : vous devez fournir suffisamment de contenu pour couvrir la largeur totale de l’écran.
Mise à l’échelle d’images mixtes : la ligne de contenu sectionnée a été conçue pour contenir un mélange de tailles d’image (dans la liste fournie ci-dessus). Toutefois, si vous combinez des tailles d’image, sachez que la mise à l’échelle supplémentaire sera appliquée pour normaliser l’affichage du contenu.

Défilement des bannières d’ensemble

Si vous le souhaitez, votre application Xamarin.tvOS peut présenter son contenu dans l’étagère supérieure sous la forme d’un défilement et d’une collection de bannières en boucle qui remplissent presque l’écran. Ce style est généralement utilisé pour présenter du contenu riche et nouveau comme de nouvelles émissions de télévision.

En plus du défilement automatique, l’utilisateur peut prendre le contrôle des bannières et défiler dans les deux sens à l’aide de Siri Remote. Faire un petit mouvement circulaire sur Siri Remote lorsqu’une bannière est en focus active l’effet Parallax pour cette bannière.

Image de bannière (large)

Size	Résolution
Taille réelle	1940x624px
taille de zone Coffre	1740x620px
Taille non focale	1740x560px
Taille prioritaire	1740x620px

Le défilement des bannières d’ensemble peut être fourni sous la forme d’un fichier statique .png ou en .lsr couches.

Apple fournit les suggestions suivantes pour les bannières d’ensemble de défilement :

Quantité de contenu : vous devez fournir un minimum de trois bannières (3) pour que le défilement se sente naturel. Vous devez inclure pas plus de huit bannières (8) ou rendre la navigation difficile pour l’utilisateur final.
Texte du contenu : si votre bannière nécessite du texte dans l’image de bannière. Si vous utilisez des images en couches, votre texte doit se trouver dans la couche supérieure.

Pour plus d’informations sur l’ajout d’une extension top shelf à votre application, consultez la référence de l’infrastructure TVServices d’Apple pour fournir du contenu dynamique top shelf.

Images du Centre de jeux

Si votre application Xamarin.tvOS est un jeu et que vous avez inclus la prise en charge de Game Center, plusieurs ressources d’image supplémentaires seront requises :

Icônes de réussite : une image opaque est requise pour chaque réussite qui sera automatiquement rognée dans un cercle. Les réalisations sont des éléments non focusables.
Illustration de tableau de bord : une image facultative peut être fournie qui apparaîtra en haut du tableau de bord de votre application dans Game Center. Ces images ne sont pas focusables.
Illustration de classement : vous devez fournir entre un (1) et trois (3) images de rapport d’aspect 16 :9 pour chaque classement pris en charge par votre application. Il peut s’agir de fichiers statiques .png ou en couches .lsr . L’illustration leaderboard est focusable.

Size	Icônes de réussite	Illustration du tableau de bord	Illustration du classement
Taille visible	200x200px	923x150px	n/a
Taille réelle	320x320px	n/a	659x371px
taille de zone Coffre	n/a	n/a	618x348px
Taille non focale	n/a	n/a	548x309px
Taille prioritaire	n/a	n/a	618x348px

Pour plus d’informations sur l’utilisation de Game Center, consultez le Guide de programmation de Game Center d’Apple.

Utilisation d’images

Étant donné que tvOS 9 est un sous-ensemble d’iOS 9, les mêmes techniques utilisées pour inclure et afficher des images dans une application Xamarin.iOS fonctionnent également pour une application Xamarin.tvOS. Pour plus d’informations, consultez notre documentation sur l’affichage d’une image .

Définition des images de projet Xamarin.tvOS

Comme indiqué ci-dessus, toutes les applications tvOS nécessitent une image de lancement et une icône d’application. Cette section traite de la sélection de l’image de lancement et de l’icône d’application pour votre projet d’application Xamarin.tvOS une fois qu’ils ont été définis dans un catalogue de ressources.

Effectuez les actions suivantes :

Dans le Explorateur de solutions, double-cliquez dessus Info.plist pour l’ouvrir pour modification :
Dans l’Éditeur Info.Plist, sélectionnez le catalogue de ressources (configuré ci-dessus dans la section Définition des icônes d’application) pour les icônes d’application :
Ensuite, sélectionnez le catalogue de ressources (configuré ci-dessus dans la section Définition de l’image de lancement) pour les images de lancement.
Enregistrez vos modifications.

Résumé

Cet article a abordé tous les types et tailles d’image utilisés dans une application Xamarin.tvOS. Tout d’abord, il a abordé les images de lancement, les images en couches, les icônes d’application, les images de haut rayon et les images du Centre de jeux. Ensuite, il a couvert l’utilisation d’images dans votre application Xamarin.tvOS.

Partager via

Utilisation des icônes et des images tvOS dans Xamarin