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