UI大牛教你做一個(gè)完美的搜索框

看到這個(gè)標(biāo)題，你可能會(huì)認(rèn)為搜索是不需要設(shè)計(jì)的，畢竟只是一個(gè)文字輸入框和搜索按鈕的組合。

然而，在信息爆炸的互聯(lián)網(wǎng)時(shí)代，搜索框成為我們每天必須要使用到的功能。當(dāng)用戶(hù)面對(duì)復(fù)雜的網(wǎng)站，難以找到自己想要看到東西的時(shí)候，他們會(huì)立即尋找并使用搜索框，快速的達(dá)到目的。這時(shí)候搜索功能的設(shè)計(jì)以及易用性就會(huì)顯得尤為重要。本次我從“搜索框（一）”和下期的“搜索結(jié)果（二）”倆部分來(lái)分享比較正確的做法。

1.使用放大鏡圖標(biāo)

在用戶(hù)界面中放大鏡圖標(biāo)和搜索功能如影隨行，圖標(biāo)是對(duì)于操作對(duì)象、動(dòng)作或想法可視化的表達(dá)，用戶(hù)具有普遍認(rèn)知的圖形元素，我們通常也稱(chēng)之為icon。放大鏡就是這樣的圖標(biāo)之一。

提示:盡量使用最簡(jiǎn)單的圖形，較少的使用細(xì)節(jié)裝飾會(huì)提高識(shí)別效率。

2.顯示搜索字段

如果你設(shè)計(jì)的產(chǎn)品中搜索是一個(gè)高頻操作的功能，你應(yīng)該將它放在相對(duì)明顯和便捷的位置，便于用戶(hù)快速找到并使用。

顯示完整的搜索提示字段很重要，因?yàn)殡[藏在圖標(biāo)中的搜索會(huì)使得搜索功能不那么明顯，并增加無(wú)效的交互成本。

盡量避免這種形式的設(shè)計(jì)，因?yàn)樗[藏了搜索提示

3.為搜索框設(shè)計(jì)一個(gè)搜索按鈕。

一個(gè)搜索按鈕可以明確的告知用戶(hù)，激活搜索框后的額外操作，即使他們已經(jīng)決定了按下Enter鍵。

提示

• 適當(dāng)?shù)恼{(diào)整提交按鈕觸發(fā)區(qū)域的大小，使用戶(hù)不必精確的指向就可以操作，更大的點(diǎn)擊區(qū)域使其更容易被發(fā)現(xiàn)和便于點(diǎn)擊。
• 雖然大部分用戶(hù)會(huì)通過(guò)Enter鍵提交搜索結(jié)果，但是依然有不少用戶(hù)習(xí)慣于使用鼠標(biāo)點(diǎn)擊實(shí)際按鈕來(lái)完成操作，倆個(gè)操作方式應(yīng)當(dāng)同時(shí)存在。

4.每一個(gè)頁(yè)面都出現(xiàn)搜索框

你的用戶(hù)應(yīng)該在每個(gè)頁(yè)面都可以使用搜索功能，不論他們?cè)诰W(wǎng)站的什么位置，當(dāng)他們找不到他們正在查找的內(nèi)容的時(shí)候，他們將嘗試使用搜索功能。

5.設(shè)計(jì)一個(gè)簡(jiǎn)單的搜索框

讓搜索框看起來(lái)盡可能的簡(jiǎn)單。根據(jù)可用性研究，在默認(rèn)情況下不顯示高級(jí)搜索是更友好的選擇。在下面的例子中，高級(jí)搜索會(huì)使用戶(hù)感到疑惑。

6.將搜索框放在用戶(hù)更希望看到的地方

也就是說(shuō)，搜索框的位置要盡可能符合大部分用戶(hù)的心理預(yù)期。

A.Dawn Shaikh和Keisi Lenz做了一個(gè)研究，研究結(jié)果（如下圖）表示了142位參與者在調(diào)查中預(yù)期搜索功能在網(wǎng)頁(yè)中出現(xiàn)的位置。研究發(fā)現(xiàn)，將搜索功能放在網(wǎng)站的左上角或者右上角是最好的選擇，用戶(hù)可以使用常見(jiàn)的“F形”掃描模式輕松找到。

因此，將搜索框放在頁(yè)面的右上角或者中上部區(qū)域，是用戶(hù)預(yù)期出現(xiàn)的位置。

提示：

• 理想情況下，搜索功能應(yīng)該匹配于網(wǎng)站的整體設(shè)計(jì)，在用戶(hù)需要的時(shí)候出現(xiàn)。
• 網(wǎng)站的內(nèi)容越多，搜索功能顯得越重要，如果搜索對(duì)你的網(wǎng)站至關(guān)重要，就要從視覺(jué)、尺寸、位置、顏色等方面增強(qiáng)搜索的權(quán)重，以便搜索功能在復(fù)雜的內(nèi)容中脫穎而出。

7.確保輸入框可以容納足夠的字段

輸入框設(shè)計(jì)的太窄是設(shè)計(jì)師常見(jiàn)的錯(cuò)誤做法，如果輸入框不夠?qū)?，?dāng)用戶(hù)在輸入框內(nèi)輸入較長(zhǎng)的文本查詢(xún)時(shí)，意味著有一部分文字將不被看到，用戶(hù)無(wú)法輕松的查看和編輯他查詢(xún)的內(nèi)容，可用性將非常差。當(dāng)輸入框僅允許輸入有限可見(jiàn)的文本時(shí)，用戶(hù)將被迫用短的，不精確的查詢(xún)，因?yàn)檩^長(zhǎng)的查詢(xún)難以閱讀。有好的做法是輸入框根據(jù)用戶(hù)預(yù)期輸入的文本調(diào)整大小，那么他們將更容易幫助用戶(hù)閱讀和查詢(xún)。

研究表明，可容納27個(gè)字符的搜索框可以滿足90％用戶(hù)的搜索需求。

提示：考慮使用可變化的寬度的搜索框（激活輸入框后輸入框變寬），這樣既可以節(jié)省屏幕空間，也可以為用戶(hù)提供足夠的可視化提示，以便快速查找和執(zhí)行搜索動(dòng)作。

8.啟用“搜索聯(lián)想”機(jī)制

“搜索聯(lián)想”（自動(dòng)建議）可以幫助用戶(hù)通過(guò)已輸入的文本來(lái)預(yù)測(cè)可以找到的查詢(xún)結(jié)果。搜索聯(lián)想的目的不是加快搜索的過(guò)程，而是幫助用戶(hù)構(gòu)建正確的搜索查詢(xún)機(jī)制。常見(jiàn)的場(chǎng)景是：當(dāng)用戶(hù)第一次搜索沒(méi)有得到想要的結(jié)果時(shí)，稍后會(huì)更少使用搜索，意味著更低的成功率。事實(shí)是用戶(hù)會(huì)就此放棄搜索。所以搜索聯(lián)想會(huì)幫助用戶(hù)更好的構(gòu)建搜索路徑。

Google字2008年以來(lái)掌握并實(shí)施“搜索聯(lián)想”，由于搜索引擎會(huì)記住用戶(hù)每多一次且相同的搜索記錄，所以Google為用戶(hù)節(jié)省了時(shí)間并創(chuàng)造了更加便捷的體驗(yàn)。

提示：

• 確保搜索聯(lián)想是有效的，設(shè)計(jì)不完善的搜索聯(lián)想會(huì)混淆和分散用戶(hù)的注意力，所以使用拼寫(xiě)自動(dòng)更正、詞根識(shí)別、語(yǔ)義識(shí)別和預(yù)測(cè)，可以改進(jìn)搜索體驗(yàn)。
• 盡可能快速的提供搜索聯(lián)想，例如輸入到第三個(gè)字的時(shí)候，就給用戶(hù)提供相匹配的聯(lián)想詞匯，以此減少用戶(hù)數(shù)據(jù)錄入的工作，
• 只提供少于10個(gè)項(xiàng)目的聯(lián)想詞句（不建議使用滾動(dòng)條），否則信息將會(huì)變得難以承受。
• 允許用戶(hù)通過(guò)鍵盤(pán)的上下鍵控制選擇列表，當(dāng)滾動(dòng)到最后一個(gè)項(xiàng)目，如果繼續(xù)向下翻動(dòng)則自動(dòng)返回到列表頂部，用戶(hù)也可以使用Esc按鍵關(guān)閉搜索聯(lián)想列表。
• 已輸入文本和建議文本視覺(jué)上保持差異（例如，通常情況下建議的詞匯通過(guò)加粗表示）

9.描述用戶(hù)可以搜索的內(nèi)容

在輸入框中可以添加搜索示例，告知用戶(hù)那些內(nèi)容是可以搜索的，以及如何使用功能。如果用戶(hù)可以搜索多個(gè)條件，請(qǐng)使用輸入提示模式說(shuō)明。

（Html5的技術(shù)將文本占位符添加到輸入框中是極其容易的）

提示：簡(jiǎn)要的概述，否則會(huì)增加用戶(hù)的認(rèn)知負(fù)擔(dān)。

結(jié)論

搜索是構(gòu)建內(nèi)容繁重應(yīng)用程序或門(mén)戶(hù)網(wǎng)站最基本和最關(guān)鍵的功能。即使最小的變化，例如輸入框可輸入的字段大小或搜索框中的提示字段信息可有效的提升搜索的可用性以及整體的用戶(hù)體驗(yàn)。

相關(guān)文章--《UI大牛揭秘28APP8.0版本設(shè)計(jì)技巧》