Share
La prototipazione dovrebbe essere un modo facile e veloce per acquisire confidenza con i tuoi progetti. Non è più considerato semplicemente un modo per spargere la magia del movimento o smussare i disegni, la prototipazione è uno strumento di comunicazione. Sia che comunichi con le parti interessate, i responsabili del design o gli utenti, un buon prototipo aiuta a comunicare le decisioni di progettazione e le idee di prova.
In questo tutorial creeremo un prototipo di "carta d'imbarco" di base in Atomic, che puoi vedere qui in anteprima. Il prototipo inizia con uno stato di caricamento prima di consentire la navigazione dei voli in arrivo e l'anteprima del codice QR per l'imbarco. Per creare questo prototipo utilizzeremo componenti interattivi, dati, variabili e transizioni di pagina. Da non preoccuparsi! Ti aiuterò ad ogni passo.
Ecco una demo di ciò che creeremo:
Ci sono alcune cose che ti serviranno per seguire:
atomic.ioSe in qualsiasi momento durante il tutorial hai una domanda, sentiti libero di contattarmi (@femkesvs) o il team di supporto di Atomic (@we_are_atomic) su Twitter.
Andiamo!
Ho creato un file di esempio con le risorse che ti serviranno per creare il tuo prototipo. Questo file di esempio è completo con le risorse che verranno utilizzate, nonché i componenti predefiniti.
Puoi accedere alle risorse qui. Per utilizzare le risorse dovrai copiare il prototipo nel tuo account. Puoi farlo cliccando Copia e modifica in basso a destra, quindi seleziona un progetto in cui desideri copiarlo. Suggerisco di creare un nuovo progetto per questo tutorial.
Prima di iniziare a creare il nostro prototipo, dovremo prima aggiungere l'origine dati ad Atomic. Ho creato un foglio Google con alcuni dati di base che utilizzeremo nel nostro prototipo.
Puoi accedere ai dati qui. Con la fonte di dati aperta, vai a File> Aggiungi a Il mio Drive (per questo dovrai disporre di un account Google).
Successivamente, con il tuo progetto aperto in Atomic, seleziona il Dati scheda. Da qui clicca Importa dati, e individuare la fonte dei dati tramite la ricerca. Una volta individuato, seleziona la fonte di dati. Vedrai Atomic caricare i dati nel tuo progetto. È ora possibile accedere a questa origine dati e utilizzarla in qualsiasi prototipo all'interno del progetto.
Siamo pronti!
Iniziamo ad assemblare il nostro prototipo creando lo stato di caricamento. Lo faremo creando sia una transizione personalizzata che un'azione di pagina basata su tempo.
Per prima cosa, seleziona il componente di caricamento dalla pagina Risorse da copiare (CMD-C e incolla (CMD-V) nella pagina 1. Sarà grande e, invece di ridimensionarlo, posizionarlo nella sua posizione iniziale.
Quindi copia l'elemento di caricamento appena posizionato a pagina 1, questa volta incollandolo a pagina 2. Riposizionalo nello stato finale (ruotato di 75 ° in senso orario in modo che l'aereo sia posizionato sul lato destro dell'area di disegno).
Per creare la nostra transizione, torna alla pagina 1. Nel pannello delle proprietà della mano destra vedrai una sezione chiamata Azioni della pagina. Fare clic sul pulsante più e quindi impostare quanto segue:
Guardiamo in anteprima e vediamo la nostra transizione in azione: dovresti vedere l'aereo planare da sinistra a destra nel corso di due secondi. pulito!
Per continuare, puoi anche copiare e incollare il logo Fly in entrambe le pagine 1 e 2 (sotto il componente di caricamento nel pannello delle pagine e posizionato dietro). Assicurati di seguire la stessa tecnica di metterlo nella sua posizione iniziale e finale su ogni pagina. Probabilmente devi regolare l'ordine dei tuoi livelli per farli apparire da dietro.
Infine, dovremo creare un'azione che porti automaticamente l'utente a pagina 3 dalla pagina 2. A pagina 2 aggiungi un'altra azione a tempo. Questa volta utilizzeremo le seguenti impostazioni:
Mancia: se desideri scaglionare i tempi dei due elementi che animano puoi farlo usando il Timeline avanzata del movimento.
Successivamente, copia gli elementi necessari per la pagina 3 e incollali nella pagina 3. Dovrai fare un po 'di riorganizzazione e aggiustamenti per adattarli agli elementi della pagina, se necessario.
Quasi tutti gli elementi necessari per questa pagina sono componenti.
I componenti in Atomic sono come simboli. Qualsiasi componente può essere modificato e riutilizzato nel corso di un progetto. Qualsiasi modifica apportata a un componente verrà aggiornata in ogni istanza. I componenti possono anche essere interattivi e contenere più stati di un simbolo. Questo rende davvero facile strutturare il tuo prototipo.
Aggiungiamo un po 'di interattività al componente boardingPasses. Per aprire il componente, fare doppio clic sull'icona del componente nel pannello dei livelli accanto al nome del livello. Una volta aperto, vedrai tre pagine; uno rappresenta ogni volo Per ora questi passaggi sono identici, presto cambieremo questo.
Sappiamo che l'utente ha tre voli e vorremmo che fossero in grado di scorrere ciascuno di essi. C'è anche un'icona di codice QR che, se interagita con, dovrebbe far apparire il codice di imbarco.
Se guardi nel pannello dei livelli noterai che ogni pagina è un'istanza di un componente chiamata "boardingCard". Apriamo ora il componente boardingCard per vedere come sono stati applicati i dati.
Il componente boardingCard è un componente incorporato in un componente. Questo ci consente di creare un simbolo di carta d'imbarco che può essere riutilizzato mostrando diversi set di dati.
Con il componente boardingCard aperto vedrai due pagine; la parte anteriore e posteriore del passo. È qui che i dati vengono assegnati ai singoli elementi di testo.
Dati ereditati dal genitoreSeleziona il testo ABC e dai un'occhiata al Proprietà del testo. Noterai quanto segue:
Successivamente, se guardi il foglio Google da dove vengono estratti questi dati, vedrai una colonna intitolata "codice di partenza". Ciò significa che l'elemento di testo ABC mostrerà tutti i dati mostrati nella colonna "codice di partenza".
Tutto il testo dinamico in questo componente è stato impostato su Eredita dal genitore. Questo ci consente di collegarci alla scheda tecnica a livello di gruppo e quindi visualizzare e ordinare i dati riga per riga. Ci arriveremo presto.
Quindi imposteremo una transizione basata su pagina per capovolgere tra il pass e il codice QR. Nella prima pagina del componente boardingCard premere H per far apparire lo strumento hotspot. Quindi, disegna un hotspot sopra l'icona del codice QR sulla prima pagina.
Gli hotspot ti consentono di definire aree interattive del tuo prototipo. Con il tuo hotspot selezionato, sotto il pannello interazioni imposta quanto segue:
Quindi, sul retro, crea un altro hotspot (H) che ci riporterà in prima pagina. Questa volta disegnalo sopra vicino icona e impostare quanto segue:
È ora di testare la tua interazione! Nell'angolo in basso a destra, premi il tasto Anteprima pulsante. La modalità Anteprima ti consente di testare le tue transizioni e interagire con il tuo prototipo tramite hotspot. Prova a fare clic sulla scheda QR o sull'icona di chiusura; la carta dovrebbe girare tra i due stati. È possibile chiudere l'anteprima premendo X.
Avere questa carta d'imbarco come componente interattivo ci permette di selezionare quali dati sono mostrati dinamicamente, senza dover creare più stati e interazioni.
Per tornare, fare clic sul viola indietro abbottonare in alto a sinistra. Ora dovresti tornare nel componente boardingPasses. In questo componente abbiamo tre passaggi che attualmente mostrano gli stessi dati. Aggiorniamolo ora.
Ricorda come all'interno del componente boardingCard sono stati impostati i dati Eredita dal genitore? In questo caso il genitore è l'istanza del componente.
Sulla pagina del volo 1 seleziona l'istanza di boardingCard. Nel proprietà del componente partire Stato così com'è. Sotto Dati, seleziona la fonte di dati e assicurati di Riga è impostato sulla riga 1. L'istanza dovrebbe ora visualizzare i dati dalla prima riga del foglio dati.
Se si alterna la riga, si noterà che i dati visualizzati sono stati aggiornati. Teniamolo sulla riga 1 per ora, tuttavia sul volo 2 e sul volo 3 impostalo per mostrare i dati della riga 2 e della riga 3, rispettivamente.
Per consentire agli utenti di scorrere le proprie carte d'imbarco, è necessario impostare alcune interazioni di scorrimento.
Crea e disegna un hotspot (H) sul lato destro della pagina del volo 1 (assicurati di lasciare dello spazio in alto per l'hotspot sopra l'icona di chiusura sul retro del componente boardingCard, e che non lo faccia t coprire il codice QR sulla prima pagina). Per creare il gesto di scorrimento, utilizzare le seguenti impostazioni:
Fai lo stesso sulla pagina del volo 2 e aggiungi un secondo hotspot sul lato sinistro del volo 2 e le pagine del volo 3 impostate su Spingere a destra e Spingere a sinistra anziché. Sentiti libero di premere Anteprima per testare e interagire con il componente e regolare le impostazioni di scorrimento di conseguenza.
Per completare la costruzione del prototipo dovremo creare e utilizzare una variabile. Questa variabile consentirà ai nostri componenti di parlare tra loro mentre influenzano il loro stato.
La variabile che creeremo verrà utilizzata per aggiornare i punti di avanzamento in base a quale scheda di imbarco viene mostrata.
Per creare una variabile, premere V per aprire il Variabili modali. Qui clicca Crea nuova variabile e digitare "flightDisplayed" nel Nome campo. Lascia vuoto il valore predefinito.
Ottimo, hai impostato la tua variabile! Chiudere le variabili modali premendo il tasto X o fuga sulla tua tastiera.
Torna al prototipo. Se visualizziamo ora l'anteprima dalla Home page, dovresti essere in grado di scorrere tra le carte e anche interagire con il codice QR.
Mentre ora possiamo scorrere i passaggi, ci sono un paio di cose da configurare per influenzare i punti di progresso da aggiornare in base alla progressione delle carte d'imbarco.
Per fare ciò, apri il componente boardingPasses. Nella pagina 1 creiamo l'azione della pagina seguente:
Ripeti questa operazione a pagina 2 e 3, assicurandoti che il valore sia impostato su 2 o 3 per riflettere la pagina su cui ti trovi.
Abbiamo effettivamente detto al componente boardingPass di aggiornare il valore della variabile flightDisplayed, a seconda del volo (pagina) visualizzato. Ora possiamo usare questo valore per influenzare lo stato dei punti di progresso.
Ecco come: torna al prototipo e apri il componente progressDots.
Noterai tre pagine (stati) denominate 1, 2 e 3. Questa denominazione corrisponde ai valori impostati nella variabile flightDisplayed. È importante che questi nomi di pagina corrispondano ai valori impostati.
Tornate al prototipo, selezionate il componente progressDots e:
Ora abbiamo collegato il componente progressDots alla variabile flightDisplayed. Ciò significa che quando il valore della variabile diventa un valore, il componente progressDots visualizzerà la pagina che corrisponde al valore della variabile.
Prova a visualizzare in anteprima il tuo prototipo ora, interagendo con le carte d'imbarco facendo scorrere e verificando se i punti di avanzamento si aggiornano.
Infine, puoi eliminare o spostare la pagina Risorse per assicurarti che l'anteprima condivisa si apra sulla pagina iniziale corretta. Per eliminare la pagina, selezionare il menu dell'hamburger sulla miniatura della pagina e fare clic su cancella la pagina.
Mancia: Vedi se riesci a capire come ottenere il componente promoCard per aggiornare il suo stato in base al volo visualizzato. Ti consigliamo di creare una nuova variabile chiamata cardDisplayed.
Ecco qua! La tua app per la carta d'imbarco. Se hai scaricato l'app iOS, prova ad aprire il prototipo e interagire con esso sul tuo iPhone; dovrebbe sentirsi proprio come la cosa reale.
Ben fatto per aver seguito questo tutorial fino alla fine. Ora dovresti avere una conoscenza approfondita di come creare il tuo prototipo in Atomic. Se disponi di risorse esistenti in Sketch, puoi importarle utilizzando il plug-in Atomic per Sketch o progettare nativamente in Atomic se desideri.
Domande? Commenti? Lasciateli qui sotto o contattatemi su Twitter (@femkesvs).
Accentsconagua