Suche mit Filtern Responsives Designmuster

Ich interessiere mich schon lange für Designmuster. Häufige und bewährte Lösungen für Designprobleme. Zu viele Einstellungen, um sie auf einmal anzuzeigen, und es verwirrt den Benutzer? Packen Sie sie in logische Gruppen und verwenden Sie ein Akkordeon-Designmuster! Muster wurden mit dem Aufkommen des responsiven Designs noch interessanter. Wie halten sich diese Muster, wenn sich der verfügbare Bildschirmplatz ändert?

Wir könnten vielleicht sechs oder mehr Tabs auf einem Laptop-Bildschirm unterbringen, aber auf den meisten Mobilgeräten ist es nur wirklich praktikabel, drei unterzubringen. Was tun wir? Vielleicht funktioniert das Umwandeln in ein Akkordeon.

Brad Frost hat großartige Arbeit geleistet, indem er ein Repository von Responsive Patterns pflegt. Brad, Dave und ich saßen nach InControl herum und sprachen über Designmuster, die noch nicht so viel erforscht worden waren. Dave erwähnte „Suche mit Filtern“ als Beispiel. Es kann eine Menge UI bei einem Suchfilter geben, daher haben Sie die Herausforderung, diese anzuzeigen, ohne zu viel Platz für die eigentlichen Ergebnisse einzunehmen, und dem Benutzer zu ermöglichen, diese Filter zu ändern, ohne zu störend zu sein.

Auf dem Desktop können Sie ein Design mit getrennten Spalten erstellen, wobei die Filter links und viel Platz für die Ergebnisse sind.

Auf einem kleineren Bildschirm haben Sie jedoch nicht den Platz, um dieses geteilte Panel zu realisieren. Sie können es jedoch in eine Spalte quetschen.

Beachten Sie, wie der Titel „Suchfilter“ zu einem offensichtlichen Link wurde (nur CSS-Änderungen). Diese einfache Filtergruppe nimmt bereits ziemlich viel Platz ein. Wenn es komplizierter wird, hätten Sie eine Vollbildfilterung, bevor Sie überhaupt Ergebnisse sehen. Wahrscheinlich ist es am besten, daraus einen Link zu machen, der die Filter ein- und ausblendet.

Nun stellt sich die Frage: Wie greift man auf diese Filter zu, wenn man weit genug nach unten gescrollt hat, sodass sie verschwunden sind? Vielleicht gibt es einen unendlichen Scroll von Suchergebnissen, was ein großartiges Muster für etwas wie Bilder sein kann. Aber Sie sind ziemlich weit nach unten gescrollt und möchten nun die Filter ändern. Vielleicht könnten wir, sobald wir an den Filtern vorbeigescrollt sind, eine „Filterleiste“ am oberen Bildschirmrand anbringen, die den Zugriff ermöglicht, egal wie weit Sie gescrollt haben.

Die sich genauso öffnen und ändern lässt wie wenn sie sich oben auf der Seite befindet.

Und das ergibt ein Muster!

Aber, [Einwand einfügen]!

Sicherlich deckt dieses Muster nicht alle möglichen Bedürfnisse ab. Designmuster tun das oft nicht. Es sind Muster, keine Vorgaben.

Google Bildersuche (zumindest auf iOS) hat ein paginiertes Raster von Bildern, sodass Sie die Kopfzeile, in der Sie filtern können, nicht aus den Augen verlieren.

Sollte die feste Leiste auch das Suchfeld enthalten? Vielleicht. Was passiert, wenn Sie einen Filter ändern und dadurch *mehr* angezeigt wird? Vielleicht scrollen Sie zum ersten neu angezeigten Element. Vielleicht bleiben Sie so nah wie möglich an Ihrer Position und erhalten einen visuellen Hinweis auf neue Ergebnisse anderswo. Würde ein „Zurück nach oben“-Link nicht genauso gut funktionieren? Vielleicht. Es sind alles nur Denkanstöße.

Das Muster

Die Technik dafür ist nicht besonders faszinierend. Ich bin mir nicht sicher, ob sie eine Zeile für Zeile CSS-Analyse verdient. Im Wesentlichen wird das Zwei-Spalten-Design in eines gequetscht, während eine schmale Bildschirm- Media Query übereinstimmt.

Das JavaScript zur Korrektur der Header-Position ist etwas interessanter. Ich habe im Wesentlichen diese „Persistente Header“-Technik verwendet. Nur in diesem Artikel wurden die Header geklont und der Klon bei Bedarf angezeigt. Ich fand das etwas übertrieben. In diesem Fall wird der Suchfilterbereich selbst einfach zur festen Position. Um den Sprung zu verhindern, der auftritt, wenn ein Element, das sich früher „im Fluss“ befand, aus dem Fluss gerät, messe ich die Höhe und füge Polsterung zur Kompensation hinzu.

Das gesamte JavaScript wird, da es sich um „Suche“ dreht, in einem einzigen Objekt zusammengefasst, was eine einfache, aber gute Methode zur Strukturierung von JavaScript ist.

---

Haben Sie eine Verbesserung? Ein anderes Muster, um dasselbe Problem zu lösen? Markieren Sie es mit „filtered-search“ auf CodePen.