编者按:产品经理经常会遇到Web后台产品的搜索页面设计，那么他们在绘制时遵循哪些常见的规范呢？本文详细介绍了Web后端产品搜索页面的原型规范。我们一起来看看。

Web后台产品的搜索页面通常和列表页面是一样的，那么在绘制的时候遵循哪些常见的规范呢？

首先，让我们来看看常见的搜索页面效果，然后我们还可以体验相应的交互原型:https://yhiexq.axshare.com

首先，搜索词的格式

搜索词的格式建议为字段名+对应组件(包括提示文本)，但不建议只有对应组件(包括提示文本)。后者存在以下问题，建议避免:

无法方便的查看这是什么搜索项用户会不习惯这种少见的展现形式

注意:前端会根据页面宽度自动显示搜索词。需要注意的是，字段名和对应的组件是一个整体。

关于不同搜索词的详细规则，可以通过阅读作者的老文《善用Axure写PRD，APP文本框一般输入规则》来深入理解。》

二、搜索词的大小

建议字段名使用“文本标签”组件，设置中间对齐，高度修改为30px；对应的组件需要修改到30px的高度(文本框、日期选择框、下拉列表框、单选框、复选框)。

第三，搜索词对齐

在搜索项内，需要保持搜索项之间的合理对齐，这样原型显示效果会更加和谐舒适。

1.搜索词的内部对齐

搜索词中的字段名和相应的组件需要水平对齐。

操作方法:拖动相应的组件慢慢靠近字段名，水平方向会显示红色虚线，表示它们的水平对齐。然后在字段名和对应的分量之间会显示一个红色的数字，代表相邻距离px，慢慢逼近直到实际px为0。

2.搜索词的水平对齐

两个水平相邻的搜索词需要水平对齐。

操作步骤:选择下面的搜索项(需要同时选择字段名和对应的组件)，然后慢慢逼近前面的搜索项。水平方向将显示红色虚线，以表示它们的水平对齐。

然后在两个搜索词之间会显示一个红色数字，代表相邻距离px，慢慢逼近直到实际px为20。

3.搜索词的外部对齐(垂直)

有必要在两个垂直相邻的搜索词之间保持垂直对齐。

操作步骤:选择以下搜索项(需要同时选择字段名和对应的组件)，然后慢慢逼近上述搜索项的垂直位置，垂直方向会显示红色虚线，表示它们的垂直对齐。

然后在两个搜索词之间会显示一个红色数字，代表相邻距离px，慢慢逼近直到实际px为10。

第四，提交搜索词

1.提交按钮

点击搜索按钮，向后端提交搜索条件，返回相应的搜索结果，其中包含列表数据。

注意:不要使用“点击搜索”的交互逻辑，比如下拉列表框选择后自动搜索，比如文本框输入后自动搜索。

2.复原按钮

当搜索项目较多时，建议在搜索按钮后面放一个重置按钮。要重置按钮，建议将填充颜色设置为灰色，以削弱视觉效果。毕竟用它的概率不高。

单击重置按钮，将所有搜索条件恢复到初始状态，并将列表数据重置到初始状态。当然刷新页面可以达到类似的效果，但是在某些场景下，进入一个页面的时候，会自带指定的搜索条件。