Modèle de conception de deux pages

En tirant parti de la métaphore skeuomorphic d’un livre, le modèle à deux pages a naturellement tendance à fournir une expérience de pagination similaire aux livres. Vous pouvez utiliser la limite naturelle pour afficher plusieurs éléments d’une collection, comme des pages ou des images, que l’utilisateur aurait sans cela peut-être été obligé de visualiser un par un.

En fonction de votre application, vous pouvez décider de paginer par 2 pages ou d’avancer d’une page à la fois.

Deux pages

Meilleures pratiques

Voici quelques scénarios qui vous aideront à vous guider lors de l’application de ce modèle de conception :

Afficher deux pages côte à côte, comme un livre

Pratiques conseillées Pratiques déconseillées
Utilisez deux écrans pour avoir deux vues de page complètement séparées. N’affichez pas la page sur deux écrans passant sous la charnière.

Ne dessinez pas les éléments sous la charnière

Pratiques conseillées Pratiques déconseillées
Utilisez le format en deux pages pour afficher des éléments actionnables pour votre contenu d’intégration ou d’instructions. N’affichez pas d’éléments actionnables sur deux écrans passant sous la charnière.

Développez chaque page pour utiliser les deux écrans en mode double paysage, mais assurez-vous que l’utilisateur peut voir tout le contenu

Pratiques conseillées Pratiques déconseillées
Affichez votre contenu sous la forme d’une page unique lorsque l’appareil est pivoté dans un paysage double. Ne verrouillez pas l’orientation de l’appareil. Autorisez l’utilisateur à faire pivoter l’appareil pour afficher le contenu avec un écran plus grand.

Utilisez un espace réservé ou un autre élément sur le deuxième écran si aucun contenu n’existe

Pratiques conseillées Pratiques déconseillées
Utilisez une illustration ou un indicateur visuel sur le deuxième écran si votre contenu n’a besoin que d’un seul écran. N’englobez pas une seule page sur deux écrans pour remplir l’espace.

Types d’applications qui peuvent tirer parti de ce modèle

  • Application orientée documents
  • Applications avec contenu paginé
  • Applications conçues pour la lecture
  • Applications avec un canevas élément ; par exemple, des notes, des tableaux artistiques, etc.

Exemples de code

Ces projets illustrent une implémentation simple de deux pages que vous pouvez utiliser dans vos applications :