
Scopri come utilizzare le tavole da disegno per creare i tuoi progetti di design in XD.
Ecco Jeanee, graphic designer scelta per guidare una progettazione UX. Sta proponendo Adobe XD al suo team, i cui membri hanno diversi livelli di esperienza con la progettazione e gli strumenti UX.
- Sta cercando risorse che consentano di iniziare rapidamente con il progetto.
- Per iniziare a lavorare ha bisogno di tutorial e per continuare necessita di file di esempio.
Jeanee si sta formando sulla terminologia di base del progetto e sta lavorando con le tavole da disegno per creare il suo primo prototipo in XD. Continua a leggere per scoprire come possiamo aiutarla a iniziare.
Prima di procedere
Guarda le nozioni di base di XD:
Imposta le tavole da disegno in 4 semplici passaggi
Che cosa è una tavola da disegno? Le tavole da disegno rappresentano le schermate della tua applicazione o delle pagine del tuo sito web. Semplifica i processi di progettazione e crea progetti interattivi per più dimensioni dello schermo in un unico documento. Usa le tavole da disegno per creare il tuo progetto XD.
Continua a leggere per scoprire come impostare le tue tavole da disegno.
Crea una nuova tavola da disegno
Adobe XD fornisce tavole da disegno per schermi di dimensioni comuni come quelle per diverse versioni di iPhone, iPad e Web. Se le scelte non soddisfano i tuoi requisiti, puoi creare una tavola da disegno personalizzata.
Schermata Home
Usa le dimensioni predefinite della tavola da disegno o crea la tua tavola da disegno personalizzata.
App XD
Usa lo strumento Tavola da disegno tool
per creare altre tavole da disegno.
Seleziona un predefinito per la tavola da disegno da Ispezione proprietà o trascina sull'area di disegno per creare una tavola da disegno personalizzata.
Usa una tavola da disegno esistente di Photoshop e Illustrator
Puoi importare tavole da disegno esistenti da Photoshop o Illustrator in XD senza doverle ricreare.
Usa File > Importa da XD per aprire le tavole da disegno di Photoshop o Illustrator in XD con ogni tavola da disegno e livello intatti e modificabili.
Dai un'occhiata a questo articolo che descrive i 5 modi migliori per utilizzare le risorse di Photoshop in XD.
Con XD 57 e versioni successive, ottieni colori uniformi quando utilizzi una risorsa esistente con un profilo colore sRGB da Photoshop e Illustrator in un documento XD con un profilo colore sRGB. Se il documento XD ha un profilo colore Non gestito, viene visualizzato un messaggio che richiede di passare al profilo colore sRGB.
Gestisci tavole da disegno
Hai cambiato idea sulla dimensione della tavola da disegno? Ridimensionale. Puoi anche rinominarle in base alle tue esigenze di progettazione. Desideri creare più tavole da disegno e gestirne il posizionamento? Duplicale e riorganizzale.
Rinomina
Fai doppio clic sul titolo della tavola da disegno.
Ridimensiona
Trascina la maniglia circolare che appare sui bordi di una tavola da disegno.
Duplica
Seleziona la tavola da disegno e premi Ctrl/Cmd + D.
Funzione Allinea e distribuisci
Seleziona più tavole da disegno e fai clic su Allinea e distribuisci in Controllo proprietà. Trascina la tavola da disegno per riorganizzarle.
Applica griglie di layout o quadrate
Desideri definire la struttura sottostante del contenuto del tuo progetto aggiunto nelle tavole da disegno? Applica Griglie di layout.Vuoi sapere come misurare rapidamente e allineare i contenuti di design mentre disponi oggetti o testo sulle tavole da disegno?Usa le griglie quadrate.
Griglie layout
Seleziona una o più tavole da disegno e nella sezione Griglia della finestra Ispezione proprietà, scegli Layout.
Griglie quadrate
Seleziona una o più tavole da disegno e nella sezione Griglia della finestra Ispezione proprietà, scegli Quadrato.
Tavole da disegno del progetto
Ora che hai creato la tua prima tavola da disegno, scopri come aggiungere elementi visivi e di testo, cambiare lo sfondo e creare effetti di scorrimento.
Aggiungi elementi visivi e di testo
Ora che la tua tavola da disegno di base è a posto, puoi creare o modificare il colore di sfondo, aggiungere elementi grafici e creare o formattare stili di testo in risorse riutilizzabili. Desideri creare una griglia modificabile di elementi ripetuti? Usa le griglie di ripetizione.
Aggiungi elementi visivi e di testo
Usa gli strumenti Disegno per creare elementi personalizzati oppure seleziona File > Importa per importare elementi esistenti come immagini e icone dalla cartella del dispositivo. Usa gli strumenti Testo per creare, formattare e acquisire stili di testo in risorse riutilizzabili.
Per modificare il colore di sfondo della tavola da disegno, dalla finestra Ispezione proprietà, seleziona Riempi e applica il colore dal selettore colore.
Crea elementi ripetibili
Usa le griglie di ripetizione per creare oggetti con elementi ripetibili come elenchi e layout basati su carte.
Creazione di tavole da disegno scorrevoli
Desideri aggiungere effetti di scorrimento verticale e orizzontale nel tuo progetto? Usa i gruppi di scorrimento per prototipare una finestra di contenuto.
Vuoi ottenere una simulazione realistica di scorrimento su desktop e dispositivi mobili? Imposta la posizione fissa di un elemento sulla tavola da disegno per consentire agli altri elementi di scorrere al di sotto.
Scorrimento verticale
Per estendere la tavola da disegno oltre l'altezza della finestra, utilizza il marcatore. Il marcatore indica la posizione fino alla quale è necessario scorrere per accedere al contenuto.
Posizione fissa durante scorrimento
Per bloccare gli elementi del progetto in una posizione fissa, seleziona Posizione fissa durante scorrimento nella finestra Ispezione proprietà.
Il progetto finale
Ora che ne sai abbastanza sulle tavole da disegno, puoi giocare con ciò che hai imparato finora e creare tavole da disegno più sorprendenti per i tuoi progetti.
Ulteriori informazioni
Consigli e suggerimenti
Ora che hai le basi delle tavole da disegno in XD, ecco alcuni suggerimenti e trucchi utili:
- Per misurare la distanza di un oggetto dai bordi di una tavola da disegno, fai clic sull'oggetto e premi il tasto Opzione (su macOS) o Alt (su Windows).
- Per disattivare l'opzione di scorrimento in una tavola da disegno, seleziona la tavola da disegno e nella finestra Ispezione proprietà, modifica Scorrimento su Nessuno.
Per ulteriori suggerimenti professionali su come lavorare con le tavole da disegno, segui @Elainecchao, XD Product Manager su Twitter.
Passaggi successivi
Ti abbiamo illustrato come creare, gestire e condividere le tavole da disegno. Fai un passo avanti e impara a creare guide di tavole da disegno personalizzate e posizionare la tavola da disegno utilizzando le griglie.
Hai una domanda o un'idea?
Se hai domande o un'idea da condividere, partecipa nella community di Adobe XD. Desideriamo ricevere il tuo feedback e vedere le tue creazioni.
Progetta prototipi UX con Adobe XD
Crea modelli interattivi per siti web e app per dispositivi mobili.


