搜索框是輸入?yún)^(qū)域與提交按鈕的組合魂莫。有人可能會任務(wù)搜索框不需要設(shè)計潭兽，畢竟這里只有兩種簡單的元素账蓉。但是箱玷，在一些內(nèi)容為主的網(wǎng)站上，搜索框是最長被用到的設(shè)計組件。當(dāng)用戶來到一個相對復(fù)雜的網(wǎng)站時颖对，他們會立刻尋找搜索框來幫助他們快速便捷的到達(dá)他們的目標(biāo)頁面江解。所以宾符，搜索框的設(shè)計和它的可用性是一個重要的事情。
最佳的做法
1、使用放大鏡圖標(biāo)
放大鏡圖標(biāo)總是與搜索框在一起管闷。根據(jù)定義，圖標(biāo)是一個對象、動作瓜贾、想法的可視化表示胃夏。有一些按鈕是來自于用戶的常識與認(rèn)知。放大鏡圖標(biāo)就是其中之一。
提示：當(dāng)使用示意性圖標(biāo)時认境，圖像細(xì)節(jié)越少营袜，圖形識別的速度越快。
2辽故、把搜索放在顯眼的區(qū)域
如果搜索是你的app或者網(wǎng)站的一個重要功能缴啡，你應(yīng)該把它放在顯眼的地方，讓他可以快速并且容易的被用戶發(fā)現(xiàn)文兢。
顯示完整的搜索區(qū)域很重要兔辅，因為在將搜索區(qū)域隱藏在圖標(biāo)后面使得搜索功能變得不那么明顯并且增加了交互成本茫负。
3、為搜索框提供給一個搜索按鈕
一個按鈕可讓用戶意識到這里需要多一步的操作才可以觸發(fā)搜索行為，即使他們決定通過enter鍵來執(zhí)行這一操作函似。
Tips:
提示：適當(dāng)?shù)恼{(diào)整提交按鈕的大小槐脏，這樣用戶就不需要去精確控制鼠標(biāo)的指向。點擊區(qū)域越大撇寞，越容易發(fā)現(xiàn)與點擊顿天。
讓用戶使用Enter并單擊圖標(biāo)來觸發(fā)搜索。許多用戶仍然有點擊實際按鈕來提交搜索的習(xí)慣蔑担。.
4牌废、每一個頁面都設(shè)置搜索框
你應(yīng)該在你的每一個頁面上昂志搜索框，因為每當(dāng)你的用戶找不到他想要尋找的東西時啤握，不論他在哪里鸟缕，他們都會想要使用搜索工具來幫助他們。
5排抬、讓你的搜索框足夠簡單
當(dāng)你設(shè)計一個搜索框時懂从，確保它像一個搜索框，并且可以簡單地去使用蹲蒲。根據(jù)可用性研究番甩，默認(rèn)情況下沒有顯示高級搜索選項更加方便用戶使用、高級搜索選項（例如布爾搜索查詢）會讓用戶感到迷惑届搁，為什么要去用它缘薛。
6、把搜索框放在用戶期待它出現(xiàn)的地方
因為搜索框不明顯不容易被發(fā)現(xiàn)導(dǎo)致用戶去尋找搜索框在哪里是非常不好的情況卡睦。
下面看到的表格是由A. Dawn Shaikh和 Keisi Lenz做的一份研究宴胧，他們調(diào)查了142個人，了解他們最期望搜索框出現(xiàn)的位置表锻。研究發(fā)現(xiàn)用戶最容易發(fā)現(xiàn)的位置是屏幕的上方偏左和上方右牺汤。根據(jù)F型瀏覽模式，這些地方是用戶最容易發(fā)現(xiàn)的位置浩嫌。
所以檐迟，將搜索框放在布局的右上角或者上方中部時补胚，可以保證你的用戶可以很容易的發(fā)現(xiàn)他。
提示：
在理想狀態(tài)下追迟，搜索框應(yīng)該完美融合于網(wǎng)頁的整體設(shè)計溶其，并且可以在用戶需要他的時候脫穎而出。
當(dāng)你的內(nèi)容越多時敦间，你會希望你的搜索功能越突出瓶逃。如果搜索功能是你網(wǎng)站中非常重要的功能時，使用足夠的對比度廓块，保證搜索區(qū)域和圖標(biāo)可以在背景和周圍其他組建中脫穎而出厢绝。
7、合適的輸入?yún)^(qū)域
大多數(shù)設(shè)計師都會犯一個錯誤带猴，就是講輸入?yún)^(qū)域設(shè)置的非常短昔汉。用戶當(dāng)然可以輸入長的句子，但是這樣會讓很多文字被隱藏拴清，這也就意味著可用性很差靶病。因為用戶不可以很容易的檢查與編輯他們的輸入。事實上口予，當(dāng)搜索框的可見字符數(shù)量有限時娄周，用戶就被強迫使用短而精簡的詞匯，因為長的句子會不容易檢查與編輯沪停。如果輸入?yún)^(qū)域根據(jù)他們想要輸入的字段來確定大小酵使，對于用戶來說就更容易閱讀與理解铃芦。
規(guī)律是：27個字符的輸入框?qū)⑦m合90%的查詢
提示：考慮使用長度可變化的搜索框疫向，在點擊用戶時展開輸入?yún)^(qū)域病蛉。這既節(jié)省了屏幕空間，同時仍然給予用戶足夠的視覺提示以快速找到并執(zhí)行搜索窟哺。
8、使用自動提示機制
自動提示機制可以通過已經(jīng)輸入的字符來預(yù)測用戶想要輸入的完整字符技肩。自動提示機制不是去加速搜索的進(jìn)程而是去指導(dǎo)幫助用戶去構(gòu)建他們的查詢字段且轨。大多數(shù)用戶都不太擅長去準(zhǔn)確表達(dá)他們的查詢字段，如果他們在第一次嘗試時沒有得到理想的搜索結(jié)果虚婿，后面的搜索嘗試也很難成功旋奢。事實上，他們常常會放棄然痊。自動提示機制可以幫助用戶去表達(dá)更好的搜索字段至朗。
提示：
確保你的自動提示機制是可用的。設(shè)計不當(dāng)自動提示機制會干擾甚至誤導(dǎo)用戶剧浸。所以使用拼寫自動更正锹引、識別根詞和預(yù)測文本來改善你的檢索工具矗钟。
應(yīng)該盡快的使用自動提示，比如在用戶輸入三個字符后提供快速而有價值的提示來減少用戶的字符輸入嫌变。
顯示少于十個提示項目（不要出現(xiàn)滑動條）吨艇，所以信息不會給用戶冗雜的感受。
允許通過鍵盤來選擇列表腾啥。一旦用戶向下滾動到最后一個項目东涡，然后返回到列表的頂部。按下Esc鍵讓用戶退出列表倘待。
有區(qū)別標(biāo)識出已輸入字符與推薦字符的疮跑。（例如：輸入的字符正常顯示，而建議字符加粗顯示）
9凸舵、明確用戶可以搜索的內(nèi)容
最好在輸入框中提示一個示例搜索字段祖娘，來幫助用戶理解這個區(qū)域可以搜索的內(nèi)容。當(dāng)可以進(jìn)行多鐘類別的搜索贞间，使用輸入提示模式來像用戶進(jìn)行解釋（例如：下面例子中的IMBb）贿条。HTML5可以輕松的輸入那些輸入字段中包含占位符的文本。
提示：將你的提示限制在幾個詞內(nèi)增热，否則將會增加認(rèn)知負(fù)擔(dān)整以。
結(jié)論
搜索是一個最基本的操作，也是構(gòu)建一個內(nèi)容豐富的app或者網(wǎng)站的關(guān)鍵元素峻仇。輸入?yún)^(qū)域的大小或者指示搜索字段中包括哪些信息這種小的細(xì)節(jié)都會顯著的增加搜索的可能性愈整體的用戶體驗公黑。
謝謝！
原文作者：Nick Babich
原文地址：https://uxplanet.org/design-a-perfect-search-box-b6baaf9599c
