Aggiunta di più stati ai componenti

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.

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 stato, Stato 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.

 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

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.

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

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:

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:

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? 

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?