二、搜索項(xiàng)大小

字段名建議使用“文本標(biāo)簽”元件，設(shè)置中部對(duì)齊，高度修改為30px；相應(yīng)元件需要修改高度為30px（文本框、日期選擇框、下拉列表框、單選框、復(fù)選框）。

三、搜索項(xiàng)對(duì)齊

搜索項(xiàng)內(nèi)部，搜索項(xiàng)之間需要保持合理的對(duì)齊，這樣的原型顯示效果會(huì)比較協(xié)調(diào)舒服。

1. 搜索項(xiàng)的內(nèi)部對(duì)齊

搜索項(xiàng)內(nèi)部的字段名和對(duì)應(yīng)元件，需要保持水平對(duì)齊。

操作方法：拖動(dòng)對(duì)應(yīng)元件慢慢接近字段名，水平方向慢慢會(huì)顯示出紅色虛線代表他們水平對(duì)齊。然后字段名和對(duì)應(yīng)元件之間會(huì)顯示紅色數(shù)字代表相鄰間距px，慢慢靠近直到實(shí)際px為0即可。

2. 搜索項(xiàng)的水平對(duì)齊

水平相鄰的2個(gè)搜索項(xiàng)之間，需要保持水平對(duì)齊。

操作步驟：選擇后面搜索項(xiàng)（需要同時(shí)選擇字段名和對(duì)應(yīng)元件）然后慢慢靠近前面搜索項(xiàng)，水平方向慢慢會(huì)顯示出紅色虛線代表他們水平對(duì)齊。

然后兩個(gè)搜索項(xiàng)之間會(huì)顯示紅色數(shù)字代表相鄰間距px，慢慢靠近直到實(shí)際px為20即可。

3. 搜索項(xiàng)的外部對(duì)齊（垂直）

垂直相鄰的2個(gè)搜索項(xiàng)之間，需要保持垂直對(duì)齊。

操作步驟：選擇下面搜索項(xiàng)(需要同時(shí)選擇字段名和對(duì)應(yīng)元件)然后慢慢靠近上面搜索項(xiàng)的垂直位置，垂直方向慢慢會(huì)顯示出紅色虛線代表他們垂直對(duì)齊。

然后兩個(gè)搜索項(xiàng)之間會(huì)顯示紅色數(shù)字代表相鄰間距px，慢慢靠近直到實(shí)際px為10即可。

四、提交搜索項(xiàng)

1. 提交按鈕

點(diǎn)擊搜索按鈕，提交搜索條件到后端并返回相應(yīng)的搜索結(jié)果，搜索結(jié)果包含列表數(shù)據(jù)。

注意：不要采用即點(diǎn)即搜的交互邏輯，這樣的交互比如下拉列表框選擇后則自動(dòng)搜索，比如文本框輸入后則自動(dòng)搜索。

2. 重置按鈕

當(dāng)搜索項(xiàng)特別多的時(shí)候，建議在搜索按鈕后面放置一個(gè)重置按鈕。重置按鈕，建議填充顏色設(shè)置為灰色，弱化視覺(jué)效果，畢竟使用的概率不高。

點(diǎn)擊重置按鈕，恢復(fù)所有搜索條件到初始狀態(tài)并且將列表數(shù)據(jù)重置成初始狀態(tài)。當(dāng)然刷新頁(yè)面，也可以達(dá)到相似的效果，不過(guò)部分場(chǎng)景下進(jìn)入某個(gè)頁(yè)面的時(shí)候會(huì)自帶指定搜索條件。

#相關(guān)閱讀#