After you have completed designing your screens, you can connect them to each other to visualize how users can experience your app or website.
Adobe XD lets you create interactive prototypes to visualize the navigation between screens or wireframes. You can preview the interaction to validate user experience and iterate on your design to save time on development. You can also record the interactions and share it with stakeholders to get their feedback. Zoom in/zoom out to see specific portions of the prototype in detail.
The Home screen is the first screen of your app or website. Your users begin to navigate the app or the website from the Home screen.
Also, when you preview your prototype and nothing is selected, the preview begins with the Home screen. That is, by default, your Home screen is set to the first artboard you add a wire to.
-
In the pop-up window that appears, you can specify the following:
- Transition options and the duration for the transition: If you want to maintain scroll position when you transition to another artboard, select Preserve Scroll Position. If the user scrolled in the original artboard, the next artboard recognizes the scroll position from the original artboard. When you click an artboard or any element in the artboard, you can control the position to keep the original place from one screen to the next. The control prevents repeated scrolling back and forth in the project file. For example, if a user scrolls down to y=1000 on artboard A, the transition to artboard B defaults to y=1000. If the original artboard has no scrolling defined, the Preserve Scroll Position option will not be active. This option is useful for when you are prototyping navigation bars or fixed footers.
- Overlay: If you want to simulate the states or transitions such as menu dropdowns and sliding keyboards, select Overlay.
Working with overlays -
TIP:
In Prototype mode, to make the process of creating interactions faster:
- You can copy and paste objects across artboards. The object is copied and pasted along with its interaction.
- You can also copy and paste an interaction alone. Copy an object, right-click another object, and then select Paste Interaction. Only the interaction is pasted.
Interactive elements linked to target screens
To point the element to a different screen, click the handle again and drag it to the required screen.
To delete an interaction, drag the connector's destination handle off a target artboard on to the draft area.
Timed transition in Adobe XD enables you to create rich prototype experiences such as onboarding flows, automatic redirection to a different screen, or progress indicators. Just like you Tap to trigger transitions, you can use Delay to specify the transition duration. For example, when you create onboarding workflows, you can use the Delay option to link and transition between artboards.
As a designer, you can also use time to trigger transition to another artboard. For example, if you are designing onboarding flows, you can use timed transition to get start with a splash screen of an app flow and automatically transition between a few onboarding screens.
-
In the Trigger pop-up window, set the following options:
- Trigger: set it to Time.
- Time delay: set the transition delay period in Seconds.
- Duration: set the transition duration in Seconds.
- Action: set it to Transition.
Set Trigger, Delay, Duration and Action
A. Set Trigger to Time B. Set Delay in Seconds C. Set Action to Transition D. Set Duration to Seconds
to preview the changes.
Nota:
Recording prototypes is not supported in Adobe XD on Windows. However, there's a workaround. Press the Windows + G keys and use the native recorder to record the Preview window.
To test your prototype and the interactions, you can preview the prototype. You can also record the preview and save the recording as a .mp4 file. You can then choose to share the .mp4 file with your stakeholders, who can view (or review) the walkthrough of the prototype and provide feedback.
-
Click the Desktop Preview icon. The Preview window appears and displays the artboard in focus.
To test the navigation between screens, click the interactive elements.
You can edit the design and interactions in your prototype while previewing in the preview window. The changes are instantaneously available for preview.
I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.