Seitenübergänge für Alle

0
73

Wie Sarah erwähnt in Ihrer früheren post über die page-übergang mit Vue.js es ist viel motivation für Designer und Entwickler zu bauen, Seite übergänge. Wir betrachten mobile Anwendungen. Während mobile Anwendungen entwickeln sich mehr und mehr Aufmerksamkeit wird gegeben, um die animation zu erleben, während das web bleibt ziemlich gleich. Warum ist das so?

Vielleicht ist es da die native app-Entwickler mehr Zeit verbringen, die Arbeit an diesen Animationen. Vielleicht ist es, weil die user sagen, was Sie wollen. Vielleicht ist es, weil Sie wissen, mehr über das Umfeld, in dem die app ausgeführt wird. All das trägt zur Verbesserung der Erfahrung über die Zeit. Insgesamt scheint es, wie mobile app-Entwickler irgendwie zu wissen scheinen, oder kümmern sich mehr um die user experience.

Wenn wir einen Blick auf, wie mobile apps sind so konzipiert, ist es heute sehr oft eine Art von animierten übergang zwischen den Staaten. Auch ready-to-use nativen Komponenten haben irgendeine Art von einfachen animation zwischen den Staaten. Entwickler und Designer realisiert, dass diese kleine animation hilft dem Benutzer verstehen, was Los ist in der app. Es macht die navigation durch die app einfacher und teilt dem Benutzer mit, wo Sie gehen, innerhalb der app.

Zum Beispiel, wenn Sie navigieren, um eine Unterkategorie, dann wird es in der Regel rutscht von der rechten Seite des Bildschirms, und wir alle irgendwie wissen, was das bedeutet.

Animation Angelegenheiten. Es kann verwendet werden, um die Benutzerfreundlichkeit zu verbessern.

Wenn Sie die Entwicklung einer website, ist es einfach, um Stunden damit verbringen, sicher, dass der Benutzer sieht die ganze Geschichte durch die top-notch-übergänge, wie die Bewegung zwischen Galerie-Bilder oder ausgefallene hover-Effekte…aber sobald ein Benutzer auf einen link klickt, werden alle von dieser Erfahrung fällt auseinander und Sie beginnen von Anfang an. Das ist, weil die Seite neu geladen und wir haben nicht eine einfache/offensichtliche/native Art und Weise zu handhaben Animationen/übergänge in dieser situation.

Auf die web, die meisten der Anstrengung verwendet, um die Benutzerfreundlichkeit zu verbessern, ist in die Struktur, das visuelle design, oder auch die performance der Website. Es gibt einige Elemente, die Sie Streifen können, um hier und da, aber das ist über es. Ein langweiliges überbleibsel aus der Zeit, als die Website war einfach zu navigieren durch eine Reihe von text-Seiten später aktualisiert, mit einigen Schiebe-text.

Ja, wir tatsächlich verwendet, dies zu tun.

Es gibt einige sehr ausgefallene websites, die gefüllt sind mit Animationen oder unglaubliche WebGL Hieroglyphen im hintergrund. Leider sind Sie oft schwer zu navigieren und Ihre laptop-Batterie wird entwässert, in etwa 15 Minuten. Aber Sie sind sicher schön anzusehen. Diese Seiten sind voll animiert, aber die meisten wird es verwendet, um Sie zu beeindrucken, und nicht, um Ihnen zu helfen navigieren, oder die Erfahrung machen, schneller machen, oder Dinge, die leichter zugänglich für Sie, die Website zu durchsuchen.

Die Quelle des Problems

All dies wirft eine große Frage. Wir haben alle die Technologie, dies zu tun Seitenübergänge Sachen auf dem web. Warum tun wir das nicht? Ist es, weil wir nicht wollen? Ist es, weil wir nicht denken, dass ist unser job? Ist es so schwer, dass wir würde haben, kostenlos double für Projekte und Kunden kaufen nicht?

Werfen wir einen Blick auf einen anderen möglichen Grund. Oft ist ein Unternehmen entscheidet Technologien, die für alle Ihre Projekte. Du, als front-ender haben nicht viel Kontrolle darüber, was auf dem server implementiert, so können Sie vielleicht nicht damit gerechnet, dass einige server-side-rendering von Ihrem JSX.

Vielleicht haben Sie zu wählen, etwas stabil und brauchbar für jede Art von Lösung (die in der Regel bedeutet das weniger Codebasis, desto flexibler), Sie sind also eine Art von Zwang zu vermeiden, dass einige Rahmenbedingungen Ihrer Entwicklung zu stapeln. Leider macht es Sinn. Die Sie nicht implementieren möchten, ein Kontaktformular in 10 verschiedenen frameworks, nur weil Sie sich entschieden haben, einen Rahmen ist eine gute Basis für dieses Projekt. Und verstehen Sie mich nicht begonnen auf die Sicherheit, die in den Prozess der Verbesserung im Laufe der Jahre. Sie können nicht nur werfen Sie es Weg, weil Sie möchten, dass Ihre Benutzer haben ein bisschen mehr Spaß beim surfen auf Ihrer Website.

Es ist ein weiterer möglicher Grund. Vielleicht möchten Sie bauen auf WordPress, weil Sie wollen, profitieren Sie von all diesen open-source-leckereien Menschen vorbereitet, die Sie im Laufe der Jahre. Würde Sie tauschen Sie alle, die “frei” – Funktionalität für eine bessere Erfahrung? Wahrscheinlich nicht…

Das Ziel

Abgesehen von drastischen und unrealistisch änderungen, wie die Abschaffung aller Bilder und videos, die unsere website Ladezeit vom server ist einfach, was es ist. Wir haben einen server gerenderten Seite, und abgesehen von einem schnelleren server oder besser Zwischenspeichern, gibt es nicht viel zu tun, um zu verbessern.

So wird der Weg zur Verbesserung der Ladezeit ist zu betrügen, ein bisschen! Betrügen, indem der Benutzer denke, es braucht weniger Zeit, weil Sie abgelenkt sind durch das, was auf dem Bildschirm passiert. Betrügen durch das laden von Inhalt vor der Zeit und animieren den übergang.

Wir stellen einige Effekte könnten benutzt werden, um den übergang. Selbst einfache fade-in/fade-out kann Ihnen ein ganz anderes Gefühl, vor allem mit einigen element, was dem laden. Schauen wir uns einige Beispiele.

Hinweis: Alle folgenden Beispiele sind websites bauen auf PHP und ziemlich viel Arbeit ohne JavaScript-wie jeder andere Ort wäre.

Quelle: rsts.cz/25let (public-Produktion-Standort)

Ein einfaches fade-out/fade-in nahtlos verbessert die Erfahrung der Benutzer hat vor dem Klick auf den link und nicht handeln, störend, wie ein normaler browser neu laden würde. Die be-Angabe auf ein Menü-Symbol sorgt für einen Benutzer nicht in Panik, wenn die Seite braucht etwas länger zum laden.

Einige interessante animation erreicht werden kann, indem er verschiedene Elemente in verschiedenen Wege, die miteinander kombiniert werden können mit fading.

Quelle: mcepharma.com (public-Produktion-Standort)

Oder wie wäre es mit Abdeckung an der Seite mit irgendeinem anderen element?

Quelle: delejcotebavi.decathlon.cz (public-Produktion-Standort)

Die paar Stunden Arbeit geben, die website ganz neues Gefühl, indem Sie Ihre statische Seite in eine animierte. Und das ohne jede weitere Vorbereitung.

Allerdings, falls Sie bereits Kenntnis von Ihrer Absicht, in der design-phase, können Sie passen Sie das design an Ihre Bedürfnisse an. Gemeinsame Elemente vorbereitet werden können, vor der Zeit.

Quelle: vyrostlijsme.cz/zaciname (Unternehmens-internes system)

Die main-navigation-element eingeführt in form von Blasen spielt mit dem Benutzer, während der Inhalt der nächsten Seite wird geladen. Die Auswirkung ist, dass Benutzer nicht langweilen und weiß, dass etwas passiert ist. Die animation beginnt mit dem Klick auf den link, wird der Benutzer nicht einmal erkennen, er ist auf etwas wartet.

Lösung

Wir haben aussortiert, was wir wirklich wollen, zu tun, und warum wollen wir es tun… wir werden sehen, wie können wir das erreichen.

Zwar gibt es nicht viel zu tun auf dem back-end für dieses gibt es eine ganze Reihe von Dingen, die Sie tun können, auf der browser-Seite. Ein gutes Beispiel ist Turbolinks, entwickelt von der Basecamp Leute, was braucht Ihre website und macht es mehr app-feeling mit dem content laden mit JavaScript. Es einfach verhindert, dass sich hässliche browser-Seite-zu-Seite nachladen, springen. Turbolinks befasst sich mit der browser-Verlauf, laden, und all das andere Zeug, das normalerweise geschehen würde unter der Haube des Browsers. Das wichtigste hier ist, die Kontrolle über das laden und austauschen von Inhalten, denn solange der browser nicht neu laden, das passiert alles auf einem Bildschirm ist in unserer Kontrolle.

Denken wir mal einige Begriffe, die wir verwenden können, um verbessern unsere Erfahrung. Die Last der Zeit ist unser größter Feind, so wie wir es verbessern im browser?

Vorspannung

In den meisten Fällen, wird die Anfrage zum laden der nächsten Seite muss nicht nur gestartet, sobald ein Benutzer auf den link klickt. Es ist ein anderes Ereignis geschieht, angeben können Benutzer die Absicht zum Besuch der Seite, und das ist ein hover über den link. Es gibt immer einige hundert Millisekunden zwischen schweben und klicken Sie auf den link, warum nicht nutzen, die Zeit zu unserem Vorteil? Was solls, wenn die Mehrzahl der Benutzer am Ende auf die nächste Seite, die Ihnen bekannt und Sie haben die Statistiken beweisen es, warum nicht auch der Vorspannung zu jeder Zeit nach dem ersten Rendern, während der Benutzer versucht, zu bekommen, um die aktuelle Seite?

Das folgende Diagramm veranschaulicht, wie viele Dinge parallel stattfinden können und sparen uns einige, dass die kostbare Zeit, anstatt als getan. Ein sehr häufiger Fehler gesehen in benutzerdefinierte Lösungen für Seite übergang, die Leute machen für sich selbst ist der Beginn der Anfrage, die in der Regel ausgelöst, wenn die Seite entladen wird/ausgeblendet.

Möglich Prozess des übergangs

Caching

Während dies kann ein problem für einige dynamische Seiten, statische Seiten sind perfekte Kandidaten für caching. Warum würden Sie eine Seite zu laden zweimal, wenn man die Kontrolle über das laden und austauschen der Inhalte? Sie können den Inhalt speichern und verwenden Sie es, wenn der Benutzer besucht die gleiche Seite, oder gibt es mit der browser-Schaltfläche “zurück”.

Oder Sie können den cache preload Seiten schweben und leeren Sie den cache regelmäßig (vielleicht nach jeder Seite zu Besuch?) um immer die neueste version der Seite auf dynamische Seiten, während immer noch ermöglichen, dass die preload-Funktion.

Interessanterweise Progressive Web-Apps auch “investieren” in diesem Bereich, obwohl der Ansatz ist ein bisschen anders.

Animation

Alle diese Konzepte sind toll, aber wir noch brauchen, um Animationen auf der party.

Die Kontrolle von der Seite laden und Ersatz übernommen werden können von uns, damit wir spielen können, mit dem Inhalt der Seite zu einem bestimmten Zeitpunkt. Zum Beispiel, es ist einfach genug, um eine Klasse zu der Seite, während Sie es laden. Dies gibt uns die Fähigkeit zu definieren, einen anderen Staat für die Seite, oder in anderen Worten, verstecken/zu entladen. Wenn die animation fertig ist und die Seite geladen ist, sind wir frei, um den Inhalt ersetzen und entfernen Sie die state-Klasse lassen Sie die Seite animieren Sie wieder zurück.

Eine weitere option ist es, zu animieren, Ihre Seite “aus” mit JavaScript den Inhalt ersetzen, und animieren Sie es wieder “in”.

Es gibt viele Möglichkeiten, wie man diesen Ansatz, aber in keiner Weise, das wichtigste feature ist hier, nicht lassen Sie den browser neu laden.

Bereit zu Gehen

Diese sind im wesentlichen drei Konzepte, die einen großen Unterschied machen. Der Punkt ist, mit ein wenig zusätzlichen Aufwand, es ist nicht so schwer, dies selbst zu tun, und ich ermutige Sie, dies zu tun.

Es wird ein steiniger Weg mit vielen möglichen Kopfschmerzen, da es nicht immer leicht, nicht zu brechen die browser die native Funktionalität.

Allerdings, wenn Sie sind mehr eine Last und Art der person, die ich haben zusammen ein kleines Paket namens swup, sortiert all jene Dinge, die Turbolinks sowie alle drei Konzepte haben wir hier behandelt. Hier eine kleine demo.

Was sind die Vorteile von swup?

  • Es arbeitet ausschließlich auf dem front-end, also kein server-setup ist erforderlich. Sie können zwar leicht zu implementieren, übertragen, nur die erforderlichen Daten basierend auf X-Requested-With-in der Anforderung header (kleine änderung von swup erforderlich ist, basierend auf Ihre spezielle Lösung).
  • Verwendet die browser-history-API, um die korrekte Funktionalität Ihrer Website, wie es funktionieren würde, ohne swup (zurück/vorwärts-Tasten und die richtige route in der URL-Leiste).
  • Es muss nicht Teil der ersten Chargen und können geladen und aktiviert nach dem ersten Rendern.
  • Kümmert sich um das timing, das heißt, es erkennt automatisch das Ende Ihrer übergänge in CSS definierten und in der Zwischenzeit kümmert sich um das laden der nächsten Seite. Der gesamte Prozess beruht auf Versprechungen, so dass nicht eine einzige Millisekunde verschwendet wird.
  • Falls in Optionen aktiviert, swup kann die Vorspannung einer Seite, wenn ein link schwebte, oder, wenn es einmal aufgetreten in der geladenen Inhalte (mit den Daten-swup-preload-Attribut).
  • Falls in Optionen aktiviert, swup auch werden die Inhalte der Seiten und laden nicht auf der gleichen Seite zweimal.
  • Swup strahlt eine ganze Reihe von Veranstaltungen, die Sie in Ihrem code verwenden können, aktivieren Sie Ihr JavaScript, analytics, etc.
  • Sie können festlegen, wie viele Elemente ersetzt werden, wie Sie wollen, solange Sie gemeinsame, für alle Seiten. Dies ermöglicht die Möglichkeit zu animieren, gemeinsame Elemente auf der Seite, während immer noch Ersatz seiner Teile. Das bubble-Menü in unserem früheren Beispiel oben verwendet dieses feature, wo die Prüfung der Beschilderung auf die Blasen stammen aus der geladenen Seite, aber rest der Blase bleibt auf der Seite, so kann es animiert werden.
  • Gibt Ihnen die Möglichkeit, mit verschiedenen Animationen für die übergänge zwischen den verschiedenen Seiten.

Für diejenigen von Ihnen, wie Sie Ihre animation mit JavaScript gemacht, es gibt auch eine version für das genannte swupjs. Zwar mag es schwieriger sein, zu implementieren, Animationen in JavaScript, es ist definitiv gibt Ihnen mehr Kontrolle.

Fazit

Die animation und die nahtlose Erfahrung nicht strikt begrenzt, um native Anwendungen oder der neuesten Technologien. Mit wenig Anstrengung, Zeit und ein wenig code, auch Ihre WordPress-Website kann fühlen, native-like. Und während wir lieben das web, wie es ist, ich denke, wir können immer versuchen, um es ein wenig besser.