Come creare animazioni di caricamento personalizzate per ridurre le frequenze di rimbalzo

Originariamente noto come throbber, viene utilizzata un'animazione di caricamento per indicare l'avanzamento della raccolta dei dati o del rendering dell'interfaccia. Anche se una volta potresti ottenere usando una barra di avanzamento opaca per indicarlo, quei giorni sono finiti.

Oggi, un'animazione ben realizzata che sfrutta CSS, jQuery o semplici GIF animate è un'opportunità per ravvivare le tue interfacce e aggiungere personalità al tuo prodotto.

Animazioni ponderate possono intrattenere i tuoi utenti mentre aspettano il caricamento dei tuoi contenuti. Una buona animazione di caricamento aiuta a gestire le aspettative e migliora l'esperienza dell'utente mantenendo l'interesse.

In questo tutorial, useremo Sketch per creare forme di base e Principio per creare rapidamente semplici animazioni di caricamento personalizzate. (Entrambe queste app sono per Mac.) Imparerai come creare le animazioni di caricamento colorate utilizzate da Trello, Flickr, Slack e altri.

Andiamo a questo.

Animazione a caricamento lento

Su Sketch, traccia quattro quadrati arrotondati con lati di 50px o un raggio di 100px ciascuno. Dovrebbero sembrare cerchi perfetti, ma stiamo usando quadrati con angoli arrotondati per creare l'effetto di allungamento della linea nell'animazione.

Posiziona le quattro forme in modo tale da creare un quadrato immaginario con 150px di spazio tra ciascun lato. Applicare quattro colori diversi (#35BA90 verde, #69CADD blu, #EBA900 giallo e #E20661 rosa).

Importa le forme in Principio, raggruppale e fai clic su "Crea componente" per nidificare il gruppo.

Entra nel gruppo nidificato e ruota la tavola da disegno di 15 gradi. Quindi seleziona ogni singolo cerchio e ruotalo di nuovo nella sua posizione originale (indietro di 15 gradi). Questo crea l'effetto di allungamento in linea retta.

Applica un trigger "Auto" alla tavola da disegno, quindi allunga ogni rettangolo arrotondato sul lato opposto della tavola da disegno a una lunghezza di 295px. Assegna un'opacità del 75% a ciascuna forma su entrambe le tavole da disegno.

Applica un altro trigger "Auto" alla seconda tavola da disegno. Sulla nuova tavola da disegno, riduci ogni linea alla larghezza originale di 50 px, ma sul lato opposto rispetto alla sua posizione originale.

Collega l'ultima tavola da disegno alla prima con un trigger "Auto". Fare clic sul pulsante "Torna al genitore" per visualizzare in anteprima il risultato finale.

Suggerimento: quando vai a "Torna al genitore", puoi ruotare il gruppo principale di -30 gradi per assomigliare di più a Slack. Inoltre, puoi modificare il ritmo dell'animazione all'interno del pannello "Anima" e applicare un effetto "Facilita entrambi" per appianare le transizioni.

Animazione di caricamento di Trello

Usando Sketch, traccia un quadrato blu di 100px. Disegna un rettangolo bianco largo 60px e alto 140px. Allinealo con l'angolo in alto a sinistra del quadrato precedente con un margine superiore e sinistro di 30px. Duplica quel rettangolo bianco, allinealo a destra del quadrato con un margine destro di 30px e riduci la sua altezza a 70px.

Importa la tavola da disegno in Principio e applica il trigger "Auto" per creare un nuovo fotogramma chiave. Sulla nuova tavola da disegno, inverti le altezze dei rettangoli bianchi (rendi il rettangolo sinistro alto 70px e il rettangolo destro 140px). Applica un effetto "Facilita entrambi" nel pannello "Anima" per appianare la transizione.

Cerchio di rotolamento

Traccia un cerchio su Sketch. Applica un bordo di 10px con valori "Dash" e "Gap" e nessun riempimento. Usa un colore "Gradiente angolare" per il bordo che accentuerà l'effetto di rotazione che creerai in seguito.

Apri un nuovo file Principio e usa il pulsante "Importa" per trasferire il cerchio da Sketch. Applica due trigger "Auto" di seguito.

Per creare l'effetto di rotazione, seleziona il cerchio nella tavola da disegno centrale e cambia il suo valore "Angolo" a 360 gradi. Quindi seleziona il terzo cerchio e assegnagli un nome diverso (ad es. "copia") all'interno del pannello di sinistra. Questo falsificherà la rotazione infinita.

Infine, ricollega la terza tavola da disegno a quella iniziale con un altro trigger "Auto". Applica una transizione "Lineare" alla timeline tra le tavole da disegno 1 e 2. Controlla l'animazione che hai appena creato nella finestra di anteprima.

Animazione di caricamento di Flickr

Traccia un cerchio blu e uno rosa fianco a fianco. Importali in Principle e applica un trigger "Auto" per creare una nuova tavola da disegno.

Inverti le posizioni dei cerchi e applica un nuovo trigger "Auto" per creare una terza tavola da disegno. Su quella nuova tavola da disegno, inverti l'ordine del livello dei cerchi sul pannello di sinistra.

Applica un terzo trigger "Auto" per creare una quarta tavola da disegno. Su quell'ultima tavola da disegno, inverti ancora una volta la posizione dei cerchi e applica un trigger finale "Auto" dall'ultima tavola da disegno a quella iniziale.

Tipo di caricamento

Crea un nuovo progetto su Principio e, utilizzando lo strumento Testo, scrivi "LOADING". Allinea il testo a sinistra e centralo verticalmente nella tavola da disegno.

Applicare un trigger "Auto" cinque volte di seguito. Fai tornare il quinto trigger dall'ultima tavola da disegno alla tavola da disegno iniziale.

Partendo dalla tavola da disegno iniziale e spostandosi a destra, modifica il testo su ciascuna tavola da disegno per aggiungere zero, uno, due, tre, due e un punto, rispettivamente, accanto al testo originale "LOADING". La progressione delle tavole da disegno dovrebbe assomigliare a questa:

CARICAMENTO CARICAMENTO. LOADING.. LOADING… LOADING.. LOADING.

Ora puoi visualizzare in anteprima l'animazione che hai appena creato.

Punti pulsanti

Traccia un punto 60px. Copia e incolla un altro punto e posizionalo a 60px a destra. Assicurati che entrambi i punti, incluso lo spazio di 60px, siano perfettamente centrati nella tua tavola da disegno.

Applicare un trigger "Auto" quattro volte di seguito.

Sulla seconda tavola da disegno, riduci il secondo punto a 30px.

Sulla terza tavola da disegno, riduci il secondo punto a 0px e il primo a 30px.

Sulla quarta tavola da disegno, ridimensiona il secondo punto fino a 30 px e riduci il primo punto a 0 px.

Sulla quinta tavola da disegno, ridimensiona il primo punto fino a 30px e collega la tavola da disegno alla prima tavola con un trigger "Auto".

Puntini rotanti

Metti cinque punti nella disposizione che troverai su un dado a sei facce. Importa la tavola da disegno in Principio e centrala.

Applica un trigger "Auto" sulla tavola da disegno.

Sulla nuova tavola da disegno, ruota il gruppo di punti di 360 gradi.

Collega la seconda tavola da disegno alla prima con un trigger "Auto".

Circolo pulsante

Inizia con un cerchio di 50 px allineato al centro all'interno di un cerchio di 150 px con un bordo di 5 px ma senza riempimento.

Applicare un trigger "Auto" tre volte di seguito.

Sulla prima tavola da disegno, ridimensiona il cerchio della linea fino a 50 px e il cerchio interno fino a 10 px.

Sulla terza tavola da disegno, ridimensiona il cerchio della linea fino a 200 px e assegnagli lo 0% di opacità. Ridimensiona il cerchio interno fino a 150 px e assegnagli il 50% di opacità.

Sull'ultima tavola da disegno, ridimensiona il cerchio interno fino a 200px e assegnagli lo 0% di opacità. Ridimensiona il cerchio della linea fino a 50px e assegnagli il 25% di opacità.

Applica un trigger "Auto" all'ultima tavola da disegno. Riduci il cerchio interno a 10px con il 50% di opacità.

Collega l'ultima tavola da disegno alla prima con un trigger "Auto".

Puntini che saltano

Allinea tre cerchi perfetti di 50px di altezza con una spaziatura di 50px tra di loro.

Applicare un trigger "Auto". Sulla seconda tavola da disegno, sposta il primo cerchio verso l'alto di 50px.

Applicare un trigger "Auto" alla seconda scheda. Sulla terza tavola da disegno, seleziona i primi due cerchi e spostali su 50px. I tre cerchi dovrebbero trovarsi in una linea diagonale.

Applicare un trigger "Auto" alla terza scheda. Sulla quarta tavola da disegno, sposta il primo cerchio verso il basso di 50px. Seleziona gli ultimi due cerchi e spostali su 50px.

Applicare un trigger "Auto" sulla quarta scheda. Sulla quinta tavola da disegno, sposta i primi due cerchi di 50 px verso il basso. Seleziona l'ultimo cerchio e spostalo verso l'alto di 50px.

Applicare un trigger "Auto" sulla quinta scheda. Sulla sesta tavola da disegno, sposta gli ultimi due cerchi verso il basso di 50px.

Infine, torna alla prima tavola da disegno, sposta il primo punto 50px verso l'alto e collega l'ultima tavola da disegno alla prima con un trigger "Auto". È possibile visualizzare in anteprima il risultato finale.

Caricatore classico

Traccia un cerchio in Sketch e assegnagli un bordo grigio di 20 px senza riempimento.

Incolla una copia dello stesso cerchio sopra di esso e cambia il riempimento della copia con un colore diverso. Per questo esempio useremo il blu.

Traccia un quadrato sovrapposto a un quarto del cerchio blu. Sposta il livello del rettangolo sotto il livello del cerchio e applica "Maschera" al livello del rettangolo.

Passa a Principio e importa il disegno di schizzo con il pulsante "Importa".

Applica un trigger "Auto" alla prima tavola da disegno e ruota il cerchio blu di 360 gradi.

Applica un secondo trigger "Auto" alla seconda tavola da disegno. Rinomina il terzo livello del cerchio generato in "copia" e ricollegalo alla prima tavola da disegno con un trigger "Auto".

Conclusione

Una volta che ti sei esercitato a creare alcune di queste animazioni di caricamento collaudate, dovresti sentirti sicuro delle tue capacità di creare un'animazione unica per le tue app usando le abilità apprese qui.

Con un po' di immaginazione e i pratici strumenti di Sketch and Principle, puoi creare un'animazione di caricamento unica che corrisponde al design della tua app in pochi minuti. I tuoi utenti apprezzeranno l'aspetto professionale e l'indicatore amichevole che la tua app sta lavorando sodo.

• • •

Ulteriori letture sul blog di Toptal Design:

• eCommerce UX: una panoramica delle migliori pratiche (con infografica)
• L'importanza del design incentrato sull'uomo nel design del prodotto
• I migliori portfolio di designer UX: casi di studio ed esempi stimolanti
• Principi euristici per interfacce mobili
• Design anticipatorio: come creare esperienze utente magiche