Guida utente Annulla

Creazione di prototipi interattivi

Cerca
  1. Guida utente di Adobe XD
  2. Introduzione
    1. Novità di Adobe XD
    2. Domande frequenti
    3. Progettazione, prototipazione e condivisione con Adobe XD
    4. Requisiti di sistema
      1. Requisiti hardware e software
      2. Adobe XD, Big Sur e Apple Silicon | macOS 11
    5. Nozioni di base sull'area di lavoro
    6. Cambia la lingua dell'app in Adobe XD
    7. Accesso ai kit di progettazione per interfaccia utente
    8. Accessibilità in Adobe XD
    9. Scelte rapide da tastiera
    10. Consigli e suggerimenti
    11. Opzioni abbonamento Adobe XD
    12. Modifiche al piano XD Starter
  3. Progettazione
    1. Tavole da disegno, guide e livelli
      1. Introduzione alle tavole da disegno
      2. Utilizzo di guide e griglie
      3. Creazione di tavole da disegno scorrevoli
      4. Utilizzo dei livelli
      5. Creazione di gruppi di scorrimento
    2. Forme, oggetti e percorso
      1. Selezione, ridimensionamento e rotazione degli oggetti
      2. Spostamento, allineamento, distribuzione e disposizione degli oggetti
      3. Operazioni raggruppa, blocca, duplica, copia e rifletti sugli oggetti
      4. Impostazione di tratto, riempimento e ombra esterna per gli oggetti
      5. Creazione di elementi ripetuti
      6. Crea progetti prospettici con trasformazioni 3D
      7. Modifica di oggetti mediante le operazioni booleane
    3. Testo e font
      1. Utilizzo degli strumenti di disegno e testo
      2. Font in Adobe XD
    4. Componenti e stati
      1. Utilizzo dei componenti
      2. Utilizzo dei componenti nidificati
      3. Aggiunta di più stati ai componenti
    5. Mascheratura ed effetti
      1. Creazione di una maschera con le forme
      2. Utilizzo degli effetti di sfocatura
      3. Creazione e modifica di sfumature
      4. Applicazione degli effetti di fusione
    6. Layout
      1. Ridimensionamento reattivo e vincoli
      2. Impostazione del riempimento fisso per componenti e gruppi
      3. Creazione di progettazioni dinamiche con le pile
    7. Video e animazioni Lottie
      1. Utilizzo dei video
      2. Creazione di prototipi utilizzando i video
      3. Utilizzo delle animazioni Lottie
  4. Prototipazione
    1. Creazione di prototipi interattivi
    2. Animazione dei prototipi
    3. Proprietà dell'oggetto supportate per l'animazione automatica
    4. Creazione di prototipi con tastiera e gamepad
    5. Creazione di prototipi con comandi e riproduzione vocali
    6. Creazione di transizioni temporizzate
    7. Aggiunta di sovrapposizioni
    8. Progettazione di prototipi vocali
    9. Creazione di collegamenti con ancoraggio
    10. Creazione di collegamenti ipertestuali
    11. Anteprima di progettazioni e prototipi
  5. Condivisione, esportazione e revisione
    1. Condivisione delle tavole da disegno selezionate
    2. Condivisione di progettazioni e prototipi
    3. Configurazione delle autorizzazioni di accesso per i collegamenti
    4. Utilizzo dei prototipi
    5. Revisione dei prototipi
    6. Utilizzo delle specifiche di progettazione
    7. Condivisione delle specifiche di progettazione
    8. Ispezione delle specifiche di progettazione
    9. Navigazione delle specifiche di progettazione
    10. Revisione e inserimento di commenti nelle specifiche di progettazione
    11. Esportazione delle risorse di progettazione
    12. Esportazione e download delle risorse dalle specifiche di progettazione
    13. Condivisione di gruppo per le aziende
  6. Sistemi di progettazione
    1. Progettare i sistemi con Creative Cloud Libraries
    2. Utilizzo delle risorse dei documenti in Adobe XD
    3. Utilizzo di Creative Cloud Libraries in Adobe XD
    4. Migrazione delle risorse collegate in Creative Cloud Libraries
    5. Utilizzo dei token di progettazione 
    6. Utilizza le risorse da Creative Cloud Libraries
  7. Documenti cloud
    1. Documenti cloud in Adobe XD
    2. Collaborazione e modifica in comproprietà delle progettazioni
    3. Modifica in comproprietà di documenti condivisi
  8. Integrazioni e plugin
    1. Utilizzo di risorse esterne
    2. Utilizzo delle risorse di progettazione da Photoshop
    3. Operazione di copia e incolla di risorse da Photoshop
    4. Importazione o apertura delle progettazioni di Photoshop
    5. Utilizzo delle risorse di Illustrator in Adobe XD
    6. Apertura e importazione delle progettazioni di Illustrator
    7. Copia di vettori da Illustrator a XD
    8. Plug-in per Adobe XD
    9. Creazione e gestione dei plug-in
    10. Integrazione di Jira per XD
    11. Plug-in di Slack per XD
    12. Plug-in di Zoom per XD
    13. Pubblicazione di progetti da XD a Behance
  9. XD per iOS e Android
    1. Anteprima da dispositivi mobili
    2. Domande frequenti su Adobe XD per dispositivi mobili
  10. Risoluzione dei problemi
    1. Problemi noti e risolti
      1. Problemi noti
      2. Problemi risolti
    2. Installazione e aggiornamenti
      1. XD viene considerato non compatibile su Windows
      2. Codice errore 191
      3. Codice errore 183
      4. Problemi di installazione dei plugin XD
      5.  Richiesta di disinstallare e reinstallare XD su Windows 10
      6. Problemi di migrazione delle preferenze
    3. Avvio e arresto anomalo
      1.  XD si arresta in modo anomalo quando viene avviato su Windows 10
      2.  XD si chiude quando si esce da Creative Cloud
      3. Problema relativo allo stato dell’abbonamento in Windows
      4. Avviso di app bloccate all'avvio di XD su Windows
      5. Generazione di dump di arresto anomalo su Windows
      6. Raccolta e condivisione del registro degli arresti anomali
    4. Documenti cloud e Creative Cloud Libraries
      1. Problemi con i documenti cloud di XD
      2. Problemi con i componenti collegati
      3. Problemi con librerie e collegamenti
    5. Creare prototipi, pubblicare e revisionare
      1. Impossibile registrare le interazioni di prototipi su macOS Catalina
      2. Problemi con i flussi di lavoro di pubblicazione
      3. I collegamenti pubblicati non vengono visualizzati nei browser
      4. I prototipi non vengono visualizzati correttamente nei browser
      5. Il pannello dei commenti viene visualizzato in modo imprevisto sui collegamenti condivisi
      6. Impossibile pubblicare le librerie
    6. Importare, esportare e lavorare con altre app
      1. Importare ed esportare in XD
      2. File Photoshop in XD
      3. File Illustrator in XD
      4. Esporta in After Effects da XD
      5. File Sketch in XD
      6. App di terze parti non visibili in Esporta

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.

Impostazione di più flussi nel 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.

Aggiungere interazioni per oggetti e tavole da disegno

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:

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

    Opzioni di prototipazione
    Opzioni di prototipazione

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

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

  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.

    Ricorda che puoi applicare gli attivatori Tocca, Trascina, Passaggio e Tempo solo una volta e Voce e Tasti e gamepad più 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 all'esterno della 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 all'esterno della 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à:

Altri contenuti simili

Logo Adobe

Accedi al tuo account

Collegamenti rapidi

Visualizza tutti i tuoi piani Gestione dei piani

Note legali    |    Informativa sulla privacy online