筛选与排序系统
目的
筛选与排序系统为设计发现界面提供了一种方法论，帮助用户浏览大型数据集或产品目录。虽然技术实现处理逻辑，但该系统定义了发现工具的空间构成和视觉暗示。它确保用户能够轻松地精炼视图、理解当前过滤状态，并在不丢失上下文或感到不知所措的情况下切换优先级模式（排序）。
使用场景
- 为电子商务网站设计侧边栏或顶部栏发现层。
- 为目录或资源中心组织复杂的搜索结果页面（SERP）。
- 为移动优先应用程序界面实现“发现抽屉”。
- 为内容密集型文档或博客存档创建分面导航。
何时不应使用
- 小型数据集（少于12个项目）： 如果所有内容都能在一个视图中展示，添加过滤和排序会引入不必要的交互成本。
- 单路径工作流： 用户需要遵循线性序列而非浏览目录的场景。
- 原始数据表格： 用户可能使用浏览器原生“查找”或高级电子表格工具的场景（虽然高级排序仍然有帮助）。
输入
- 分面清单： 用户可按其筛选的所有属性列表（例如：尺寸、颜色、评分、价格）。
- 优先级排序： 哪些分面是“主分面”（80%的用户使用）与“次分面”（小众规格）。
- 控件类型： 将数据类型映射到UI控件（例如：多选用复选框，价格用范围滑块）。
- 布局上下文： 可用的水平和垂直空间（来自
responsive-grid-system）。
输出
- 发现布局蓝图： 筛选栏（侧边栏与顶部栏）和结果网格的已定义位置。
- 分面组件规格： 在发现上下文中的复选框、色块和范围输入的视觉设计。
- 状态图： 活动筛选（标签/药丸）、加载状态（骨架屏）和空状态的视觉处理。
- 响应式策略： 筛选器从桌面端（如侧边栏）转换到移动端（如底部抽屉）的计划。
工作流
1. 选择主要布局模式
根据分面数量选择空间布局：
- 侧边栏（左/右）： 适用于5个及以上分面。提供高可见性和对发现工具的持续访问。
- 水平顶部栏： 适用于1–4个分面。最大化结果区域的宽度，但如果后续添加更多分面可能会变得杂乱。
- 覆盖层/抽屉模式： 适用于移动端或“简洁”的桌面界面，发现是次要任务。
2. 定义分面视觉层级
将visual-hierarchy-system原则应用于筛选列表：
- 分组标题： 使用粗体、简洁的标题（例如：类别、品牌）。
- 控件尺寸： 确保复选框和文本链接有足够的垂直间距（通常为
--space-s）。 - 初始展开与折叠： 展开前3个最常用的分面；折叠其余分面以节省垂直空间。
3. 设计“活动状态”系统
用户必须始终知道哪些筛选条件已应用：
- 摘要（标签/药丸）： 在结果上方或侧边栏顶部放置一行水平的活动筛选条件。
- 清除全部： 提供一个突出、单一的操作来重置整个视图。
- 视觉反馈： 当切换筛选条件时，结果容器应指示其正在“更新”（例如：20%不透明度或骨架屏）。
4. 建立排序暗示
区分包含性（过滤）和优先级（排序）：
- 放置位置： 将排序控件放在结果区域的右上角或左上角，与筛选器分开。
- 标签： 使用清晰的标签，如“排序依据：价格（从低到高）”，而不仅仅是“价格”。
5. 规划移动端发现
- 发现触发器： 在屏幕底部或顶部使用一个粘性按钮（例如：“筛选与排序”）。
- 抽屉模式： 在全屏或底部抽屉中打开筛选器，以最大化触摸目标尺寸。
- 即时与批处理： 决定移动端视图是应即时更新（分面式）还是需要“显示X条结果”按钮来应用。
决策规则
- “80/20”规则： 仅显示任何给定分面前5个值；使用“显示更多”链接来显示其余值。
- 侧边栏与顶部栏： 如果分面列表在标准笔记本电脑屏幕上需要滚动，则使用侧边栏。如果它适合在一行内显示，则使用顶部栏。
- 选择状态保持： 已应用的筛选条件必须保持可见，即使它们已滚出侧边栏（例如，使用粘性标签栏）。
- 空状态回退： 绝不允许筛选组合导致死胡同；始终提供“重置”按钮或建议的替代方案。
约束
- 无障碍性： 所有筛选控件必须有可见的焦点环，并可通过键盘操作。对可折叠分面使用
aria-expanded，对结果计数/容器使用aria-live="polite"，以便屏幕阅读器用户知道结果何时更新。 - 响应式： 筛选器必须在移动端堆叠或移入抽屉，以避免水平溢出或“挤压”内容网格。当筛选栏可能出现在多个布局上下文（例如侧边栏与嵌入式小部件）中时，优先使用容器查询而非视口断点。
- 对比度： 确保活动/选定状态（例如选中的框或蓝色标签）与背景的对比度至少为3:1。
常见失败模式
- “神秘筛选”： 用户无法判断哪些筛选条件处于活动状态，因为没有摘要标签/药丸栏。
- “无限侧边栏”： 侧边栏过长，管理起来变成一项任务，通常是由于未对长列表使用“显示更多”造成的。
- 移动端拥挤： 试图将桌面侧边栏塞进移动端视图，导致结果网格无法阅读。
- 缺少“已应用”反馈： 切换筛选条件后，结果网格没有视觉指示变化（即使变化很快）。
- 死胡同： 筛选后得到零个项目，且没有提供返回的方式。
验证标准
- 明确区分过滤（包含性）和排序（优先级）。
- 活动筛选条件以视觉方式汇总（例如：标签/药丸）。
- 最常用的分面默认展开；其他分面可折叠。
- “清除全部”或“重置”操作易于访问。
- 系统提供特定于移动端的发现模式（例如：抽屉）。
- 定义加载状态（骨架屏/加载动画），用于结果更新时。
- 所有控件满足触摸目标尺寸（根据WCAG 2.2 SC 2.5.8，最小24x24px，首选44x44px）和键盘无障碍要求。