作為網(wǎng)頁(yè)中最常見(jiàn)的UI控件之一，搜索框的組成非常簡(jiǎn)單：輸入框+觸摸按鈕，因此很多網(wǎng)站管理員對(duì)它沒(méi)有足夠的重視。實(shí)際上，搜索框在網(wǎng)站中的作用不容小覷，高可用搜索框可以經(jīng)常節(jié)省用戶獲取信息和內(nèi)容的時(shí)間，大大提高了用戶的瀏覽體驗(yàn)。特別是在基于內(nèi)容的網(wǎng)站中，當(dāng)用戶面對(duì)復(fù)雜內(nèi)容時(shí)，他們會(huì)在第一時(shí)間查找搜索框，輸入關(guān)鍵字以獲得所需內(nèi)容，而強(qiáng)大的搜索框可以促進(jìn)用戶交互。 。因此，在設(shè)計(jì)網(wǎng)站時(shí)，我們應(yīng)該花更多的時(shí)間考慮搜索框的設(shè)計(jì)方式。如果您沒(méi)有線索，請(qǐng)不要擔(dān)心，讓我們來(lái)看看小飛搜索框設(shè)計(jì)的關(guān)鍵點(diǎn)！
1. 使用放大鏡圖標(biāo)
現(xiàn)在，當(dāng)您看到放大鏡圖標(biāo)時(shí)，用戶自然會(huì)想到搜索功能。這種聯(lián)系在長(zhǎng)期使用中逐漸形成，并被每個(gè)人廣泛接受。因此，在網(wǎng)站上設(shè)計(jì)搜索框時(shí)，我們可以使用放大鏡圖標(biāo)。畢竟，它是最常用和最易識(shí)別的（即使沒(méi)有文本標(biāo)簽，用戶也可以輕松識(shí)別它）。當(dāng)然，還要注意放大鏡圖標(biāo)應(yīng)該簡(jiǎn)單直觀，最大限度地減少不必要的細(xì)節(jié)，提高圖標(biāo)的可識(shí)別性。
2. 讓搜索框足夠顯眼
搜索框設(shè)計(jì)的一個(gè)重要標(biāo)準(zhǔn)是使搜索框脫穎而出，清晰可見(jiàn)的搜索框允許用戶快速查找和使用它。下圖是一個(gè)很好的例子。左側(cè)和右側(cè)是兩種不同的搜索框設(shè)計(jì)。左側(cè)的搜索框隱藏在圖標(biāo)后面。這個(gè)隱藏的搜索框太不起眼，用戶難以查找和使用。相比之下，右側(cè)的搜索框可以及時(shí)幫助用戶。
3. 提供搜索按鈕
該按鈕設(shè)置在搜索框中以允許用戶理解搜索的觸摸，并且?guī)О粹o的搜索框更有可能吸引用戶點(diǎn)擊搜索。但是，在設(shè)計(jì)搜索按鈕時(shí)，要注意控制其大小，選擇合適的區(qū)域，以便用戶可以移動(dòng)光標(biāo)或手動(dòng)點(diǎn)擊。此外，有必要設(shè)置Enter鍵以提交搜索功能，因?yàn)樵S多用戶仍然習(xí)慣于單擊Enter鍵來(lái)觸摸按鈕。
4. 每頁(yè)都保留搜索輸入框
最好為網(wǎng)站的每個(gè)頁(yè)面都有一個(gè)搜索框。這樣，當(dāng)用戶在特定頁(yè)面上找不到所需內(nèi)容時(shí)，可以通過(guò)搜索框立即獲得內(nèi)容。此設(shè)置快速方便，可以顯著提高用戶對(duì)網(wǎng)站的感受。
5. 讓搜索框盡量簡(jiǎn)單
搜索框設(shè)計(jì)中還有一個(gè)簡(jiǎn)單易用的原則。研究表明，不顯示高級(jí)選項(xiàng)的搜索框看起來(lái)更友好和可用。因此，通常，在為用戶提供搜索框時(shí)，最好不要提供復(fù)雜的搜索選項(xiàng)。
6. 讓搜索框處于用戶預(yù)期的位置
當(dāng)用戶想要使用搜索框時(shí)，但需要花費(fèi)很多精力才能找到，用戶體驗(yàn)已大大減少。網(wǎng)站上的搜索框最明顯，并放置在用戶期望的位置。用戶的預(yù)期位置在哪里？下圖是A. Dawn Shaikh和Keisi Lenz的一項(xiàng)研究，他抽樣了142人。用戶，了解用戶對(duì)網(wǎng)站搜索框位置的偏好。從圖表中，我們可以看到大多數(shù)用戶在網(wǎng)站的左上角和右上角尋找搜索框，主要是因?yàn)橛脩粼跒g覽網(wǎng)站時(shí)使用F型瀏覽，并且網(wǎng)站的右上角是大多數(shù)用戶的首選區(qū)域。因此，在設(shè)計(jì)搜索框時(shí)，我們最好將其放在右上角或頂部中心。
提示：
理想情況下，搜索框的設(shè)計(jì)應(yīng)與整個(gè)網(wǎng)站的設(shè)計(jì)風(fēng)格一致。但是，它應(yīng)該在視覺(jué)上略顯明顯，以便用戶可以找到它的存在;
網(wǎng)站上的內(nèi)容越多，搜索框就越明顯，確保輸入框和按鈕可以與背景區(qū)域區(qū)分開(kāi)來(lái);
7. 合理的輸入框尺寸
輸入框尺寸太小是最常見(jiàn)的搜索框設(shè)計(jì)錯(cuò)誤。許多網(wǎng)站的輸入框太小。雖然它們可以容納更長(zhǎng)的內(nèi)容，但某些內(nèi)容是不可見(jiàn)的。這種設(shè)計(jì)的可用性非常差。由于視覺(jué)范圍有限，用戶可能會(huì)下意識(shí)地認(rèn)為他們只能使用簡(jiǎn)短，不準(zhǔn)確的查詢方法或輸入長(zhǎng)關(guān)鍵字，但他們編輯有困難。因此，Xiaofei建議使用一個(gè)可以根據(jù)輸入關(guān)鍵字的長(zhǎng)度加長(zhǎng)的輸入框，這不僅可以節(jié)省屏幕空間，還可以為用戶提供足夠的視覺(jué)提示。
8. 使用自動(dòng)搜索推薦機(jī)制
什么是自動(dòng)搜索推薦機(jī)制？以Google為例。當(dāng)我們?cè)谒阉骺蛑休斎搿癆pple Watch 2”時(shí)，它會(huì)自動(dòng)顯示相關(guān)的搜索建議。這是自動(dòng)搜索推薦機(jī)制的表達(dá)。谷歌在這方面有絕對(duì)的發(fā)言權(quán)。自2008年以來(lái)，它已開(kāi)始統(tǒng)計(jì)用戶搜索歷史并組織術(shù)語(yǔ)推薦，以幫助用戶節(jié)省時(shí)間并創(chuàng)造更好的用戶體驗(yàn)。自動(dòng)搜索推薦機(jī)制動(dòng)態(tài)預(yù)測(cè)用戶的搜索方向，并幫助用戶更快地完成搜索。但是，使用此機(jī)制時(shí)我們還應(yīng)注意以下幾點(diǎn)：
確保自動(dòng)搜索的建議很有價(jià)值。如果輸入框中出現(xiàn)不適當(dāng)或無(wú)用的搜索建議，這將不利于用戶的搜索，但很容易混淆和分散用戶的注意力。必須根據(jù)用戶的搜索歷史數(shù)據(jù)確定自動(dòng)搜索的推薦內(nèi)容;
當(dāng)用戶在輸入框中輸入關(guān)鍵詞時(shí)，盡快給用戶提供推薦信息，例如，在第三個(gè)角色之后，為用戶提供即時(shí)有價(jià)值的建議，減少了用戶的難度和工作量;
嘗試為用戶提供少于10個(gè)搜索結(jié)果，以避免信息過(guò)載。
突出顯示輸入和推薦內(nèi)容之間的差異;
9. 讓用戶明白哪些可以搜索到
讓用戶知道可以在網(wǎng)站上搜索什么內(nèi)容也是改善用戶對(duì)網(wǎng)站的感覺(jué)的方式，這可以通過(guò)在輸入框中添加占位符文本來(lái)完成。以下圖片是IMDB網(wǎng)站，它在搜索框中添加了一些占位符字符，提示用戶搜索搜索框中的可搜索內(nèi)容以吸引用戶進(jìn)行搜索。隨著HTML5網(wǎng)站建設(shè)技術(shù)的不斷發(fā)展，這種占位符的添加形式并不難設(shè)計(jì)。但是，建議占位符的內(nèi)容不要太多，以免給用戶帶來(lái)認(rèn)知負(fù)擔(dān)。
總的來(lái)說(shuō)，雖然搜索框看起來(lái)很簡(jiǎn)單，但它背后有很多設(shè)計(jì)知識(shí)。由于稍微改變也會(huì)對(duì)整個(gè)網(wǎng)站的用戶體驗(yàn)產(chǎn)生重大影響，因此在更改搜索框時(shí)必須謹(jǐn)慎。如果您網(wǎng)站的當(dāng)前轉(zhuǎn)化率良好，請(qǐng)勿對(duì)搜索框進(jìn)行任何重大更改;但如果您網(wǎng)站的轉(zhuǎn)化率較低，并且沒(méi)有其他區(qū)塊設(shè)計(jì)發(fā)現(xiàn)任何問(wèn)題，請(qǐng)記住查看搜索框設(shè)計(jì)是否存在。缺陷。
來(lái)到起飛頁(yè)自助網(wǎng)站（http://www.qifeiye.com/?t_wd=a5）成為一個(gè)快速響應(yīng)的網(wǎng)站！