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

Linux verwendet den Binärmodus zur Installation von MySQL

In diesem Artikel werden die einzelnen Schritte z...

Die Tücken der automatischen Inkrementierung numerischer MySQL-Typen

Beim Entwurf von Tabellenstrukturen gehören numer...

Installieren und konfigurieren Sie MySQL 5.7 unter CentOS 7

Dieser Artikel testet die Umgebung: CentOS 7 64-B...

Detaillierte Erklärung der MySQL Truncate-Verwendung

Inhaltsverzeichnis MySQL Truncate-Verwendung 1. T...

Neun erweiterte Methoden zur Deduplizierung von JS-Arrays (erprobt und effektiv)

Vorwort Die allgemeinen Methoden sind hier nicht ...

Verwendung des Linux-Dateibefehls

1. Befehlseinführung Der Dateibefehl wird verwend...

Wissen Sie, wie Sie mit Vue Screenshots von Webseiten erstellen?

Inhaltsverzeichnis 1. Installieren Sie html2Canva...

Tutorial zum Erstellen eines SVN-Servers mit Docker

SVN ist die Abkürzung für Subversion, ein Open-So...

Ein verbessertes Screenshot- und Freigabetool für Linux: ScreenCloud

ScreenCloud ist eine tolle kleine App, von der Si...

Detaillierte Erklärung der CocosCreator MVC-Architektur

Überblick Dieser Artikel stellt die in Spieleclie...

Einige weniger bekannte Sortiermethoden in MySQL

Vorwort ORDER BY 字段名升序/降序. Ich glaube, jeder hier...

So ändern Sie Farben und Designs in Vim unter Linux

Vim ist ein Texteditor, den wir unter Linux sehr ...