Créez un menu optimisé pour les interactions dans une application mobile avec Adobe XD CC.
mobile-menu-design_1000x560

Créez deux variantes d’un menu mobile : une où le menu est réduit, et l’autre où il est développé. Convertissez-les en symboles, puis placez-les sur leurs plans de travail respectifs. Assurez-vous que les symboles portent le même nom sur chaque plan afin de pouvoir les animer ultérieurement. Pour cette application, nous avons créé une icône de sandwich pour l’état réduit, et un menu latéral pour l’état développé.

mobile-menu-design_step1

Personnalisez l’expérience utilisateur en ajoutant des indications visuelles sur le menu actif. Décalez ensuite la maquette de la page afin que le contenu ne soit pas masqué lorsque le menu est développé. Pour ce faire, associez les éléments de la page et nommez le groupe de la même manière sur chaque plan de travail. Déplacez ensuite le groupe vers le droite du plan de travail développé afin de laisser de l’espace pour le menu latéral.

mobile-menu-design_step2

Faites glisser une copie du symbole du menu latéral développé vers la table de montage, puis cliquez dessus avec le bouton droit et choisissez Annuler le lien du symbole. Ainsi, vos modifications n’auront aucune incidence sur le symbole d'origine. Supprimez les icônes de manière à ne conserver que les rectangles à l’arrière-plan de chaque élément de menu. Placez le menu développé sur un nouveau plan de travail de même dimension.

mobile-menu-design_step3

En mode Prototype, reliez l’icône de sandwich au plan de travail développé. Reliez ensuite un rectangle du menu latéral modifié au même plan de travail. Pour chaque interaction, nous avons choisi l’action Animation automatique. Les deux objets de menu ayant le même nom sur chaque plan de travail, le menu se développe dès lors que l’utilisateur appuie sur l'icône de sandwich. Les groupes qui contiennent le design de l’écran ayant le même nom sur chaque plan de travail, l’écran glisse vers la droite lorsque le menu se développe.

mobile-menu-design_step4

Pour pouvoir réutiliser votre menu dans votre design, reliez le plan de travail développé au menu sans icône. Veillez à sélectionner le déclencheur Délai et l’action Incrustation. Lorsqu'un rectangle vert apparaît sur chaque page de destination, alignez son bord gauche sur celui du plan de travail sous-jacent. La capture d’écran ci-dessous montre les paramètres que nous avons utilisés.

mobile-menu-design_step5

Testez les éléments de navigation en mode Aperçu sur ordinateur et procédez aux ajustements nécessaires pour que tout fonctionne parfaitement. Les icônes du menu latéral seront masquées pendant ce test. Reliez les écrans restants dans le design de votre application. Repassez en mode Design, sélectionnez le plan de travail du menu latéral et désactivez la case à cocher Fond pour rendre la barre latérale transparente. Lors du test de votre prototype, les icônes du menu latéral seront visibles et tout devrait fonctionner.

mobile-menu-design_step6

Vous pouvez maintenant créer des menus mobiles et les appliquer aux designs d’écran de votre application.

02/25/2019

Contributeur Adobe Stock : alwayslovedafilm

Cette page vous a-t-elle été utile ?