Les vues sans défilement se concentrent sur les informations rapides et offrent de la valeur aux utilisateurs avec peu ou pas d'interaction. Il peut donc être difficile d'intégrer un comportement réactif à ces mises en page.
Composants de mise en page prédéfinis sans défilement
Boîte de dialogue
Une boîte de dialogue est une superposition temporaire qui occupe tout l'écran. Il permet aux utilisateurs d'effectuer une seule action.
- Les boîtes de dialogue vous permettent de vérifier que leur contenu est traité.
- Les boîtes de dialogue doivent communiquer des informations de manière directe et être dédiées à l'exécution d'une tâche.
- Les boîtes de dialogue doivent s'afficher en réponse à une tâche ou une action de l'utilisateur, avec des informations pertinentes ou contextuelles.
Messages de confirmation en superposition
La confirmation en superposition affiche un message de confirmation à l'utilisateur pendant une courte période. Utilisez ce composant pour capter l'attention de l'utilisateur après l'exécution d'une action.
Ouvrir sur le téléphone
La superposition "Ouvrir sur le téléphone" se déclenche lorsque l'utilisateur choisit de poursuivre son parcours sur un téléphone. La superposition comporte un indicateur de progression et indique à l'utilisateur quand consulter son téléphone.
Stepper
Les steppers offrent une expérience de contrôle en plein écran qui permet aux utilisateurs de faire un choix parmi une plage de valeurs. Ils peuvent contrôler l'interaction à l'aide des boutons ou de la couronne, et le niveau spécifique est indiqué par un indicateur de niveau incurvé.
Sélectionner l'heure
Les sélecteurs permettent aux utilisateurs de choisir parmi un nombre fini d'éléments dans des sections déroulantes. Le sélecteur d'heure comporte jusqu'à trois colonnes, selon que les secondes sont disponibles ou que l'horloge est au format 12 heures ou 24 heures. Les utilisateurs interagissent avec chaque colonne à la fois, en sélectionnant le nombre en le laissant au premier plan avant de continuer.
Sélecteur de date
Les sélecteurs permettent aux utilisateurs de choisir parmi un nombre fini d'éléments dans des sections déroulantes. Le sélecteur de date comporte jusqu'à trois colonnes, dont l'ordre peut être inversé entre la date, l'heure et l'année, selon le cas d'utilisation. Les sélecteurs de date nécessitent des chaînes de contenu plus longues. Par conséquent, une seule colonne est visible à la fois, ce qui donne un aperçu de ce qui se trouve à gauche ou à droite. Les utilisateurs interagissent avec chaque colonne à la fois, en sélectionnant le nombre en le laissant en focus avant de continuer.
Exemples de mises en page personnalisées sans défilement
Les écrans d'application non défilants ne sont pas limités aux composants définis. Vous pouvez combiner plusieurs éléments pour créer la mise en page de votre choix.
Vous devez tenir compte de l'espace limité sur un écran non défilant et utiliser des marges et des marges intérieures responsives (en pourcentage) pour utiliser l'espace d'écran disponible. Vous pouvez également envisager d'appliquer un point d'arrêt à 225 dp pour ajouter du contenu ou rendre le contenu existant plus lisible sur les écrans plus grands.
Maps
Superposition d'urgence
Alerte d'urgence
Comportement réactif et adaptatif
Tous les composants de la bibliothèque Compose s'adaptent automatiquement à la taille de l'écran plus large et gagnent en largeur et en hauteur. Pour ces vues en particulier, l'utilisation de points d'arrêt peut offrir une expérience particulièrement riche et précieuse à tous les utilisateurs.
Pour de nombreux boutons, cartes et marges de votre UI, étirez et remplissez l'espace pour différentes tailles d'écran afin de profiter de l'espace disponible sur l'UI et d'obtenir une mise en page équilibrée.
Utilisez la checklist suivante pour vérifier que les paramètres responsifs sont correctement définis :
- Créez des mises en page flexibles qui s'affichent correctement sur toutes les tailles d'écran.
- Appliquez les marges supérieure, inférieure et latérales recommandées.
- Définissez des marges en pourcentage là où le contenu pourrait être coupé.
- Utilisez des contraintes de mise en page pour que les éléments utilisent au mieux l'espace à l'écran et maintiennent l'équilibre sur différentes tailles d'appareils.
- Tenez compte du texte temporel, le cas échéant, mais ne le faites pas chevaucher la section supérieure de la page.
- Pensez à utiliser des boutons qui épousent les bords pour exploiter au maximum l'espace limité.
- Envisagez d'appliquer un point d'arrêt à 225 dp pour ajouter du contenu ou rendre le contenu existant plus lisible sur les grands écrans.
Plusieurs parcours de page sans défilement utilisant la pagination
Dans les scénarios où une expérience nécessite plus de contenu, mais souhaite conserver une mise en page sans défilement, envisagez une mise en page multipage avec pagination verticale ou horizontale.
