# 店面筛选 UX 指南

> Shoplazza 主题店面筛选的设计建议：列表型筛选用复选框、价格区间用输入框，以及如何呈现当前的筛选状态。

店面筛选是顾客体验的重要组成部分，能帮助顾客更快找到所需商品，从而提升商家转化率。

以下概述了筛选体验中一些关键的注意事项。

如需了解如何实现基本版本的店面筛选，请参阅[支持店面筛选](./support-storefront-filtering)。

## 为每种筛选类型提供合适的界面

共有两种筛选类型：

* [列表型](./ux-guidelines#列表型)
* [价格区间型](./ux-guidelines#价格区间型)

### 列表型

建议为 `list` 类型的 filters 使用一组复选框输入，让顾客一目了然地知道可以同时选择多个值。

例如：

### 价格区间型

建议为 `price_range` 类型的 filters 使用数字输入框，并确保数字输入框有标签，例如"最低价"和"最高价"。

## 提供筛选布局选项

在较大屏幕上，筛选有两种标准布局：

* 商品列表上方的[横向工具栏](./ux-guidelines#横向工具栏筛选)
* 商品列表左侧的[垂直侧边栏](./ux-guidelines#垂直侧边栏筛选)

为了满足不同商家的需求，建议将两种布局都作为 theme setting 选项提供。

### 横向工具栏筛选

商品列表上方的横向工具栏可以为筛选和排序提供紧凑的入口，但最适合一次需要少于五个 filters 的小型店铺。

例如：

### 垂直侧边栏筛选

商品列表左侧的垂直侧边栏最适合拥有五个以上 filters 的店铺。

例如：