Creazione di progettazioni dinamiche con le pile

Le pile in Adobe XD consentono di definire spazi fissi tra gli oggetti in un gruppo. Quando ridimensioni, riordini o modifichi gli oggetti in una pila, XD conserva automaticamente lo spazio definito tra gli oggetti. 

Insieme a riempimento e ridimensionamento reattivo, le pile creano una potente combinazione di funzioni che offre maggior controllo e velocità nella progettazione. Le pile applicate ai componenti, automatizzano il layout e velocizzano la modifica di pulsanti, menu, menu a discesa e layout basati su schede.

Assicurati di avere familiarità con le nozioni di base dei layout in base al contenuto:

• Componenti
• Ridimensionamento reattivo e vincoli
• Riempimento per componenti e gruppi

Limitazioni

Tieni in considerazione queste limitazioni prima di iniziare con le pile:

• Se passi con il mouse su un elemento con uno stato al passaggio del mouse che ne aumenta le dimensioni, lo sfondo non è ridimensionato per adattarsi al nuovo stato e gli elementi nella pila non sono allontanati.
• I componenti non possono essere utilizzati come sfondo per riempimento e pile. Crea invece un componente che contenga sia contenuto che sfondo.
• Non puoi:
  • Convertire gruppi speciali in maschere o gruppi booleani in pile.
  • Ridimensionare le pile nella direzione della pila.
  • Selezionare un elemento della pila ed elementi esterni alla pila.

Attivazione delle pile

XD determina automaticamente l’orientamento della pila in base alla struttura del gruppo o del componente. Tuttavia, per cambiare l’orientamento della pila, seleziona Verticale o Orizzontale nell’opzione Pila nella finestra di Ispezione proprietà. 

Quando utilizzi i componenti, il controllo per l’orientamento della pila è disponibile solo per il componente principale.

Cosa succede quando attivi le pile?

Modifica degli elementi della pila

Dopo aver creato gli elementi della pila, utilizza una qualunque delle opzioni seguenti per modificarli:

Spostare gli elementi o usare l’opzione Allinea e Ridimensiona gli oggetti e il testo nella pila

Modifica gli spazi tra oggetti                                                                   Regola gli spazi nella pila

Equalizza gli spazi in una pila                                                                    Elementi duplicati in una pila

Riordinamento degli elementi della pila

Dopo aver creato e modificato gli elementi della pila, utilizza una qualunque delle opzioni seguenti per riordinarli:

Creazione o modifica dello sfondo della pila

Quando crei una pila, XD determina automaticamente lo sfondo. Tuttavia, quando attivi le pile in un gruppo o un componente, il livello o il gruppo posizionato più in basso nella pila che sovrappone il suo contenuto, diventa lo sfondo.

XD non supporta le istanze del componente come sfondo.

Per creare e modificare lo sfondo della pila, attieniti alla procedura riportata di seguito:

1. Crea una forma o un gruppo nella pila che funga da sfondo della pila. Puoi anche creare uno sfondo esternamente alla pila e copiarlo nel gruppo impilato.
2. Dalla pila, seleziona l’elemento da utilizzare come sfondo.
3. Fai clic con il pulsante destro e seleziona Crea sfondo o Sostituisci sfondo. L’elemento selezionato è spostato alla fine della pila e ridimensionato per adattarsi alle dimensioni della pila e ai valori di riempimento.
   

Tante altre possibilità con gli elementi della pila

Ora che hai appreso come creare le pile e utilizzarle, ecco alcuni altri suggerimenti sull’uso delle pile:

Nidifica e riorganizza le pile

Puoi ottenere un layout ben definito e facile da modificare annidando pile l’una dentro l’altra, ad esempio, una pila orizzontale in una pila verticale. Puoi nidificare un numero illimitato di pile. Guarda l’illustrazione animata per comprendere il funzionamento delle pile nidificate. 

Pile in componenti e stati

Puoi applicare pile e riempimento ai componenti per definire gli elementi dell’interfaccia utente riutilizzabili nel contesto dei sistemi di progettazione. Quando utilizzi i componenti che richiedono un’etichetta o un aggiornamento di riga, l’utilizzo delle pile fa sì che il layout del componente reagisca al cambiamento e automatizzi il lavoro di layout manuale. Ad esempio, nel caso di più istanze con esclusioni di contenuto, utilizza le pile per modificare e gestire gli spazi a livello globale. Non dovrai più modificare ogni scheda manualmente.

Le pile applicate a un componente principale sono automaticamente applicate a tutte le istanze e gli stati. Puoi inoltre creare un componente collegato con pile e modificarle. 

Come si comportano le esclusioni con le pile?

Ulteriori informazioni

“Insieme a riempimento e ridimensionamento reattivo, le pile creano una potente combinazione di funzioni quando lavori in un sistema di progettazione. Quando le pile sono utilizzate in un componente principale, qualsiasi istanza di quel componente rispetterà la struttura dettata dalla pila”.- Dani Beaumont, Principal Product Manager, XD.

Per ulteriori informazioni su come iniziare con le pile nei componenti e nei gruppi, guarda questo video.

Tempo di visione: 1 minuto.

Passaggi successivi

Ti abbiamo illustrato i primi passi su come utilizzare le pile per definire gli spazi tra gli elementi. Ora continua e scopri come creare prototipi animati e condividerli con progettisti o stakeholder per ricevere feedback.

Hai una domanda o un'idea?