如果你正在閱讀這篇文章看政，那么你一定正在設(shè)計(jì)一個(gè)有搜索功能的網(wǎng)站或應(yīng)用程序的原型和線框圖朴恳。在這篇文章中，我將介紹5個(gè)最佳實(shí)踐允蚣，這些實(shí)踐可以幫助大家設(shè)計(jì)了更好于颖、更實(shí)用的搜索機(jī)制。

最佳實(shí)踐

1.視覺線索

無論創(chuàng)建任何類型的用戶界面嚷兔，為用戶提供快速掃描屏幕所需的工具是你設(shè)計(jì)的一部分森渐。這樣做可以確保你的用戶知道在什么地方找到他想要的東西，何時(shí)需要使用以及與其交互后會發(fā)生什么冒晰。

放大鏡圖標(biāo)

使用放大鏡圖標(biāo)同衣，我無法保證這樣會加快了搜索欄查找的速度。但是圖標(biāo)越簡單越好壶运，較少的細(xì)節(jié)可以讓用戶更快地瀏覽耐齐。雖然，一個(gè)圖標(biāo)本身沒有輸入容器或按鈕蒋情，實(shí)際上會使搜索更加困難埠况。

極簡主義搜索圖標(biāo)的示例

人們通常認(rèn)為放大鏡圖標(biāo)表示搜索工具，即使它沒有標(biāo)簽說明棵癣。但是辕翰，只顯示圖標(biāo)的搜索框會使搜索變得更加困難。(言論來自NNG凱蒂謝爾文的“搜索設(shè)計(jì)中的放大鏡圖標(biāo)”)

一個(gè)實(shí)際的搜索按鈕

不是所有用戶都是資深網(wǎng)民狈谊，這也就意味著并不是每個(gè)用戶都知道金蜀，一旦在輸入框里輸入查詢內(nèi)容刷后，按下回車鍵就可以得到相關(guān)信息。因此渊抄，在搜索輸入旁邊設(shè)計(jì)一個(gè)實(shí)際的按鈕可以幫助用戶確認(rèn)他們的下一個(gè)動作尝胆，從而減少用戶所需的認(rèn)知負(fù)荷。

注意：避免將按鈕放在輸入框的左側(cè)护桦，上方或下方含衔。

提示：

在文本輸入獲得焦點(diǎn)前，你可以隱藏輸入按鈕二庵。

確保按鈕的大小適中贪染，以便點(diǎn)擊起來感覺自然。

2.輸入特性

有時(shí)候催享，越是閃亮杭隙，強(qiáng)大或面積大的東西也不一定能引起人們的注意，搜索模式也一樣因妙。不如將它改為你理想的風(fēng)格痰憎！但切記搜索框的設(shè)計(jì)必須與你的網(wǎng)站或應(yīng)用程序的主題相吻合，并同時(shí)確保它足夠引人注目攀涵。

Youtube新的（令人驚嘆的）黑色主題通過保持搜索模式與其他元素的一致性就完美地闡述了這一點(diǎn)铣耘。

“搜索框也并不是越長越好”

但也要確保輸入長度也不要過短。據(jù)NNG的研究表明：擁有能夠容納27個(gè)字符的輸入以故，可以滿足90％的用戶的需求蜗细。

如圖：一個(gè)常見的5詞26個(gè)字符搜索的例子。

3.透明占位符

為輸入的占位符文本使用適當(dāng)?shù)母北竞苤匾辏鼈兺ǔＪ前凳居脩艨梢运阉鞯膬?nèi)容炉媒。 這確保了他們知道要搜索什么，并且不會因編寫錯(cuò)誤導(dǎo)致查詢失敗而感到沮喪昆烁。最近吊骤，Web工具可以通過在HTML5中添加提示作為占位符來輕松完成此操作。

添加占位符可以幫助用戶過濾查詢的內(nèi)容善玫。

提示：

眾所周知水援，人類的短期記憶容量有限密强。因此茅郎，盡量保持用于占位符文本的副本簡短而直接。使用較長的提示會增加用戶的認(rèn)知負(fù)荷或渤，從而損害用戶體驗(yàn)系冗。你可以在這里了解更多有關(guān)有害標(biāo)簽和占位符的信息。

在某些項(xiàng)目中可能需要設(shè)計(jì)一個(gè)更具體的搜索功能薪鹦。在這種情況下掌敬，你可以使用懸停的工具提示來確保提示在任何時(shí)候都是可見的惯豆，這樣用戶就可以將他們的短期內(nèi)存用于其他任務(wù)。

在這個(gè)例子中奔害，工具提示可以幫助用戶使用正確的查詢格式以及找到他可以搜索的內(nèi)容楷兽。

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

很多時(shí)候华临，用戶會忙于思考搜索結(jié)果芯杀，而沒有專注于構(gòu)建一個(gè)適當(dāng)?shù)乃阉鞑樵儭．?dāng)用戶無法找到他們所期望的結(jié)果時(shí)雅潭，這也是一個(gè)負(fù)擔(dān)揭厚。這個(gè)用戶的操作失誤，也正是設(shè)計(jì)師的錯(cuò)誤扶供。在這里筛圆，自動提示就可以派上用場了。

采用自動提示的目的不是為了使搜索速度更快椿浓，而是在用戶查詢構(gòu)建中提供一點(diǎn)幫助太援。 你可以通過執(zhí)行預(yù)測的搜索模式來實(shí)現(xiàn)這一點(diǎn)。例如用戶想問這個(gè)可怕的詞是什么轰绵？預(yù)測的搜索模式是根據(jù)用戶正在編寫的所有字符粉寞，猜測輸入的是什么詞匯，預(yù)測他們的查詢將會是什么而彈出自動建議左腔。

正如Jakob Nielsen領(lǐng)導(dǎo)的團(tuán)隊(duì)所研究的那樣唧垦，大多數(shù)用戶未能從第一次查詢中收集到他們所預(yù)期的搜索結(jié)果。因此液样，通過設(shè)置引導(dǎo)查詢振亮，除了大大減少用戶執(zhí)行搜索的工作量，還可以增加他們查找所需內(nèi)容的次數(shù)鞭莽。

提示：

不要給他們?nèi)魏五e(cuò)誤的自動建議坊秸。確保你使用的所有機(jī)制是合理的，并且符合你的用戶需求澎怒。

給你的用戶最近的搜索歷史的視覺線索褒搔，這在重復(fù)搜索時(shí)特別有用。

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

把你給用戶的搜索建議數(shù)量限制在5到9之間星瘾。請記住Miller在用戶體驗(yàn)設(shè)計(jì)中的定律應(yīng)用。

5.不要忘記定位

用戶對AD Shaikh＆K.Lenz在2006年發(fā)現(xiàn)的某些UI元素和模式的位置有一定的要求惧辈。搜索就屬于這種被要求的模式之一琳状，絕大多數(shù)用戶希望在界面的頂部中心或右上角找到它，就像上面提到的研究結(jié)果和以下圖中所示盒齿。

“許多參與者希望在網(wǎng)頁右上角或靠近左上角的位置找到”網(wǎng)站搜索引擎“

試著根據(jù)這些知識來定位搜索模式念逞，它將確保你的用戶很容易找到它困食。

結(jié)論

我認(rèn)為每天我們都會處理很多所謂的最佳實(shí)踐，卻往往很容易忽略一些簡單的話題翎承，比如我在這篇文章中提到的那些硕盹。搜索是一個(gè)不斷發(fā)展的模式，我知道這篇文章沒有涵蓋所有現(xiàn)有的指導(dǎo)方針叨咖。了解這一點(diǎn)莱睁，我希望這篇文章能夠幫助到你們當(dāng)中的一些初學(xué)者，甚至UX和UI設(shè)計(jì)的老手芒澜。

作者：Bruno Charters

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