Esplorazione della griglia ripetuta in Adobe XD

Se sei un visual designer, probabilmente trascorri la maggior parte del tuo tempo apportando piccole modifiche a più elementi visivi. Forse il tuo cliente ha deciso di aver bisogno di qualche pixel in più di riempimento tra ciascuno dei tuoi elementi, o forse ha deciso che tutti i suoi avatar dovevano avere angoli arrotondati. In ogni caso, potresti ritrovarti a fare la stessa regolazione nel tuo design più e più volte... e ancora.

In Adobe Experience Design CC (Beta), abbiamo introdotto la funzione Ripeti griglia per affrontare questo noioso aspetto del flusso di lavoro di un designer. In questo articolo, scaveremo in profondità per scoprire il vero potere di questa funzione che fa risparmiare tempo. Creeremo e regoleremo una griglia ripetuta, aggiungeremo contenuto ad essa e lo collegheremo nella modalità prototipo semplice e potente di Adobe XD. Se desideri continuare, puoi scaricare e testare Adobe XD gratuitamente.

Ulteriori letture su SmashingMag:

• Prototipazione rapida UX con le scorciatoie Adobe XD
• Come creare icone con Adobe XD
• Come utilizziamo la prototipazione e come ci ha resi più efficienti

Creazione e regolazione di una griglia ripetuta

Al suo interno, una griglia ripetuta è un tipo speciale di gruppo. Proprio come raggruppiamo gli oggetti, creeremo la nostra Griglia ripetuta selezionando un oggetto o un gruppo di oggetti e convertirli in una griglia ripetuta. In questo esercizio creeremo un semplice elenco di contatti telefonici con un'immagine e un nome.

Passaggio 1: crea i nostri oggetti iniziali

• Dalla schermata di benvenuto, seleziona un tipo di tavola da disegno per avviare un nuovo file.
• Disegna un rettangolo usando lo strumento Rettangolo ( R ).
• A destra del rettangolo, usa lo strumento Testo ( T ) per digitare del testo segnaposto.
• Usando lo strumento Selezione ( V ), seleziona entrambi gli oggetti, sia selezionando la selezione (disegnando un riquadro attorno a entrambi gli oggetti), sia selezionando un oggetto e tenendo premuto Maiusc l'altro.

Nota che non abbiamo bisogno di precisione a questo punto, poiché possiamo regolare gli elementi in un secondo momento.

Passaggio 2: crea e ridimensiona la griglia di ripetizione

Converti la selezione in una griglia ripetuta facendo clic sul pulsante nella finestra di ispezione Proprietà o utilizzando il tasto di scelta rapida Cmd + R .

Il nostro gruppo è ora una griglia ripetuta. Puoi vedere che ora ha due maniglie, una a destra e una in basso, e la casella attorno al tuo gruppo è una linea verde tratteggiata.

Fare clic e trascinare la maniglia destra verso destra, espandendo la griglia di ripetizione. Per espandere la griglia ripetuta verso il basso, trascina la maniglia in basso verso il basso.

Ora abbiamo elementi ripetuti nella nostra Griglia di ripetizione. Tutti gli stili che applichiamo a qualsiasi oggetto saranno per tutte le sue versioni ripetute.

Passaggio 3: regola tutti gli elementi all'interno della griglia di ripetizione

Come ogni gruppo, possiamo accedere agli elementi componenti della griglia di ripetizione facendo doppio clic nel gruppo. Una volta apportate le modifiche, possiamo uscire dal contesto di modifica premendo il tasto Esc. Tuttavia, esistono altri modi per accedere agli elementi componenti. Ad esempio, possiamo approfondire l'elemento nel pannello Livelli ( Cmd + Y ) o selezionandolo direttamente ( Cmd + Click ).

• Usando lo strumento Selezione ( V ), fai doppio clic su qualsiasi rettangolo nella griglia di ripetizione. Ora dovresti vedere una casella azzurra attorno alla cella che stai modificando. Seleziona e trascina il testo in modo che sia allineato al rettangolo.
• Fare clic sull'oggetto Testo e modificare il carattere tipografico e le dimensioni nella finestra di ispezione Proprietà a destra. Tutti i tuoi oggetti di testo condividono lo stesso stile.
• Premi Esc per uscire dal contesto di modifica e sposta la griglia di ripetizione in modo che sia allineata alla tavola da disegno.

Passaggio 4: regola il riempimento di righe e colonne nella griglia di ripetizione

Ora che abbiamo la nostra griglia di ripetizione, possiamo iniziare a regolare lo spazio tra ogni riga e colonna. Passando con il mouse sopra lo spazio tra gli elementi, possiamo attivare gli indicatori di colonna e riga e cambiarli a nostro piacimento.

• Posiziona il cursore tra il lato destro di un elemento di testo e il lato sinistro di un rettangolo, direttamente nella grondaia della colonna. Una volta visualizzato l'indicatore della colonna rosa, trascina il lato destro della grondaia a sinistra e a destra fino a quando non è impostato su 30.
• Posiziona il cursore tra i rettangoli, direttamente nella grondaia della riga. Quando viene visualizzato l'indicatore della riga rosa, trascina la parte inferiore della grondaia su e giù fino a quando non è impostata su 30.
• Continua a regolare la spaziatura tra le celle e la dimensione della griglia ripetuta finché non hai il giusto numero di elementi per adattarsi alla tua tavola da disegno.

Puoi convertire qualsiasi insieme di oggetti in una griglia ripetuta. Questi oggetti diventano una cella nella griglia di ripetizione. È quindi possibile modificare la cella e regolare lo spazio tra righe e colonne.

Utilizzo dei dati in una griglia ripetuta

Ora che abbiamo la forma generale del nostro elenco di contatti, possiamo popolarlo con il contenuto. Il modo più semplice per compilare è modificare ogni elemento separatamente.

Passaggio 1: aggiorna i singoli elementi di testo

• Cmd + Click un oggetto di testo nella griglia Ripeti per selezionarlo. Ora sei nella modalità di modifica del contesto della griglia di ripetizione.
• Fare doppio clic sull'elemento di testo per modificarlo e cambiare il testo in un nome. Si noti che il contenuto non viene applicato a tutti gli altri oggetti di testo nella griglia ripetuta. Tuttavia, qualsiasi stile applicato all'oggetto di testo si applica a tutti gli oggetti di testo.

Passaggio 2: crea un motivo di riempimento dell'immagine

• Trascina un'immagine in uno dei rettangoli per importarla. L'immagine verrà applicata come riempimento per il rettangolo e si ridimensiona automaticamente per riempire la forma. Chiamiamo questa funzione mascheramento automatico.
• Trascina una seconda immagine nel secondo rettangolo. Definiamo l'ordine nella griglia di ripetizione in ordine di lettura da sinistra a destra (da sinistra a destra, poi dall'alto verso il basso). Nota che la griglia di ripetizione ora si alterna tra la prima foto e la seconda foto. Ora abbiamo creato un motivo a 2 foto.
• Trascina una terza immagine nel quarto rettangolo. Ora che hai trascinato un elemento nel quarto rettangolo, abbiamo un modello di 4 foto, con la prima e la terza che sono immagini identiche.
• Trascina una quarta immagine nel primo rettangolo. Questo sostituisce il primo elemento nel tuo modello di 4 foto, quindi ora dovresti avere quattro foto uniche nel tuo modello.

Il testo lavora sul concetto di override ; possiamo sovrascrivere il contenuto di un oggetto di testo stesso, ma gli stili rimangono applicati a tutte le ripetizioni dell'oggetto. Tuttavia, possiamo costruire il concetto di pattern ripetuti con oggetti con mascheratura automatica, in cui il riempimento dell'immagine di un oggetto viene ripetuto in un pattern definito dall'utente. Ad esempio, se hai trascinato la tua terza immagine nel terzo rettangolo, avresti creato un motivo a 3 foto. Allo stesso modo, se avessi trascinato un'immagine nel quinto rettangolo, avresti creato un motivo a 5 foto.

Tuttavia, può diventare davvero noioso. Invece, quello che faremo è utilizzare i contenuti che abbiamo preparato in anticipo.

Passaggio 3: trascina un file di testo separato dal ritorno sul tuo oggetto di testo

• Crea un file di testo con estensione .txt. Puoi crearlo utilizzando TextEdit del Mac (seleziona Formato> Crea testo normale) o qualsiasi editor di testo che preferisci. Separa ogni dato con un ritorno.
• Dopo aver salvato il file, trascinalo dal Finder e sull'oggetto di testo della griglia di ripetizione in Adobe XD per importare i dati.

Ora il nostro oggetto si ripete in base al numero di righe nel nostro file di testo. Se il nostro file di testo ha quattro righe, posizionerà una riga per oggetto di testo e si ripeterà dopo aver posizionato le prime quattro.

Passaggio 4: trascina una selezione di file immagine nel rettangolo.

• Nel Finder, seleziona un numero di immagini.
• Trascina questa selezione dal Finder e sul rettangolo della griglia di ripetizione per importare le immagini come riempimenti per il rettangolo ripetuto.
• Seleziona il rettangolo e cambia il raggio dell'angolo trascinando uno dei controlli del raggio. Tutti i tuoi cambiamenti di stile si riflettono su ogni ripetizione.

Simile al trascinamento delle immagini una alla volta, stai creando un motivo ripetuto per il riempimento del tuo oggetto. E, proprio come il testo, qualsiasi modifica al contenitore viene propagata a tutte le ripetizioni dell'oggetto nella griglia di ripetizione.

Si noti che è possibile modificare facilmente il contenuto di una griglia ripetuta, modificando un singolo oggetto o trascinando le origini dati. Tieni presente che i dati sono importati e non collegati, quindi qualsiasi modifica apportata al file di origine non influirà sui dati che hai già inserito nel file XD. Tutti i tuoi stili e le dimensioni e la forma di qualsiasi contenitore si riflettono in tutte le ripetizioni di un elemento.

Aggiunta di contenuto a una griglia ripetuta

Ora che abbiamo un elenco di contatti abbastanza completo, possiamo continuare il nostro processo di progettazione, iterando man mano che riceviamo feedback dai nostri colleghi e stakeholder. In questo caso, potrebbe essere necessario aggiungere elementi a posteriori. Ripeti griglia rende tutto più semplice consentendoci di aggiungere elementi a una cella.

Nel nostro esempio, aggiungeremo una linea orizzontale per separare le celle verticalmente.

Passaggio 1: disegna nel contesto di modifica

• Immettere il contesto di modifica della griglia di ripetizione.
• Disegna una linea orizzontale sulla cella sottostante selezionando lo strumento Linea ( L ) e tenendo premuto il tasto Maiusc mentre trascini.
• Usando lo strumento Selezione, regola la posizione della linea finché non è allineata a sinistra del rettangolo.
• Premi Esc per uscire dalla modifica del contesto.

Possiamo disegnare qualsiasi elemento o aggiungere testo all'interno del contesto di modifica della griglia ripetuta, anche dopo averlo creato. Poiché Repeat Grid ripete automaticamente ogni elemento, questo ci consente la flessibilità di giocare con il design in un modo nuovo.

Abbiamo appena aggiunto una linea, ma ora le celle si sovrappongono, lasciandoci con un pasticcio visivo. Avremo bisogno di aggiungere spazio verticale tra le celle. Quando accade una cosa del genere, Ripeti griglia ricalcola il margine tra la riga o la colonna (dal basso di uno all'inizio del successivo, o da destra di uno a sinistra del successivo) e lo imposta su un numero negativo se si sovrappongono.

Passaggio 2: regolare nuovamente il riempimento negativo

• Passa il mouse nello spazio di sovrapposizione. Afferra la parte superiore o inferiore del rettangolo e tiralo verso il basso, in modo che la sovrapposizione non esista più, quindi un po' più in là.

Abbiamo risolto questo problema, ma per quanto riguarda l'aggiunta di artwork che abbiamo già creato? Possiamo tagliare da un contesto e incollare in un altro.

Passaggio 3: taglia e incolla nel contesto di modifica della griglia di ripetizione

• Scarica il file star.svg e trascinalo sulla lavagna, al di fuori della tua attuale tavola da disegno. Questo importa il file star.svg nel tuo progetto.
• Converti il ​​tuo percorso importato in una griglia ripetuta e trascina la maniglia destra verso destra fino a ottenere un totale di quattro stelle. Regola l'imbottitura per avvicinare le stelle.
• Taglia la griglia di ripetizione con le stelle ( Cmd + X ), quindi fai doppio clic su qualsiasi cella dell'elenco dei contatti per accedere al contesto di modifica.
• Incolla ( Cmd + V ). La tua griglia ripetuta di stelle si incollerà al centro della cella. Sposta le stelle in modo che siano sotto il testo.

A volte, però, vorremo rompere la griglia di ripetizione; a volte vuoi solo oggetti indipendenti dopo averli allineati. Per fare ciò, separeremo la griglia di ripetizione e apporteremo le nostre modifiche.

Passaggio 4: separare la griglia di ripetizione interna e modificarla se necessario

• Poiché sei già nel contesto di modifica dell'elenco dei contatti, fai clic su Ripeti griglia di stelle per selezionarlo.
• Separa la griglia di ripetizione selezionando il pulsante Separa nella finestra di ispezione Proprietà, selezionando Separa griglia dal menu di scelta rapida (Ctrl-clic o pulsante destro del mouse) o utilizzando la scorciatoia da tastiera Cmd + Shift + G .
• Seleziona due delle stelle e deseleziona il riempimento.

Puoi anche aggiungere oggetti alla griglia ripetuta dopo averla creata, disegnando o incollando nel contesto di modifica. Se hai un riempimento negativo, puoi regolarlo facilmente passando il mouse sopra l'area di sovrapposizione. Puoi usare Ripeti griglia come un semplice strumento di allineamento tra gli elementi e disaccoppiare gli elementi ripetuti separandoli.

Prototipazione da una griglia ripetuta

Ora che abbiamo una griglia ripetuta, la collegheremo a un'altra tavola da disegno in modalità prototipo. Utilizzando Adobe XD, possiamo passare rapidamente dalla modalità Progettazione a quella Prototipo, il che ci consente di modificare sia l'interfaccia utente che le interazioni contemporaneamente.

In questo caso, creeremo solo una seconda tavola da disegno e un filo dalla nostra griglia di ripetizione in tre diversi scenari.

Opzione 1: collegare l'intera griglia di ripetizione per una singola interazione

• Crea una seconda tavola da disegno nel tuo file utilizzando lo strumento tavola da disegno ( A ). Fai clic a destra della tua tavola da disegno esistente per creare un'altra tavola da disegno accanto alla prima.
• Passa alla modalità Prototipo facendo clic sulla scheda nella parte superiore del riquadro dell'applicazione o utilizzando la scorciatoia da tastiera Cmd + Tab .
• Seleziona la griglia di ripetizione nella tua prima tavola da disegno. Un connettore con una freccia apparirà sul lato destro dell'oggetto nel suo punto medio.
• Trascina questo connettore sulla tavola da disegno successiva. Seleziona le opzioni di transizione nel popup, quindi premi Esc o fai clic all'esterno per ignorarlo.
• Visualizza l'anteprima premendo il pulsante Riproduci nell'angolo in alto a destra del riquadro dell'applicazione o utilizzando la scorciatoia da tastiera Cmd + Enter . Fare clic in un punto qualsiasi della griglia di ripetizione per riprodurre l'interazione.

Quello che abbiamo fatto a questo punto è collegare l'intero oggetto, incluso il suo riempimento, come punto ferita per l'interazione.

Opzione 2: collegare un singolo elemento di una griglia ripetuta per un'interazione

• Annulla l'ultimo filo usando la scorciatoia da tastiera Cmd + Z .
• Cmd-clic su un rettangolo nella griglia di ripetizione per selezionarlo direttamente.
• Trascina il connettore a destra del rettangolo e trascinalo sulla seconda tavola da disegno. Seleziona le opzioni di transizione nel popup come prima, quindi ignoralo.
• Se la finestra di anteprima non è ancora aperta, avviala di nuovo e fai clic sulla destinazione.

A questo punto abbiamo un unico elemento, ma cosa succede se vogliamo selezionare l'intera cella? Possiamo creare un gruppo all'interno della griglia di ripetizione per renderlo un punto ferita valido.

Opzione 3: crea un gruppo di elementi all'interno della griglia ripetuta e crea un'interazione dal gruppo.

• Annulla l'ultimo filo usando la scorciatoia da tastiera Cmd + Z .
• Torna alla modalità Progettazione facendo clic sulla scheda o utilizzando la scorciatoia da tastiera Cmd + Tab .
• Cmd + Click un rettangolo nella griglia Ripeti per selezionarlo direttamente. Fai clic tenendo premuto Maiusc sull'oggetto di testo accanto ad esso per aggiungerlo alla selezione.
• Raggruppa i due oggetti utilizzando la selezione del menu contestuale o la scorciatoia da tastiera Cmd + G .
• Torna alla modalità Prototipazione. Nota che la tua selezione rimane la stessa della modalità Progettazione.
• Trascina il connettore dal gruppo alla seconda tavola da disegno. Ora hai cablato l'intera area del gruppo come punto ferita per l'interazione.

Puoi persino creare un'interazione impostando l'hit point sull'intera griglia ripetuta, su un singolo elemento al suo interno o su un gruppo creato al suo interno.

Questo è tutto!

Spero che questo breve tutorial ti abbia aiutato a esplorare il potere di Repeat Grid. Questa funzionalità semplice e potente è stata molto popolare nella versione beta e si sta evolvendo man mano che riceviamo più feedback dagli utenti. Se hai un'idea per miglioramenti, condividili nella sezione commenti qui sotto.

Questo articolo fa parte della serie di design UX sponsorizzata da Adobe. La nuova app Experience Design è realizzata per un processo di progettazione dell'esperienza utente veloce e fluido, la creazione di prototipi di navigazione interattiva, nonché il test e la condivisione, tutto in un unico posto.

Puoi dare un'occhiata a progetti più stimolanti creati con Adobe XD su Behance e anche visitare il blog di Adobe XD per rimanere aggiornato e informato. Adobe XD viene aggiornato frequentemente con nuove funzionalità e, poiché è in versione beta pubblica, puoi scaricarlo e testarlo gratuitamente.