带筛选器的搜索响应式设计模式

我一直对设计模式很感兴趣。设计问题的常见且行之有效的解决方案。设置过多而导致用户感到困惑？将它们分成逻辑组并使用手风琴设计模式！随着响应式设计的出现，模式变得更加有趣。这些模式如何在可用屏幕空间发生变化时保持其有效性？

我们可能能够在笔记本电脑屏幕上获得六个或更多选项卡，但在大多数移动设备上，实际上只能获得三个。我们该怎么办？也许 将它们转换为手风琴 会有效。

Brad Frost 在维护 响应式模式 的存储库方面做得非常出色。Brad、Dave 和我参加了 InControl 会议后闲聊，谈论了一些尚未得到充分探索的设计模式。Dave 提到了“带筛选器的搜索”作为一个例子。搜索筛选器可能涉及相当多的 UI，因此您面临着在不占用太多实际结果空间的情况下显示这些筛选器的挑战，以及允许用户更改这些筛选器而不会造成太大干扰的挑战。

在桌面端，您可以使用带左侧筛选器的分栏设计，并为结果留出充足的空间。

但在较小的屏幕上，您将没有足够的空间来实现该分栏面板。不过，您可以将其压缩到一列中。

请注意，“搜索筛选器”标题如何变成了一个明显的链接（仅 CSS 更改）。这组简单的筛选器已经占据了相当大的空间。如果再复杂一些，您可能需要先查看一整屏的筛选器才能看到任何结果。最好将其设为一个可以隐藏/显示筛选器的链接。

现在问题变成了：在向下滑动足够远以致筛选器消失后，如何访问这些筛选器？也许您有一个无限滚动的搜索，这对于图像之类的内容来说是一个很好的模式。但是，您已经向下滚动很远，现在想要更改筛选器。也许在我们滚动经过筛选器后，我们可以让一个“筛选器栏”附加到屏幕顶部，以便无论您向下滚动多远都能访问它。

它可以像在页面顶部一样打开和更改。

这 就形成了一个模式！

但是，[插入反驳]！

当然，这种模式并非涵盖所有可能的需求。设计模式通常并非如此。它们是模式，而不是模具。

Google 图片搜索（至少在 iOS 上）具有图像的分页网格，因此您不会丢失可以进行筛选的页眉的视线。

固定栏中是否也应该包含搜索字段？也许吧。如果您更改筛选器并显示更多内容会发生什么？也许滚动到它显示的第一个新内容。也许尽可能地保留它们的位置，并以视觉方式提示其他地方有新的结果。一个“返回顶部”链接是否也能起到同样的作用？也许吧。这仅仅是抛砖引玉。

模式

此 技术的 实现过程并不那么引人入胜。我不确定它是否值得逐行进行 CSS 分析。本质上，双栏设计在窄屏 媒体查询 匹配时被压缩成一栏。

修复页眉位置的 JavaScript 稍微有趣一些。我基本上使用了这个 “持久页眉” 技术。只是在那篇文章中，页眉被克隆，并在需要时显示克隆的页眉。我认为这有点笨拙。在本例中，搜索筛选器区域本身仅变为固定位置。为了防止元素从“在流中”变为“不在流中”时发生的跳跃，我测量高度并添加填充以进行补偿。

所有 JavaScript 代码，由于它们都与“搜索”相关，因此 保存在单个对象中，这是一种简单但不错的方法来构建 JavaScript。

---

您有改进意见吗？是否有其他模式可以解决相同的问题？在 CodePen 上添加 “filtered-search” 标签。