如果您正在閱讀本文，那么您必須設(shè)計具有搜索功能的網(wǎng)站或應(yīng)用程序。在本文中，我將介紹五種可以幫助您設(shè)計更好，更有用的搜索機制的最佳實踐。

最佳實踐

　　1.視覺線索

無論是創(chuàng)建任何類型的用戶界面，快速掃描屏幕所需的工具都是您設(shè)計的一部分。這樣做可以確保您的用戶知道在哪里可以找到他們想要的內(nèi)容，何時需要使用它，以及當他們與之交互時會發(fā)生什么。

　放大鏡圖標

使用放大鏡圖標，我不能保證這會加快搜索欄搜索速度。但是圖標越簡單，其允許的細節(jié)越少，瀏覽速度越快。雖然圖標本身沒有容器或按鈕，但它實際上使搜索更加困難。

　極簡主義搜索圖標的示例

人們通常會想到一個放大鏡圖標來表示搜索工具，即使它沒有標簽描述。但是，僅顯示圖標的搜索框使搜索更加困難。 （來自NNG Katie Sherwin的“搜索設(shè)計中的放大鏡圖標>”的評論）

　一個實際的搜索按鈕

并非所有用戶都是經(jīng)驗豐富的網(wǎng)民，這意味著并非每個用戶都知道，一旦您在輸入框中輸入查詢，請按Enter鍵獲取相關(guān)信息。因此，設(shè)計搜索輸入旁邊的實際按鈕可以幫助用戶確認他們的下一個動作，從而減少用戶所需的認知負荷。

　注意：避免在輸入框的左側(cè)，頂部或底部放置按鈕。

　提示：

您可以在文本輸入獲得焦點之前隱藏輸入按鈕。

確保按鈕尺寸適中，以便在點擊時感覺自然。

　2.輸入特性

有時候，更有光澤，更強大或更大規(guī)模的東西不一定會吸引人們的注意力，搜索模式是一樣的。最好將它改成你理想的風格！但請記住，搜索框的設(shè)計必須與您的網(wǎng)站或應(yīng)用程序的主題相匹配，同時確保它足夠引人注目。

Youtube的新（令人驚嘆的）黑色主題通過保持搜索模式與其他元素保持一致來完美地說明這一點。

“搜索框不是盡可能長的 

但也要確保輸入長度不要太短。根據(jù)NNG的研究，它有27個字符的輸入，可以滿足90％的用戶的需求。

圖：常見的5字26字符搜索示例。

　　3.透明占位符

對輸入的占位符文本使用適當?shù)母北痉浅Ｖ匾?，這通常是用戶可以搜索的內(nèi)容。這可以確保他們知道要搜索的內(nèi)容，并且不會因查詢寫入查詢失敗而受挫。最近，Web工具可以通過在HTML5中添加提示作為占位符來輕松完成此操作。

添加占位符有助于用戶過濾查詢內(nèi)容。

　提示：

眾所周知，人類短期記憶容量有限。因此，盡量保持占位符文本的副本簡潔明了。使用較長的提示會增加用戶的認知負擔并影響用戶體驗。您可以在此處找到有關(guān)有害標簽和占位符的更多信息。

在某些項目中，可能需要設(shè)計更具體的搜索功能。在這種情況下，您可以使用懸停工具提示來確保提示始終可見，以便用戶可以將其短期內(nèi)存用于其他任務(wù)。

在此示例中，工具提示可幫助用戶使用正確的查詢格式并查找可搜索的內(nèi)容。

　4.引導(dǎo)查詢，即自動提示

很多時候，用戶正忙于考慮搜索結(jié)果，而不是專注于構(gòu)建適當?shù)乃阉鞑樵?。當用戶無法找到他們期望的結(jié)果時，這也是一種負擔。這個用戶的操作錯誤也是設(shè)計師的錯誤。在這里，自動提示可以派上用場。

使用自動提示的目的不是為了使搜索更快，而是在構(gòu)建用戶查詢時提供一些幫助。您可以通過執(zhí)行預(yù)測的搜索模式來完成此操作。例如，用戶想問這個可怕的單詞是什么？預(yù)測的搜索模式基于用戶正在編寫的所有字符，猜測輸入的單詞，預(yù)測他們的查詢將是什么并彈出自動建議。

由Jakob Nielsen領(lǐng)導(dǎo)的團隊研究過，大多數(shù)用戶無法從第一個查詢中收集他們期望的搜索結(jié)果。因此，通過設(shè)置引導(dǎo)查詢，除了大大減少用戶執(zhí)行的工作量之外，還可以增加他們找到所需內(nèi)容的次數(shù)。

提示：

不要給他們?nèi)魏翁摷俚淖詣咏ㄗh。確保您使用的所有機制都合理并滿足您的用戶需求。

為您的用戶提供最近搜索歷史的視覺提示，這對于重復(fù)搜索尤其有用;

盡量保持簡單，并使用最少的元素來分隔不同的建議（即填充和邊框）;

將您提供給用戶的搜索建議數(shù)量限制在5到9之間。記住Miller在用戶體驗設(shè)計中的法律應(yīng)用。

　5.不要忘記定位

用戶對AD Shaikh&K。Lenz在2006年發(fā)現(xiàn)的某些UI元素和模式的位置有一定的要求。搜索是所需模式之一，大多數(shù)用戶希望在頂部中心或右上角找到它。界面，如上面提到的研究結(jié)果和下圖所示。

“許多參與者希望找到“網(wǎng)絡(luò)搜索引擎”。在頁面的右上角或靠近左上角;

嘗試根據(jù)這些知識找到搜索模式，這將確保您的用戶可以輕松找到它。

　結(jié)論

我認為每天我們都會處理很多所謂的最佳實踐，但通常很容易忽略一些簡單的主題，比如我在本文中提到的那些主題。搜索是一種不斷發(fā)展的模型，我知道本文并未涵蓋所有現(xiàn)有指南?？紤]到這一點，我希望本文能夠幫助一些初學(xué)者，甚至是UX和UI設(shè)計的老手。

作者：Bruno Charters

地址：https://uxplanet.org/getting-the-search-pattern-right-e71dbb59dc67

本文由@Mockplus團隊發(fā)布，未經(jīng)許可不得復(fù)制。

該地圖來自unsplash，基于CC0協(xié)議

« 微信封殺死超過6,000個公共號碼和小型節(jié)目比特幣低于3,500美元| A5 Entrepreneurship Morning News | Jumeiyou和其他多家電平臺簽署誠信公約，建立電子商務(wù)誠信環(huán)境 »