À chaque application son concept

Quel type d’expérience voulez-vous proposer aux utilisateurs quand ils lancent votre application ? Combien de niveaux de pages de navigation allez-vous fournir ? Votre application utilisera-t-elle une orientation horizontale ou verticale, ou des orientations différentes pour s’adapter aux smartphones et tablettes ? À quoi vos pages de navigation doivent-elles ressembler ?

Vous pouvez créer différents types de comportements applicatifs. N’hésitez pas à jeter un œil aux applications existantes pour trouver des idées. Vous pouvez consulter la liste des cas d'utilisation et des exemples sur la page Sources d'inspiration pour AEM Mobile.

 

Organigramme

Vidéo sur la conception d’applications

Andrei Ganci et Martin Hecko ont animé la session suivante lors de la conférence Adobe MAX 2015 :

Designing Killer Mobile App Experiences (Conception d’expériences pour l’application Killer Mobile) (1:15:32)

Utilisation de designs différents pour tablettes et smartphones

Lorsque vous créez un projet, vous précisez si vous souhaitez utiliser la même collection globale sur smartphones et tablettes ou si vous préférez utiliser des collections distinctes pour chaque type d’appareil. La principale raison de l'utilisation de collections globales distinctes pour tablettes et smartphones est d'ajouter des contenus différents sur tablettes et sur smartphones. Par exemple, vous pouvez utiliser des articles horizontaux sur tablette et des articles verticaux sur smartphone. Reportez-vous à la page Création de projets pour AEM Mobile.

Si vous souhaitez utiliser le même contenu sur tablettes et smartphones, mais spécifier différentes mises en page pour la page de navigation, vous pouvez créer des modèles de mise en page avec des rendus différents pour smartphones et tablettes. Reportez-vous à la page Création de cartes et de mises en page : Rendus de mise en page.

Indiquez si vous souhaitez utiliser un design ou un contenu différent pour smartphones et tablettes
Indiquez si vous souhaitez utiliser un contenu différent pour smartphones et tablettes.

Création de contenu pour votre application

Utilisez la section « Contenu et mises en page » du portail à la demande pour ajouter les articles, bannières et collections destinés à votre application. Ajoutez du contenu et des collections à votre projet ; ainsi, vous pourrez tester différentes versions de page de navigation.

Décidez du format à utiliser pour vos fichiers d’article. Par exemple, vous pouvez créer des articles HTML repositionnables ou, au contraire, des articles à mise en page fixe basés sur des documents sources InDesign. Reportez-vous à la page Méthodes pour la création de contenu AEM Mobile.

Lorsque vous créez des collections, sélectionnez le paramètre de votre choix pour déterminer si celles-ci doivent s’ouvrir sur la page de navigation (avec cartes et mises en page) ou sur la vue de contenu (qui affiche le premier article de la collection).

Ajoutez des articles à votre projet
Ajoutez des articles à votre projet.

Création d’une collection d’accueil

Quand l’utilisateur lance votre application, à quoi doit-il s’attendre ? Identifiez une collection qui deviendra votre « collection d’accueil ». Celle-ci n’a rien de particulier, elle constitue simplement le premier élément de votre collection globale.

Ajoutez les éléments requis à votre collection d’accueil. Il peut s’agir d’un ensemble de bannières, d’articles et d’autres collections. Pour déterminer l’aspect de chacun de ces éléments, vous créerez des cartes et des mises en page.

Voulez-vous que les utilisateurs puissent balayer l’écran vers la gauche et la droite pour passer d’un élément à l’autre dans la collection globale ? Si tel est le cas, sélectionnez l’option Activer la navigation par balayage horizontal. Si vous désactivez cette option, l’utilisateur doit appuyer sur les cartes ou utiliser le menu pour accéder aux autres sections de l’application.

Choix du contenu de niveau supérieur

Lorsque vous créez un projet, vous indiquez si vous souhaitez utiliser la même collection globale sur smartphones et tablettes ou si vous préférez utiliser des collections distinctes pour chaque type d’appareil. Si vous optez pour une collection globale commune, une collection intitulée « par défaut » apparaît dans la section Collections de Portal. Si vous préférez avoir deux collections globales distinctes pour smartphones et tablettes, des collections intitulées « smartphone par défaut » et « tablette par défaut » apparaissent dans la section Collections.

Servez-vous de ces collections pour déterminer le contenu de niveau supérieur. Le premier élément d’une collection globale est votre collection d’accueil. Les autres éléments figureront dans le menu de l’application. Par ailleurs, si l’option Activer la navigation par balayage horizontal est sélectionnée dans la collection d’accueil, l’utilisateur peut balayer l’écran vers la gauche et la droite depuis la collection d’accueil pour parcourir les autres contenus de niveau supérieur.

Pour plus d'informations, reportez-vous à la page Gestion de collections dans AEM Mobile.

Remarque :

même si les collections globales ne sont pas affichées en tant que pages de navigation dans l’application, vous devez quand même indiquer un ID du produit et une image pour chaque collection.

Gestion des collections
Dans cet exemple, le premier élément dans la collection globale (« tablette par défaut ») est la collection « Accueil ».

Affichage du menu de l'application
Le menu de l’application affiche l’image de marque (définie dans les paramètres du projet), ainsi que les éléments ajoutés à la collection globale et une option Compte.

Avec le mappage de contenu, vous pouvez glisser et déposer des éléments afin de modifier la structure de l'application.

Création de cartes et de mises en page

Vous appliquez une mise en page à chaque collection afin de déterminer comment se présente sa page de navigation. Chaque mise en page est constituée de cartes qui représentent du contenu : bannières, articles ou autres collections. Il est possible de créer différentes mises en page pour différents types de collections.

Pour plus d'informations sur la création de cartes, reportez-vous à la page Création de cartes et de mises en page.

Exemple de page de navigation avec mise en page à 5 colonnes
Exemple de page de navigation avec mise en page à 5 colonnes

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne