Progettazione, prototipazione e condivisione con Adobe XD

Scopri come utilizzare XD per progettare prototipi, wireframe e grafica interattivi.

Adobe XD consente ai progettisti di UX di progettare esperienze utente interattive per Web e app per dispositivi mobili utilizzando un’unica app.

In XD, puoi creare rapidamente e facilmente le progettazioni sulle tavole da disegno. Collega quindi le tavole da disegno per creare un prototipo interattivo che puoi condividere e iterare con gli stakeholder. Puoi inoltre utilizzare i plug-in per automatizzare le operazioni ripetitive o le parti dei flussi di lavoro dei progettisti che sono noiose, complesse o ripetitive. 

Adobe XD si integra con Photoshop, Illustrator e After Effects.

Puoi continuare a progettare nelle tue applicazioni preferite, portare le risorse in XD e utilizzare XD per creare e condividere i prototipi. XD supporta file SVG e bitmap senza alcuna perdita di fedeltà. Puoi quindi migliorare ulteriormente queste risorse in Adobe XD o usarle per sviluppare prototipi interattivi. 

Flusso di lavoro generale

Progettazione, prototipazione e condivisione con Adobe XD
Progettazione, prototipazione e condivisione con Adobe XD

In breve, il flusso di lavoro può essere descritto nei seguenti passaggi generali:

  • Progettazione: crea elementi di layout di progettazione, aggiungi tavole da disegno e importa risorse da altre applicazioni come Adobe Illustrator, Adobe Photoshop e Adobe After Effects. Puoi inoltre utilizzare i plug-in per automatizzare le operazioni ripetitive o le parti dei flussi di lavoro dei progettisti che sono noiose, complesse o ripetitive. 
  • Prototipazione: seleziona gli oggetti o le tavole da disegno nella progettazione e crea le interazioni tra le tavole da disegno.
  • Condivisione: quando il progetto è pronto per la revisione, puoi condividere i prototipi o le specifiche di progettazione o esportare il progetto o le risorse con gli stakeholder.

Continua a leggere per maggiori dettagli su progettazione, prototipazione e condivisione in XD.

Progettazione

Seleziona un formato predefinito per la tavola da disegno. Se vuoi lavorare con un formato personalizzato, digita la larghezza e l’altezza in pixel nei campi di testo nell’opzione Personalizzata. Per specificare un formato personalizzato, fai clic sull’icona Formato personalizzato.

Raccogli le risorse in uno dei seguenti modi:

  • Usa gli strumenti di progettazione di Adobe XD per progettare le tue risorse ex-novo. Per ulteriori informazioni, consulta Strumenti di disegno e Strumenti di testo.
  • Copia le progettazioni da Photoshop, Sketch, After Effects o Illustrator e incollale nella tavola da disegno in Adobe XD. Puoi anche importare, trascinare o copiare e incollare un file JPG, SVG, PNG o GIF da:
    • Esplora file (Windows)
    • Finder (Mac) 
    • Browser Web
    • Appunti del sistema operativo

 

Migliora gli oggetti nella progettazione. Ad esempio, combina o masche gli oggetti, modifica le proprietà di tratto e riempimento, utilizza le sovrapposizioni per impilare il contenuto sopra una tavola da disegno di base e spostare o ruotare gli oggetti o utilizza il ridimensionamento reattivo per progettare risorse per schermi con dimensioni e layout diversi. Usa le risorse collegate per creare e mantenere un’unica versione per kit di interfaccia utente, fogli di adesivi o guide di stile e condividile tra documenti per una scalabilità di progettazione coerente e plug-in per automatizzare operazioni ripetute o parti dei flussi di lavoro del progettista che sono noiose, complesse o ripetitive.

Per ulteriori informazioni, consulta:

Disponi gli elementi ripetuti senza sforzo utilizzando la funzione Griglia di ripetizione per creare una griglia dal contenuto esistente senza doverlo duplicare manualmente. Per ulteriori informazioni, consulta Creazione di elementi ripetuti.

Utilizza i plug-in per automatizzare le operazioni ripetitive o le parti dei flussi di lavoro dei progettisti che sono noiose, complesse o ripetitive. Per ulteriori informazioni, consulta Creazione e gestione dei plug-in.

Aggiungi più tavole da disegno per ciascuna schermata necessaria per il prototipo. Per ulteriori informazioni, consulta Utilizzo delle tavole da disegno.

Prototipazione

Puoi creare prototipi interattivi utilizzando le funzionalità vocali, l’animazione automatica, gesti di trascinamento e transizioni temporizzate. Per ulteriori informazioni, consulta Progettazione e prototipazione vocale in XD, Creazione di prototipi con l’animazione automatica e gesti di trascinamento e Utilizzo di transizioni temporizzate.

Puoi visualizzare in anteprima l’interattività nei prototipi e, durante l’anteprima, registrare l’interazione come file MP4.

Per collegare le tavole da disegno o configurare l’interattività, seleziona la tavola da disegno o un oggetto e fai clic sulla freccia a destra. Viene visualizzato un collegamento. Trascina e collega il collegamento a un altro oggetto o un’altra tavola da disegno. Nella finestra a comparsa visualizzata, specifica le opzioni per la transizione e la sua durata.

Puoi anche usare la sovrapposizione per simulare il concetto di transizioni senza duplicare il contenuto su più tavole da disegno. Per informazioni dettagliate, consulta Creazione di prototipi interattivi.

Fai clic sull’icona Anteprima in alto a destra dell’applicazione. XD visualizza una schermata di anteprima che consente di visualizzare e navigare nelle diverse pagine. Nella schermata Anteprima è disponibile l’icona Registra che ti consente di registrare il flusso tra le pagine e salvarlo in formato MP4. 

Per ulteriori informazioni, consulta Anteprima e registrazione delle interazioni.

Condividi

Condividi i prototipi per la revisione, la presentazione o la verifica degli utenti della progettazione. Puoi anche pubblicare prototipi e specifiche di progettazione per lo sviluppo o personalizzare l’esperienza di visualizzazione a seconda delle tue preferenze. Per ulteriori informazioni, consulta Condivisione di progettazioni e prototipi.

Logo Adobe

Accedi al tuo account