Prototipazione rapida UX con scorciatoie Adobe XD (cheat sheet PDF)
Pubblicato: 2022-03-10(Questo è un articolo sponsorizzato.) Adobe ha annunciato Project Comet nell'ottobre dello scorso anno per fornire una soluzione all-in-one rapida ed efficiente. Qualche mese fa, il segreto dietro il nome in codice è stato svelato e diffuso al pubblico in una versione di anteprima: Adobe Experience Design CC (Adobe XD). Realizzato per una progettazione UX veloce e fluida, XD ti offre tutto in un unico pacchetto: ti consente di abbozzare idee, creare prototipi interattivi, testarli e condividerli .
Per darti un vantaggio quando lavori con XD, abbiamo raccolto 15 suggerimenti per professionisti, incluse funzionalità che potrebbero non essere ovvie a prima vista ma che renderanno il tuo flusso di lavoro di prototipazione molto più fluido. Abbiamo raccolto tutte le scorciatoie in un unico file PDF (97 KB) che puoi scaricare qui.
Adobe XD è attualmente ancora in versione beta pubblica e può essere scaricato gratuitamente, anche se non sei abbonato a Creative Cloud. Inoltre, nuove funzionalità vengono aggiunte regolarmente. Tieni presente che una versione per Windows è in lavorazione e uscirà più avanti nel 2016, ma per ora Adobe XD è disponibile solo per Mac OS X.
Ripeti griglia
Fai crescere una griglia ripetuta
Per risparmiarti il processo di copia e incolla manuale degli oggetti, XD offre una funzione chiamata Exploring Repeat Grid. Seleziona l'elemento che desideri ripetere e fai clic sul pulsante della griglia di ripetizione nella finestra di ispezione delle proprietà a destra (oppure usa la scorciatoia Cmd + R ). Ora puoi trascinare le maniglie verdi per ripetere i tuoi elementi. Per trascinare o far crescere una griglia ripetuta dal centro, tieni premuto il tasto Option mentre trascini. Questo potrebbe tornare particolarmente utile quando vuoi mantenere un gruppo di oggetti centrato sulla tua tavola da disegno.
Entra ed esci dal contesto di modifica
Una griglia ripetuta viene considerata come un gruppo. Se desideri aggiungere qualcosa a tutti gli elementi nella griglia ripetuta, fai doppio clic per accedere al contesto di modifica della griglia e disegna, incolla o aggiungi elementi. Ciò ti impedisce di dover separare e riorganizzare tutto il tempo. Per far apparire un livello nel tuo gruppo o ripetere la griglia, premi il tasto Escape .
Regola l'imbottitura
Hai bisogno di regolare il riempimento nella tua griglia? Seleziona la griglia di ripetizione, passa il mouse sopra lo spazio tra i tuoi elementi e trascina fino a quando il riempimento è come desideri. XD fornisce anche numeri, quindi hai una migliore sensazione di quanto siano distanti le celle.
Inserisci dati
Progettare con dati reali è un'altra caratteristica elegante di XD. Invece di utilizzare lo stesso testo segnaposto per ogni oggetto, puoi trascinare qualsiasi file TXT separato da Return dal Finder su qualsiasi oggetto di testo per riempire la griglia con contenuto unico.
Disegno
Griglie per tavole da disegno
Le griglie della tavola da disegno forniscono un maggiore orientamento quando si disegna con lo strumento Penna. Ti consentono di trascinare gli oggetti per agganciarli alla griglia e puoi anche agganciare i tuoi punti di ancoraggio su di essi mentre disegni. Per abilitare la griglia, fai clic sull'icona della tavola da disegno nella barra degli strumenti e imposta il segno di spunta su Griglia nella barra delle proprietà a destra. Lì puoi anche regolare le dimensioni e il colore della griglia a tuo piacimento.
Disegna e ridimensiona dal centro
Vuoi disegnare o ridimensionare dal centro? Tieni premuto il tasto Option .
Curve di Bézier
Le curve di Bezier in XD sono un gioco da ragazzi da creare. Qualsiasi punto di ancoraggio disegnato con lo strumento Penna può essere convertito in una curva semplicemente facendo doppio clic su di esso. Per riportare la curva su un punto, ripetere.
Per creare una curva asimmetrica, fai come descritto sopra, tieni premuto il tasto Option e trascina e ruota i punti di controllo per regolare la curva.
Apri un percorso
Se hai un tracciato chiuso, il punto iniziale e finale vengono evidenziati quando selezioni per la prima volta lo strumento Penna. Fare clic sul punto per aprire il percorso in modo da poter continuare a disegnare e modificare la forma come richiesto.
Disattiva Guide intelligenti
Le guide intelligenti ti consentono di agganciare qualsiasi cosa sulla tua tavola da disegno: la distanza tra gli oggetti vicini, i bordi e il centro della tavola da disegno e altri oggetti, ad esempio. Se questi aiuti distraggono troppo o se la tua tavola da disegno sembra troppo complessa, puoi disattivarli tenendo premuto il tasto Cmd mentre trascini.
Cambia opacità
Per modificare rapidamente l'opacità di un oggetto, seleziona l'oggetto e inizia a digitare i numeri. 9 = 90%, 8 = 80%, ecc.; e 0 ti riporta al 100%.
immagini
Maschera immagine
Se vuoi mascherare un'immagine, trascinala in un rettangolo per ritagliarla automaticamente o mascherarla con un oggetto. La mascheratura ti dà un maggiore controllo in quanto ti consente di riposizionare e persino di creare oggetti complessi usando i gruppi booleani per creare una maschera. Facendo doppio clic all'interno, puoi regolare sia la maschera che l'immagine da mascherare. Le maschere non distruggono l'immagine, quindi se non sei soddisfatto del risultato, separa il gruppo e maschera nuovamente.
Prototipazione
Scollega un oggetto
Nella modalità di prototipazione, colleghi gli elementi alle tavole da disegno per creare transizioni tra di loro e avere un'idea di come gli utenti sperimenteranno il tuo progetto. Se vuoi scollegare qualcosa, trascina semplicemente su entrambi i lati del filo per rimuovere la connessione.
Condivisione di prototipi
Puoi condividere prototipi sul Web e inviare una procedura dettagliata del tuo prototipo con script a membri del team, parti interessate o clienti. Per registrare una procedura dettagliata con script, fai clic sul pulsante di riproduzione nell'angolo in alto a destra della schermata del prototipo. Fai clic sul pulsante di registrazione in alto a destra nella finestra Anteprima e inizia a interagire con il tuo prototipo. Non appena hai finito, fai di nuovo clic sul pulsante di registrazione e salva la registrazione come file MOV. Ora puoi condividerlo.
Varie
Riutilizza gli stili di testo
Se desideri riutilizzare uno stile di testo che hai già impostato su un altro oggetto di testo, puoi prima selezionare l'oggetto di testo, passare allo strumento Testo ( T ), quindi fare clic e iniziare a digitare. XD rileverà automaticamente gli stili di testo dall'oggetto precedentemente selezionato. Conveniente.
Modifica un gruppo
I gruppi di annidamento sono un concetto potente in XD. Per accedere al contesto di modifica, fare doppio clic su un gruppo. Se hai un gruppo all'interno di un gruppo, puoi anche fare doppio clic sul gruppo interno. Puoi disegnare, aggiungere testo e persino incollare nel contesto di modifica. Per far apparire un livello nel tuo contesto di modifica, premi il tasto Escape .
Ulteriori risorse
- Un elenco di tutte le scorciatoie da tastiera che puoi utilizzare in Adobe Experience Design (link),
- I video dei suggerimenti per XD pro di Adobe forniscono istruzioni e flussi di lavoro sull'utilizzo delle funzionalità di XD. Un file di esempio ti consente di provarli tu stesso,
- Sito della guida di Adobe con domande comuni, suggerimenti e trucchi e brevi tutorial ( collegamento),
- Articoli sulle best practice per la progettazione di UX e UI nel blog di Adobe XD,
- Progetti stimolanti creati con Adobe XD su Behance,
- Nuove funzionalità vengono aggiunte regolarmente a XD. Quindi tieni d'occhio gli annunci di nuove funzionalità per non perderti nulla,
- Il team di Adobe XD non vede l'ora di ricevere il tuo feedback su Adobe XD UserVoice.
Ulteriori letture su SmashingMag:
- Come progettare gli stati di errore per le app mobili
- Come creare icone con Adobe XD
- Microinterazioni animate nelle app mobili
- Esplorazione della griglia ripetuta in Adobe XD [](https://www.smashingmagazine.com/2016/11/exploring-repeat-grid-in-adobe-xd/)
Grazie a Elaine Chao (@elainecchao) per l'aiuto con questo articolo.