Guida utente Annulla

Creazione di progettazioni dinamiche con le pile

Scopri come utilizzare le pile in Adobe XD per creare layout dinamici che reagiscono alle modifiche del contenuto.

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. 

Risultato del funzionamento delle pile

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.

Non hai mai utilizzato XD?

Installa XD

Scopri le nozioni di base dell'app

Utilizzi già XD?

Aggiorna l'app

Scopri le novità

Prima di procedere

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

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

Puoi attivare le pile in un gruppo o un componente in cui sia attivato il ridimensionamento reattivo. Seleziona la casella di controllo Pile nei controlli Ridimensionamento reattivo della finestra di Ispezione proprietà.

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?

Quando attivi le pile, XD effettua le seguenti operazioni:

  • Identifica automaticamente lo sfondo (un gruppo o una forma posizionata in fondo nel pannello Livelli che si sovrappone sull’area di lavoro con tutti gli oggetti nel gruppo).
  • Attiva e calcola i valori di riempimento.
  • Determina l’orientamento della pila: verticale o orizzontale.
  • Raggruppa elementi sovrapposti per preservare il layout.
  • Definisce e corregge i valori di spaziatura tra gli elementi.
applica 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

allinea pile

Sposta gli elementi liberamente o utilizza lo strumento Allinea sugli elementi della pila in direzione opposta alla direzione della pila.

ridimensiona

Seleziona un oggetto da ridimensionare e gli altri oggetti nella pila si spostano automaticamente per preservare la loro spaziatura relativa. Utilizza Testo ad altezza automatica per regolare dinamicamente l'altezza del testo nella pila senza modificarne la larghezza.

Modifica gli spazi tra oggetti                                                                   Regola gli spazi nella pila

Modifica degli spazi tra oggetti

Seleziona un oggetto in un gruppo o un componente impilato e passa con il mouse sugli spazi. L’evidenziazione di colore rosa rappresenta lo spazio tra gli oggetti nella pila. Fai clic e trascina l’evidenziazione per modificare lo spazio tra gli oggetti.

regolazione degli spazi tra le pile

Seleziona tutta la pila e tieni premuto il tasto S per regolare gli spazi al suo interno. Puoi anche usare il tasto S per modificare il riempimento.

Equalizza gli spazi in una pila                                                                    Elementi duplicati in una pila

Trascina tenendo premuto il tasto Maiusc o Maiusc+S (quando la selezione è esterna alla pila).

Premi Comando+D per duplicare un elemento all’interno della pila e posizionarlo sotto l’elemento selezionato.

Riordinamento degli elementi della pila

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

  • Seleziona gli elementi della pila e trascinali lungo la direzione della pila sull’area di lavoro.
  • Premi Comando+] e Comando+[ per spostarti su e giù nella pila e Comando+Maiusc+] e Comando+Maiusc+[ per spostare la selezione all’inizio o alla fine della pila. Questi comandi sono disponibili anche nel menu di scelta rapida (clic con il pulsante destro).
  • La nuova posizione dell’elemento della pila è evidenziata con caselle rosa. Per mantenere l’allineamento durante il riordinamento, tieni premuto il tasto Maiusc per bloccare gli elementi della pila nella direzione di trascinamento e mantenere così il loro allineamento originale.
Riordinamento degli elementi della pila

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:

creazione modifica sfondo pila

  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. 

impila e ripeti griglie

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?

  • Un’esclusione di spazio avviene quando modifichi manualmente lo spazio tra due elementi di una pila in un’istanza o uno stato. Se modifichi lo spazio nel componente principale, le modifiche non vengono applicate a tale istanza o stato.
  • Le istanze possono contenere esclusioni di contenuto o layout sugli elementi, ad esempio, testo in area più grande. Queste istanze possono sempre essere sincronizzate con il componente principale per quanto riguarda i valori riempimento o gli spazi tra di loro. 
Comportamento delle 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?

Chiedi alla community

Hai domande o un'idea da condividere? Iscriviti e partecipa alla community di Adobe XD. Desideriamo ricevere il tuo feedback e vedere le tue creazioni.

Ottieni supporto in modo più facile e veloce

Nuovo utente?