Passa alla modalità Prototipo.
Scopri come creare prototipi interattivi di cui altri utenti potranno verificare, ottimizzare e perfezionare l’esperienza utente.
Dopo aver completato la progettazione delle schermate, puoi creare un prototipo interattivo per visualizzare la modalità con cui gli utenti utilizzeranno l’app o il sito Web.
Puoi collegare le schermate nella sequenza di navigazione desiderata e organizzare più flussi con 2 o più tavole da disegno collegate tra loro. Dopo aver impostato le schermate, puoi condividere ogni singolo flusso come collegamento condivisibile per la revisione, raccogliere feedback e pubblicarli contemporaneamente su varie superfici di destinazione.
La schermata Home è la prima schermata dell’app o del sito Web. Gli utenti inizieranno a navigare l’app o il sito Web dalla schermata Home.
Inoltre, quando visualizzi il prototipo in anteprima senza che nessuna opzione sia selezionata, l’anteprima inizia dalla schermata Home. Questo significa che, per impostazione predefinita, la schermata Home è impostata come prima tavola da disegno a cui aggiungere un collegamento.
Passa alla modalità Prototipo.
Fai clic sulla tavola da disegno da impostare come schermata Home. In alto a sinistra è visualizzata l’icona home grigia.
Fai clic sull’icona Home. Il colore dell’icona diventa blu, a indicare che la tavola da disegno è ora impostata correttamente come schermata Home.
Per impostare una tavola da disegno diversa come schermata Home, fai semplicemente clic sull’icona Home associata a quella tavola da disegno. Per visualizzare tutte le tavole da disegno dopo la pubblicazione, assicurati di collegare tutte le tavole da disegno pertinenti.
L'opzione per più flussi consente di creare e condividere più versioni di un progetto dallo stesso documento o nello stesso file e sfruttare lo stesso set di tavole da disegno su molti prototipi o specifiche di progettazione. Ogni flusso conserva il proprio set di collegamenti e dettagli di condivisione in modo da poter apportare modifiche e ripubblicare senza dover annullare e ripetere ogni volta tutte le impostazioni.
Se desideri creare più versioni del tuo progetto, imposta una seconda tavola da disegno Home, collegala e condividi collegamenti univoci per ogni set. Le tavole da disegno Home fungono da punto di partenza per la progettazione in cui è possibile trascinare i collegamenti per unire schermate diverse.
Usa lo stesso set di tavole da disegno su più prototipi senza dover duplicare il tuo lavoro. Apporta modifiche ai tuoi progetti e aggiorna i tuoi collegamenti nella stessa pagina.
Un altro esempio di impostazione di flussi diversi è la progettazione di un sito Web destinato a più piattaforme come dispositivi mobili, desktop, tablet e così via; è infatti possibile definire e creare più flussi di interazione in cui in ogni flusso viene raffigurato un percorso dell'utente e successivamente condividere ogni singolo flusso con gli stakeholder per raccogliere feedback.
Continua a leggere per scoprire come impostare una o più tavole da disegno Home e definire più flussi.
Una volta definite e collegate le schermate, puoi rendere i tuoi prototipi più coinvolgenti introducendo trigger e azioni per oggetti e tavole da disegno. Per eseguire questa operazione:
Seleziona un oggetto e fai clic su + accanto all'oggetto oppure fai clic su + in Ispezione proprietà. Imposta Attivatori e Tipo di azione. Una volta scelto il tipo di azione, imposta le opzioni specifiche per quel tipo di azione, inclusa la Destinazione (se applicabile).
Ad esempio, per migliorare l’esperienza di navigazione dei prototipi, puoi aggiungere collegamenti con ancoraggio impostando Scorri a come tipo di azione. Per ulteriori informazioni su questo aspetto, consulta Creazione di collegamenti di navigazione in una tavola da disegno.
A. Imposta su Tocca, Trascina, Passaggio, Tempo, Tasti e gamepad, Voce e Fine riproduzione. B. Imposta il Ritardo in secondi. C. Imposta su Transizione, Animazione Automatica, Sovrapponi, Scorri a, Tavola da disegno precedente, Riproduzione audio, Riproduzione voce, Riproduzione video, o Riproduzione Lottie. D. Se necessario, modifica la tavola da disegno di destinazione. E. Imposta su Dissolvenza o Nessuno. F. Seleziona l’effetto di andamento. G. Immetti la durata in secondi..
Se come attivatore selezioni Tocca, ora puoi combinare Transizione con un’azione che non sia di transizione, ad esempio, Riproduzione voce o audio. Per aggiungere la seconda azione, configura il primo pulsante Azione + nella finestra Ispezione proprietà su Transizione, Animazione automatica, Sovrapponi, Scorri a o Tavola da disegno precedente e il secondo pulsante Azione + su Riproduzione audio o Riproduzione voce.
Se selezioni Audio o Riproduzione voce come prima azione, non potrai aggiungere una seconda azione.
Puoi inoltre combinare più attivatori per creare interazioni avanzate senza doverli distribuire su oggetti diversi nella tavola da disegno. A tal fine, usa il pulsante + nell’area di lavoro o fai clic su + nella finestra di Ispezione proprietà e seleziona Attivatori, Azione e Destinazione.
Ricorda che puoi applicare gli attivatori Tocca, Trascina, Passaggio e Tempo solo una volta e Voce e Tasti e gamepad più volte.
Puoi ottenere una simulazione realistica di scorrimento nei tuoi progetti. Per bloccare gli elementi del progetto in una posizione fissa, seleziona Posizione fissa durante scorrimento nella finestra di Ispezione proprietà.
Per visualizzare l’anteprima del prototipo, fai clic su Anteprima desktop .
Puoi gestire e pubblicare ogni singolo flusso come collegamento condivisibile per la revisione e la raccolta di feedback. Per ulteriori informazioni su come condividere più flussi, consulta Condivisione di progettazioni e prototipi.
Per modificare o eliminare un collegamento, selezionalo. Puoi anche selezionare una singola interazione dalla finestra di Ispezione proprietà e modificarne le interazioni.
Per nascondere temporaneamente i collegamenti in modalità Prototipo, tieni premuti i tasti Opzione (macOS) o Alt (Windows).
Passa sopra al collegamento per visualizzare la descrizione comando con il numero e il tipo di interazioni.
Per applicare l’interazione definita a un altro oggetto, seleziona l’oggetto o la tavola da disegno, seleziona Copia, fai clic sull’oggetto o sulla tavola da disegno di destinazione e, nel menu di scelta rapida, seleziona Incolla interazione.
Nella modalità Prototipo, seleziona l’elemento o la tavola da disegno da collegare. Quando viene visualizzata una piccola freccia, fai clic su di essa e trascinala sulla tavola da disegno precedente oppure seleziona Azione > Tavola da disegno precedente.
Quando l’Azione è impostata su Tavola da disegno precedente, alla fine del collegamento è visualizzata l’icona di ritorno.
Per rimuovere un collegamento da una tavola da disegno, fai clic in un punto qualsiasi del collegamento e trascinalo all'esterno della tavola da disegno di destinazione.
Utilizza la finestra di anteprima per visualizzare il collegamento in anteprima.
In modalità Prototipo, seleziona Destinazione > Nessuna.
Puoi anche fare clic in un punto qualsiasi del collegamento e trascinarlo all'esterno della tavola da disegno di destinazione.
L’opzione Nessuna è disponibile solo se la tavola da disegno è collegata a una destinazione.
Visualizza il collegamento in anteprima nel browser. Qualsiasi collegamento di destinazione precedentemente impostato dall’elemento è rimosso.
La registrazione di prototipi non è supportata in Adobe XD per Windows. Esiste tuttavia una soluzione alternativa. Premi i tasti Windows+G e usa il registratore nativo per registrare la finestra Anteprima.
Per verificare il prototipo e le interazioni, puoi visualizzare l’anteprima del prototipo. Puoi inoltre registrare l’anteprima e salvare la registrazione come file .mp4. Puoi quindi condividere il file .mp4 con gli stakeholder, che possono visualizzare (o verificare) la procedura dettagliata del prototipo e fornire feedback.
Fai clic sull’icona Anteprima desktop. Nella finestra Anteprima è visualizzata la tavola da disegno attiva.
Per verificare la navigazione tra le schermate, fai clic sugli elementi interattivi.
Durante l’anteprima nella relativa finestra, puoi modificare la progettazione e le interazioni nel tuo prototipo. Le modifiche sono immediatamente disponibili in anteprima.
Per registrare l’interazione, fai clic sull’icona Registra nella finestra di anteprima. Per terminare la registrazione, premi Esc o fai clic nuovamente clic sull’icona Registra.
Specifica il nome e la posizione in cui salvare la registrazione. La registrazione è salvata come file .mp4.
Ecco un video per aiutarti a iniziare con l'interattività:
Accedi al tuo account