作為網(wǎng)頁(yè)中最常見(jiàn)的滿(mǎn)足美UI控件之一，搜索框的條設組成非常簡(jiǎn)單：輸入框+觸動(dòng)按鈕，不少站長(cháng)也因此沒(méi)有對它給予足(′_｀)夠的計點(diǎn)重視。其實(shí)搜索框在網(wǎng)站中扮演的才算ヽ(′ー｀)ノ角色不容小覷，一個(gè)可用性較高的得上搜索框往往可以有效節省用戶(hù)獲取信息和內容的時(shí)間，大大提升用戶(hù)的個(gè)完瀏覽體驗。尤其是搜索在內容為主的網(wǎng)站中，當用戶(hù)面對復雜的滿(mǎn)足美內容時(shí)，他們第一時(shí)間就會(huì )尋找搜索框，條設輸入關(guān)鍵詞以獲取想要的計點(diǎn)內容，強大的才算搜索框能夠促??進(jìn)用戶(hù)交互行(′▽?zhuān)?為的發(fā)(fa)生。所以在設計網(wǎng)站時(shí)??我們應多花些時(shí)間思考搜索框如何設計。得上如果(guo)您沒(méi)有什么頭緒，個(gè)完不用擔心，搜索和小飛一起來(lái)看看搜索框設計的滿(mǎn)足美幾個(gè)要點(diǎn)吧!

1. 使用放大鏡圖標

現在，一看見(jiàn)放大鏡圖標，┐(′д｀)┌用戶(hù)自然而然就會(huì )想起搜索功能，這種聯(lián)系是在長(cháng)期使用過(guò)程中逐漸形成的，是為大家所廣泛認可接受的。因此在網(wǎng)站中設計搜索框時(shí)，我們可以多使用放大鏡圖標，畢竟它是最常使用、最易于辨認的(即使沒(méi)有文本標簽，用戶(hù)也能輕松識別)。當然也要注??意，放大鏡圖標應該簡(jiǎn)潔ヽ(′?｀)ノ直觀(guān)，盡量減少一些不必要的細節，提(ti)高圖標的可辨識度。

2. 讓搜索框足夠顯眼

搜索框設計有一條重要的準則就是：讓搜索框足夠顯眼，清晰可見(jiàn)的搜索框能讓用戶(hù)快速發(fā)現并使(shi)用。下圖就很好地證明這一點(diǎn)，左右兩側(╯°□°）╯︵ ┻━┻是兩種不同的搜索框設計，左邊的搜索框隱藏在圖標之后，這種隱性的搜索框太不顯眼了，用戶(hù)很難發(fā)現并使用。( ?▽?)相比而言，右側的搜索框就能及時(shí)給用戶(hù)提供幫助。

3. 提供搜索按鈕

在搜索框中設置按鈕是為了讓用戶(hù)能夠明白搜索的觸動(dòng)方式，帶有按鈕的搜索框更易吸引用戶(hù)點(diǎn)擊進(jìn)行??搜索。不過(guò)，在設計搜索按鈕時(shí)，我們要注意控制它的尺寸大小，選取合適的區域，讓用戶(hù)可以移動(dòng)光標或手動(dòng)輕松點(diǎn)擊。另外，設置回車(chē)鍵提交搜索的(╯°□°)╯功能也是有必要的，因為現在很多用戶(hù)仍然保留著(zhù)點(diǎn)擊回車(chē)鍵觸動(dòng)按鈕的習慣。

4. 每頁(yè)都保留搜索輸入框

網(wǎng)站的每個(gè)頁(yè)面最好都有搜索框。這樣一來(lái)，當用戶(hù)在特定的頁(yè)面找不到想要的內容時(shí)，可以立( ?° ?? ?°)即通過(guò)搜索框獲取內容，這種設置是快速便捷的，是能夠(′▽?zhuān)?)顯著(zhù)提高用戶(hù)對網(wǎng)站好感的。

搜索框設計還有一??條原則，那就是簡(jiǎn)單易用。研究表(′?ω?`)明，一個(gè)沒(méi)有顯示高級選項的搜索框看上去更加友??好，可用性也更強。所以，一般情況下，在給用戶(hù)提供搜??索框時(shí)最好不要提供復雜的搜索選項。

6. 讓搜索框處于用戶(hù)預期的位置

當用戶(hù)想要使用(′?｀*)搜索框，卻需要花費不少精力去找時(shí)，用戶(hù)的體驗就已經(jīng)(jing)大大降低了。(?⊿?)網(wǎng)站上的搜索框最好易于察覺(jué)，放在用戶(hù)預期的位置，哪里才是用戶(hù)預期的位置呢?下面這個(gè)圖表是來(lái)自 A. Dawn Shai(′_ゝ`)kh 和 Keisi Lenz 的一項研究結果??，他們抽樣調查了142名用戶(hù)，了解用戶(hù)對于網(wǎng)站搜索框位置的偏好。從圖表中，我們可以看出大多數用戶(hù)會(huì )在(′?ω?`)網(wǎng)站的左上角??和右上角尋找搜索框，這主要是因為用戶(hù)在瀏覽網(wǎng)站時(shí)使用F型掃視法，而網(wǎng)站右上角是大多數用戶(hù)的首選區域，因此在設計搜索框時(shí)我們最好把它放在頂部靠右或頂ヽ(′ー｀)ノ部居中的位置。

小貼士：

在理想情況下，搜索框的設計應和整個(gè)網(wǎng)站的設計風(fēng)格保持一致。不過(guò)在視覺(jué)上要略微突出，便于用戶(hù)發(fā)覺(jué)它的存在;

網(wǎng)站的內容越多，搜索框就應該越明顯，確保輸入框和按鈕能夠與背景區域相互區別;

7. 合理的輸入框尺寸(?Д?)

輸入框尺寸太小是最常見(jiàn)的搜索框設計錯誤。不??少網(wǎng)站的輸入框都太小，雖然可以容納較長(cháng)的內容，但部分內容卻是不可見(jiàn)的，這種設計的可用性很差。由于視覺(jué)范圍的限制，用戶(hù)在輸入內容可能會(huì )下意識覺(jué)得只能采用短的、不精確的查詢(xún)方式，或是輸入了較長(cháng)的關(guān)鍵詞，卻在修改時(shí)遇到??麻煩。因此，小飛建議使??用能夠根據輸入關(guān)鍵詞長(cháng)度??而變長(cháng)的輸入框，這不僅可以節省屏幕空間，還能給予用戶(hù)充分的視覺(jué)提示。

8. 使用自動(dòng)搜索推薦機制

什么是自動(dòng)搜索推薦機制?以Google為例，當(′▽?zhuān)?)我們在搜索框中輸入"Apple Watch 2"，它會(huì )自動(dòng)出現相關(guān)詞條推薦搜索，這就是自動(dòng)搜索推薦機制的表現形式。谷歌在這方面擁有絕對的發(fā)言權，從2008年開(kāi)始，它就開(kāi)始統計用戶(hù)的搜索歷史，整理詞條推薦，以幫助用戶(hù)節省時(shí)間，創(chuàng )造更佳??的用戶(hù)體驗。??自動(dòng)搜索推薦機制(′Д` )能夠動(dòng)態(tài)地預(╯°□°）╯︵ ┻━┻測用戶(hù)的搜索方向，幫助用戶(hù)更快完成搜索。不過(guò)，在使用這種機制時(shí)我們也要注意以下幾點(diǎn)：

確保自動(dòng)搜索的推薦內容是有價(jià)值的。如果輸入框中出現不恰當或無(wú)用的搜索推薦，這非但不能為用戶(hù)的搜索提供便利，反而容易混淆和分散用戶(hù)的注意力。自動(dòng)搜索的推薦內容一定要基于用戶(hù)的搜索歷史數據來(lái)決定;

當用戶(hù)在輸入框輸入關(guān)鍵詞時(shí)，盡快給予用戶(hù)推薦信息，比( ?ヮ?)如在第三個(gè)字符之后，為用戶(hù)開(kāi)始提供??即時(shí)、有價(jià)值的建議，降低用戶(hù)的輸入難度和工作量;

盡量為用戶(hù)提供少于10個(gè)搜索結果，避免信息過(guò)載。

突出顯示輸入信息和推薦內容之間的差異;

9. 讓用戶(hù)明白哪些可以搜索到

總體而言，雖然搜索框看似簡(jiǎn)單，其背后卻蘊藏著(zhù)大量的設計知識。由于一點(diǎn)點(diǎn)變化也會(huì )對整個(gè)網(wǎng)站的用戶(hù)體驗造成很大的影響，我們在改動(dòng)(dong)搜索框時(shí)一定要足夠謹慎。如果你網(wǎng)站目前的轉化率還不錯，搜索框就不要做什么大的改動(dòng)了;但如果你網(wǎng)站的轉化率很低，其他區塊設計也沒(méi)有發(fā)現(xian)什么問(wèn)題，記得看看搜索框的設計是否存在缺陷。

快來(lái)起飛頁(yè)自助建站平臺（http://www.qif??eiye.com/?t_wd=a5）做一個(gè)響應式網(wǎng)站吧!