Creazione di tavole da disegno scorrevoli

Ultimo aggiornamento il 10 feb 2023

Scopri come creare tavole da disegno scorrevoli.

Durante la progettazione con XD, il contenuto potrebbe eccedere la lunghezza della tavola da disegno. Allungando la tavola da disegno e scegliendo le opzioni in base alle esigenze di progettazione, puoi scorrere verticalmente la tavola da disegno in modo che si adatti a formati di dispositivi diversi.

Lo scorrimento verticale ti consente di simulare gli effetti di scorrimento durante la progettazione di elenchi a discesa scorrevoli o siti Web. Tuttavia, puoi usare i gruppi di scorrimento per aggiungere un nuovo livello di interazione durante la progettazione di interfacce multi-pannello, mappe e gallerie di immagini orizzontali.

Tavola da disegno scorrevole

Creazione dello scorrimento verticale

Sulle tavole da disegno predefinite: trascina in giù il punto più basso della tavola da disegno per ottenere una lunghezza superiore a quella dello schermo del dispositivo. Una linea tratteggiata indica l'inizio del contenuto scorrevole. 

Linea tratteggiata e contenuto scorrevole
Linea tratteggiata e contenuto scorrevole

Nella modalità Progettazione, seleziona le seguenti opzioni nella finestra di Ispezione proprietà:

  • Scorrimento: seleziona Verticale o Nessuno
  • Posizione fissa durante scorrimento: seleziona per bloccare gli elementi in una posizione fissa per evitare lo scorrimento con il contenuto. 
  • Altezza viewport: specifica l'altezza della viewport attraverso la quale puoi visualizzare la tavola da disegno. 

Puoi applicare un effetto di scorrimento verticale per spostare il contenuto della tavola da disegno verso l'alto e verso il basso.

Scorrimento verticale su una tavola da disegno di dimensioni personalizzate
Scorrimento verticale su una tavola da disegno

Collega le tavole da disegno in modalità prototipo.

Nella modalità Prototipo, seleziona le seguenti opzioni nella finestra di Ispezione proprietà:

  • Conserva posizione di scorrimento: passa alla tavola da disegno successiva mantenendo la posizione dalla tavola da disegno precedente. Guarda questo Post di Twitter per maggiori dettagli. 
  • Posizione fissa durante scorrimento: blocca gli elementi della progettazione in una posizione fissa per evitare lo scorrimento con il contenuto. 
Conserva posizione di scorrimento
Conserva posizione di scorrimento

Posizione fissa durante scorrimento
Posizione fissa durante scorrimento

Per visualizzare l'anteprima della tavola da disegno, seleziona Anteprima desktop  . Trascina la finestra di anteprima per visualizzare lo scorrimento verticale.

Esempi e file di esempio

Vuoi lavorare con tavole da disegno predefinite per creare un elenco a discesa scorrevole in verticale?

  1. Utilizza lo strumento Selezione per fare clic sul nome della tavola da disegno o trascinare sulle tavole da disegno. Puoi anche fare clic sul nome di una tavola da disegno nel pannello Livelli per selezionarlo nella finestra Documento.
  2. Per rendere la tavola da disegno selezionata più lunga, trascina verso il basso il punto inferiore della tavola da disegno. Una linea tratteggiata indica l'altezza originale della tavola da disegno.
  3. Per visualizzare l'anteprima dello scorrimento sulla tavola da disegno, puoi usare direttamente XD con l'opzione Anteprima desktop.

Scarica i file di esempio e provali o guarda questo video per maggiori informazioni.

Tempo di visione: 1 minuto.

Mentre progetti per desktop o dispositivi mobili, vuoi visualizzare alcune parti del sito web solo durante lo scorrimento e fissare gli elementi di design senza che fluttuino?Guarda questo video per saperne di più sulle tavole da disegno scorrevoli e sugli elementi fissi. 

Tempo di visione: 1 minuto.

Puoi anche vedere nella community di XD per altre esercitazioni e altri file di esempio simili.

Consigli e suggerimenti

Per creare effetti di scorrimento orizzontale nei progetti, utilizza i gruppi di scorrimento. I gruppi di scorrimento consentono di prototipare una finestra di contenuto che può scorrere in orizzontale, in verticale o in entrambe le direzioni.


Risorse correlate

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.