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