Creazione di gruppi di scorrimento in Adobe XD

I gruppi di scorrimento in Adobe XD ti consentono di definire le aree all'interno della tavola da disegno che scorrono indipendentemente dal resto della tavola da disegno per creare effetti di scorrimento in orizzontale o in verticale. I gruppi di scorrimento sono utili quando progetti elementi dell'interfaccia utente come un carousel di immagini, cursori di scorrimento di prodotti o mappe interattive.

Continua a leggere per scoprire come usare i gruppi di scorrimento in orizzontale, in verticale e una combinazione di entrambi in XD.

Assicurati di avere familiarità con le modalità di progettazione, prototipazione e condivisione in XD.

Limitazione

I gruppi di scorrimento non funzionano nelle specifiche di progettazione. Per ovviare a questo problema, aggiungi gruppi di scorrimento in una tavola da disegno separata e pubblicali come parte delle specifiche di progettazione.

Creazione di un effetto di scorrimento in orizzontale

Vuoi prototipare un carousel utilizzando lo scorrimento in orizzontale? Guarda questa illustrazione animata e segui i passaggi riportati di seguito per scoprire come creare un effetto di scorrimento in orizzontale.

1. In modalità Progettazione, seleziona gli oggetti da trasformare in un gruppo di scorrimento.
   
2. Fai clic sull'icona  nella finestra Ispezione proprietà. La viewport regola automaticamente le sue dimensioni per fornire un'esperienza di anteprima istantanea. Puoi anche usare ⇧⌘H in macOS e Maiusc+Ctrl+H in Windows per creare un effetto di scorrimento orizzontale.
   
3.  Per visualizzare in anteprima l'effetto completo di scorrimento in orizzontale, seleziona   .
   

Creazione dell'effetto di scorrimento in verticale

Vuoi prototipare il carousel utilizzando lo scorrimento in verticale? Guarda questa illustrazione animata e segui i passaggi riportati di seguito per scoprire come creare un effetto di scorrimento in verticale.

1. In modalità Progettazione, seleziona gli oggetti da trasformare in un gruppo di scorrimento.
   
2. Seleziona l'icona  nella finestra di Ispezione proprietà per scorrere verso l’alto e il basso. La viewport regola automaticamente le sue dimensioni per fornire un'esperienza di anteprima istantanea. Puoi anche usare ⇧⌘V in macOS e Maiusc+Ctrl+V in Windows per creare un effetto di scorrimento verticale.
   
3. Per visualizzare in anteprima l’effetto completo di scorrimento in verticale, seleziona   .
   

Creazione di un effetto di scorrimento in orizzontale e in verticale

Una combinazione di effetti di scorrimento in orizzontale e verticale è utile quando vuoi creare oggetti che consentono di scorrere in tutte le direzioni, come le mappe interattive. Guarda questa illustrazione animata e segui i passaggi riportati di seguito.

1. In modalità Progettazione, seleziona gli oggetti da trasformare in un gruppo di scorrimento.
   
2. Seleziona l'icona  nella finestra Ispezione proprietà. La viewport regola automaticamente le sue dimensioni per fornire un'esperienza di anteprima istantanea. Puoi anche usare ⇧⌘D in macOS e Maiusc+Ctrl+D in Windowsper creare una combinazione di effetti di scorrimento orizzontale e verticale.
   
3. Per visualizzare in anteprima l'effetto completo di scorrimento in orizzontale e in verticale, seleziona   .
   

Ulteriori informazioni

Per ulteriori informazioni sui gruppi di scorrimento in orizzontale e verticale in XD, guarda questo video.

Tempo di visione: 6 minuti

Consigli e suggerimenti

Ora che sai come creare effetti di scorrimento in orizzontale e in verticale con XD, ecco alcuni suggerimenti e trucchi pratici:

• Quando visualizzi in anteprima il prototipo in Windows e da Web, utilizza il trackpad o la rotellina del mouse, quindi fai clic e trascina per verificare gli effetti di scorrimento in orizzontale e in verticale.
• Nell'anteprima in macOS, utilizza il trackpad o la rotellina del mouse, quindi fai clic e trascina per verificare gli effetti di scorrimento in orizzontale e in verticale.
• Combina i gruppi di scorrimento con gli stati del componente e tipi di azioni quali Sovrapponi, Animazione automatica e Scorri a. 
• Usa il riempimento per ottenere un migliore controllo dell'offset nei gruppi di scorrimento.
• Utilizza i gruppi di scorrimento nidificati quando nelle progettazioni crei più livelli di scorrimento.

Passaggi successivi

Ti abbiamo illustrato i primi passi su come creare gli effetti di scorrimento in orizzontale e in verticale. Ora continua e scopri come creare prototipi interattivi e condividerli con progettisti o stakeholder per ricevere feedback.

Hai una domanda o un'idea?