編者按：用戶(hù)界面設(shè)計(jì)是任何應(yīng)用程序和網(wǎng)站想要留住用戶(hù)的非常重要的一部分，而如何設(shè)計(jì)出貼合用戶(hù)習(xí)慣的服務(wù)產(chǎn)品并非一件易事。本文作者Bruno Charters在“Getting the Search Pattern Right”一文中講述了其所希望設(shè)計(jì)師們需要注意的五個(gè)細(xì)節(jié)。盡管切入點(diǎn)較為細(xì)小與零散，卻都是入行菜鳥(niǎo)甚至是老手們需要一直謹(jǐn)記的事項(xiàng)。

完美案例

1. 視覺(jué)提示

在創(chuàng)建任何類(lèi)型的用戶(hù)界面時(shí)，為用戶(hù)提供其所需的快速瀏覽頁(yè)面工具是你工作職責(zé)的一部分。這樣做可以使你的用戶(hù)確切找到他們想要的東西不論什么時(shí)候，以及一旦與其交互之后會(huì)發(fā)生什么。

（1）放大鏡圖標(biāo)

使用圖標(biāo)。我不想對(duì)其會(huì)增加找到搜索欄的速度進(jìn)行強(qiáng)調(diào)。越簡(jiǎn)單越好。越少的細(xì)節(jié)能夠保證用戶(hù)能快速地掃視它。雖然，只有一個(gè)圖標(biāo)本身而沒(méi)有一個(gè)可輸入的容器或按鈕實(shí)際上會(huì)使搜索變得更加困難。

一個(gè)極簡(jiǎn)主義搜索圖標(biāo)的例子

人們通常會(huì)意識(shí)到，一個(gè)放大鏡圖標(biāo)顯示的是一個(gè)搜索工具，即使它沒(méi)有標(biāo)簽。但是糟糕的是，只有一個(gè)圖標(biāo)則會(huì)使搜索更加困難。

（2）一個(gè)真實(shí)的搜索按鈕

并非每個(gè)人都是學(xué)會(huì)在網(wǎng)上沖浪的千禧一代，這意味著，并不是每個(gè)人都知曉在他們輸入查詢(xún)之后需要按下Enter鍵。在搜索輸入旁邊添加一個(gè)實(shí)際的按鈕將幫助用戶(hù)確認(rèn)他們的下一步行動(dòng)，進(jìn)而減少用戶(hù)所需的認(rèn)知負(fù)荷。

不要把按鈕放在左邊、上邊或下邊

小貼士：

• 或者，你可以隱藏輸入按鈕，直到文本輸入行為已經(jīng)完成。
• 確保按鈕的大小合適，這樣才使得點(diǎn)擊行為十分自然。

2. 輸入特色

有時(shí)候，最閃亮、性能最好或是更大的汽車(chē)根本無(wú)法做到這一點(diǎn)。搜索模式也一樣。

（1）像你想要表達(dá)的那樣設(shè)計(jì)

使設(shè)計(jì)符合網(wǎng)站或應(yīng)用程序的主題，同時(shí)確保它足夠突出。

YouTube新上的且令人驚喜的黑暗主題通過(guò)使搜索模式與其他元素保持一致，完美地體現(xiàn)了這一點(diǎn) ：“這并不是關(guān)于誰(shuí)最大的問(wèn)題”。

確保可輸入的長(zhǎng)度不會(huì)太短。諾曼集團(tuán)的相關(guān)研究表明，一個(gè)能輸入27個(gè)字符的輸入框，可以滿(mǎn)足90%的用戶(hù)需求。

可以輸入5個(gè)字符與26個(gè)字符的搜索框的簡(jiǎn)單例子

3. 明確占位符

在輸入的占位符文本中使用適當(dāng)?shù)母北臼呛苤匾?，通常用?hù)可以通過(guò)搜索得到提示。這會(huì)確保他們知道要搜索什么，也不會(huì)因?yàn)閷?xiě)不明白所要查詢(xún)的問(wèn)題而感到失望且無(wú)措。最近，web工具允許人們輕松地添加提示作為HTML5中的占位符來(lái)實(shí)現(xiàn)這一點(diǎn)。

添加一個(gè)占位符可以幫助用戶(hù)過(guò)濾他們的查詢(xún)行為

小貼士：

眾所周知，人類(lèi)的短期記憶能力很弱。使副本保持占位符文本的簡(jiǎn)短與直接。使用長(zhǎng)提示最終會(huì)增加認(rèn)知負(fù)荷，從而損害用戶(hù)體驗(yàn)。

某些項(xiàng)目需要一個(gè)更具體的搜索功能。在這種情況下，你可以使用懸停工具提示來(lái)確保提示在任何時(shí)候都是可見(jiàn)的，從而允許用戶(hù)能通過(guò)短期記憶去做其他事情。

在這個(gè)示例中，工具提示幫助用戶(hù)使用查詢(xún)格式以及他可以搜索的內(nèi)容。

4. 引導(dǎo)查詢(xún)自動(dòng)建議功能

通常，你的用戶(hù)會(huì)忙于思考搜索結(jié)果而不是專(zhuān)注于確保輸入一個(gè)正確的搜索查詢(xún)。對(duì)于那些無(wú)法搜索到其所期望的結(jié)果的人們來(lái)說(shuō)，也會(huì)是一個(gè)負(fù)擔(dān)。這是用戶(hù)的失誤，同時(shí)也是設(shè)計(jì)者的失誤。這也是自動(dòng)建議機(jī)制派上用場(chǎng)的地方。

這一機(jī)制的目標(biāo)不是為了更快搜索，而是在查詢(xún)建構(gòu)中提供一點(diǎn)幫助。實(shí)現(xiàn)這一目標(biāo)的方法之一是實(shí)現(xiàn)預(yù)測(cè)搜索模式。你查詢(xún)的這個(gè)怪異的詞是什么？它只是通過(guò)分析用戶(hù)寫(xiě)入的任何字符的行為，從而去預(yù)測(cè)他們的查詢(xún)目標(biāo)是什么。

眾所周知，大多數(shù)未能在第一次查詢(xún)中搜索到預(yù)期搜索結(jié)果的用戶(hù)在將接下來(lái)的嘗試中會(huì)極少成功。由雅各布·尼爾森領(lǐng)導(dǎo)的團(tuán)隊(duì)的相關(guān)研究得出同樣結(jié)論。因此，通過(guò)這樣做，除了能夠大大減少用戶(hù)進(jìn)行搜索的工作量，還使得他們查找所需內(nèi)容的成功次數(shù)增加。

小貼士：

• 不要錯(cuò)誤的給他們提供任何自動(dòng)建議。無(wú)論你使用哪種機(jī)制，確保它是有意義的且符合用戶(hù)的需要。
• 給用戶(hù)提供最近搜索歷史的視覺(jué)提示。這對(duì)于經(jīng)常性搜索行為十分有用。
• 保持簡(jiǎn)單，使用最少的元素來(lái)分隔不同的自動(dòng)建議。（也即：填充與邊界）
• 將提供給用戶(hù)的建議數(shù)量限制在5個(gè)到9個(gè)之間。記住米勒定律在用戶(hù)體驗(yàn)設(shè)計(jì)中的應(yīng)用。

5. 不要忘記位置的重要性

2006年，由A. D. Shaikh 與 K. Lenz研究發(fā)現(xiàn)，用戶(hù)對(duì)一些用戶(hù)界面元素和模式的位置有一定的期待。搜索是其中的一種模式，絕大多數(shù)用戶(hù)希望在界面的頂部或右上角找到它，就像下文所提到的研究一樣。

“許多參與者希望在網(wǎng)頁(yè)右上角或左上角處找到‘網(wǎng)站搜索引擎’位置。”

試著根據(jù)這一知識(shí)定位搜索模式進(jìn)行設(shè)計(jì)，它將確保親愛(ài)的用戶(hù)們很容易找到它。

結(jié)論

搜索是一個(gè)不斷發(fā)展中的行為模式，我知道這篇文章并沒(méi)有涵蓋所有現(xiàn)存的指導(dǎo)方針?；谶@一點(diǎn)，我希望這篇文章能幫助一些初學(xué)者，甚至是用戶(hù)界面和用戶(hù)體驗(yàn)的老手們。

在我看來(lái)，我們每天會(huì)處理太多所謂的最佳實(shí)踐，所以很容易忽略一些簡(jiǎn)單的話(huà)題，比如我在這篇文章中提到的那樣。

原文鏈接：https://uxplanet.org/getting-the-search-pattern-right-e71dbb59dc67

譯者：木木子，有36氪編譯組出品。編輯：郝鵬程

譯文地址：http://36kr.com/p/5124738.html

本文由 @郝鵬程 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議