本文為我們介紹了設(shè)計(jì)一個(gè)完美的搜索框時(shí)，需要具備的設(shè)計(jì)要素以及注意事項(xiàng)。

搜索框是文本輸入框和提交按鈕的組合。有人可能會(huì)認(rèn)為搜索框不需要設(shè)計(jì)，畢竟，這只是兩個(gè)簡單元素的組合。但是，在內(nèi)容密集的應(yīng)用或者網(wǎng)站上，搜索框通常是用戶最常用的設(shè)計(jì)元素。當(dāng)用戶遇到相對(duì)復(fù)雜的網(wǎng)站時(shí)，他們將立即尋找搜索框以快速而輕松地到達(dá)最終目的地。此時(shí)，搜索框的設(shè)計(jì)及其可用性就顯得尤為重要。

在本文中，我們將看到如何改進(jìn)此元素，以節(jié)省用戶前往目的頁面所需要的時(shí)間。

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

在你設(shè)計(jì)的搜索框內(nèi)放置放大鏡圖標(biāo)。圖標(biāo)是對(duì)象、動(dòng)作或想法的直觀表示。有一些圖標(biāo)得到了用戶的普遍認(rèn)可，放大鏡圖標(biāo)就是其中之一。

用戶即使沒有文本標(biāo)簽也可以識(shí)別放大鏡圖標(biāo)

提示：使用示意圖標(biāo)的最簡單版本即可，較少的圖形細(xì)節(jié)可加快識(shí)別速度。

02 突出顯示搜索入口

如果搜索對(duì)您的應(yīng)用程序/網(wǎng)站很重要，則應(yīng)突出顯示，因?yàn)檫@可能是用戶發(fā)現(xiàn)信息的最快途徑。

左：搜索功能隱藏在圖標(biāo)后面。圖片來源：thinkwithgoogle

顯示完整的搜索入口很重要，因?yàn)閷⑺阉鞴δ茈[藏在圖標(biāo)后面，不僅弱化了搜索功能，還額外增加了交互的成本：

圖片來源：AntonioJDN

不要在搜索中使用漸進(jìn)式披露，因?yàn)樗[藏了上下文。

03 為搜索框提供按鈕

按鈕可以幫助人們認(rèn)識(shí)到，還有另外一個(gè)步驟可以觸發(fā)搜索操作——即使他們決定通過按Enter來執(zhí)行此操作。

提示：

• 適當(dāng)調(diào)整提交按鈕的大小，以便用戶不必非常精確地操控鼠標(biāo)。較大的可單擊區(qū)域使查找和單擊更加容易。
• 讓用戶可以通過使用Enter或者單擊按鈕來提交搜索。許多用戶仍然習(xí)慣單擊實(shí)際按鈕來提交搜索。

04 在每個(gè)頁面上放置搜索框

我們應(yīng)該在每個(gè)頁面上，給用戶提供搜索的入口，因?yàn)槿绻脩粽也坏剿璧膬?nèi)容，則無論他們?cè)诰W(wǎng)站中的位置如何，他們都將嘗試使用搜索功能。

可以參考最近改版的淘寶，頂部的搜索隨時(shí)隨地都在，無論是查看寶貝評(píng)價(jià)還是寶貝詳情。

05 使搜索簡單

如果設(shè)計(jì)一個(gè)搜索框，請(qǐng)確保它看起來像一個(gè)搜索框，并且使用起來盡可能簡單。根據(jù)可用性研究，默認(rèn)情況下不顯示任何高級(jí)搜索選項(xiàng)對(duì)用戶更加友好。高級(jí)搜索選項(xiàng)（例如下面示例中的布爾搜索查詢）可能會(huì)使嘗試使用它的用戶感到困擾。

布爾搜索

06 將搜索框放在用戶希望找到的地方

搜索框應(yīng)該被設(shè)計(jì)得突出并且容易被發(fā)現(xiàn)的。若用戶需要額外在頁面上花費(fèi)精力來尋找搜索框，是不好的體驗(yàn)。

你在下面看到的圖表是由A. Dawn Shaikh和Keisi Lenz進(jìn)行的一項(xiàng)研究得出的：它顯示了142位受訪者，對(duì)站點(diǎn)搜索功能的預(yù)期位置分布圖。研究發(fā)現(xiàn)，對(duì)用戶來說最方便的位置是站點(diǎn)上每個(gè)頁面的左上角或右上角，用戶可以使用常見的F形掃描模式輕松找到它。

該圖說明了參與者希望找到該搜索的區(qū)域。右上角仍然是用戶希望找到搜索的第一個(gè)位置

因此，將搜索框放置在布局的右上角或中上角區(qū)域，可以確保用戶可以在期望的位置找到它。

內(nèi)容豐富的YouTube的搜索位于中上方

提示：

• 理想情況下，搜索框應(yīng)該和網(wǎng)站的總體設(shè)計(jì)保持協(xié)調(diào)，但還應(yīng)在用戶需要時(shí)設(shè)法使其脫穎而出。
• 你擁有的內(nèi)容越多，你就越想突出顯示搜索功能。如果搜索對(duì)你的站點(diǎn)至關(guān)重要，請(qǐng)使用強(qiáng)烈的對(duì)比度，以使搜索框從背景和周圍的元素中脫穎而出。

07 為搜索框設(shè)置適當(dāng)?shù)拈L度

文本輸入框過短，是設(shè)計(jì)中的常見錯(cuò)誤。當(dāng)然，用戶依然可以鍵入長文本進(jìn)行查詢，但是頁面上只能顯示一部分內(nèi)容，這意味著可用性很差，因?yàn)橛脩魺o法輕松查看和編輯文本。

實(shí)際上，當(dāng)搜索框的可見字符數(shù)量有限時(shí)，用戶如果使用較長的查詢文本，將很難且不便閱讀。所以，用戶會(huì)被迫去使用一些相對(duì)簡短、不精確的查詢文本。如果文本輸入框的長度，可以根據(jù)預(yù)期的輸入內(nèi)容的長度而定，將會(huì)更加易于使用。

經(jīng)驗(yàn)法則是輸入27個(gè)字符的文本（可容納90％的查詢）。

亞馬遜使用適當(dāng)大小的搜索框。

提示：考慮使用長度可變的搜索框，該搜索框會(huì)在單擊時(shí)擴(kuò)展文本輸入框的長度。這樣在可以節(jié)省屏幕空間的同時(shí)，仍然為用戶提供足夠的視覺提示，以快速查找并執(zhí)行搜索。

08 使用自動(dòng)提示機(jī)制

自動(dòng)建議機(jī)制，可以根據(jù)用戶輸入的字符來預(yù)測(cè)所要查詢的內(nèi)容，幫助用戶找到合適的查詢關(guān)鍵詞。自動(dòng)建議機(jī)制并不是要加快搜索過程，而是要指導(dǎo)用戶并幫助他們構(gòu)建搜索查詢。當(dāng)自動(dòng)完成建議機(jī)制有效時(shí)，它可以幫助用戶更好地完成搜索查詢。

Google搜索從2008年就掌握并開始實(shí)施這種模式。因?yàn)橛脩魞A向于不止一次地搜索相同的東西，于是谷歌通過記住搜索歷史，為用戶節(jié)省了時(shí)間，創(chuàng)造了一種更加便捷的體驗(yàn)。

提示：

• 確保自動(dòng)建議機(jī)制有用。設(shè)計(jì)不當(dāng)?shù)淖詣?dòng)建議可能會(huì)使用戶感到困惑，且會(huì)分散用戶的注意力。因此，請(qǐng)使用拼寫自動(dòng)更正，詞根識(shí)別和預(yù)想性文本來改進(jìn)搜索功能。
• 您應(yīng)該盡快提供自動(dòng)建議。以提供即時(shí)價(jià)值信息，并減少用戶數(shù)據(jù)輸入的工作量。
• 建議項(xiàng)少于10個(gè)（并且沒有滾動(dòng)條），避免用戶因?yàn)榫薮蟮男畔⒘慷恢搿?/li>
• 允許使用鍵盤操作建議列表。允許用戶通過ESC鍵退出列表。
• 差異化顯示輸入信息和建議信息之間的差異。

自動(dòng)完成模式可以節(jié)省用戶時(shí)間，甚至可以建議內(nèi)容或適當(dāng)?shù)拇朕o。

09 明確說明用戶可以搜索的內(nèi)容

最好在輸入框中有一個(gè)示例文本，以便向用戶展示該搜索功能的用途。如果可以搜索多個(gè)內(nèi)容，則使用輸入提示進(jìn)行解釋，如下圖：

提示：務(wù)必將提示的內(nèi)容限制為幾個(gè)詞，否則會(huì)適得其反，增加用戶認(rèn)知負(fù)擔(dān)。

結(jié)論

在構(gòu)建一個(gè)應(yīng)用或者網(wǎng)站的時(shí)候，搜索是一個(gè)最基本的功能，也是很關(guān)鍵的元素。對(duì)搜索框的一個(gè)很小的改變，比如提供合適的輸入框長度，或者指明搜索字段中的信息，都可以顯著提高搜索的可用性和用戶體驗(yàn)。

編譯作者：張大俠，公眾號(hào)：「?jìng)b俠說」

本文由 @張大俠 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。