搜索框由輸入框和發送按鈕組成。有些人可能會說，這么簡單的控件有啥可設計的呀，再怎么設計也就這兩個簡單的元素。然而在內容繁重的網頁中，搜索框是最常用的控件。當用戶接觸到一個相對復雜的站點時，他們通常通過搜索框去快速尋找他們最終的目的地。這樣看來，搜索框的設計和使用真的是很重要的。
本文我們將講述：這些元素怎樣設計才能讓用戶在最短的時間內找到他們想要的。
最佳行為
1.使用放大鏡圖標
在搜索框一定要放置放大鏡圖標。事實上，圖標在視覺上代替了物品、行動或者想法。可以選用這些通用圖標。放大鏡正是這樣的圖標。
建議：使用粗線條的，視覺簡化的放大鏡圖標。少些圖畫細節能夠加速認知。
2.將搜索框放在最顯眼的位置
如果搜索在你的應用中是個非常重要的功能，設計時應讓他盡量的顯眼，保證用戶能夠快速的發現它。
展示全部展開的文本框，因為搜索隱藏在icon里會讓這個功能不那么容易被注意到，同時也會增加認知成本。
3.給搜索框一個搜索按鈕
這個按鈕能夠讓用戶認識到啟動搜索行為還需要更多的步驟，或者還需要按下enter鍵。
建議：
a.發送按鈕的大小要適當，保證用戶不用用鼠標小翼翼地點擊。大一點兒的可點擊區域讓點擊變得簡單。
b.允許用戶通過Enter鍵發送搜索指令。當然也有很多用戶還是習慣點擊實際的按鈕發送搜索指令。
4.每一頁都放搜索框
保證每一頁都有搜索框。當用戶不能找到他們尋找的內容時，他們會忽略他們所在的網頁，只是通過搜索框搜索。
5.讓搜索框簡單
如果你設計一個搜索框，確保它看起來像搜索框，并且易于使用。根據可用性研究，定義默認文本比更多搜索選項更加友好。高級搜索選項會讓用戶困惑。
6.將搜索框放置在用戶期望找到它的地方
用戶在想用搜索功能卻找不到搜索框的體驗是非常差勁的，比如找不到或者點不到。
下面這個圖標是A. Dawn Shaikh和Keisi Lenz的研究成果：通過142個志愿者的參與確定在哪些站點用戶希望能找到搜索功能。研究發現用戶認為最方便點擊的地方是在界面的左上角或者右上角，這里正好是用戶使用F型閱讀模式時比較容易發現的點。
所以，在布局的左上角或者右上角放置搜索框會讓用戶在想使用搜索功能時，很容易找到。
建議：
a.實際上，搜索框應該完美貼合整個頁面的設計，但當用到搜索時，搜索框應該足夠顯眼。
b.內容越多，搜索功能就應該越明顯。如果搜索對網站十分重要，通過使用對比讓搜索框和圖標在背景和周圍的元素中凸顯出來。
7.適合的尺寸
太小的輸入框是常見錯誤。當然用戶可以輸入很長的問題，但是只有一部分文本同時顯示，這是很差的使用體驗，由于用戶不能快速查看和編輯他們的問題。實際上，如果輸入框有紫薯顯示，用戶就會盡量使用簡短的詞匯，精煉的問題，因為太長的問題，會比較難讀同時也不方便閱讀。如果根據他們期望輸入的內容限制輸入框的大小，不僅便于閱讀頁更容易被用戶理解。
比較好的解決方案是，限定27個字符的輸入框，這樣能貼合90%的問題
建議：
考慮使用可縮放搜索框，在點擊輸入框時展開。這樣即節省屏幕空間，也能給用戶足夠的視覺暗示找到和展開搜索框。
8.使用智能機制
智能機制可以幫助用戶找到合適的問題通過用戶輸入的模糊信息。智能機制不能加速搜索，但是能幫助用戶組織搜索的問題。大部分用戶在問題的組織上非常困難，如果他們第一次嘗試時不能得到相應的結果，接下來的搜索就更難成功了。所以，他們通常選擇放棄。但是如果有智能機制，將幫助選擇更加貼切的問題搜索。
google的搜索引擎就是使用這種模式，并且已經在2008年開始執行。因為用戶已經不止一次的嘗試搜索相同的東西，通過歷史搜索記錄，google記錄了用戶習慣。
建議：
a.確保智能機制切實有效。不智能的機制會讓用戶迷惑，所以使用自動拼寫糾錯機制糾正詞根，預測詞匯。
b.盡快啟動智能機制。比如一個字母輸入后，立刻提供相應的單詞，減少輸入成本。
c.展示少于10個東西，（不要使用滾動條）這樣信息不會過載。
d.允許使用鍵盤給列表導航。用戶一旦滾到最后的選項，應該可以立即返回頂部。比如說用ESC鍵推出列表。
e.明確輸入信息和建議信息之間的區別（比如輸入文本使用標準字重，但是建議文本加重）。
9.保證搜索結果清晰
在文本框里包含簡單的搜索問題暗示用戶這些功能可以使用是個好想法。如果用戶能搜索多個標準，使用輸入暗示模式解釋。（比如下面IMDb的例子）。HTML5使得在輸入框里放置展位文本變得簡單。
建議：
將暗示文本控制在幾個詞匯，不然會加重認知負擔
結論
搜索是基礎活動，同時在內容繁重的網頁中也是非常重要的元素。即使像文本框合適尺寸這樣一個小小的改變或者是文本框里暗示的內容，都會大大提高搜索框的易用性。
