本技能提供筛选与排序 UI 模式的设计参考,适用于列表和搜索类界面。
用途:为列表、搜索结果页选择筛控件与布局,统一交互规则。
主要能力:按场景推荐筛选控件类型——复选框适合多选分类,可展开分组;单选按钮适合单选项;范围滑块适合价格、评分、日期,使用双滑块;搜索框适合选项较多的情况,配合可搜索复选列表;开关或标签适合二值筛选。布局模式包括:侧边栏筛选(桌面端常驻,与结果并排)、顶栏筛选(结果上方横向标签或胶囊)、筛选弹窗(移动端全屏或底部抽屉)、已选条件(结果上方以可移除标签展示)。
使用规则:每次筛选变化后更新结果数量;始终显示“清除全部”按钮;移动端在筛选按钮上显示已选条件数;将筛选状态持久化到 URL,便于分享与收藏;记住最近的筛选组合。排序至少提供相关度、最新、价格、热门等选项。
适用场景:电商商品列表、内容搜索页、数据表格等需要多条件筛选的界面。
限制:资料仅列出模式与规则,未提供具体代码实现、框架集成方式、无障碍细节及具体数值阈值;实际落地需结合项目技术栈自行设计。