Überall, wo Sie hinschauen, gibt es einen coolen neuen animierten Effekt. Wenn Animation das Must-Have-Designelement von 2016 war, dann sind innovative Hover-Effekte der aufstrebende Designtrend von 2017.
Dank der Popularität von Material Design und den Animationsrichtlinien von Apple mit Fokus auf kleine Bewegungen erlebt der Hover-Effekt ein Comeback. Anstelle der klebrigen, blinkenden, springenden und sich drehenden Effekte der Vergangenheit sind Animationen einfach, scharf und reizvoll. Die besten Hover-Effekte helfen dem Benutzer und verbessern das Erlebnis.
Hover-Effekte können von Bewegungen, die sich auf den gesamten Bildschirm auswirken, bis hin zu einem Richtungsanzeiger oder Navigationselement reichen.
Home Page Bewegung
Hover-Effekte können ein wesentlicher Bestandteil Ihrer Benutzererfahrung sein. Mit einer Animation, die den Bildschirm ausfüllt, können zusätzliche Hover-Effekte sehr charmant sein.
Haus leistet oben einen fantastischen Job mit Zeichentrickfiguren, die sich über den Bildschirm bewegen. Du denkst vielleicht nichts von der Animation, aber mit einem Hover explodieren Charaktere in eine andere Aktion. Ohne Schwebeflug wird jeder Charakter nur über den Bildschirm gezalzt.
Wenn Sie mit einer Vollbild-Hover-Animation wie dieser arbeiten, besteht der Trick darin, die Benutzer zu begeistern und nicht zu überfordern. Das ist ein ziemlich schwieriger Mittelweg. Da der Rest des Designs einfach gehalten wird - dunkler, flacher Hintergrund mit einer leicht lesbaren serifenlosen Schrift in Weiß -, ist der Animation Platz gelassen. Dies ist der einzige Trick auf dem Bildschirm, der die Benutzer zur Interaktion anregt, bevor sie zu den nächsten Bildschirmen blättern.
Schaltflächeneffekte
Eine einfache Animation kann einen Benutzer tatsächlich dazu anregen, auf eine Schaltfläche im Design zu klicken oder zu tippen. Scheint einfach, richtig?
Das ist einer der Gründe, warum diese Art von Animation so beliebt ist.
Entwerfen Sie einen Schaltflächeneffekt, mit dem Benutzer das Design besser verstehen und maximale Wirkung erzielen können. Das obige Beispiel von Luke Etheridge zeigt einen Status, der die Farbe ändert und den Benutzern mit einem Klick anzeigt, was passiert. Dies ist eine nützliche und funktionale Hover-Animation, die funktional ist und gut aussieht.
Galerien und Diashows
Webseiten sind vollgepackt mit verschiedenen Galerien und Diashows. Fast alle davon enthalten mehrere animierte Effekte, von der Bewegung zwischen Folien zu Pfeilen oder anderen Divots, die dem Benutzer sagen, wie er vor- oder zurückgehen soll.
Der Schlüssel für die Gestaltung moderner Uhrwerke kann direkt aus den Material Design-Spezifikationen gezogen werden.
- Bewegung ist schnell
- Bewegung ist klar
- Bewegung ist zusammenhängend
Die Bewegung ist der Schuss von Baptiste Dumas, der all diese Dinge tut. Die Bewegung geschieht auf eine Art und Weise, die den Benutzer nicht fragt, was als nächstes passieren wird, sondern schafft eine offensichtliche Linie zwischen Inhaltselementen und alles ist mit einem ähnlichen und nahtlosen Bewegungsfluss verbunden.
Navigation und Menüs
Wie auch immer, versteckte Navigationsstile sind ein beliebtes Gestaltungselement. Große Animations- oder Hover-Effekte helfen Benutzern dabei, Inhalte besser zu navigieren und sich im Design zu bewegen.
Von Hamburger Symbolen, die mit Informationen, die auf dem Bildschirm erscheinen oder auftauchen, wachsen oder verblassen, können animierte Menüelemente als starkes Richtungswerkzeug dienen.
Ochsen Made (oben) verwendet Hover-Animationen auf zwei Arten auf der Startseite, um Benutzer zu den Aktionen zu leiten, die sie ausführen sollen. ?Speisekarte? ändert die Farbe im Hover, um die Benutzer darauf hinzuweisen, dass es ein anklickbares Element ist. Das vollständige Menü wird dann auf der linken Seite der Seite angezeigt. Des Weiteren springt ein kleiner dreieckiger Pfeil in der rechten Ecke und verwendet das gleiche gelbe Symbol der aktiven Menüschaltfläche. Dadurch wird signalisiert, dass der Bildlauf mehr Inhalt enthält.
Diese subtilen Bewegungen passieren, während ein relativ lebhaftes Hintergrundvideo abgespielt wird. Die weicheren Bewegungen kontrastieren gerade genug mit dem Hintergrund, um die Aufmerksamkeit der Benutzer zu wecken und eine ausreichende Ausrichtung und Navigation der Site zu ermöglichen.
Formulare und Felder
Einige der besten Beispiele für Hover-Effekte sind die Verwendung von Formularen und Feldern. Fast jede Website, die Sie besuchen, verlangt nach einer Art Aktion oder Information. Je einfacher es für Benutzer ist, diese Informationen bereitzustellen, desto wahrscheinlicher ist es, dass Sie sie tatsächlich sammeln.
Das heißt nicht, dass Formen langweilig sein müssen. Visuelle Hinweise, wie z. B. QuickInfos, mit deren Hilfe Benutzer wissen, was in einem Feld (und in welchem Format) eingegeben werden muss, sowie die Bestätigung des Erfolgs sind wichtig.
Das obige Beispiel macht beides. Den Benutzern wird mitgeteilt, welche Informationen sie eingeben sollen. Sie können den Eintrag sofort sehen und mit einem Klick auf die Schaltfläche? Anmelden? Eine schnelle animierte Bestätigung erscheint auf dem Bildschirm. Benutzer müssen nicht nachdenken, ob ihre Informationen richtig eingegeben wurden oder nicht, und sie wissen mit dieser schnellen Überprüfung auf dem Bildschirm, dass sie mit dem fortfahren können, was sie als Nächstes tun möchten.
Wenn Sie nicht sicher sind, wo Sie mit einfachen Hover-Effekten oder Animationen beginnen sollen, können Formulare ein guter Ausgangspunkt sein. Benutzer erwarten bereits, dass dieser Teil der Website interaktiv ist. Sie werden mit der Form etwas anfangen; geben Sie das entsprechende Feedback mit einer einfachen Animation an.
Ressourcen und Code zum Ausprobieren
Sind Sie bereit, Ihrem Design einige animierte Effekte hinzuzufügen? Es gibt viele großartige Ressourcen, die Ihnen beim Start helfen können.
- Hover.css: Eine Sammlung von CSS3-gestützten Hover-Effekten, die auf Links, Schaltflächen, Logos, SVG-Bilder, gekennzeichnete Bilder usw. angewendet werden können. Übernehmen Sie Ihre Elemente, ändern Sie sie oder verwenden Sie sie als Inspiration. Verfügbar in CSS, Sass und LESS.
- Image-Hover-Effekte: Eine Sammlung von Effekten, mit denen Sie den Schwebeflug auf Bildern optimal nutzen können. Kopieren Sie den Code und verwenden Sie ihn in Ihren Projekten.
- Icon-Hover-Effekte: Einfacher Hover, um kreisförmige Symbole hervorzuheben.
- Erstaunliche WordPress-Hover-Effekte: Die Effektsammlung eignet sich hervorragend für WordPress-Benutzer und wird mit reinem CSS3 und ohne Abhängigkeiten erstellt. Die Sammlung umfasst Dutzende Optionen und Stile.
- W3Schools - CSS3-Übergänge: In diesem Lernprogramm erfahren Sie, wie Sie CSS3-Übergänge von Grund auf verwenden.
Fazit
Hover-Animationen sind eine dieser Designtechniken, die kompliziert und schwer aussehen. Die Realität ist jedoch, dass mit CSS-Animationen fast jeder mit Leichtigkeit eine einfache Animation hinzufügen kann. Sie sind leicht und es gibt viele Animatoren, die Code-Schnipsel mit Ihnen teilen möchten.
Denken Sie nur an die goldene Regel, einen Trick in Ihrem Design anzuwenden: Es muss sinnvoll sein. Verwenden Sie Hover-Effekte oder -Animationen nur, wenn sie zum Inhalt hinzugefügt werden. Achten Sie darauf, die Benutzer nicht von den Aktionen abzulenken, die sie ergreifen müssen. Viel Spaß und viel Glück!