Creazione di prototipi interattivi

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.

Impostazione della schermata Home

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.

  1. Passa alla modalità Prototipo.

  2. Fai clic sulla tavola da disegno da impostare come schermata Home. In alto a sinistra è visualizzata l’icona home grigia.

  3. Fai clic sull’icona Home. Il colore dell’icona diventa blu, a indicare che la tavola da disegno è ora impostata correttamente come schermata Home.

    Opzione Imposta come schermata Home

    Schermata Home impostata

    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.

Imposta più flussi nel tuo progetto

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.

Collegamento di elementi interattivi alle schermate di destinazione
Imposta più flussi

  1. Passa alla modalità Prototipo.
  2. Imposta la tavola da disegno Home per definire il punto di partenza del tuo progetto.
  3. Immetti un nome per ogni flusso in modo da organizzarli meglio.
  4. Se il tuo progetto include più flussi, imposta le tavole da disegno Home per ciascuno di questi flussi.
  5. Fai clic sulla tavola da disegno o sull’oggetto successivo che desideri collegare. Dall’oggetto o dalla tavola da disegno è visualizzata una maniglia di collegamento con una freccia. Fai clic e trascina per rilasciare la maniglia sull'oggetto o sulla tavola da disegno di destinazione.

Aggiungi le interazioni alle schermate collegate

Una volta definite e collegate le schermate, puoi rendere i tuoi prototipi più coinvolgenti introducendo trigger e azioni. Per eseguire questa operazione:

  1. Fai clic sul pulsante + nell’area di disegno o nella finestra Ispezione proprietà e seleziona le opzioni visualizzate.

    Ad esempio, per migliorare l’esperienza di navigazione dei prototipi, puoi aggiungere collegamenti con ancoraggio impostando Scorri a come azione. Per ulteriori informazioni su questo aspetto, consulta Creazione di collegamenti di navigazione in una tavola da disegno.     

    Opzioni di prototipazione
    Opzioni di prototipazione

    A. Impostazione di Tocca, Trascina, Passaggio, Tempo, Tasti e gamepad e Voce. B. Imposta il Ritardo in secondi. C. Imposta su Transizione, Animazione automatica, Scorri a, Sovrapposizione o Riproduzione voce. 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. 

  2. Se come attivatore selezioni Tocca, ora puoi combinare due azioni, ad esempio, Transizione con un’azione che non sia di transizione, ad esempio, Riproduzione voce o audio. Per aggiungere più azioni, 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.

    Tieni presente che se selezioni Riproduzione audio o voce come prima azione, non potrai aggiungere una seconda azione.

  3. 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 come nel passaggio 4.

    Ricorda che puoi applicare gli attivatori Tocca, Trascina, Passaggio e Tempo solo una volta e VoceTasti e gamepad molte volte. 

    Combinazione di più trigger
    Combinazione di più trigger


    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à.

  4. 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.

Suggerimenti

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.

Collegamento alla tavola da disegno precedente

  1. 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.

    Selezione della tavola da disegno precedente
    Selezione della tavola da disegno precedente

  2. Quando l’Azione è impostata su Tavola da disegno precedente, alla fine del collegamento è visualizzata l’icona di ritorno.

    Configurazione della destinazione
    Configurazione della destinazione

    Per rimuovere un collegamento da una tavola da disegno, fai clic in un punto qualsiasi del collegamento e trascinalo via dalla tavola da disegno di destinazione.

  3. Utilizza la finestra di anteprima per visualizzare il collegamento in anteprima.

Rimozione del collegamento tra le tavole da disegno

  1. In modalità Prototipo, seleziona Destinazione > Nessuna.

    Puoi anche fare clic in un punto qualsiasi del collegamento e trascinarlo lontano dalla tavola da disegno di destinazione.

    Rimozione del collegamento tra le tavole da disegno
    Rimozione del collegamento tra le tavole da disegno

    L’opzione Nessuna è disponibile solo se la tavola da disegno è collegata a una destinazione.

  2. Visualizza il collegamento in anteprima nel browser. Qualsiasi collegamento di destinazione precedentemente impostato dall’elemento è rimosso.

Anteprima e registrazione delle interazioni

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.

  1. 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.

  2. 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.

    .
    Registrazione delle interazioni del prototipo

  3. Specifica il nome e la posizione in cui salvare la registrazione. La registrazione è salvata come file .mp4.

Ulteriori informazioni

Ecco un video per aiutarti a iniziare con l'interattività:

Logo Adobe

Accedi al tuo account