Una guida dettagliata all'animazione dell'interfaccia utente con Principio e Schizzo

Progettare un'interfaccia dell'interfaccia utente con animazioni e transizioni in mente è un ottimo modo per pianificare una migliore esperienza utente (UX) per la tua prossima app. Le micro-interazioni animate sono il modo perfetto per stimolare il coinvolgimento degli utenti, in un mondo di brevi tempi di attenzione. Questo è il motivo per cui Airbnb ha recentemente introdotto Lottie, il suo "nuovo strumento open source che semplifica l'aggiunta di animazioni alle app native".

Progetti come Lottie mostrano la crescente importanza dell'aggiunta del movimento come nuovo elemento per la creazione di un'esperienza utente avanzata sia per le app che per i siti Web.

In questo tutorial imparerai tecniche di animazione dell'interfaccia utente efficaci usando Principle per Mac. Dopo aver esaminato questa guida, sarai in grado di trasformare modelli noiosi e statici in prototipi interattivi per mostrare meglio il tuo lavoro. Puoi applicare ciò che imparerai qui per migliorare il tuo prossimo lancio dell'interfaccia utente e i tiri in Dribbble.

Iniziamo.

Scarica queste risorse gratuite da seguire.

Avrai solo bisogno delle app Principio e Sketch per seguirti. Se non li hai già, puoi scaricare una prova gratuita utilizzando i link sottostanti.

• Scarica una versione di prova gratuita di Principle qui.

• Scarica una versione di prova gratuita di Sketch qui.

• Scarica il file sorgente del tutorial gratuito qui.

Una panoramica dell'interfaccia di principio

Se sei abituato a Mac OS, l'interfaccia di Principle sembrerà molto familiare. Ha tre sezioni principali: una barra laterale, un'area di progettazione che mostra le tavole da disegno e la finestra di anteprima che puoi ridimensionare e spostare.

Comprendere i concetti di base dell'animazione in linea di principio

È relativamente semplice animare con il Principio. Non è necessario disporre di uno sfondo di animazione per iniziare. In effetti, la maggior parte del lavoro pesante è automatizzato da Principle e devi solo concentrarti su ciò che avvia un'animazione (ad esempio un pulsante, un collegamento, un evento di scorrimento), come inizia l'animazione e come finisce.

Per aiutarti a seguire meglio, ecco un breve lessico dei termini che vedrai in tutta la guida.

• Componente: un componente è un tipo di raggruppamento che aiuta a contenere elementi e persino animazioni. È l'equivalente di un "oggetto intelligente" in Photoshop o di un "simbolo" in Illustrator.
• Trigger: un modo per avviare un'animazione, ad esempio toccando, scorrendo, passando il mouse, ecc. In linea di principio, un trigger può essere definito selezionando qualsiasi elemento all'interno di Principle e facendo clic sull'icona che appare alla sua destra con l'icona di un fulmine.
• Transizione: un cambio di stato da una tavola da disegno a un'altra, ad esempio facendo scorrere a sinistra oa destra.
• Effetto di allentamento: il livello di uniformità di una transizione in base all'inizio e alla fine dell'animazione.

A. Trigger e transizione

Il primo passo per animare con Principle è impostare un trigger (il comportamento o l'azione che avvia l'animazione) su un elemento (ad esempio un pulsante o un collegamento) e modificarne lo stato iniziale e/o finale (ad esempio la sua posizione o scala dall'inizio alla fine dell'animazione).

1. Definisci uno stato iniziale: come appaiono gli elementi dell'interfaccia utente all'inizio prima che avvenga l'animazione.
2. Definire il trigger: selezionando l'elemento di interazione e quale azione attiva l'animazione.
3. Definire lo stato finale: come vengono visualizzati gli elementi alla fine dell'animazione.

Una volta che hai impostato l'animazione, puoi visualizzarla in anteprima nella finestra di anteprima.

B. Lunghezza dell'animazione ed effetto di allentamento

Per impostazione predefinita, Principio crea un'animazione di mezzo secondo. A volte non è sufficiente per vedere l'effetto di transizione in dettaglio. Puoi modificare la durata e l'effetto di "allentamento" dal pannello di animazione seguendo questi tre passaggi.

1. Apri il pannello di animazione: seleziona le frecce nere tra due tavole da disegno e fai clic sul pulsante "Anima" situato nella barra in alto.
2. Estendi la lunghezza dell'animazione: sposta i punti finali delle linee blu.
3. Applica andamento: seleziona tutti i punti a forma di diamante e scegli "Facilita entrambi" dal menu a discesa per appianare le transizioni.

Cosa otterrai

Questo video ti mostra cosa sarai in grado di creare una volta che avrai seguito questo tutorial. L'app demo mostra la tavolozza dei colori Material Design di Google e ti fornisce maggiori dettagli dopo aver selezionato un colore. Creerai un'animazione di caricamento, alcune transizioni di pagina con un effetto di parallasse uniforme e un dispositivo di scorrimento del menu.

Assicurati di aver scaricato il file sorgente del tutorial gratuito qui.

Iniziamo.

Passare da un file di schizzo a un principio

1. Sposta le tavole da disegno per preparare le transizioni naturali tra di loro: ad esempio, uno schermo che scorre da destra dovrebbe toccare il bordo destro dello schermo che sta sostituendo sull'animazione.
2. Una volta che il tuo file di schizzo è pronto, passa a Principio, crea un documento vuoto che corrisponda al rapporto 360x640 e fai clic sul pulsante "Importa".

Rimozione delle intestazioni delle schermate per uno scorrimento senza interruzioni

Per creare una transizione senza interruzioni tra le pagine, puoi rimuovere ogni intestazione tranne la prima. Le intestazioni sono state inizialmente aggiunte solo per mostrare l'aspetto grafico dell'app. Manterrai solo l'intestazione nella schermata "Benvenuto" e servirà come barra adesiva con il menu e il titolo dell'app.

Creazione dell'animazione di caricamento - Le forme

1. Seleziona il gruppo di forme di caricamento e fai clic su "Crea componente" contenente le forme e il testo di caricamento. Crea un Componente per il testo all'interno del primo simbolo; animeremo il testo separatamente subito dopo.
2. Seleziona le forme raggruppate. Scegli il trigger "Tocca" e trascina e rilascia sopra la stessa tavola da disegno per creare un duplicato.
3. La seconda tavola da disegno rappresenta lo stato finale dell'animazione e puoi ruotare il gruppo utilizzando la proprietà dell'angolo. Assegna valori di angolo diversi al "riempimento" e al "contorno" per creare un effetto più interessante.
4. Per finire, seleziona le frecce tra le tavole da disegno, fai clic su "Anima" per aprire il "pannello di animazione" e modifica la durata facendo scorrere i punti finali a circa 1,00 s.

Creazione dell'animazione di caricamento - Il testo

1. Innanzitutto, crea l'animazione a scorrimento. Seleziona la forma del pulsante e applica l'evento di attivazione "Tap". Nella nuova tavola da disegno, sposta tutti gli schermi verso l'alto di 640 px (pari all'altezza della tavola da disegno corrente).
2. Ora creiamo la parallasse. Vai alla tavola da disegno precedente, nella schermata di benvenuto, sposta le forme geometriche e il testo verso il basso con valori Y diversi.
3. Infine, all'interno del pannello di animazione, estendi la timeline, diciamo a 1s. Applica un effetto "Facilita entrambi" alla timeline (assicurati di aver selezionato tutti i punti a forma di diamante e fai clic su una linea blu per applicare l'effetto a tutti).
4. Visualizza l'anteprima dell'animazione e sposta le forme fino a quando l'effetto di parallasse non ti sembra buono.

Creazione dell'effetto di parallasse - Pagina di benvenuto

1. Seleziona il componente di caricamento e applica il trigger "Tocca" trascinando una freccia da esso in qualsiasi punto della tavola da disegno.
2. Seleziona tutte le schermate (dal gruppo principale) e spostalo verso l'alto di 640px. Questo passaggio fa apparire la schermata di benvenuto visualizzata.
3. Torna alla tavola da disegno precedente e sposta le forme nella schermata "Benvenuto" verso il basso. Questo crea l'effetto di scorrimento asincrono chiamato parallasse.
4. Regola l'animazione aggiungendo il tempo alla transizione all'interno del pannello dell'animazione: seleziona la freccia tra la tavola da disegno, quindi trascina i punti finali sulle linee blu a circa 1 secondo.

Creazione dell'effetto di parallasse - Informazioni sulla pagina

1. Seleziona il pulsante freccia giù (assicurati di selezionare l'intero gruppo) e applica il trigger "Tocca" trascinando una freccia da esso in qualsiasi punto della tavola da disegno.
2. Seleziona tutte le schermate (dal gruppo principale) e sposta tutto in alto di 640px. Questo passaggio fa apparire la schermata Informazioni in vista.
3. Torna alla tavola da disegno precedente e sposta le forme nella schermata "Informazioni" verso il basso. Questo crea l'effetto di scorrimento asincrono chiamato parallasse.

Creazione dell'effetto di parallasse - Pagina dei colori

1. Applica il trigger "Tocca" al pulsante freccia giù (assicurati di selezionare l'intero gruppo) e questo creerà una nuova tavola da disegno.
2. Sulla nuova tavola da disegno, seleziona tutte le schermate e spostale verso l'alto di 640 pixel.
3. Sulla tavola da disegno precedente, sposta i colori e il testo verso il basso. Nota che più in basso sposti un oggetto, più tempo ci vorrà per tornare indietro, quindi assicurati di utilizzare una posizione diversa per creare un effetto più dinamico.
4. Infine, estendi l'animazione e applica un "facilita entrambi" su tutte le timeline blu all'interno del pannello dell'animazione.

Scorrimento di una pagina dal lato - Pagina di selezione del colore

1. Applica un trigger "Tocca" al pulsante "Carica altro" nella schermata "Colori".
2. Nella nuova tavola da disegno, sposta il contenuto "Colori" e "Selezione" a sinistra di 360px (larghezza tavola da disegno)
3. Torna alla tavola da disegno precedente e sposta il contenuto dello schermo nella direzione opposta, a destra.
4. Nota che puoi anche animare l'opacità dello schermo facendo scorrere dallo zero percento al 100 percento.
5. Gioca con la durata dell'animazione e l'effetto di allentamento per modificare l'effetto di transizione.

Animazione dell'icona del menu

1. Si noti che qualsiasi livello e forma che ha avuto un effetto (come le ombre) dal file originale di Sketch viene importato in Principio come immagine. Se devi modificare le forme all'interno di Principle, prova a non aggiungere alcun effetto speciale fino a dopo l'importazione.
2. Detto questo, usando l'icona esistente come guida, disegna tre rettangoli sottili e raggruppali per creare l'icona del menu dell'hamburger. Ora puoi eliminare o nascondere l'icona del menu precedente.
3. Seleziona l'icona appena creata e applica un trigger "tocca".
4. Nella nuova tavola da disegno, ruota il rettangolo superiore e inferiore sull'icona del menu, assicurati che siano allineati al centro e assegna zero percento di opacità a quello centrale.
5. Per vedere l'animazione che hai appena creato, ricollega l'icona del menu modificata alla tavola da disegno di anteprima con un trigger "Tocca" e provalo.

Creazione dell'effetto di scorrimento del menu

1. Sulla tavola da disegno dello stato finale, sposta le schermate a destra finché i collegamenti del menu non sono allineati a sinistra dell'icona del menu di chiusura.
2. Seleziona tutto all'interno della cartella "Colori" tranne il contenuto del menu e lo sfondo grigio chiaro e riduci l'opacità al 25 percento. L'animazione sbiadirà il contenuto della pagina per concentrarsi sul menu.
3. Estendi la durata dell'animazione e vai alla tavola da disegno precedente per spostare leggermente il contenuto del menu per creare un effetto uniforme.

Passare alla schermata dei contatti

1. Nel menu aperto, applica un trigger "Tocca" sul pulsante "Contattaci".
2. Sulla tavola da disegno appena creata, sposta tutte le schermate verso l'alto di 640 px.
3. Quindi torna alla tavola da disegno delle anteprime e sposta gli elementi dalla pagina "Modulo" in basso.
4. Sposta gli elementi su diversi valori Y per creare l'effetto di parallasse.
5. Infine, seleziona le frecce tra le tavole da disegno, estendi la lunghezza dell'animazione e applica "Facilita entrambi" alle timeline blu.

Termina con la pagina di ringraziamento

1. Applicare un trigger "Tocca" sul pulsante "Invia messaggio".
2. Sulla nuova tavola da disegno, sposta tutti gli schermi in alto di 640 px.
3. Quindi torna alla tavola da disegno delle anteprime e sposta gli elementi dalla pagina "Conferma" verso il basso.
4. Gioca con la scala e la rotazione per l'icona colorata per creare un effetto più dinamico.
5. Assicurati di aggiungere alla lunghezza dell'animazione per percepire meglio l'effetto di transizione.

La semplicità di aggiungere animazioni con il principio.

Principle è uno strumento fantastico per dare vita alle tue idee di interazione con l'interfaccia utente.

L'interfaccia è compatibile con Mac ed è stata progettata per funzionare perfettamente con i file di Sketch.

Principio automatizza la maggior parte dell'animazione e dell'effetto di transizione per te. Tutto quello che devi fare è applicare un trigger a una forma su una tavola da disegno e modificare qualsiasi proprietà per gli elementi che desideri animare sulla tavola da disegno finale.

Si prega di lasciare qualsiasi domanda nei commenti qui sotto. Sono felice di rispondere loro.