Recommandations en matière de conception

Android vous aide à développer une application qui fonctionne bien sur un large éventail de tailles d'écran et de facteurs de forme d'appareils. Cette large compatibilité vous permet de concevoir une seule application que vous pouvez distribuer à tous vos appareils cibles.

Toutefois, pour offrir la meilleure expérience possible à vos utilisateurs sur chaque configuration d'écran, vous devez optimiser vos mises en page et autres composants d'UI pour différentes tailles. Sur ChromeOS, l'optimisation de votre UI vous permet de tirer pleinement parti de l'espace d'écran supplémentaire pour proposer de nouvelles fonctionnalités, présenter de nouveaux contenus ou améliorer l'expérience afin de renforcer l'engagement des utilisateurs.

Mises en page pour les grands écrans

Si vous avez développé votre application pour les téléphones et que vous souhaitez améliorer sa conception sur ChromeOS et d'autres facteurs de forme à grand écran, commencez par apporter de petites modifications à vos mises en page, polices et espacements. Pour les tablettes de 7 pouces ou un jeu avec un grand canevas, ces ajustements peuvent suffire.

Pour les écrans plus grands, vous pouvez repenser certaines parties de votre UI afin de remplacer une UI "étirée" par une UI multipanneau efficace, une navigation plus simple et du contenu supplémentaire. Les études Material de l'équipe Material Design fournissent des exemples de ce à quoi cela peut ressembler. Par exemple, découvrez comment Reply s'adapte à différentes tailles d'écran.

Voici quelques suggestions :

• Fournissez des mises en page personnalisées pour ces écrans plus grands. Pour ce faire, vous pouvez utiliser la dimension la plus courte de l'écran ou la largeur et la hauteur minimales disponibles.
• Imaginez comment votre UX et vos mises en page fonctionnent dans un environnement axé sur le mode Paysage, comme ChromeOS. Adaptez vos mises en page pour qu'elles soient esthétiques et performantes dans ces orientations en fonction de la taille de la fenêtre, ou fournissez des mises en page spécifiques au mode paysage en utilisant le qualificatif de ressource "land". Pour en savoir plus sur le redimensionnement dynamique des fenêtres et d'autres considérations pour les grands écrans, consultez la page Gestion des fenêtres.
• Les barres de navigation inférieures ne s'adaptent pas bien lorsque votre application est étirée pour être large. Envisagez de déplacer votre navigation vers un menu sur le côté gauche, où elle sera plus accessible et pourra afficher plus d'options. L'exemple de Reply illustre bien ce point.
• Au minimum, personnalisez les dimensions telles que la taille de la police, les marges et l'espacement pour les grands écrans afin d'améliorer l'utilisation de l'espace et la lisibilité du contenu. Réfléchissez à l'apparence des éléments lorsque les utilisateurs sont un peu plus loin de l'appareil, comme un appareil ChromeOS ou d'autres environnements de bureau.
• Ajustez la position des commandes de l'interface utilisateur pour qu'elles soient accessibles aux utilisateurs lorsqu'ils utilisent une souris ou tiennent une tablette, par exemple sur les côtés et loin du centre.
• La marge intérieure des éléments d'UI doit normalement être plus grande sur ChromeOS et les autres appareils à grand écran que sur les téléphones. Vos marges et gouttières doivent toutes s'adapter aux différentes tailles d'écran.
• Ajoutez une marge intérieure suffisante au contenu textuel pour qu'il ne soit pas aligné directement sur les bords de l'écran. Utilisez une marge intérieure d'au moins 16 dp autour du contenu situé près des bords de l'écran.

En particulier, assurez-vous que vos mises en page ne semblent pas "étirées " sur l'écran :

• Les lignes de texte ne doivent pas être trop longues. Optimisez-les pour qu'elles ne dépassent pas 100 caractères par ligne. Pour de meilleurs résultats, visez entre 50 et 75 caractères.
• Les listes et les menus ne doivent pas utiliser toute la largeur de l'écran.
• Utilisez des marges intérieures pour gérer la largeur des éléments à l'écran ou passez à une UI à plusieurs volets pour les appareils à grand écran (voir la section suivante).

Profiter de l'espace d'écran supplémentaire

Les appareils ChromeOS offrent beaucoup plus d'espace à l'écran pour votre application. Lorsque vous concevez l'UI de votre application pour les grands écrans, profitez pleinement de cet espace supplémentaire.

Dans les exemples Reply et Rally, les applications adoptent des approches différentes pour utiliser la taille d'écran plus grande. Reply ajoute de l'espace pour un aspect plus épuré, tandis que Rally affiche plus de données pour réduire le défilement et les clics.

Pour commencer, examinez les éléments qui peuvent être masqués pour l'utilisateur et réfléchissez à la façon de les rendre visibles. Il peut s'agir d'afficher plus d'informations sur un élément, de rendre visibles des menus qui peuvent être masqués derrière un clic droit ou un appui prolongé, ou d'afficher des options de navigation différentes ou plus détaillées maintenant que vous disposez d'une zone de navigation à gauche plus grande. Il s'agit de grands avantages en termes d'usabilité qui peuvent améliorer votre UX et donner à votre application une apparence plus proche de celle d'un ordinateur de bureau, sans avoir à repenser complètement l'expérience actuelle.

Voici quelques recommandations pour votre application :

• Votre marque détermine la direction à suivre lorsque vous réfléchissez à ces différentes tailles d'écran. Le choix des éléments à privilégier et à afficher à l'utilisateur dépend des types de parcours utilisateur existants et des fonctionnalités les plus couramment utilisées. Pour trouver l'inspiration, consultez les études Material et voyez comment chaque produit réagit différemment à un écran plus grand.
• Réfléchissez au comportement de la conception de votre application à l'aide d'un système de grille responsif, et à la façon dont le contenu, la navigation et les options doivent se déplacer à mesure que vous obtenez plus d'espace à l'écran.
• Déterminez les tailles d'écran pour lesquelles vous utiliserez une mise en page différente, puis fournissez les différentes mises en page dans les buckets de taille de fenêtre appropriés (par exemple, "large"/"xlarge") ou les largeurs de fenêtre minimales (par exemple, "sw600dp"/"sw720"). N'oubliez pas que, lorsque vous accédez à ces mises en page, le contexte global dans lequel se trouvait l'utilisateur ne doit pas changer. Vous devez essayer de conserver l'état de l'utilisateur lors du passage d'une mise en page à une autre (position de défilement, texte en cours de saisie, etc.).

Utiliser des composants conçus pour les écrans à densité plus élevée et plus grands

Pour que votre application soit la plus esthétique possible, fournissez des icônes et d'autres éléments bitmap pour chaque densité de la plage généralement acceptée par ChromeOS. Plus précisément, vous devez concevoir les icônes de la barre d'application, des notifications et du lanceur d'applications en suivant les consignes d'iconographie. Vous devez également les fournir au format vectoriel pour qu'elles puissent s'adapter aux différents écrans sur lesquels votre application sera affichée.

Pour en savoir plus sur les VectorDrawables et les éléments vectoriels sur Android, consultez cet article de blog de Nick Butcher.

Ajuster la taille de la police et les zones cibles tactiles

Pour que votre application soit utilisable sur ChromeOS et sur les écrans à densité plus élevée, ajustez la taille des polices et les cibles tactiles de votre UI pour toutes les configurations d'écran que vous ciblez. Vous pouvez ajuster la taille des polices à l'aide d'attributs de style ou de ressources de dimension. Vous pouvez également ajuster les cibles tactiles à l'aide de mises en page et de drawables bitmap, comme indiqué précédemment.

Voici quelques points à prendre en compte :

• Le texte ne doit pas être excessivement grand ni petit sur les écrans de grande taille et à haute densité. Assurez-vous que la taille des libellés est adaptée aux éléments d'interface utilisateur auxquels ils correspondent et qu'il n'y a pas de retours à la ligne inappropriés dans les libellés, les titres et les autres éléments.
• La taille de cible tactile recommandée pour les éléments à l'écran est de 48 dp. Vous devrez peut-être apporter quelques ajustements à l'UI de votre grand écran. Pour en savoir plus sur les méthodes d'espacement, consultez les informations sur les cibles tactiles et l'espacement entre les éléments lorsque la taille de l'écran change. Ces recommandations respectent également les consignes d'accessibilité minimales.
• Dans la mesure du possible, pour les petites icônes, étendez la zone tactile à plus de 48 dp à l'aide de TouchDelegate ou en centrant simplement l'icône dans le bouton transparent.