Benutzerdefiniertes Auswahlfeld für die Webseite Auswählen

Jeder ist wahrscheinlich mit dem Auswahl-Dropdown-Listenformular vertraut, doch das standardmäßige Dropdown-Listenformular lässt manche Websites oft hässlich erscheinen und außerdem ist es schwierig, den Auswahlstil mit CSS anzupassen. Um ein Dropdown-Auswahlformular zu erstellen, das besser zum Stil der Website passt, verwenden viele Websites daher häufig JS, um diesen Effekt zu simulieren.

Beispielsweise verwenden die bekannten Websites Tudou.com, Taobao Mall und Amazon alle JS, um Dropdown-Listenformulare zu erstellen.

Das Ergebnis ist offensichtlich optisch mit dem Gesamtstil der Website vereinbar, und der Dropdown-Listenstil ist sehr schön, bringt aber auch einige negative Reaktionen mit sich. Da dies mit JS erfolgt, treten viele unerwartete Effekte auf. Lassen Sie uns ihre jeweiligen Mängel nacheinander durch den Test von drei Websites analysieren:

Jedes Mal, wenn ich das Suchkategorie-Auswahlfeld von Tudou anklicke, bekomme ich ein komisches Gefühl:

1. Nach dem Klicken ist die Position der Popup-Liste anders als erwartet. Unterbewusst dachte ich, es sei eine Dropdown-Liste, aber Tudou gab mir eine „mittlere Dropdown-Liste“.
2. Sie verwenden aus Gewohnheit die Auf-/Ab-Tasten, um Elemente auszuwählen. Stattdessen wird jedoch die gesamte Seite gescrollt.
3. In einem Wutanfall möchte ich es abschalten. Ich habe die ESC-Taste gedrückt, aber nichts ist passiert.
4. Nach dem Deaktivieren von JS ist es völlig unbrauchbar.

Auch die Taobao Mall sieht wunderschön aus:

Mit Ausnahme von Punkt 1 sind die anderen identisch mit Tudou, mit Problemen hinsichtlich Zugänglichkeit und Benutzerfreundlichkeit.

Die Lösung ist einfach , verwenden Sie einfach das native Auswahlfeld, beispielsweise das von Amazon :

Warum wird von der Verwendung benutzerdefinierter Auswahlfelder in Webseiten abgeraten?

Das Auswahlfeld ist ein sehr ausgereiftes interaktives Steuerelement. Reife bedeutet, dass Benutzer es leicht akzeptieren können, Reife bedeutet aber auch, dass verschiedene Benutzer sorgfältig berücksichtigt werden und es sehr viele interaktive Details gibt. Zum Beispiel: Reagieren auf Tastaturoperationen wie Bild auf/Bild ab, Home/Ende und automatisches Anpassen der Popup-Richtung der Dropdown-Liste an verschiedenen Positionen usw.

Die Verwendung von JS zur Simulation eines Auswahlfelds erfordert viel Arbeit und sorgfältige Tests. Auch wenn das Unternehmen bereit ist zu investieren, kann es einige Funktionen nativer Steuerelemente immer noch nicht realisieren. Beispielsweise habe ich im Amazon-Auswahlfeld oben den Browser sehr weit nach unten gezogen, sodass die Dropdown-Liste aus dem Browser herausragen kann.

Für ein kleines „visuelles Dessert“ gehen bei der Interaktion zwar viele praktische Details verloren und es wird viel Zeit der Front-End-Programmierer verschwendet, das Ergebnis ist jedoch eine undankbare Aufgabe, die wirklich schrecklich ist.

PS: Um ein benutzerdefiniertes Auswahlfeld verwenden zu können, müssen die folgenden Bedingungen erfüllt sein:

1. Seien Sie so verrückt wie Google und bereit, viel Zeit und Ressourcen zu investieren.
2. Seien Sie so akribisch wie Google. Wenn Sie etwas tun wollen, tun Sie es gut. Wenn Sie etwas simulieren wollen, simulieren Sie es gründlich.
3. Über die Web-App bewerben.

Leider gibt es im Land kein so verrücktes und penibles Unternehmen wie Google oder Facebook.