編輯導語：產品經理經常會遇到Web後台產品的搜索頁設計，那麼在畫它的時候遵循哪些常見規範呢？本篇文章作者詳細介紹了Web後台產品的搜索頁原型規範，我們一起來看一下吧。
Web後台產品的搜索頁通常和列表頁是在一起的，那麼畫它的時候遵循哪些常見規範呢？
首先我們來看一下常見的搜索頁效果，然後也可以體驗相應的交互原型：https://yhiexq.axshare.com
搜索項的格式建議是字段名+相應元件(內含提示文字)，不建議只有相應元件(內含提示文字)。後者有存在如下問題，建議規避：
- 無法方便的查看這是什麼搜索項
- 用户會不習慣這種少見的展現形式
注意：前端根據頁面寬度自動對搜索項進行換行展示，需要注意的是字段名和對應元件是一個整體。
關於不同搜索項的詳細規則可以閲讀作者舊文《善用Axure寫PRD，APP文本框通用的輸入規則進行深入瞭解。》
二、搜索項大小字段名建議使用“文本標籤”元件，設置中部對齊，高度修改為30px；相應元件需要修改高度為30px（文本框、日期選擇框、下拉列表框、單選框、複選框）。
搜索項內部，搜索項之間需要保持合理的對齊，這樣的原型顯示效果會比較協調舒服。
搜索項內部的字段名和對應元件，需要保持水平對齊。
操作方法：拖動對應元件慢慢接近字段名，水平方向慢慢會顯示出紅色虛線代表他們水平對齊。然後字段名和對應元件之間會顯示紅色數字代表相鄰間距px，慢慢靠近直到實際px為0即可。
水平相鄰的2個搜索項之間，需要保持水平對齊。
操作步驟：選擇後面搜索項（需要同時選擇字段名和對應元件）然後慢慢靠近前面搜索項，水平方向慢慢會顯示出紅色虛線代表他們水平對齊。
然後兩個搜索項之間會顯示紅色數字代表相鄰間距px，慢慢靠近直到實際px為20即可。
垂直相鄰的2個搜索項之間，需要保持垂直對齊。
操作步驟：選擇下面搜索項(需要同時選擇字段名和對應元件)然後慢慢靠近上面搜索項的垂直位置，垂直方向慢慢會顯示出紅色虛線代表他們垂直對齊。
然後兩個搜索項之間會顯示紅色數字代表相鄰間距px，慢慢靠近直到實際px為10即可。
點擊搜索按鈕，提交搜索條件到後端並返回相應的搜索結果，搜索結果包含列表數據。
注意：不要採用即點即搜的交互邏輯，這樣的交互比如下拉列表框選擇後則自動搜索，比如文本框輸入後則自動搜索。
2. 重置按鈕當搜索項特別多的時候，建議在搜索按鈕後面放置一個重置按鈕。重置按鈕，建議填充顏色設置為灰色，弱化視覺效果，畢竟使用的概率不高。
點擊重置按鈕，恢復所有搜索條件到初始狀態並且將列表數據重置成初始狀態。當然刷新頁面，也可以達到相似的效果，不過部分場景下進入某個頁面的時候會自帶指定搜索條件。
#相關閲讀#Web後台產品的列表頁規範
Web後台產品的表單頁規範
#專欄作家#浪子，個人微信langzipm，公眾號：浪子畫原型(langzisay)，專注於APP原型設計和產品規範。
本文由 @浪子 原創發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自 Pexels，基於 CC0 協議