Das Blättern ist eine Schlüsselkomponente eines Website-Designs, das über eine einzige Landing Page hinausgeht. Wer glaubt, dass die Schriftrolle tot ist, muss das Jahr 2005 verlassen!
Bildlaufaktionen führen Benutzer vertikal oder horizontal durch den Inhalt. Dies ist ein allgemein akzeptiertes Benutzermuster. Die Schriftrolle ist dank zahlreicher interessanter Designtechniken und eines Übergangs zum Zugriff auf vollständige Websites auf kleineren Bildschirmen lebendig. Lass uns einen Blick darauf werfen!
6 Möglichkeiten, Bildlaufaktionen zu verwenden
Eine Scroll-Aktion ist nicht nur ein kleiner Trick für das Design Ihrer Website. Es muss etwas tun und Benutzer dazu bringen, sich mit bestimmten Inhalten zu beschäftigen oder eine bestimmte Aktion auszuführen. Wenn diese Kriterien nicht erfüllt sind, sind Scroll-Aktionen nur dumme Tricks.
Es gibt verschiedene Möglichkeiten, Benutzer für das Scrollen zu interessieren:
- Vertikal scrollen: Dies ist das intuitivste Muster, bei dem Benutzer die Seite nach oben und unten verschieben. Auch ohne viele andere Informationen werden Benutzer versuchen, nach unten zu scrollen, wenn sie Interesse an der Gestaltung oder dem Inhalt haben.
- Horizontal scrollen: Während dieses Muster dank der zunehmenden Anzahl von Schiebereglern immer häufiger wird, benötigen die meisten Benutzer immer noch einen horizontalen Bildlaufschritt, beispielsweise einen Pfeil oder eine Anweisung. Dann müssen Sie entscheiden, ob das horizontale Scrollen eine ein- oder zweiseitige Aktion ist.
- Schichten verwenden: Durch das Layering von Objekten können Benutzer Muster und Bewegungen erkennen (siehe Material Design-Prinzipien). Durch das Stapeln von Elementen auf einem Hintergrund und Vordergrund können Sie das Scrollen fördern.
- Benutzer zum Scrollen auffordern: Es gibt nichts Falsches mit einem Symbol oder einem Stück Mikrokopie, das den Benutzern sagt, wohin und wie sie blättern sollen. Fügen Sie das Element direkt darüber ein, wo der Bildschirm unterbrochen wird. und Benutzer müssten blättern, um mehr zu sehen.
- Verwenden Sie zum Blättern: Wenn Sie ein Bild oder Symbol verwenden, um das Scrollen zu fördern, aktivieren Sie es ebenfalls mit einem Klick. (Die Benutzer können fast nicht auf Elemente, die wie Schaltflächen aussehen, klicken.) Wenn Sie durch Klicken auf einen Bildlauf blättern, wird eine angenehme Überraschung geboten, die den Benutzer auf den nächsten Punkt bringt.
- Überall blättern: Es gibt keine Regel, die besagt, dass Scroll hoch und runter oder links und rechts sein muss. Es kann sich auf verschiedene Arten bewegen. Berücksichtigen Sie runde, diagonale oder andere Muster, sofern diese für den Benutzer leicht in Bezug auf den Inhalt zu verstehen sind, und fördern Sie die Einbindung.
10 Killer-Beispiele für Inspiration
Nun, da Sie eine Vorstellung davon haben, wie Sie Scroll-Aktionen entwerfen, lassen Sie sich von einigen Beispielen hervorragenden Designs inspirieren. Um alle unten stehenden Beispiele optimal zu nutzen, klicken Sie auf die Websites und spielen Sie herum, um die interaktive Erfahrung optimal zu nutzen.
Sie werden feststellen, dass sich jedes Projekt etwas anders bewegt. Einige sind intuitiver als andere, aber alle bieten eine interessante Grundlage für den Einstieg. Genießen!
IMS-Produktionen
IMS Productions verwendet vertikales Scrollen, um Storys effektiv auf einem? Bildschirm? Darzustellen. zu einer Zeit Jeder Bildlauf führt Benutzer zu einem neuen Profil, das den Bildschirm ausfüllt und ein eigenes Mini-Erlebnis bietet. Beachten Sie die subtilen vertikalen Linien und Pfeile, die alle Benutzer zum Blättern durch das Website-Design verweisen.
Sofortige Liebe
Instant Love kombiniert Scroll-Aktionen und Sounds für ein musikalisches Experiment, das viel Spaß macht. Bei jeder Bildlaufaktion wird ein neuer Song angezeigt, den der Benutzer anhören kann, einschließlich Track- und Interpreteninformationen. Scroll-Aktionen werden als Spiel verwendet, um das Engagement und die Interaktion für einen längeren Zeitraum zu fördern.
Smart USA
Smart USA verwendet viele coole Scroll-Techniken, einschließlich einer 360-Grad-Ansicht, um den Verkauf von Autos zu unterstützen. Diese Art der Bildlauffunktion kann für E-Commerce und Produktverkäufe nützlich sein, da Benutzer Produkte detaillierter erkunden können als mit Bildern allein.
Havaianas
Havaianas verwendet horizontales Scrollen, um Produkte zu präsentieren. Das Schöne an diesem Muster ist, dass jede Folie im Bildlauf einen Aktionsaufruf und einen Fortschrittsbalken am unteren Rand enthält. Während die Panels automatisch scrollen, können Benutzer jederzeit die Kontrolle übernehmen, um nur die Inhalte zu sehen, nach denen sie suchen.
Wiedergabe
Playup ist ein animiertes Abenteuer aus beweglichen Teilen, die sich mit jedem Mausklick verändern und verschieben. Mit Scroll-Aktionen ist viel los, aber die Bewegungen sind schnell und verlockend, besonders bei den kräftigeren Farbwahlen. Darüber hinaus können Benutzer nach oben oder unten blättern, und es gibt immer einen visuellen Hinweis auf der rechten Seite, der Sie über die verfügbaren Aktionen informiert.
Pharrell Williams
Pharrell Williams hat eine der schönsten Seiten zum Scrollen, die Sie finden können. Es bewegt sich in jede Richtung, hüpft, verschiebt sich und verändert seine Form vor Ihren Augen. Und jedes Stück des Designs wird durch Scroll-Aktionen gesteuert. Wenn Benutzer auf der Startseite auf Karten klicken, machen die Innenseiten auch das fortlaufende Scrollen mit Parallaxenbewegung zum Erzielen der gleichen Stimmung.
Tubelectric
Tubelectric sieht nicht aus wie ein Design mit vielen Scrolleffekten, es verwendet jedoch einfache Ebenen und Animationen, um das Produkt hervorzuheben. Es gibt unerwartete Designfreuden mit jedem Mausklick für eine Website, die ein flaches Gesamtdesign hätte haben können.
Die höchste Website der Welt
Die höchste Website der Welt ist ein dummes Beispiel für extremes Scrollen. Es läuft einfach mehr als 11 Meilen. Habe Spaß!
Rocket Lab
Rocket Lab verwendet zur Darstellung von Informationen eine traditionellere vertikale Bildlaufleiste unterhalb des vollständigen Seitenvideos. Was besonders schön ist, ist die Mikrokopie - lass uns rollen? - um den Benutzern zu sagen, dass sie weiter scrollen sollen.
Schieberegler
Schieberegler verwenden eine Parallax-Scrolling-Aktion, um das Restaurant und die Menüelemente anzuzeigen. Das Gesamtdesign ist ziemlich einfach und die Scroll-Aktionen sind nicht kompliziert, aber es kommt alles mit Leichtigkeit zusammen. Dies ist ein hervorragendes Beispiel, wie Sie coole Benutzeroberflächenaktionen mit stellaren Bildern kombinieren können.
Fazit
Scrollen gibt es in vielen verschiedenen Formen.Wir hoffen, dass diese Beispiele Sie dazu inspirieren werden, etwas mit einem interessanten oder neuen Bildlaufmuster zu erstellen, um eine neue Benutzerbasis zu gewinnen.
Denken Sie daran, wie bei allem Neuen. Testen Sie es. Schauen Sie sich die Analysen an. Nehmen Sie die erforderlichen Änderungen vor, um sicherzustellen, dass Ihre experimentellen Bildlauf- und Entwurfsmuster erfolgreich sind und den Benutzern gute Dienste leisten.