眾所周知，搜索欄是APP UI 界面設(shè)計(jì)的高頻組件，我們經(jīng)常用的客戶端幾乎都能見(jiàn)到，比如上外賣(mài)軟件想吃份麻辣燙，逛淘寶想買(mǎi)雙黑色運(yùn)動(dòng)鞋，比如遇到什么問(wèn)題想谷歌百度一下，這時(shí)候都會(huì)用到搜索欄，搜索是最快速又最有效的方式，這也漸漸形成了用戶習(xí)慣。

這時(shí)候你可能認(rèn)為一個(gè)小小的搜索欄有什么好設(shè)計(jì)的？如果你這樣想的話，那就大錯(cuò)特錯(cuò)了。

今天就如何把握搜索欄的設(shè)計(jì)要素給大家一些小建議。

1. 讓搜索框處于合理的位置

當(dāng)用戶想要搜索內(nèi)容的時(shí)候還需要花費(fèi)精力來(lái)尋找搜索框，這就非常尷尬了。這意味著搜索框本身就不容易被察覺(jué)。在理想情況下，搜索框的設(shè)計(jì)應(yīng)當(dāng)和整個(gè)網(wǎng)站設(shè)計(jì)風(fēng)格保持一致，同時(shí)在視覺(jué)上要略顯突出，應(yīng)將搜索欄放置在醒目的位置，便于用戶發(fā)覺(jué)它的存在。將搜索欄放在隱蔽位置的app會(huì)讓用戶覺(jué)得沮喪，也會(huì)讓用戶的操作流程變慢。

很多電商app都將搜索欄放在首頁(yè)頂部，對(duì)擁有大量商品的app來(lái)說(shuō)，將搜索欄放在這樣的位置，能夠讓它既明顯又能夠很快被找到。

2、將放大鏡圖標(biāo)和搜索欄放一起

只有少數(shù)圖標(biāo)具有世界范圍內(nèi)的廣泛認(rèn)知度，放大鏡圖標(biāo)恰恰是其中一個(gè)。就算你沒(méi)有使用文字標(biāo)簽說(shuō)明，用戶也能將放大鏡圖標(biāo)看作是“搜索”的意思。你應(yīng)該使用一個(gè)粗線條，最簡(jiǎn)化的放大鏡圖標(biāo)。因?yàn)閳D形細(xì)節(jié)越少，認(rèn)知速度越快。

3、讓搜索欄盡量簡(jiǎn)單

在你設(shè)計(jì)搜索框的時(shí)候，請(qǐng)盡量讓它看起來(lái)就是一個(gè)搜索欄，并且簡(jiǎn)單易用?？捎眯匝芯勘砻?，默認(rèn)沒(méi)有顯示高級(jí)選項(xiàng)的搜索欄看起來(lái)更加友好，所以，通常情況下給用戶提供的搜索框最好不要提供進(jìn)階的搜索選項(xiàng)。

4、合理的輸入框尺寸

輸入框太小是最常見(jiàn)的搜索欄目設(shè)計(jì)錯(cuò)素，雖然用戶可以輸入比輸入框更長(zhǎng)的內(nèi)容，但是可見(jiàn)的部分往往無(wú)法完全可見(jiàn)，這種設(shè)計(jì)的可用性并不強(qiáng)。這樣的輸入框可能因?yàn)榭梢暦秶南拗疲偈褂脩羰褂枚痰?、不精確的查詢方式，因?yàn)楦L(zhǎng)的內(nèi)容并不適合閱讀。如果輸入框能夠符合用戶的常見(jiàn)輸入內(nèi)容的尺寸來(lái)進(jìn)行匹配，那么它的可用性會(huì)更強(qiáng)。

5、讓用戶明白哪些可以搜索到

最好是在輸入框中包含示例，這樣可以向用戶給予建議。我們?cè)谒阉鳈谠O(shè)計(jì)的時(shí)候就要注意，設(shè)計(jì)一些利于用戶使用的小元素，比如在搜索欄里加入索引“輸入關(guān)鍵詞”這一類(lèi)的提示。當(dāng)我們的用戶點(diǎn)擊搜索欄進(jìn)行搜索的時(shí)候這些提示就要自動(dòng)的消失，不然用戶還需要手動(dòng)去刪除，然后再進(jìn)行搜索，這樣是很不方便的。在用戶搜索完成后，他們需要搜索其他東西時(shí)，我們應(yīng)該在搜索框右邊加上一個(gè)小小的刪除按鈕，這樣非常方便用戶進(jìn)行多次的搜索。