今天這篇譯文開門見山，從搜索框的可見性、范圍搜索、局部搜索、高級搜索以及輸入五個方面聊聊如何設計出一個特別好用的搜索功能，內附大量實例（想知道谷歌搜索有哪個交互不好嗎），結合實踐，深入淺出，幫你掌握在線搜索的這五個方面。

　　可見性

　　在UX領域，可見性是其根本概念之一：由物體的外形特征推導出其行為上潛在的可能。比如大門上的推板意味著門是可以推的；把手則說明門是可以拉的。你有沒有遇到過走到一扇門跟前卻發(fā)現(xiàn)開門的方式與你預料的大不相同的情況呢（譯者注：有的，我的大學就是，不過每年HCI的課都會拿出來舉例，給人一種“我是故意的”高逼格假象）？這是由于事物的外形特征和實際功能不匹配造成的。

　　同樣地，搜索框的設計應該遵循其功能性。其目的是允許用戶以關鍵字詞的方式輸入請求，那么它就應該看起來像是能被輸入的，并且有一個能夠明確表明其功能的相關按鍵。它還應該足夠寬，這樣才能容納較長的文字。

　　eBags.com里的搜索功能結合了外形和功能

　　basmatitree.net的一個相比起來不那么常見的搜索框設計

　　可見性這個概念應貫穿于用戶體驗的方方面面。然而，目前有很多主流的網(wǎng)頁搜索引擎為了標榜個性或品牌需要而選擇另類的設計。Google就是個例子，它在首頁采用了兩個按鍵，其中包含了個莫名其妙的“I’m Feeling Lucky”選項。這兩個按鍵都被居中置于輸入框下面，所有組件的邊框是如此之窄致使其功能性只能被含糊地理解到。

　　極簡的谷歌搜索框設計

　　然而，這些設計已然被大眾接受了，畢竟都這么多年了，仗著谷歌的名聲人們似乎已習慣了把這種所謂的“簡約”當成其“優(yōu)秀”品牌文化的一種詮釋。首頁搜索框的位置和排版只是暫時的；當用戶一在輸入框里進行輸入時，頁面的排版就會變掉，而結果和搜索框會跑到頁面的左上角。搜索按鍵的標簽會變成一個放大鏡的圖標。直到這時，作為一個搜索功能的行動按鍵，它具備了合格的可見性。

　　谷歌顯示結果的頁面上一個更加常見的搜索框設計

　　Bing也同樣在首頁提供了一個相似的居中搜索框，一旦進行搜索后，搜索框等一系列組件會立馬乾坤大挪移到左上角。

　　Bing結果頁面上的搜索框

　　雅虎可能算是所有這些搜索引擎里最正常的了——采用了簡單的布局和始終明確可用性的按鍵，這兩者在搜索前后都會保持相當?shù)囊恢滦浴?/p>

　　雅虎搜索界面上的搜索框

　　這三個網(wǎng)站都會在頁面一加載好就自動定位光標到搜索框上，同時也都允許用戶通過點按回車來提交搜索請求。

　　另外，它們都會在提交搜索后在輸入框里保留搜索請求的內容，這能讓用戶對其搜索的信息進行確認，同時還能為下一次關聯(lián)性的搜索提供便捷。

　　在互聯(lián)網(wǎng)上，用戶可以搜索到近乎所有的東西，除了特定情況下對主題或內容類型有所限制。在網(wǎng)站搜索中（比如某個特定網(wǎng)站內的搜索），這類限制往往還會以更加嚴苛的形象頻繁出現(xiàn)。這正是那些占位符文字和其它提示性標簽大展身手的時候，它們能幫助用戶僅對有意義的關鍵字詞進行搜索。以Pipl網(wǎng)站為例，它通過占位符的方式告知用戶他們可以搜索人名、位置、郵件、用戶名或者電話號碼。當用戶點擊輸入框進行文字輸入時，這些提示性文字會立馬消失。

　　Pipl上的搜索框能引導用戶輸入有意義的搜索請求

　　范圍搜索

　　在一些搜索應用里，內容往往以類別的形式被組織起來。比如eBay上的商品都通過其特有的內容分類法被歸結在一起。這讓用戶針對某個特定種類的產品進行限定范圍的搜索成為可能。比如這里可以使用下拉菜單或者其它類似的組件：

　　eBay上的搜索可以被局限為僅針對特定的一類商品

　　允許用戶在執(zhí)行搜索之前先選擇某一類別能幫助他們更快地收窄搜索的范圍，并能借此為特定類別內的選項進行細化。舉個例子，在eBay“汽車/摩托車/交通工具”的類別里搜索“高爾夫”，出來的各個細化結果的選項與在“體育用品”里搜出來的結果大不相同（譯者注：這里說的“選項”不是搜索結果，而是對搜索出來的結果進行再細化的一系列選項，后文還會提到）。范圍搜索對那些具有領域知識的用戶會大有幫助，特別是他們在明白自己要找什么的時候。

　　但該方案對那些目的性不強、領域知識又較遜色的用戶來說并不算適用，他們很可能會不確定一開始的時候選擇哪個類別。不恰當?shù)念悇e選擇會直接導致他們搜到毫不相干的內容，亦或者范圍被縮得太窄而出現(xiàn)零結果，從而降低了偶然發(fā)現(xiàn)有用信息的可能性（譯者注：無目的用戶往往會對這類“不經(jīng)意”發(fā)現(xiàn)的信息有所行動）。Craigslist的網(wǎng)站上提供了一系列選擇，但如果你想要找的是一個焦點小組又應該選擇哪個類別呢？

　　Craigslist上的范圍搜索

　　正確的答案是“其它工作”或“演出”。由此可得，如果默認是以“所有類別”而非范圍搜索作為開始會是更好的解決方案。

　　這個問題在當一個既有的范圍限制被默認應用于新的搜索請求時會變得更加復雜（譯者注：比如天貓進入某一店鋪后搜索框的“搜索本店”和“搜索全部”的差別，想象一下如果現(xiàn)在只有“搜索本店”會是個怎樣的體驗）。比如在WARC網(wǎng)站上的“文字分析”類別里搜索“圖表”會出現(xiàn)零結果，但同樣的請求在“所有類別”里是會返還結果的。在所有情況下，特別是當搜索的結果為零時，最好的方案就是采用全局搜索，并在結果中明確地顯示當前搜索的范圍是什么。

　　WARC中的范圍搜索結果為零時完全可以包含一個fall back機制以進行全局搜索

　　局部搜索

　　搜索框可以說是整個搜索體驗的入口；在開始進行搜索之前，它確實是個最顯眼的玩意。但有很多時候我們會在搜索結果都跳出來了之后進行一次額外的關鍵字檢索，目的通常是在既有的結果里找到我們想要的那一個，這時候我們就可以通過再搜索來精簡、細分結果。這個和篩選菜單的作用很像（譯者注：前面提到過，就比如電商或房地產網(wǎng)站某個大類產品下左側或上方列表菜單里的一系列通常由滑塊（價格區(qū)間/品牌/地段等）、單選按鈕組成的菜單）。

　　鑒于此，局部搜索通常和篩選菜單成對出現(xiàn)。由于這時候會出現(xiàn)一個頁面出現(xiàn)兩個搜索框的現(xiàn)象，我們有必要去明確注明它們彼此的功能性，此時占位符和其它文本標簽就可以拿來引導用戶了。另外，鑒于搜索用的關鍵詞一樣起到篩選的作用，它們也應該被拎出來明確標注于某處。

　　dabs.com里的局部搜索是篩選菜單里的一部分

　　還有一種可能，就是把局部搜索和標準搜索框合并在一起，然后用一個單選按鈕或者勾選框在兩個不同的輸入方式里進行切換。在這類案例里，切換的控制需要視當前的情境而定（因此如果局部搜索在當前頁面/狀態(tài)并不可用時這個選項就需要被屏蔽掉）。除此之外，在用戶勾選“局部搜索”后，當前搜索框內的文字應該消失，畢竟他們與新的搜索行為已毫不相干。

　　bulbs.com里的局部搜索是以勾選框的方式出現(xiàn)

　　鑒于局部搜索時用戶輸入的特定精簡條件可能不匹配當前結果中的任一條，我們要為零結果的出現(xiàn)做好準備。盡管這種情況不存在是最完美的，我們仍然有很多手段來解決這個問題，比如去掉那些不匹配搜索標準的關鍵字詞，或為用戶提供些建議和工具以進行再次的搜索等等。

　　高級搜索

　　所謂高級搜索大體上就是提供一些比基本搜索框或標準搜索體驗更加豐富的功能。通常情況下高級搜索的入口是以普通搜索框旁邊的一條鏈接的形式出現(xiàn)。

　　WARC里的高級搜索是以鏈接的形式出現(xiàn)的

　　參數(shù)搜索一開始被構想出來的時候，其交互方式是基于從一個不斷增長的表單里擇取參數(shù)的概念。由此看來默認保留一些選項會更讓人容易理解一下，而非用一個高級選項來表達。

　　WARC里的高級搜索就是填表格

　　但正因如此，我們對搜索的理解得以進化，讓用戶提前做出選擇的方案已經(jīng)失去了價值。如果你準備和某個陌生人進行對話，你是否會先向他們詢問“我該用什么樣的語調”（比如是輕松隨便的還是刻板嚴謹?shù)模?？高效的策略并不需要在開始就整那些有的沒的，只要在每個你可以察覺到的點進行對交互行為進行敏捷而有意義的微調就可以了，就像在聊天時隨時有意識地改變話鋒一樣。

　　當然了，總是會有一些應用或網(wǎng)站把用戶分成兩類或多類人群，比如醫(yī)療信息網(wǎng)站就同時服務于醫(yī)療系統(tǒng)內的專家以及普羅大眾。在這類案例里，需要一個更有彈性的策略來讓整個體驗（比如內容、導航等）被所有用戶接受，而非讓搜索功能成為特定用戶享受特權的地方。一個高效的搜索體驗應賜予所有用戶以“高級”搜索的工具，無論在何時以何等方式，用戶都可以、并樂意使用它們。遺憾的是在現(xiàn)實生活中，上面提到的這些高級搜索的例子都未被充分利用，甚至是不必要的。

　　除了關鍵字詞

　　目前我們已經(jīng)了解了使用關鍵字詞來進行搜索，但實際上我們還有很多其它不同的方式表達信息。

　　自然語言

　　用自然語言來進行詢問或許是最為直接的方式，就像你在和另一個真實的人對話一般。這種交互被Ask（以前叫做Ask Jeeves）這樣的搜索引擎所推廣，它同時結合了文字和人的概念，造就了一個基于問答系統(tǒng)的搜素體驗。

　　Ask上的自然語言問答

　　事實上，自然語言在之前一直扮演著“殺手級app”的角色——它曾是無數(shù)初創(chuàng)公司搶食的蛋糕。然而其中對主流搜索體驗產生持續(xù)影響的公司卻寥寥無幾。這主要是由于自然語言處理（NLP）的算法提升還前路漫漫。但它同樣反映了搜索體驗自身的無數(shù)可能性：支持人類在無比寬泛的任務情境里搜尋信息，我們需要促進一個開放、彈性和互動的對話形式。回答問題可能是其一部分，但是它并不是解決方案的全部。對于一些類型的應用來說，類似局部搜索的技術完全可以比以純粹的語言結構交流更加“自然”的形式來進行搜索對話。

　　但這并不是說NLP在搜索領域沒有未來。恰恰相反，用對地方就能大放異彩。舉個例子，NLP技術目前被應用在一個前景樂觀且蓬勃發(fā)展的領域——各類提供客戶服務的聊天機器人和互動助手，以及各行各業(yè)里其它類型的自動支持服務上。在True Knowledge的網(wǎng)站中，NLP被應用在一個幫助用戶理解問題含義的問答服務上。Wolfram Alpha也同樣采用NLP的形式，結合計算得出的答案以及結合關聯(lián)數(shù)據(jù)基于數(shù)據(jù)庫分析出的可視化圖表來回答用戶的問題。

　　Wolfram Alpha的自然語言問答系統(tǒng)

　　非文本請求

　　信息并不總是以語言或文字的方式進行表達。有時候圖形化的媒介是更自然的方式，特別是當有先例之時。在谷歌圖片里，你可以用以圖搜圖的方式來發(fā)動搜索請求。

　　Google里的以圖搜圖

　　類似的，Like.com（現(xiàn)在是谷歌產品搜索的一部分）可以讓用戶上傳圖片來輔助描述那些難以用關鍵字詞表述的內容。除此之外，像Shazam這類服務允許用戶記錄并上傳音樂的一小部分，然后通過其龐大的音頻數(shù)據(jù)庫來識別其屬于哪一首歌曲。

　　每一個此類服務都代表著一種特定的搜索類型。但是搜索請求并不需要是一個完整的東西。Retrievr允許用戶通過手繪圖形或線框查找相關信息。在Etsy里則可以通過于色盤里選擇顏色進行搜索：

　　在Etsy里通過顏色進行搜索

　　這些另類形式的輸入方式提醒我們：雖然關鍵字詞可能是最簡單的一種輸入方式，但它們并不總是最自然的。有時候我們的信息需要超越文字。我們應該根據(jù)整個大情境來判斷選擇哪種輸入方式。

　　總結與實踐

　　搜索框

　　表單應該遵循其功能；在設計控件時應該牢記可見性原則；

　　讓搜索框的位置保持統(tǒng)一，盡可能足夠寬以便容納較多的文字；

　　在頁面加載好后自動聚焦光標于搜索框內，并允許用戶通過回車鍵提交請求；

　　通過占位符和其它提示性語言來幫助用戶構建有意義的請求（但是在光標聚焦輸入框時讓它們立馬消失）；

　　在完成搜索后仍在搜索框內保留請求文字。

　　范圍搜索

　　范圍搜索針對的是有一定領域知識的用戶，為了顧及所有人，該功能不應成為應用里唯一的搜索方式。請確保默認情況下使用全局搜索；

　　如果在某個類別下搜索到的結果為零時，顯示所有類別下的搜索結果作為回退機制；

　　搜索結果中同時要清楚地顯示當前搜索的范圍是什么。

　　局部搜索

　　若局部搜索是以篩選菜單中一部分的形式出現(xiàn)，那就用占位符或其它指示性文字標簽明確注釋其功能。確保在完成搜索后于某一處顯示剛才搜索用的關鍵字詞。

　　如果是作為全局搜索的一個選項出現(xiàn)，那請留意這個切換機制與應用當前的整體情境緊密相連。另外，勾選“局部搜索”時原本搜索框框內的已輸入文字應該消失。

　　高級搜索

　　審視一下高級搜索的基本原理是什么，特別要考慮下對于某個專家級別的用戶而言，是否采用定制化的體驗是種更好的解決方案，而不是去“拍腦袋”決定要把搜索搞得富麗堂皇。

　　除了關鍵字詞

　　有時候我們的信息并不僅僅是通過文字的形式呈現(xiàn)的。在選擇輸入方式時要注意和媒介匹配。

　　以上就是腳本之家為大家分享的一個特別好用的搜索框必須考慮的五個方面，希望可以幫助到大家，大家如果還有疑問的話，可以在下方的評論框內給我們留言哦。我們會盡自己所能的為大家解答。謝謝大家一如既往的支持，也請大家繼續(xù)關注腳本之家的后續(xù)教程和軟件。