Come prototipare un'App mobile con Adobe XD

Questo tutorial, mostrando come fare un prototipo di app mobile in Adobe XD, è stato messo insieme usando Adobe XD cc (2017 beta) Nel 2016. The. Adobe XD cc appena lanciato ha avuto qualche tweaks, rendendolo ancora più facile da usare.

• Ottieni uno sconto del 15% su Adobe Creative Cloud qui

Se sei un designer la creazione di esperienze utente per app mobili o siti Web, potresti essere utilizzato per utilizzare più strumenti per diverse attività quando prototipazione .

Inizi con la ricerca. Quindi disegni idee su penna e carta, e in seguito trasferisce i tuoi pensieri in uno strumento di progettazione. Per trovare il flusso migliore, esporti tutti i tuoi beni e portali in un altro strumento per costruire un prototipo. Da lì, condividi o testare il tuo prototipo, raccogli il feedback e torna al centro del ciclo per iterati, passando da Tool to Tool mentre affina la progettazione.

Diversi strumenti di progettazione ciascuno affrontano una parte diversa del problema. Ma invece di rendere la tua vita come un designer più semplice, il passaggio tra tutti questi strumenti riduce solo il tuo ritmo.

E se ci fosse un singolo strumento che significava che potresti goderti un flusso di lavoro completamente connesso? Dove potresti progettare e prototipare le tue esperienze in pochi minuti, condividerle sul web per acquisire feedback, quindi effettuare modifiche facilmente senza rompere il passo? L'obiettivo con Adobe Experience Design CC - o, come lo chiamiamo, Adobe XD - doveva farlo proprio.

In questo tutorial, ti mostreremo le principali aree di Adobe XD progettando, prototipazione e condividere un semplice "soddisfare l'app mobile del team".

Creeremo un contenuto della pagina che elencherà i membri del team di prodotti, quindi gli utenti saranno in grado di fare clic sulle singole voci da portare a una pagina di biogge più approfondita. Imparerai come creare disegni di fedeltà, prototipo e condividerli per raccogliere feedback.

Guarda il video sopra e segui le misure scritte qui sotto per imparare come prototipare con Adobe XD. Non solo ti mostreremo come farlo, ti mostreremo anche come testarlo, registrare un video di anteprima di IT in azione e come condividere ed esportarlo.

Si noti che alcuni processi potrebbero essere cambiati leggermente nella versione più recente di Adobe XD.

01. Installa Adobe XD e avvia un nuovo design

Innanzitutto, assicurati che Adobe XD sia installato sul tuo computer . Avvia, dai un'occhiata alla schermata di benvenuto e avvia un nuovo design con un modello di cartongesso per iPhone.

02. Crea una seconda cartongesso

Utilizzare lo strumento Artboard ( UN ) Per creare una seconda tavola da disegno, quindi cambiare i loro titoli (facendo doppio clic su di essi) in "iPhone - Pagina della squadra" e "iPhone - Detail Page". Modificare entrambi i colori dello sfondo delle cartongesso al nero usando l'ispettore della proprietà sulla tua destra. Con lo strumento Select ( V. ) Selezionato, è possibile premere la barra spaziatrice in qualsiasi momento per vascherare il design.

03. Scarica asset tutorial

Ho messo insieme una cartella di beni che userò in questo tutorial. Puoi scaricarli Qui . Dal Finder, trascina 'iPhone-status-bar.svg' nella parte superiore della tavola da disegno 1 ( x: 8, y: 5 ). Quindi copia e incollalo in cartongesso 2, quindi entrambe le tavole da disegno hanno la barra di stato in cima. Colpire cmd + l. Per bloccare queste barre di stato in entrambe le cartongesse in modo che le loro proprietà non possano essere modificate. Per sbloccarli, è possibile utilizzare nuovamente il collegamento o fare clic sull'icona "Blocco".

04. Disegna un rettangolo e impostare dimensioni

Concentriamoci sulla cartongesso 1 (la pagina della squadra). Usando lo strumento rettangolo ( R. ), Disegna un rettangolo rosa (# FF2BC2 senza bordo) in cartongesso 1 e imposta le sue dimensioni su 375 x 230 utilizzando il pannello di ispezione Proprietà a destra.

05. Riordina gli oggetti

Per disattivare il bordo o il riempirlo, fai clic sull'icona "Eye" a destra. Colpire Shift + cmd + [ per mandarlo fino alla parte posteriore, o andare a Oggetto & GT; Disponi e GT; Mandare indietro . Se si desidera modificare i colori utilizzando i valori esadecimale, fare clic sull'icona del colore e quando il selettore di colori nativo si apre, selezionare la seconda scheda nella parte superiore e modificare il menu a discesa su 'RGB Slider'.

06. Creare un'intestazione

Usando lo strumento Testo ( T. ), Fare clic per creare un'intestazione per la pagina della tua squadra. Il mio è Helvetica Bold, 20, #FFFFFFF, X: 18, Y: 123. Iniziamo a mettere insieme la nostra lista dei membri del team. Disegna un quadrato grigio in cui la foto del membro del team si siederà (100 x 100, x: 8, y: 238, # D0D0D0 senza bordo).

07. Aggiungi un altro rettangolo

A destra di questo, abbiamo bisogno di un rettangolo bianco (260 x 100, x: 108, y: 238, #FFFFFFF senza bordo) su cui includeremo il nome del membro del team come intestazione e titolo di lavoro come sottotata. Per ora, usa il testo segnaposto e di stile come desideri.

08. Aggiungi un'icona freccia

Per mostrare questa casella sarà un'area tappabile, includeremo un'icona di freccia. Trascina 'Path.svg' dal Finder sulla tela XD a un punto fuori dalla tavola da disegno. Quindi riposizionalo a x: 330, y: 279.

09. Metti il ​​tuo colpo alla testa

Dal Finder, trascina un colpo alla testa in posizione sul quadrato grigio.

10. Creare la lista

Ora possiamo creare la nostra lista. A questo punto, normalmente copiare e incollando l'oggetto superiore, spostare la versione copiata verso il basso e la regolazione del margine. Faresti lo stesso per nuovi oggetti, e se volessi cambiare i margini, dovresti farlo manualmente, uno per uno.

Bene, non con Adobe XD - è possibile utilizzare la funzione di ripetizione della griglia. Seleziona gli elementi che si desidera ripetere, fare clic sul pulsante "Ripeti griglia" sulla finestra di ispezione della proprietà a destra ( cmd + r. ) E utilizzare le maniglie verdi per ripetere gli elementi verticalmente. Potresti anche ripeterli orizzontalmente per una versione del tablet.

11. Regola il margine

Regola il margine della griglia ripetuta si aggirando sul bordo dei tuoi articoli, facendo clic e trascinando. Impostiamo il margine su 7. Trascina la griglia di ripetizione nella parte inferiore della cartongesso. Ora abbiamo quattro righe con cui giocare.

12. Modifica i campi di testo

Mentre le proprietà (colori, posizioni X e Y e così via) sono globali, il contenuto di ciascun articolo può essere unico. Modifica i campi di testo sul nome di ogni individuo e il titolo del lavoro. Puoi fare doppio clic per inserire la griglia e il gruppo o cmd + click. per dirigere-selezionare qualsiasi elemento all'interno di un gruppo o griglia ripetuta. Ora abbiamo solo bisogno di prendere tutti i colpi di colpi contemporaneamente e trascinarli sulla griglia e abbiamo finito con questo schermo.

13. Creare un effetto oscurato

Voltiamo in Artboard 2 (la pagina dei dettagli). Ancora una volta, inizieremo con un rettangolo segnaposto (375 x 444, X: 0, Y: 0, #FFFFFFFF senza bordo) e trascina un colpo al cristallo per riempirlo. Creeremo un effetto oscurato cambiando l'opacità dell'immagine al 60% e inviandolo alla schiena ( Shift + cmd + [ ).

14. Aggiungi un'altra freccia

Quindi bloccare l'elemento del colpo d'ordine ( cmd + l. ) e aggiungere un'altra freccia ('back-arrow.svg') per indicare che l'utente può tornare all'elenco dei team. Questo ha bisogno di sedersi a x: 20, y: 40. È importante bloccare prima l'immagine, perché altrimenti lo SVG sostituirà il colpo alla testa.

15. Aggiungi la barra delle informazioni di contatto

Vogliamo includere una barra rosa su ogni pagina, che elencherà i dettagli di contatto del membro del team (375 x 45, x: 0, y: 400). Utilizzare lo strumento Testo ( T. ) Creare un elemento di testo Lettura "Link segnaposto", Center It, Style It Up, e posizionarlo in X: 169, Y: 416.

16. Creare più istanze dell'elemento di testo

Usiamo lo strumento di ripetizione della griglia per creare altre due istanze di questo elemento di testo. Innanzitutto, convertire il testo in una griglia di ripetizione ( cmd + r. ), quindi tenere la chiave dell'opzione mentre espandi la griglia orizzontalmente. Bello, non è vero? Direct-Seleziona il testo ( cmd + click. ) e cambia il contenuto per leggere 'Email', 'Twitter' e 'LinkedIn'.

17. Crea nome e box bio

Per finire il design, creare una scatola bianca (360 x 214, x: 8, y: 445) che includerà il nome e il biog del membro del team. Per prima cosa aggiungi un elemento di testo usando il segnaposto 'nome persona'. Per l'elemento di testo che tiene il Biog, vogliamo utilizzare il testo dell'area. Per fare ciò, selezionare lo strumento Testo ( T. ) e fare clic e trascinare per definire l'area per la tua copia. Ancora una volta, digita un testo segnaposto per ora e regola le proprietà di stile.

18. Creare cartongersi per altri membri del team

Ora facciamo alcune nuove tavolette per altri membri del team. Prima sbloccare l'immagine principale ( cmd + l. ), quindi fai clic sul titolo di Artboard 2 per selezionarlo e premere cmd + c. per copiarlo. Zoom indietro ( cmd + - o utilizzare il trackpad per pizzicare-a-zoom), quindi colpire cmd + V. Incollare tre nuove cartongesse. Aggiungi alcune informazioni sulla bioglo a ciascuna pagina. Aggiorna i nomi e le immagini del colpo alla testa e sistemare le tavolette sulla tela. Freddo! Il nostro design è finito per ora.

19. Configurare il flusso

È ora di iniziare a definire il flusso dell'app. Un prototipo può valere un migliaio di riunioni, quindi creeremo uno per comunicare il nostro intento di progettazione. Basta saltare alla modalità Prototipo (in alto a sinistra), selezionare la voce che verrà toccato dall'utente (HOLD cmd. per direttare-selezionare) e trascinare un filo nella tavola da disegno a destra. Quando il mouse viene rilasciato, possiamo impostare il segue, facilitare e durata. Semplice.

20. Connettiti

Andiamo anche se ognuno degli articoli sulla nostra lista sulla tavola da disegno 1 e li collega alla loro rispettiva pagina dei dettagli. Per ognuno di questi, vogliamo impostare il seguimento per scivolare a sinistra e l'allentamento da alleviare. Successivamente possiamo collegare le frecce posteriori su ciascuna delle pagine dettagliate Torna alla tavola da disegno 1 - Ricordarsi di impostare il seguimento per scivolare a destra questa volta. Boom - il nostro prototipo è pronto.

21. Testare il prototipo

Per testare il prototipo, fare clic sul pulsante Riproduci in alto a destra (anteprima). Non è necessario chiudere la finestra di anteprima per aggiornare il design oi fili. Iniziare a apportare modifiche e si rifletteranno automaticamente sulla finestra di anteprima.

22. Fai un video

È facile registrare un video delle tue interazioni durante il test del prototipo. Con la finestra Anteprima aperta, fare clic sul pulsante Registra per avviare e interrompere la registrazione. Salva il file '.mov' e condividi con i tuoi stakeholder.

23. Condividi il tuo lavoro

Per condividere i prototipi sul Web, fare clic sull'ultimo pulsante in alto a destra (condividi online). Fare clic sul pulsante Crea collegamento. Tutte le risorse verranno caricate in Creative Cloud e verrà creato un link. Se le modifiche sono necessarie, è possibile tornare alla modalità di progettazione, apportare le modifiche e condividere di nuovo. L'intero flusso funziona solo.

24. Esportare i file

Da XD, è possibile esportare PNGS per Web, IOS e Android a diverse dimensioni, oltre a file SVG altamente ottimizzati.

25. Goditi i risultati

Congratulazioni! Hai padroneggiato le basi di Adobe Experience Design CC (anteprima). Sentiti libero di condividere i tuoi prototipi sul web e sul social media: aggiungi #ADOBEXD. Quindi possiamo vedere il tuo lavoro.

Questo articolo è originariamente apparso in Magazine netta Edizione 280. Iscriviti alla rete qui .

Articoli Correlati

• Come evitare le insidie ​​di prototipazione
• Come usare l'animazione nelle app mobili
• 10 consigli per una migliore progettazione mobile UX