Ovunque guardi, c'è un nuovo fantastico effetto animato. Se l'animazione è stata l'elemento di design imprescindibile del 2016, gli innovativi effetti al passaggio del mouse sono la tendenza del design del 2017.
Grazie in parte alla popolarità di Material Design e alle linee guida sull'animazione di Apple, con particolare attenzione ai piccoli movimenti, gli effetti al passaggio del mouse stanno tornando. Ma invece degli effetti appiccicosi, lampeggianti, rimbalzanti e rotanti del passato, le animazioni sono semplici, nitide e deliziose. I migliori effetti al passaggio del mouse aiutano l'utente e migliorano l'esperienza.
Gli effetti al passaggio del mouse possono variare dal movimento che ha un impatto sull'intero schermo a qualcosa di piccolo come un segnale direzionale o un elemento di navigazione.
Home Page Movimento
Gli effetti al passaggio del mouse possono essere una parte fondamentale della tua esperienza utente introduttiva. Con l'animazione che riempie lo schermo, gli effetti di hover aggiuntivi possono essere piuttosto affascinanti.
Haus, sopra, fa un lavoro straordinario con personaggi dei cartoni animati che si muovono sullo schermo. Potresti non pensare all'animazione, ma con il passaggio del mouse i personaggi esplodono in un'altra azione. Senza il passaggio del mouse, ogni personaggio attraversa semplicemente lo schermo.
Quando si lavora con un'animazione hover a schermo intero come questa, il trucco è quello di deliziare gli utenti, non di sopraffarli. Questa è una via di mezzo piuttosto complicata. Mantenendo il resto del design semplice - sfondo scuro e piatto con un carattere sans serif di facile lettura in bianco - l'animazione è consentita. È l'unico trucco sullo schermo che incoraggia gli utenti a interagire prima di passare agli schermi successivi.
Effetti del pulsante
Una semplice animazione può effettivamente incoraggiare un utente a fare clic o toccare un pulsante nel disegno. Sembra semplice, giusto?
Questo fa parte del motivo per cui questo tipo di animazione è così popolare.
Progetta un effetto pulsante che aiuta gli utenti a comprendere meglio il design per ottenere il massimo impatto. L'esempio precedente di Luke Etheridge mostra uno stato che cambia colore e indica agli utenti cosa succederà con un clic. Questa è un'animazione hover utile e funzionale, funzionale e di bell'aspetto.
Gallerie e presentazioni
Le pagine Web sono piene di varie gallerie e presentazioni. Quasi tutti includono effetti animati multipli, dal movimento tra le diapositive a frecce o altri divots che indicano agli utenti come avanzare o tornare indietro.
La chiave per progettare i movimenti moderni può essere ricavata direttamente dalle specifiche di Material Design.
- Il movimento è veloce
- Il movimento è chiaro
- Il movimento è coesivo
La mozione è il colpo di Baptiste Dumas fa tutte queste cose. Il movimento avviene in un modo che non lascia l'utente che chiede cosa succederà dopo, crea una linea evidente tra gli elementi del contenuto e tutto è legato insieme a un flusso di movimento simile e senza interruzioni.
Navigazione e menu
Piaccia o no, gli stili di navigazione nascosti sono un elemento di design popolare. Grandi quantità di effetti di animazione o al passaggio del mouse possono aiutare gli utenti a navigare meglio nei contenuti e a muoversi nel design.
Dalle icone degli hamburger che crescono o si sbiadiscono con le informazioni che si aprono o si proiettano sullo schermo, l'animazione delle voci di menu può fungere da forte strumento direzionale.
Oxen Made, in alto, utilizza le animazioni al passaggio del mouse in due modi nella home page per indirizzare gli utenti a quali azioni dovrebbero intraprendere. ?Menu? cambia colore al passaggio del mouse per far sapere agli utenti che si tratta di un elemento cliccabile. Il menu completo oscilla quindi dal lato sinistro della pagina. Inoltre una piccola freccia triangolare rimbalza nell'angolo destro, usando lo stesso giallo dal pulsante del menu attivo, segnalando che c'è più contenuto sullo scroll.
Questi movimenti sottili si verificano mentre viene riprodotto un video di background relativamente occupato. I movimenti più morbidi contrastano abbastanza con lo sfondo per attirare l'attenzione degli utenti e fornire un'ampia direzione e navigazione del sito.
Forme e campi
Alcuni dei migliori esempi di effetti hover sono in uso di forme e campi. Quasi tutti i siti Web che visiti richiedono una sorta di azione o informazioni. Più è facile per gli utenti fornire queste informazioni, più è probabile che tu lo raccolga effettivamente.
Ciò non significa che le forme devono essere noiose. I suggerimenti visivi come suggerimenti per gli strumenti che aiutano gli utenti a ricordare cosa inserire in un campo (e in quale formato) e la conferma del successo sono importanti.
L'esempio sopra fa entrambe le cose. Agli utenti viene detto quali informazioni inserire, possono vedere la voce come accade e con un clic sul login? pulsante una rapida conferma animata appare sullo schermo. Gli utenti non devono indovinare se le loro informazioni sono state immesse correttamente o meno e sapere con quel controllo rapido sullo schermo che possono procedere con ciò che vogliono fare dopo.
Se non sei sicuro di dove iniziare con semplici effetti al passaggio del mouse o animazioni, le forme possono essere un buon punto di partenza. Gli utenti si aspettano già che questa parte del sito sia interattiva. Stanno andando a fare qualcosa con la forma; fornire il feedback appropriato con una semplice animazione.
Risorse e codice da provare
Pronto per aggiungere alcuni effetti animati al tuo design? Ci sono un sacco di grandi risorse che possono aiutarti a iniziare.
- Hover.css: Una collezione di effetti hover alimentati con CSS3 da applicare a link, pulsanti, loghi, SVG, immagini in primo piano e così via. Applica ai tuoi elementi, modifica o usa come ispirazione. Disponibile in CSS, Sass e LESS.
- Effetti al passaggio del mouse sull'immagine: Una raccolta di effetti per aiutarti a sfruttare al massimo il passaggio del mouse sulle immagini. Copia il codice e utilizzalo nei tuoi progetti.
- Effetti hover delle icone: Semplice passaggio del mouse per aggiungere enfasi alle icone circolari.
- Incredibili effetti al passaggio del mouse su WordPress: La collezione di effetti è fantastica per gli utenti di WordPress ed è realizzata con puro CSS3 e nessuna dipendenza. La collezione include decine di opzioni e stili.
- W3Schools - Transizioni CSS3: Impara a usare le transizioni CSS3 da zero con questo tutorial.
Conclusione
Le animazioni al passaggio del mouse sono una di quelle tecniche di progettazione che appaiono complicate e pesanti. Ma la realtà è che con l'animazione CSS, quasi chiunque può aggiungere facilmente un'animazione semplice. Sono leggeri e ci sono molti animatori là fuori che vogliono condividere frammenti di codice con te.
Basta tenere a mente la regola d'oro di utilizzare qualsiasi trucco nel tuo progetto: deve essere significativo. Usa gli effetti al passaggio del mouse o le animazioni quando si aggiungono al contenuto; fai attenzione a non distrarre gli utenti dalle azioni che devono intraprendere. Buon divertimento e buona fortuna!