Creazione di gruppi di scorrimento in Adobe XD

Scopri come creare gruppi di scorrimento che scorrono in modo indipendente dal resto della tavola da disegno.

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 orizzontalein verticale e una combinazione di entrambi in XD.

Effetto carousel creato con i gruppi di scorrimento
Effetto carousel creato con i gruppi di scorrimento

Non hai mai utilizzato Adobe XD?

Ottieni l'app in versione di prova gratuita

Utilizzi già Adobe XD?

Aggiorna l'app

Scopri le novità

Prova

Ottieni il file di esempio

.xd; 81 MB

Prima di procedere

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.

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, fai clic su.

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.

scorrimento in verticale

  1. In modalità Progettazione, seleziona gli oggetti da trasformare in un gruppo di scorrimento.
  2. Fai clic sull'icona  nella finestra 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, fai clic su.

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.

orizzontale e verticale

  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 ⇧⌘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, fai clic su.

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?

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