Share
In questo tutorial, ti insegnerò come creare un prototipo animato della tua progettazione di applicazioni mobili. Il prototipo apparirà come una vera applicazione sul tuo telefono; sarai in grado di navigare e scorrere il tuo design, usando gesti e animazioni personalizzate.
Alla fine di questo tutorial, sarai in grado di realizzare una versione prototipo animata di qualsiasi progetto applicativo usando Pixate. Iniziamo!
Per questo tutorial avrai bisogno di tre cose da seguire:
A mio avviso, Pixate è lo strumento migliore a disposizione dei progettisti per creare prototipi di applicazioni mobili animati completamente funzionali e personalizzati, senza scrivere una singola riga di codice.
A differenza di altri strumenti di prototipazione, come Flinto o Marvel, Pixate ti consente di separare i livelli e incorporare le interazioni, come Trascina, Tocca, Tocca due volte, Scorri, Pizzica e altro ancora.
Il prototipo stesso esiste sul web. Durante questo tutorial useremo la versione web di Pixate, ma otterremo i risultati finali in un'applicazione nativa sul nostro telefono, che offre una grande esperienza fluida.
Prima di poter iniziare a creare il nostro primo prototipo, dobbiamo configurare un nuovo progetto in Pixate.
Dopo aver effettuato l'accesso al tuo account, fai clic su Nuovo progetto pulsante, quindi selezionare il Nuovo prototipo opzione.
Qui possiamo selezionare il tipo specifico di dispositivo che stiamo progettando. In questo caso, scegliamo l'iPhone 6, dal momento che abbiamo progettato l'applicazione fitness per quel particolare dispositivo in Sketch.
Nota: possiamo anche selezionare le dimensioni dello schermo di smartwatch come Apple Watch, LG G Watch o Moto 360.
Pixate ci consente di animare ogni singolo oggetto del nostro prototipo, basato su vari eventi e interazioni, come il caricamento dello schermo, toccare, toccare due volte o scorrere. Ciò significa anche che dobbiamo esportare separatamente gli elementi che vogliamo animare nel nostro prototipo.
Apriamo il nostro file Sketch e inizia ad esportare ogni elemento uno per uno. Se guardi il prototipo finale, puoi vedere che nel caso della "schermata GO" ho esportato separatamente la barra di navigazione, la barra delle schede, ogni singola colonna delle previsioni del tempo e le cerchie degli obiettivi.
Dovresti esportare in PNG, poiché è fondamentale disporre di livelli trasparenti.
Mancia: concentrarsi sempre su uno schermo alla volta. A questo punto del processo, dovresti esportare solo i livelli della "schermata GO", quindi sarà più facile lavorare e modificare le cose in movimento, se necessario.
L'importazione di risorse in Pixate è una questione di draging e rilascio dei file PNG esportati nella finestra del browser:
Ora è il momento di ricostruire il nostro schermo in Pixate. Questo lavoro può essere fatto molto più rapidamente se ci riferiamo al Pannello ispettore sia in Pixate che in Sketch. Quando questo è il caso, dobbiamo solo copiare e incollare il valore X e Y di ciascun elemento.
Nota: tieni presente che il nostro design Sketch è stato realizzato con una risoluzione @ 2x, mentre in Pixate stiamo lavorando con una risoluzione @ 1x. Ciò significa che dobbiamo dividere ogni numero di Sketch per 2 prima di applicarlo a Pixate.
Apriamo l'applicazione Pixate sul nostro iPhone, dove possiamo vedere che il nostro design ha iniziato a venire insieme. D'ora in poi, ogni volta che apportiamo modifiche all'applicazione Web, questa verrà automaticamente sincronizzata con i nostri telefoni.
Dopo aver selezionato la prima colonna delle previsioni del tempo, nel nostro browser possiamo vedere i tipi di animazioni disponibili sul lato sinistro. Facciamo drag & drop il Animazione dissolvenza sul lato opposto, la barra laterale destra.
Ora, dobbiamo specificare quando vorremmo che apparisse questa animazione. Impostare il Basato su valori a * SCREEN *, caricato.
Ciò significa che la nostra animazione verrà riprodotta subito dopo il caricamento della prima schermata, cosa che avviene immediatamente quando eseguiremo il prototipo.
Dal momento che il nostro obiettivo è avere una dissolvenza in atto, impostiamo l'opacità iniziale su 0% sul Pannello Proprietà, e a 100% sul Pannello Animazioni.
In fondo al Pannello Animazioni possiamo anche impostare la curva di andamento, la durata e i valori di ritardo.
È necessario impostare la durata tra 0.2-0.4s, ma non c'è ufficiale qui, quindi ti incoraggio a giocare con questi valori finché non senti che sono giusti.
Nota: nel mio prototipo, ho preferito utilizzare animazioni leggermente più lente, in modo da poterle vedere più chiaramente. In un progetto reale, raccomanderei un movimento più veloce e più sottile.
Ora selezioniamo la seconda colonna delle previsioni del tempo e impostiamo esattamente la stessa cosa Animazione dissolvenza come abbiamo fatto prima, con una sola differenza: questa volta impostare il ritardo di animazione essere nei paraggi 0.1-0.3s. In questo modo le animazioni verranno riprodotte in sequenza.
Continua con lo stesso identico metodo per tutti gli elementi a cui desideri aggiungere un'animazione Fade, ma non dimenticare di aumentare continuamente il valore del ritardo di animazione.
Ora impostiamo l'interazione tra i cerchi nella sezione obiettivo. Per poter scorrere orizzontalmente tra gli anelli obiettivo, dobbiamo importarli come tre file PNG separati.
Dopo averli posizionati nella loro posizione corretta, facciamo crea un nuovo livello in Pixate; necessario per abilitare lo scorrimento orizzontale. Sul Pannello Proprietà assicurati di impostare l'aspetto su Nessuna immagine impostata. Prima di aggiungere qualsiasi interazione a questo livello, aggiungeremo i file PNG degli anelli obiettivo al nuovo livello sul Livelli pannello. In termini semplici, questo è simile al Gruppo strumento in Sketch.
Ora possiamo aggiungere un Trascina l'interazione a questo nuovo livello e set Scorrimento orizzontale con posizione minima: -255pt e posizione massima: 120pt sul Pannello Animazioni.
Per il piccolo effetto di rimbalzo durante lo scorrimento orizzontale, ho creato un'animazione personalizzata con condizioni speciali. Per iniziare, aggiungi un Sposta l'animazione al livello più recente, che contiene tutti i livelli dell'anello.
Ora, nel animazioni pannello impostato il Basato su valore a Impostazioni degli obiettivi e Trascina rilascio.
Per la prima Condizione IF Ho usato la seguente formula: goal_settings.x> -255 && goal_settings.x < -67, il che significa che se la posizione del livello del gruppo obiettivo (layer ID: goal_settings) è superiore a -255 pt e più piccolo di -67 pt, muoverà il lato sinistro del livello verso il -67 pt punto.
Per l'animazione ho usato un Curva di allentamento della primavera con un valore di attrito di 25 e tensione di600.
La mia seconda condizione di IF è: goal_settings.x <= -67 && goal_settings.x > -255, quindi sposta il lato sinistro del livello su -255 pt.
La terza condizione è: goal_settings.x> -67 && goal_settings.x < 150, quindi sposta il lato sinistro del livello su 150 pt.
Ultimo, ma non meno importante, l'ultima dichiarazione IF è: goal_settings.x < 150 && goal_settings.x > -67, che sposta il lato sinistro del livello in -67 pt.
Nota: So che questo sembra un po 'complicato per la prima volta, ma ti incoraggio a copiare e incollare la mia soluzione e provarla, quindi cambiare qualcosa e riprovare. Le mie condizioni non sono in alcun modo perfette, quindi puoi persino migliorarle e modificarle, finché non si sentono a posto per te.
Come abbiamo fatto con gli anelli obiettivo, creiamo un altro nuovo livello e inseriamo tutti gli strati che abbiamo finora. Stiamo raggruppando gli strati dello "schermo GO" proprio ora.
Prima di iniziare a importare e ricostruire la schermata "Sfide" in Pixate, dobbiamo creare un nuovo livello, che funzionerà come livello di gruppo per ogni elemento di questo schermo. Posizioniamolo direttamente accanto alla "schermata GO" senza alcuna spaziatura o spazio vuoto tra di loro.
Dopo aver importato e ricostruito il nostro schermo, strato dopo strato, abbiamo bisogno di impostare lo scroll verticale per le carte sfida.
Diamo crea un nuovo livello senza lo sfondo dell'immagine e aggiungere i nostri livelli di carte ad esso. Lo scroll verticale è ancora più semplice dello scroll orizzontale, perché l'unica cosa che dobbiamo fare è aggiungere un Scorri l'interazione a questo nuovo livello.
Per vedere anche la schermata "Sfide" sul nostro iPhone, dobbiamo tornare alla nostra "schermata GO" e aggiungere un nuovo livello rettangolare nella parte superiore del pulsante Sfide nella barra delle schede.
Impostare l'aspetto su nessun riempimento immagine e aggiungere a Toccare l'interazione ad esso. Ora torniamo indietro, seleziona il livello del gruppo Sfide, che contiene tutti gli elementi nella schermata "Sfide" e aggiungi un Sposta l'animazione ad esso.
Le uniche cose che restano da fare, è impostare il Basato su evento al pulsante che abbiamo aggiunto di recente alla nostra "schermata GO" con Toccare l'interazione e impostare il Sposta a valore a 0 pt. Quindi, quando premiamo il pulsante delle sfide nella "schermata GO", il livello del gruppo Sfide entrerà nella sua posizione corretta.
Per animare le carte sfida, useremo due animazioni, una dissolvenza e una mossa, allo stesso tempo. Assicurati di aver impostato il Basato su valore al pulsante Sfide.
Per l'animazione Fade, usiamo la stessa tecnica della schermata GO, quindi impostiamo il Opacità allo 0% sul Proprietà pannello e il Dissolvenza a valoreal 100% sul animazioni pannello. Per la durata che ho usato 0.5s con un 0.2s ritardo.
Nota: non dimenticare di aumentare continuamente il valore del ritardo per ogni carta.
La nostra seconda animazione è a Sposta l'animazione. Proprio come nel caso dell'animazione Fade, impostiamo il Basato su valorizza il pulsante Sfide e utilizza la stessa durata e ritardo dell'animazione esattamente come nel caso dell'animazione Fade. Ora, imposta il Sposta in alto valore a 10px, che sposta la nostra scheda sfida 10px verso l'alto, quando inizia l'animazione.
Dal momento che alla fine dell'animazione, ogni carta sfida sarà 10px in su, dobbiamo spostarli di 10px verso il basso sulla nostra tela Pixate.
Creiamo un nuovo livello ancora una volta, che conterrà la sezione Sfoglia le sfide. Come nel caso della sezione Le mie sfide, aggiungiamo un Scorri l'interazione ad esso.
Per poter passare tra le sezioni Le mie sfide e Sfoglia le sfide, dobbiamo creare un nuovo livello nella parte superiore del titolo Sfida Sfoglia, che funzionerà come un pulsante. Imposta il riempimento del livello su Nessuna immagine impostata e aggiungere un Toccare l'interazione ad esso.
Ora, se torniamo al nostro livello di gruppo Sfoglia sfide (creato nel passaggio precedente) possiamo aggiungere un Animazione dissolvenza in base a questo nuovo pulsante. Quindi, finché non premiamo il pulsante Sfoglia le sfide, l'opacità della sezione delle sfide di ricerca è 0%, e dopo il tocco sarà 100%.
Come ultimo passo ho aggiunto un Animazione in scala e dissolvenza alle barre di avanzamento della timeline nella sezione Sfoglia le sfide.
Nota: non dimenticare di utilizzare la stessa durata di animazione e i valori di ritardo per le animazioni Fade e Scale.
Prima di iniziare ad animare la "schermata delle attività", dobbiamo ripetere alcuni passaggi eseguiti nel caso della schermata "Sfide".
Creiamo un nuovo livello proprio accanto alla schermata "Sfide" senza alcuna spaziatura. Questo strato sarà il livello di gruppo per gli elementi nella "schermata delle attività".
Ora torniamo alla nostra "schermata GO" e creiamo un nuovo livello nella parte superiore del attività pulsante sulla barra delle schede. Aggiungere un Toccare l'interazione a questo nuovo livello.
Torna al livello del gruppo Attività e aggiungi a Sposta l'interazione in base al nostro nuovo pulsante.
Ora aggiungi un Animazione dissolvenza ad ogni risultato nella schermata delle attività con a 0.4s durata dell'animazione e a 0.1s ritardo di animazione tra i risultati.
Nota: non dimenticare di impostare il Basato su valore a "Pulsante Attività", che abbiamo inserito nella "schermata GO".
Crea un altro livello di gruppo e posiziona tutte le sessioni di allenamento al suo interno, tranne il primo. Avremo bisogno di questo per il Spostare verso il basso l'animazione, poiché spostarsi verso il basso di uno strato è molto più semplice, piuttosto che spostarsi verso il basso di sei o sette strati contemporaneamente.
Ora aggiungi un Toccare l'interazione alla prima sessione di allenamento, quindi aggiungere un Sposta l'animazione al livello di gruppo che abbiamo appena creato. Nel pannello Animazioni, imposta il Basato su valore alla prima sessione di allenamento e aggiungere a Sposta in alto valore intorno 277pt. Quando tocchiamo la prima sessione di allenamento, tutto il resto si sposterà sullo schermo.
Per la visualizzazione dei dettagli dell'allenamento, l'ho solo utilizzata Dissolvenza e movimento animazioni basate sul tocco della prima sessione di allenamento.
All'inizio, basta sfumare e spostarsi sullo sfondo, quindi sul grafico e infine sui numeri specifici e sui dettagli dell'allenamento.
Dovresti giocare un po 'con le durate e i ritardi dell'animazione.
Sei fantastico! Hai appena creato il tuo primo prototipo Pixate animato completamente funzionante. Dopo aver seguito questo tutorial, spero che tu sia più sicuro nell'usare Pixate per i prototipi di applicazioni mobili.
Sono curioso di sentire le tue opinioni su questo tutorial e di sentirti libero di porre qualsiasi domanda nei commenti, sarò qui per aiutarti e risponderle.
Accentsconagua