Expérience utilisateur
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Niveau 2 – Optimisé pour les grands écrans
Pour les utilisateurs, l'interface utilisateur est l'application. L'UI détermine l'expérience utilisateur, qui détermine la satisfaction des utilisateurs, l'utilisation de l'application, les achats dans l'application et la fidélisation des clients.
Les grands écrans offrent un vaste espace d'affichage pour des interfaces utilisateur innovantes et adaptées qui offrent une expérience utilisateur que les petits écrans ne peuvent pas reproduire.
Optimisez votre application pour les grands écrans en incluant les éléments d'interface utilisateur suivants:
- Rail de navigation ou panneau de navigation
- Grandes zones cibles tactiles
- Menus et boîtes de dialogue bien placés
- Mises en page à plusieurs volets
Mises en page adaptatives
Créez des mises en page adaptatives qui optimisent l'interface utilisateur de votre application sur les grands et les petits écrans.
Concevez et développez pour plusieurs facteurs de forme simultanément. Pérennisez votre application pour les nouveaux types d'appareils.
Mises en page canoniques
Profitez des mises en page éprouvées pour les grands écrans afin de rendre l'expérience utilisateur de votre application exceptionnelle.
Créez une mise en page Liste/Détails, un volet secondaire ou une mise en page de flux pour rendre plus de contenus plus faciles à gérer et plus agréables.
Interface utilisateur responsive
Mettez en forme les éléments d'interface utilisateur en fonction de la taille de l'écran Appliquez aux boutons, aux fiches et aux champs de texte qui s'étendent sur toute leur largeur sur les petits écrans, une largeur correspondant à une taille fonctionnellement appropriée sur les grands écrans. Ne laissez pas les boîtes de dialogue et les autres fenêtres modales remplir l'intégralité de l'écran. Placez les menus contextuels et autres fenêtres pop-up associées à côté de l'élément sélectionné par l'utilisateur, et non au centre de l'écran.
Intégration d'activités
Mettez à jour vos anciennes applications basées sur des activités avec des mises en page à plusieurs volets sur les grands écrans. Aucune refactorisation de code n'est nécessaire. Configurez vos mises en page au format XML ou avec quelques appels d'API Jetpack WindowManager.
Étapes suivantes
Pour en savoir plus sur le développement d'une interface utilisateur pour une expérience utilisateur optimisée, consultez les guides du développeur suivants:
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/27 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/07/27 (UTC)."],[],[],null,["# UX\n\nTIER 2 --- Large screen optimized\n| **Objective:** Make your app [large screen\n| optimized](/docs/quality-guidelines/large-screen-app-quality#large_screen_optimized) by meeting the [LS-U1](/docs/quality-guidelines/large-screen-app-quality#LS-U1) through [LS-U4](/docs/quality-guidelines/large-screen-app-quality#LS-U4) user interface requirements of the [Large screen app\n| quality](/docs/quality-guidelines/large-screen-app-quality) guidelines.\n\nTo users, the user interface is the app. The UI determines the user experience,\nwhich determines user satisfaction, app usage, app purchases, customer\nretention.\n\nLarge screens offer expansive display space for innovative, accommodative UIs\nthat provide a UX small screens can't replicate.\n\nOptimize your app for large screens by including the following UI elements:\n\n- Navigation rail or navigation drawer\n- Large touch targets\n- Well-placed menus and dialogs\n- Multipane layouts\n\nAdaptive layouts\n----------------\n\nCreate adaptive layouts that optimize your app's UI on screens large and small.\nDesign and build for multiple form factors simultaneously. Future-proof your app\nfor new device types.\n\nCanonical layouts\n-----------------\n\nTake advantage of proven large screen layouts to make your app UX exceptional.\nCreate a list‑detail, supporting pane, or feed layout to make more content\nmore manageable and more enjoyable.\n\nResponsive UI\n-------------\n\nFormat UI elements based on screen size. Constrain the width of buttons, cards,\nand text fields that are full width on small screens to a functionally\nappropriate size on large screens. Don't let dialog boxes and other modal\nwindows fill the entire screen. Position context menus and other\nelement‑related pop‑up displays adjacent to the element the user\nselected, not centered on screen.\n\nActivity embedding\n------------------\n\nUpdate your activity‑based legacy apps with multipane layouts on large\nscreens. No code refactoring required. Configure your layouts in XML or with a\nfew Jetpack WindowManager API calls.\n\nNext steps\n----------\n\nTo learn about UI development for optimized UX, see the following developer\nguides:\n\n- [About adaptive layouts](/develop/ui/compose/layouts/adaptive)\n- [Canonical layouts](/develop/ui/compose/layouts/adaptive/canonical-layouts)\n- [Build responsive navigation](/develop/ui/views/layout/build-responsive-navigation)\n- [Activity embedding](/develop/ui/views/layout/activity-embedding)"]]
