Web后臺產(chǎn)品的搜索頁原型規(guī)范

4 評論 14835 瀏覽 67 收藏 6 分鐘

編輯導(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)閱讀#

Web后臺產(chǎn)品的列表頁規(guī)范

Web后臺產(chǎn)品的詳情頁規(guī)范

Web后臺產(chǎn)品的表單頁規(guī)范

#專欄作家#

浪子,個人微信langzipm,公眾號:浪子畫原型(langzisay),專注于APP原型設(shè)計和產(chǎn)品規(guī)范。

本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 我覺得你說的對,但是領(lǐng)導(dǎo)不認同。。

    來自山東 回復(fù)
  2. 這。。。

    來自江蘇 回復(fù)
  3. 您說錯誤的那個,是我們這邊的領(lǐng)導(dǎo)要求。這東西真的看領(lǐng)導(dǎo)。

    來自北京 回復(fù)
    1. 領(lǐng)導(dǎo)的要求不一定對,但我們就得聽

      來自四川 回復(fù)