Web後臺產品的搜尋頁原型規範
編輯導語：產品經理經常會遇到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 協議