Web后台产品的搜索页原型规范思维导图

搜索项内部的字段名和对应元件，需要保持水平对齐

操作方法：拖动对应元件慢慢接近字段名，水平方向慢慢会显示出红色虚线代表他们水平对齐。然后字段名和对应元件之间会显示红色数字代表相邻间距px，慢慢靠近直到实际px为0即可

水平相邻的2个搜索项之间，需要保持水平对齐

操作步骤：选择后面搜索项（需要同时选择字段名和对应元件）然后慢慢靠近前面搜索项，水平方向慢慢会显示出红色虚线代表他们水平对齐

垂直相邻的2个搜索项之间，需要保持垂直对齐

操作步骤：选择下面搜索项(需要同时选择字段名和对应元件)然后慢慢靠近上面搜索项的垂直位置，垂直方向慢慢会显示出红色虚线代表他们垂直对齐

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

注意：不要采用即点即搜的交互逻辑，这样的 交互比如下拉列表框选择后则自动搜索，比如 文本框输入后则自动搜索

当搜索项特别多的时候，建议在搜索按钮后面放置一个重置按钮。重置按钮，建议填充颜色设置为灰色，弱化视觉效果

点击重置按钮，恢复所有搜索条件到初始状态并且将列表数据重置成初始状态。当然刷新页面，也可以达到相似的效果，不过部分场景下进入某个页面的时候会自带指定搜索条件