Guida utente Annulla

Aggiunta di più stati ai componenti

  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 aggiungere più stati ai componenti nel sistema di progettazione per sviluppare contenuto interattivo con facilità.

I componenti che cambiano aspetto in base alle interazioni dell’utente sono preziosi per la creazione di prototipi ad alta fedeltà.

Puoi creare un componente, aggiungervi più varianti (stati) e collegarlo per imitare il comportamento di un utente reale (senza dover copiare i componenti più volte). 

La presenza di componenti con stati semplifica inoltre la gestione delle risorse e la creazione di sistemi interattivi di progettazione. 

Esempi comuni di componenti con stati sono i pulsanti, le caselle di controllo e gli interruttori animati. Quando l’utente interagisce con questi componenti, toccandoli o passandoci sopra con il mouse, essi devono cambiare.

Aggiunta di stati del componente

Quando hai creato un componente, nella finestra di Ispezione proprietà troverai una nuova sezione che elenca il componente con uno Stato predefinito. Ora puoi aggiungere tre tipi di stati ai componenti: Nuovo statoStato passaggio o Stato alternanza. Continua a leggere per apprendere come aggiungere uno stato.

Nuovo stato

Utilizza Nuovo stato nei casi in cui devi mostrare le variazioni di un componente, ad esempio, la versione disattivata o sulla quale hai fatto clic di un componente.

Fai clic sul pulsante + accanto allo Stato predefinito del componente principale nella finestra di Ispezione proprietà e seleziona Nuovo stato.

In Nuovo stato non è inclusa nessuna interattività. Devi collegare l’interazione in modalità Prototipo. Per ulteriori informazioni, consulta Aggiunta di interattività ai componenti.

Stato passaggio

Utilizza lo Stato passaggio quando vuoi che il componente cambi e visualizzi uno stato diverso quando un utente passa sopra il componente. 

In modalità Progettazione, fai clic sul pulsante + accanto allo Stato predefinito del componente principale nella finestra di Ispezione proprietà e seleziona Stato passaggio.

Quando utilizzi Stato passaggio, non è necessario passare alla modalità Prototipo per collegare l’interazione. Questa operazione viene effettuata automaticamente.

Stato Alternanza

Usa lo stato Alternanza quando vuoi creare componenti con comportamento di alternanza interattivo, quali interruttore, pulsante di opzione, casella di controllo e così via.

In modalità Progettazione, fai clic sul pulsante + accanto a Stato predefinito del componente principale nella finestra di Ispezione proprietà e seleziona Stato Alternanza.

Una volta creato lo stato alternanza, per impostazione predefinita, XD eseguirà automaticamente due interazioni tocco bidirezionali tra Stato predefinito e Stato Alternanza, rendendolo completamente interattivo.

Aggiunta di stati a un componente
Aggiunta di stati a un componente

 Gli stati possono essere aggiunti solo a un componente principale. Le istanze del componente ereditano sempre i loro stati dal componente principale.

Visualizzazione dei componenti in stati diversi

Dopo aver creato gli stati del componente, puoi modificare le proprietà del componente e visualizzare come appare quando l’utente vi interagisce. 

  1. Seleziona il componente.
  2. Vai alla finestra di Ispezione proprietà e attiva o disattiva i diversi stati.
Cambio degli stati dalla finestra di Ispezione proprietà
Cambio degli stati dalla finestra di Ispezione proprietà

Aggiunta di interattività ai componenti

Puoi usare gli attivatori Tocca, Passaggio, Tasti e gamepad e Voce per interazioni di collegamento tra gli stati dei componenti nella modalità Prototipo. Il collegamento delle interazioni tra gli stati del componente è simile al collegamento delle interazioni tra tavole da disegno. La differenza principale è che nel collegamento delle interazioni tra gli stati del componente si sceglie come destinazione uno stato anziché una tavola da disegno.

Aggiunta di interattività
Collegamento degli stati del componente per creare un’interazione tocco

  1. Passaggio alla scheda Prototipo.
  2. Seleziona lo stato del componente da cui creare l'interazione. 
  3. Fai clic sull'icona > sullo stato del componente o su + nella sezione Interazione della Finestra di Ispezione proprietà per aggiungere un’interazione.
  4. Scegli Tocca (per eventi clic), Passaggio (per azioni di passaggio con il mouse), Tasti e gamepad (navigazione e casi d'uso di accessibilità) o Voce (navigazione e casi d'uso di accessibilità) come attivatore.
  5. Scegli un tipo di azione (ad esempio, Animazione automatica o Transizione).
  6. Scegli uno stato come destinazione.
  7. Passa alla finestra Anteprima e verifica l’interattività del componente.

 Gli stati sono elencati sopra le tavole da disegno nel menu a discesa, separati da un divisore.

 

Interazioni multiple per lo stato di un componente
Interazioni multiple per lo stato di un componente

Per lo stesso stato del componente puoi definire più interazioni. Ad esempio, se hai un interruttore con uno stato di attivazione predefinito, uno stato disattivato e uno stato di passaggio del mouse, puoi definire interazioni separate sullo stato predefinito. Ripeti i passaggi 4-7 per definire l'interazione con lo stato aggiuntivo. Dopo aver creato più interazioni, puoi visualizzare la sezione Interazioni dove sono mostrate quelle definite. Passa da un'interazione all’altra e modificane le proprietà in base alle esigenze.

Modifica degli stati del componente

Le interazioni definite sullo stato del componente principale sono ereditate automaticamente da tutte le istanze di quel componente. Ciò significa che se colleghi un componente a una tavola da disegno o a uno stato specifico, anche tutte le istanze di quel componente contengono tali interazioni. 

Quando hai selezionato un'istanza sull'area di lavoro e vuoi modificare gli stati esistenti o aggiungerne di nuovi al componente principale, puoi effettuare questa operazione seguendo una delle opzioni sotto riportate:

Opzione 2

Fai clic su Modifica per passare la selezione al componente principale per aggiungere o modificare gli stati.

Fai clic su Modifica per passare la selezione al componente principale per aggiungere o modificare gli stati

Opzione 1

Fai clic con il tasto destro del mouse sull'istanza del componente e seleziona Modifica componente principale.

Le istanze del componente sono collegate al componente principale. Le modifiche al componente principale si propagano alle istanze. Per ulteriori informazioni, consulta Gestione dei componenti con un’unica origine.

Ridenominazione, riordinamento ed eliminazione degli stati dei componenti

Ridenominazione dello stato del componente: fai doppio clic sul nome dello stato del componente nella finestra di Ispezione proprietà e digita un nuovo nome.

Riordinamento degli stati di un componente principale: trascina gli stati di un componente principale nella finestra di Ispezione Proprietà per riordinarli.

Elimina uno stato del componente da un componente principale: fai clic con il tasto destro del mouse sullo stato del componente e seleziona Elimina. Quando elimini uno stato del componente dal componente principale, le istanze del componente con tale stato attivo sull'area di lavoro tornano allo Stato predefinito.

 Puoi solo rinominare ed eliminare gli stati nel componente principale. Lo Stato predefinito non può essere rinominato.

Pubblicazione e condivisione degli stati dei componenti

Puoi pubblicare i componenti e i relativi stati associati a una libreria di Creative Cloud dal pannello Librerie e distribuirli come parte di un sistema di progettazione. Per ulteriori informazioni, consulta Utilizzo di Creative Cloud Libraries in XD.

Gestione dei componenti con un'unica origine

Per semplificare la gestione degli stati dei componenti, puoi solo aggiungere, rinominare ed eliminare gli stati da un componente principale. Le istanze di quel componente ereditano automaticamente qualsiasi modifica dello stato effettuata nel componente principale. Puoi identificare facilmente il componente principale dal diamante pieno verde sull'area di lavoro o dalla sezione Componente nella finestra di Ispezione proprietà. Le istanze presentano un diamante verde cavo. 

Eredità degli stati del componente

Tieni presente queste linee guida quando modifichi gli stati tra componenti principali e istanze:

  • Puoi sovrascrivere le proprietà (testo, bitmap, dimensioni, aspetto o cambi di struttura) per gli stati nello stesso modo con cui puoi escludere l’istanza di un componente. 
  • Quando modifichi lo stato in un componente principale, tale stato si aggiorna in tutte le istanze.
  • Quando modifichi lo stato in un'istanza, questa diventa un'esclusione univoca e blocca la sincronizzazione di tale proprietà se modificata nello stato del componente principale.

Se i risultati delle esclusioni non sono soddisfacenti, reimposta il componente come componente principale originale facendo clic con il pulsante destro del mouse su un'istanza e selezionando Reimposta a stato principale. Questo cancella tutte le esclusioni in un'istanza e la reimposta sul componente principale.

Ripristino dell'esclusione dello stato al componente principale originale
Ripristino dell'esclusione dello stato al componente principale originale

Per ulteriori informazioni sul funzionamento delle esclusioni dei componenti, consulta Utilizzo dei componenti in XD.

Stati del componente collegati tra i documenti

Puoi creare e gestire un’unica origine per tutti i componenti riutilizzabili insieme ai loro stati e alle interazioni definite. Ad esempio, se hai un componente pulsante con 5 stati definiti: Primario, Secondario, Passaggio, Tocca e Disattivato, quando lo copi e incolli tra documenti, XD crea un componente collegato che mantiene tutti gli stati dei componenti definiti insieme a le interazioni degli stati. 

Se modifichi le proprietà del componente collegato (stile, interazioni e così via) nel documento di origine, XD notifica i documenti con istanze di quel componente collegato con i relativi aggiornamenti. A tal punto, puoi visualizzare le modifiche in anteprima e scegliere di accettarle o ignorarle. 

I componenti collegati supportano solo le interazioni definite tra stati e non tavole da disegno.

Esempi e file di esempio

Vuoi creare un interruttore che si attiva e disattiva quando un utente lo tocca? 

Crea un pulsante interruttore animato utilizzando la risorsa di esempio
Crea un pulsante interruttore animato utilizzando la risorsa di esempio

  1. Scarica il file di esempio del pulsante interruttore e aprilo in XD.
  2. Seleziona tutto l’oggetto (assicurati che il cerchio sia selezionato) e premi Comando+K (macOS) o Ctrl+K (Win).
  3. Aggiungi un nuovo stato e chiamalo Disattivato.
  4. Nello stato Disattivato, seleziona il rettangolo arrotondato e cambia il colore di riempimento in grigio. Seleziona il cerchio e spostalo a sinistra.
  5. In modalità Prototipo, collega le interazioni seguenti:
    • State predefinito: imposta Attivatore su Tocca, Azione su Animazione automatica e Destinazione su Disattivata.
    • State disattivato: imposta Attivatore su Tocca, Azione su Animazione automatica e Destinazione su Stato predefinito.
  6. (Facoltativo): per illuminare il pulsante al passaggio del mouse, seleziona il componente, aggiungi lo Stato passaggio, quindi modifica il componente per ottenere un effetto bagliore.

Ulteriori informazioni

Guarda questo video per ulteriori informazioni su come costruire l’interattività usando componenti con stati. 

Tempo di visione: 7 minuti.

Passaggi successivi.

Ti abbiamo illustrato i primi passi con l’uso di componenti con stati. Segui questo post della community per scoprire come utilizzare questa funzione per creare delle caselle di controllo. 

Hai una domanda o un'idea?

Chiedi alla community

Se hai domande o un'idea da condividere, partecipa nella community di Adobe XD. Desideriamo ricevere il tuo feedback e vedere le tue creazioni.

Logo Adobe

Accedi al tuo account