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

Lösen Sie das Problem, dass die mit nginx erhaltene IP-Adresse 127.0.0.1 ist

Holen Sie sich das IP-Tool importiere lombok.exte...

Hintergrundbild-Cache unter IE6

Fehler beim Flackern des CSS-Hintergrundbilds in ...

Einrichten eines globalen Shadowsocks+Polipo-Proxys in einer Linux-Umgebung

1. Installieren Sie Shadowsocks sudo apt-get inst...

Designtheorie: Zu den Themen Schema, Ressourcen und Kommunikation

<br />In vielen kleinen Unternehmen besteht ...

Die Qualitäten und Fähigkeiten, die ein Webdesigner haben sollte

Webdesign ist eine aufstrebende Randbranche, die n...

Javascript um den Drag-Effekt der Login-Box zu erreichen

In diesem Artikel wird der spezifische Code von J...

MySQL Series 6-Benutzer und Autorisierung

Inhaltsverzeichnis Tutorial-Reihe 1. Benutzerverw...

Analysieren der Knotenereignisschleife und der Nachrichtenwarteschlange

Inhaltsverzeichnis Was ist asynchron? Warum brauc...

Lösen Sie das Problem des Mac Docker x509-Zertifikats

Frage Kürzlich musste ich mich bei einem privaten...