Artikeleinführung von Wulin.com (www.vevb.com): Es gibt weniger Artikel, die die Front-End-Technologie verwenden, um die Benutzererfahrung voranzutreiben. Ich hoffe, dieser Artikel bringt Ihnen neue Perspektiven und Denken. Das ultimative Ziel ist zu hoffen, dass Benutzer eine bessere Erfahrung haben können.
HUA: Vor kurzem habe ich einige Optimierungen für die Website Carousel vorgenommen. Obwohl es einfach erscheint, kann das Denken aus der Sicht des Benutzers eine interessante Erfahrung bieten.
Karussellbilder sind für viele Websites unerlässlich. Sie zeigen mehr Inhalte im begrenzten Raum und können schillernde Switching -Effekte verwenden, um Benutzer anzulocken. Hier sind Screenshots einiger bekannter Websites:
Es ist nicht schwierig, die Front-End-Technologie-JavaScript zu verwenden, um Karussellbilder zu erstellen. Zunächst müssen wir 3 grundlegende Funktionen implementieren:
1. Das Bild wird in einem bestimmten Zeitintervall zyklisch gespielt;
2. Digitale Navigationsschleifen mit dem Bild;
3.. Bildschwere digitales Navigationskontrolle;
Fühlen Sie sich nach der Erfahrung unglücklich? Wenn sich die Maus zum Beispiel ins Bild bewegt und nur die Details klar sehen möchte, springen Sie zum nächsten Bild. Ja, das ist sehr schädlich für die Gefühle des Benutzers. Wie man es löst, ist das Prinzip sehr einfach. Bewegen Sie die Maus ins Bild und halten Sie das Karussell und die Maus aus der Maus, um das Karussell wieder aufzunehmen.
Obwohl viele Websites diese Funktion bereits implementiert haben, gibt es ein Problem ausnahmslos - wenn die Maus das Bild herauszieht, muss sie noch einige Sekunden warten, bevor sie zum nächsten Bild springt. Ist diese Erfahrung vernünftig? Aus der Sicht des Benutzers bewegt sich die Maus, wenn der Benutzer beendet wird, das Bild heraus, und die angemessene Logik sollte darin bestehen, sofort zum nächsten Bild zu springen. Aus Produkt- oder operativer Perspektive hoffen sie auch, dass der Benutzer mehr Werbebilder sehen kann.
Die Karussellbildgröße einiger Websites ist oft relativ groß, insbesondere E-Commerce-Websites. Um die Aufmerksamkeit der Benutzer zu erregen und eine glückliche Atmosphäre zu schaffen, sind diese vernünftig. Das Karussellbild wird jedoch größer und der Raum, der vom ersten Bildschirm besetzt ist, wird größer. Wenn der Benutzer auf der Seite arbeitet, kann er versehentlich über das Bild rutschen und dann das Bild herausrutschen. Dieser Vorgang ist extrem kurz. Wenn die entsprechende Methode sofort auf die entsprechende Methode reagiert, kann die Seite auftreten oder nicht, sie verursacht Verwirrung oder sogar Unannehmlichkeiten für den Benutzer. Wenn der Benutzer beispielsweise im Laufe der Zeit versehentlich das Karussellbild ein- und aus dem Karussell -Bild aussieht, wird die Karussell -Bildreaktion übernommen und bleibt auf dem festen Bild, wodurch der Benutzer das Gefühl gibt, dass das Karussell ungültig ist.
Daher ist ein Fehlertoleranzmechanismus für diese Situation erforderlich, dh eine verzögerte Reaktion. Wenn Sie feststellen, dass der Benutzer nur sofort umgezogen ist, wird er nicht reagieren, genau wie die Maus nie durch das Bild verläuft. Wenn die Maus für einen bestimmten Zeitraum im Bild bleibt, wird angenommen, dass der Benutzer das Bild wirklich betrachten muss und die entsprechende Methode reagiert. Diese Verzögerungszeit wird allgemein als nicht weniger als 200 ms angesehen.
Zusammenfassend gibt es zwei Punkte, um die erweiterte Erlebnisfunktion zu implementieren:
4. Verschieben Sie das Bild und halten Sie es an. Nachdem Sie das Bild bewegt haben, springen Sie sofort zum nächsten Bild und fahren Sie weiter nach Carousel.
5. Die Maus antwortet nach Verzögerung;
Nachdem wir uns so viel beschwert haben, schauen wir uns den Code an. Nicht Front-End-Schüler denken vielleicht, dass die Implementierung der beiden oben genannten Funktionen viel Code erfordert, aber tatsächlich sind sie nur wenige Zeilen:
Obwohl es nicht viel Code gibt, gibt es immer noch einige grundlegende Techniken, wie z. B. die boolesche Steuerung im roten Box ist der Schlüssel zur Verzögerungsfunktion.
Nachdem dies geschrieben wurde, scheint die Benutzererfahrung ziemlich gut zu sein. Gibt es also noch Platz für die Optimierung? !
Chinas Internetgeschwindigkeit liegt in der Welt an zweiter Stelle, und selbst an vielen Stellen liegt die Internetgeschwindigkeit bei etwa 1 m. Daher ist es auch wichtig, die Benutzererfahrung mit niedriger Geschwindigkeitsgeschwindigkeit zu verbessern. Das Laden von Karussellbildern auf Bedarf ist eine der Methoden. Wenn Sie zum entsprechenden Bild springen, können Sie die erforderlichen Bilder herunterladen. Dies ist die einzige Möglichkeit, die Bildanzeige zu beschleunigen und den Verkehr zu speichern. Aber alles hat zwei Seiten mit Vor- und Nachteilen, siehe Bild:
Dies sollte ein Bild sein, das Sie häufig sehen. Der Bildbelastungsprozess ist Benutzern ausgesetzt, was bei geringen Netzwerkgeschwindigkeiten besonders offensichtlich ist. Die Methode, um diesen Defekt auszugleichen, ist ebenfalls sehr einfach - das Bild wird vorinstalliert und beim Laden wird eine Eingabeaufforderung für das Warten angegeben und betrachten Sie das Bild weiter:
Das Vorladen kann es ermöglichen, dass das Bild gleichzeitig vollständig angezeigt wird, ohne den Ladeprozess freizulegen, wodurch die Benutzer angemessene Erwartungen erhalten.
Die beiden schließlich implementierten verbesserten Erfahrungen sind wie folgt:
6. Bilder nach Bedarf laden;
7. Das Bild wird vorinstalliert und während des Ladevorgangs wird eine Eingabeaufforderung für das Warten -Symbol angegeben.
Die Schüler können hier klicken, um den erweiterten Karussellbildeffekt zu erleben.
Es gibt nur wenige Artikel, die Front-End-Technologie verwenden, um die Benutzererfahrung voranzutreiben. Ich hoffe, dieser Artikel bringt Ihnen neue Perspektiven und Denken. Das ultimative Ziel ist zu hoffen, dass Benutzer eine bessere Erfahrung haben können.