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    

Artikel empfehlen

Detaillierte Erläuterung der Vue-Formularbindung und -Komponenten

Inhaltsverzeichnis 1. Was ist bidirektionale Date...

Lösungen für Websites mit hohem Datenverkehr

Erstens: Stellen Sie zunächst sicher, dass die Ser...

Detaillierte Erklärung der JSONObject-Verwendung

JSONObject ist lediglich eine Datenstruktur, die ...

Detaillierte Erklärung zum MySQL-Dateispeicher

Was ist ein Dateisystem Wir wissen, dass Speicher...

VUE implementiert einen Beispielcode für das Spiel Flappy Bird

Flappy Bird ist ein sehr einfaches kleines Spiel,...

Vue-Ereignisparameter $event = Ereigniswertfall

Vorlage <el-table :data="Datenliste"...

Lösung für mehrere 302-Antworten im Nginx-Proxy (Nginx Follow 302)

Proxying mehrerer 302er mit proxy_intercept_error...

Beispielanalyse für MySQL-Transaktionen, Isolationsebenen und Sperrenverwendung

Dieser Artikel beschreibt anhand von Beispielen M...

Zusammenfassung der Browserkompatibilität gängiger CSS-Eigenschaften (empfohlen)

Warum müssen wir die Browserkompatibilität von CS...