Kleines Paging-Design

Kleines Paging-Design
Lassen Sie unsere Benutzer wählen, ob sie vorwärts oder zurückgehen möchten, um das Gesuchte zu finden. Wenn wir beispielsweise auf Taobao nach „Shirt“ suchen, werden uns normalerweise 100 Seiten mit Informationen angezeigt (natürlich sind es mehr als 100 Seiten, aber so viele Informationen benötigen die Benutzer normalerweise nicht). wie folgt:

Taobao-Seitenaufruf

1. Original-Design der kleinen Paging

Es gibt viele Gründe für das Paging, insbesondere im Hinblick auf die Leistungsoptimierung, aber der wichtigste Grund besteht darin, dass es den Benutzern ermöglicht, das zu finden, was sie suchen. Taobao hat bei der Paginierung mit einer großen Anzahl von Seiten gute Arbeit geleistet. Aber was die kleine Seitenzahl angeht: Als ich das letzte Mal mit einer Gruppe von Designern eine Methode zum Entwurf einer kleinen Distribution überprüfte, waren wir zum Teil unterschiedlicher Meinung. Schauen wir uns zunächst den Originalentwurf (interaktives Whiteboard, nicht-visueller Endentwurf) dieser kleinen Paginierung an (hier definiert als ein Paginierungsentwurf mit weniger als oder gleich 5 Seiten):

Seitennummerierungsdesign

Kommt Ihnen bekannt vor, oder? Ja, viele Websites verwenden tatsächlich diese Art der Anzeigemethode. Ein Designer hat hier vorgeschlagen, die Schaltflächen „Vorherige Seite“ und „Nächste Seite“ zusammenzufügen, damit Benutzer bequemer darauf klicken können. So was:

Seitennummerierungsdesign

Hmmm, das ist tatsächlich viel besser als das Original. Zumindest können Benutzer mit weniger Aufwand Seiten umblättern. Dann sprang ein anderer Designer auf und fragte: Können wir weitere Optimierungen vornehmen? Denn generell drücken wir häufiger auf „Nächste Seite“ und seltener auf „Vorherige Seite“. Die Lösung, die er damals vorschlug, war:

Seitennummerierungsdesign

Das ist natürlich auch gut und der Grund dafür ist vernünftig. Es gibt darin einige schwer zu erklärende Fragen, zum Beispiel was wichtiger ist, Technologie oder Kunst, oder der Zusammenhang zwischen der Kenntnis chinesischer Schriftzeichen und der Fähigkeit, gute Aufsätze zu schreiben. Tatsächlich besteht das Problem darin, dass die Benutzer erstens einen „Rateprozess“ durchführen müssen, um zu erraten, ob der nach links zeigende Indikator das Umblättern bedeutet; und dass zweitens die Inkonsistenz im Design bei den Menschen ein psychologisches Gefühl der Disharmonie hervorruft. Dies trifft insbesondere auf China zu, wo die Kultur vom Prinzip geprägt ist, dass „gute Dinge paarweise kommen“ und alles paarweise kommen sollte.

2. Mein Plan

Persönlich bin ich jedoch mit den oben genannten Praktiken nicht einverstanden. Da diese Seite klein ist und auf kleinem Raum vollständig aufgelistet werden kann, warum müssen wir den Auswahlprozess des Benutzers verkomplizieren, anstatt direkt einen bequemeren Weg zum Erreichen des Ziels bereitzustellen? Meine Idee ist, dass auf kleinen Seiten alle angezeigt werden sollten, um den Benutzern die Bedienung zu erleichtern. wie folgt:

Seitennummerierungsdesign

Vergleich zwischen diesem erweiterten Paging-Design und der ursprünglichen Lösung:

  • Aus dem Weltraum

    Durch die erweiterte Anzeige werden Pixel gespart. Viele gute Designer denken darüber nach, Leerraum zu lassen und überlegen auch, wie sie diesen wertvollen Platz sinnvoll nutzen können, um Pixel zu sparen.

  • Von der Praktikabilität

    Wenn man Seite 3 sieht und plötzlich wieder zurück zur Seite 1 möchte, muss man dann gemäß der ursprünglichen Gestaltung 2x auf "Vorherige Seite" drücken? Was ist, wenn es 5 Seiten gibt? Wie kann ich einen schnelleren Seitenwechsel gewährleisten? Das erweiterbare Design kann solche Probleme besser lösen.

3. Fazit

Das bedeutet natürlich nicht, dass eine derart erweiterte Paginierung besser ist. Es kann auch notwendig sein, es mit dem Szenario zu kombinieren. Beispielsweise können wir an Orten wie Weibo, wo unbegrenztes Scrollen entlang der Timeline möglich ist, den Benutzern das Konzept des „Paging“ vollständig ignorieren lassen. Solange der Benutzer nach unten scrollt, sorgen wir für das automatische Laden von Informationen, damit Benutzer sie bequemer abrufen können. Die Anwendungsszenarien ändern sich ständig, aber unverändert bleibt, dass ich denke, ich sollte dies weiterhin tun:

1. Ansammeln. Teilweise sind es immer wieder solche kleinen Verwicklungen, man kann das auch als eine Art Sauberkeitswahn bezeichnen, als würde man immer nach der optimalen Lösung für den Code streben. Obwohl eine solche Verflechtung keine großen Auswirkungen auf die Benutzer hat, bin ich davon überzeugt, dass das Website-Erlebnis die Erwartungen der Benutzer übertreffen wird, wenn Sie 10, 30 oder 100 solcher Optimierungen in einem Projekt haben. Natürlich kommt es auch zu einer qualitativen Verbesserung meiner Fähigkeiten in diesem Bereich. Also, sammeln Sie.

2. Denken Sie über das Design hinaus. Was die Interaktion betrifft, ist unser oberstes Ziel eigentlich, dass die Nutzung für die Benutzer bequem ist (nicht für die Benutzer. Manchmal brauchen die Benutzer nur etwas ganz Einfaches, wie beispielsweise ein schnelleres Auto. Aber was wäre, wenn Sie ihnen ein Auto von Ford geben würden?). Daher sollten wir über das Design selbst hinausdenken, damit wir mit größerer Wahrscheinlichkeit zufriedenstellende Ergebnisse erzielen.

<<:  Gründe und Lösungen für die Aufforderung zum Speichern der Aktion nach dem Hochladen von Dateien im Formular

>>:  JavaScript zur Nachahmung der Registrierungs- und Anmeldefunktion der offiziellen Xiaomi-Website

Artikel empfehlen

Vue-Anfängerhandbuch: Erstellen des ersten Vue-cli-Scaffolding-Programms

1. Vue – Das erste Vue-CLI-Programm Die Entwicklu...

Javascript Blob-Objekt zum Erzielen eines Dateidownloads

Inhaltsverzeichnis veranschaulichen 1. Blob-Objek...

Der Unterschied zwischen KEY, PRIMARY KEY, UNIQUE KEY und INDEX in MySQL

Das im Titel angesprochene Problem lässt sich sch...

So verwenden Sie Docker Compose zum Erstellen eines FastDFS-Dateiservers

Im vorherigen Artikel wurde ein ausführliches Bei...

Erstellen eines sekundären Menüs mit JavaScript

In diesem Artikelbeispiel wird der spezifische Ja...

Detaillierte Analyse des Explain-Ausführungsplans in MySQL

Vorwort Das Schreiben effizienter SQL-Anweisungen...

Das WeChat-Applet implementiert feste Header- und Listentabellenkomponenten

Inhaltsverzeichnis brauchen: Funktionspunkte Rend...

W3C Tutorial (7): W3C XSL Aktivitäten

Ein Stylesheet beschreibt, wie ein Dokument angez...

Detailliertes Tutorial zum verteilten Betrieb von JMeter in der Docker-Umgebung

1. Erstellen Sie das Basisimage von jmeter Das Do...

Vue Grundlagen Listener Detaillierte Erklärung

Inhaltsverzeichnis Was ist ein Listener in Vue? V...