Design a menu optimized for user interaction in a mobile app with Adobe XD CC.
mobile-menu-design_1000x560

Create two designs for a mobile menu: one for the collapsed state and one for the expanded state. Convert each menu design to a symbol and move them to their respective artboards. Make sure the symbols have the same name on each artboard so you can animate them later. For this app design, we created a hamburger icon for the collapsed state and a sidebar menu for the expanded state.

mobile-menu-design_step1

Customize the user experience by providing visual hints to indicate the active menu selection. Then, shift the page design so content is not hidden by the expanded menu. To do this, group the elements that make up the page design and give the group the same name on each artboard. Then, move the group to the right on the expanded artboard to make room for the sidebar menu.

mobile-menu-design_step2

Drag a copy of the expanded sidebar menu symbol to the pasteboard. Right-click and choose Unlink Symbol. Now, any changes you make won’t affect the original symbol. Delete the icons so that only the background rectangles for each of the menu items remain. Place the expanded menu on a new artboard of the same size.

mobile-menu-design_step3

In Prototype mode, wire the hamburger menu to the artboard with the expanded page design. Then, wire a rectangle in the modified sidebar menu to the same expanded artboard. We chose Auto-Animate as the action for each interaction. Since the two menu objects are named the same on each artboard, the menu animates to its expanded state when the user taps the hamburger icon. The groups containing the screen design are named the same on each artboard, so the screen has the effect of sliding out when the menu expands.

mobile-menu-design_step4

To make your menu reusable throughout your design, wire the expanded artboard back to the menu with no icons. Make sure Trigger is set to Time and Action is set to Overlay. When the green overlay rectangle appears over each destination page, align its left edge with that of the underlying artboard. See below for the settings we used.

mobile-menu-design_step5

Test your navigation in Desktop Preview and continue to finesse until it works as expected. The icons on the sidebar menu will be hidden during this testing. Wire the remaining screens in your app design. Back in Design mode, select the sidebar menu artboard and uncheck the Fill option to make the sidebar transparent. When you test the prototype, everything should work and the sidebar menu icons will be visible.

mobile-menu-design_step6

Now you can design mobile menus that you can apply to screen designs throughout your app.

11/21/2018

Adobe Stock contributor: alwayslovedafilm

Was this page helpful?