製作網頁時搜尋框怎麼做

　　網頁搜尋框設計技巧

　　可見性

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

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

　　eBags裡的搜尋功能結合了外形和功能

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

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

　　極簡的谷歌搜尋框設計

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

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

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

　　Bing結果頁面上的搜尋框

　　雅虎可能算是所有這些搜尋引擎裡最正常的了——採用了簡單的佈局和始終明確可用性的按鍵，這兩者在搜尋前後都會保持相當的一致性。

　　雅虎搜尋介面上的搜尋框

　　這三個網站都會在頁面一載入好就自動定位游標到搜尋框上，同時也都允許使用者通過點按回車來提交搜尋請求。

　　另外，它們都會在提交搜尋後在輸入框裡保留搜尋請求的內容，這能讓使用者對其搜尋的資訊進行確認，同時還能為下一次關聯性的搜尋提供便捷。

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

　　Pipl上的搜尋框能引導使用者輸入有意義的搜尋請求

　　範圍搜尋

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

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

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

　　但該方案對那些目的性不強、領域知識又較遜色的使用者來說並不算適用，他們很可能會不確定一開始的時候選擇哪個類別。不恰當的類別選擇會直接導致他們搜到毫不相干的內容，亦或者範圍被縮得太窄而出現零結果，從而降低了偶然發現有用資訊的可能性***譯者注：無目的使用者往往會對這類“不經意”發現的資訊有所行動***。Craigslist的網站上提供了一系列選擇，但如果你想要找的是一個焦點小組又應該選擇哪個類別呢?

　　網頁搜尋框上的範圍搜尋

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

　　這個問題在當一個既有的範圍限制被預設應用於新的搜尋請求時會變得更加複雜***譯者注：比如天貓進入某一店鋪後搜尋框的“搜尋本店”和“搜尋全部”的差別，想象一下如果現在只有“搜尋本店”會是個怎樣的體驗***。比如在WARC網站上的“文字分析”類別裡搜尋“圖表”會出現零結果，但同樣的請求在“所有類別”裡是會返還結果的。在所有情況下，特別是當搜尋的結果為零時，最好的方案就是採用全域性搜尋，並在結果中明確地顯示當前搜尋的範圍是什麼。

　　WARC中的範圍搜尋結果為零時完全可以包含一個fall back機制以進行全域性搜尋

　　區域性搜尋

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

　　鑑於此，區域性搜尋通常和篩選選單成對出現。由於這時候會出現一個頁面出現兩個搜尋框的現象，我們有必要去明確註明它們彼此的功能性，此時佔位符和其它文字標籤就可以拿來引導使用者了。另外，鑑於搜尋用的關鍵詞一樣起到篩選的作用，它們也應該被拎出來明確標註於某處。

　　dabs裡的區域性搜尋是篩選選單裡的一部分

　　還有一種可能，就是把區域性搜尋和標準搜尋框合併在一起，然後用一個單選按鈕或者勾選框在兩個不同的輸入方式裡進行切換。在這類案例裡，切換的控制需要視當前的情境而定***因此如果區域性搜尋在當前頁面/狀態並不可用時這個選項就需要被遮蔽掉***。除此之外，在使用者勾選“區域性搜尋”後，當前搜尋框內的文字應該消失，畢竟他們與新的搜尋行為已毫不相干。

　　bulbs裡的區域性搜尋是以勾選框的方式出現

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

　　高階搜尋

　　所謂高階搜尋大體上就是提供一些比基本搜尋框或標準搜尋體驗更加豐富的功能。通常情況下高階搜尋的***是以普通搜尋框旁邊的一條連結的形式出現。

　　WARC裡的高階搜尋是以連結的形式出現的

　　引數搜尋一開始被構想出來的時候，其互動方式是基於從一個不斷增長的表單裡擇取引數的概念。由此看來預設保留一些選項會更讓人容易理解一下，而非用一個高階選項來表達。

　　WARC裡的高階搜尋就是填表格

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

　　當然了，總是會有一些應用或網站把使用者分成兩類或多類人群，比如醫療資訊網站就同時服務於醫療系統內的專家以及普羅大眾。在這類案例裡，需要一個更有彈性的策略來讓整個體驗***比如內容、導航等***被所有使用者接受，而非讓搜尋功能成為特定使用者享受特權的地方。一個高效的搜尋體驗應賜予所有使用者以“高階”搜尋的工具，無論在何時以何等方式，使用者都可以、並樂意使用它們。遺憾的是在現實生活中，上面提到的這些高階搜尋的例子都未被充分利用，甚至是不必要的。

　　除了關鍵字詞

　　目前我們已經瞭解了使用關鍵字詞來進行搜尋，但實際上我們還有很多其它不同的方式表達資訊。

　　自然語言

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

　　Ask上的自然語言問答

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

　　但這並不是說NLP在搜尋領域沒有未來。恰恰相反，用對地方就能大放異彩。舉個例子，NLP技術目前被應用在一個前景樂觀且蓬勃發展的領域——各類提供客戶服務的聊天機器人和互動助手，以及各行各業裡其它型別的自動支援服務上。在True Knowledge的網站中，NLP被應用在一個幫助使用者理解問題含義的問答服務上。Wolfram Alpha也同樣採用NLP的形式，結合計算得出的答案以及結合關聯資料基於資料庫分析出的視覺化圖表來回答使用者的問題。