完美的網(wǎng)站搜索框有哪些要求?
  • 更新時(shí)間:2024-12-25 02:14:30
  • 網(wǎng)站建設(shè)
  • 發(fā)布時(shí)間:1年前
  • 285

其實(shí)搜索框在網(wǎng)站制作中的作用不容小覷。一個(gè)易用性強(qiáng)的搜索框,往往能有效地節(jié)省用戶獲取信息和內(nèi)容的時(shí)間,大大提升用戶的瀏覽體驗(yàn)。搜索框作為網(wǎng)頁(yè)上最常見的UI控件之一,其組成非常簡(jiǎn)單:輸入框+觸摸按鈕,所以很多站長(zhǎng)對(duì)它的重視不夠。特別是在內(nèi)容型網(wǎng)站中,當(dāng)用戶面對(duì)復(fù)雜的內(nèi)容時(shí),他們會(huì)立即尋找搜索框并輸入關(guān)鍵詞來(lái)獲取想要的內(nèi)容。強(qiáng)大的搜索框可以促進(jìn)用戶交互。所以在設(shè)計(jì)網(wǎng)站的時(shí)候,我們應(yīng)該花更多的時(shí)間去思考如何設(shè)計(jì)搜索框。如果你還沒有頭緒,別著急,下面就和廣州網(wǎng)站建設(shè)公司佰維一起來(lái)看看搜索框設(shè)計(jì)的幾個(gè)要點(diǎn)吧!

  1. 使用放大鏡圖標(biāo)

現(xiàn)在,當(dāng)用戶看到放大鏡圖標(biāo)時(shí),用戶會(huì)自動(dòng)想到搜索功能。這種聯(lián)想是在長(zhǎng)期的使用中逐漸形成的,得到了大家的廣泛認(rèn)可。因此,在設(shè)計(jì)網(wǎng)站的搜索框時(shí),我們可以多使用放大鏡圖標(biāo),畢竟它是最常用的,也容易識(shí)別(即使沒有文字標(biāo)簽,用戶也能輕松識(shí)別)。當(dāng)然,還需要注意的是,放大鏡圖標(biāo)要簡(jiǎn)潔直觀,盡量減少不必要的細(xì)節(jié),提高圖標(biāo)的辨識(shí)度。

  2. 讓搜索框足夠顯眼

搜索框設(shè)計(jì)的一個(gè)重要標(biāo)準(zhǔn)是:讓搜索框足夠醒目,清晰可見的搜索框可以讓用戶快速找到并使用。下圖很好地證明了這一點(diǎn)。左右兩側(cè)有兩種不同的搜索框設(shè)計(jì)。左側(cè)的搜索框隱藏在圖標(biāo)后面。這個(gè)隱藏的搜索框太不起眼了,用戶很難找到和使用。相比之下,右側(cè)的搜索框可以為用戶提供及時(shí)的幫助。

  3. 提供搜索按鈕

在搜索框中設(shè)置按鈕的目的是讓用戶了解如何搜索。帶有按鈕的搜索框更容易吸引用戶點(diǎn)擊搜索。但是在設(shè)計(jì)搜索按鈕的時(shí)候,要注意控制它的大小,選擇一個(gè)合適的區(qū)域,方便用戶移動(dòng)光標(biāo)或者方便的手動(dòng)點(diǎn)擊。另外,還需要設(shè)置回車鍵提交搜索的功能,因?yàn)楹芏嘤脩暨€保留著點(diǎn)擊回車鍵觸摸按鈕的習(xí)慣。

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

理想情況下,您網(wǎng)站的每個(gè)頁(yè)面都應(yīng)該有一個(gè)搜索框。這樣,當(dāng)用戶無(wú)法在特定頁(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. 使用自動(dòng)搜索推薦機(jī)制

什么是自動(dòng)搜索推薦機(jī)制?以谷歌為例。當(dāng)我們?cè)谒阉骺蛑休斎搿癆pple Watch 2”時(shí),它會(huì)自動(dòng)推薦相關(guān)詞條進(jìn)行搜索。這就是自動(dòng)搜索推薦機(jī)制的體現(xiàn)。谷歌在這方面擁有絕對(duì)的話語(yǔ)權(quán)。從2008年開始,它開始統(tǒng)計(jì)用戶的搜索歷史,組織單詞推薦,幫助用戶節(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)不合適或無(wú)用的搜索建議,這不僅不能方便用戶的搜索,反而容易使用戶產(chǎn)生混淆和分心。自動(dòng)搜索的推薦內(nèi)容必須根據(jù)用戶的搜索歷史數(shù)據(jù)來(lái)確定;

當(dāng)用戶在輸入框中輸入關(guān)鍵詞時(shí),第一時(shí)間向用戶推薦信息,比如在第三個(gè)字符之后,為用戶提供即時(shí)有價(jià)值的建議,降低用戶輸入的難度和工作量;

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

突出輸入信息與推薦內(nèi)容的區(qū)別;

  7. 讓用戶明白哪些可以搜索到

讓用戶知道網(wǎng)站上可以搜索哪些內(nèi)容也是提高用戶對(duì)網(wǎng)站好感度的一種方式,可以通過(guò)在輸入框中添加占位符文本來(lái)實(shí)現(xiàn)。下圖是IMDB的網(wǎng)站。它在搜索框中添加了一些占位符,提醒用戶搜索框中可搜索的內(nèi)容,吸引用戶搜索。隨著HTML5建站技術(shù)的不斷發(fā)展,加入這種形式的占位符在設(shè)計(jì)上并不是什么難事。但建議占位符的內(nèi)容不要過(guò)多,以免給用戶帶來(lái)認(rèn)知負(fù)擔(dān)。

  8. 合理的輸入框尺寸

輸入框太小是最常見的搜索框設(shè)計(jì)錯(cuò)誤。很多網(wǎng)站的輸入框都太小了。盡管它們可以容納較長(zhǎng)的內(nèi)容,但有些內(nèi)容是不可見的。這種設(shè)計(jì)的可用性很差。由于視覺范圍的限制,用戶可能會(huì)下意識(shí)地覺得在輸入內(nèi)容時(shí)只能使用短小精悍的查詢方式,或者輸入較長(zhǎng)的關(guān)鍵詞,但在修改時(shí)卻遇到了麻煩。所以小飛推薦使用可以根據(jù)輸入關(guān)鍵詞的長(zhǎng)度加長(zhǎng)的輸入框,這樣既節(jié)省了屏幕空間,又給了用戶

戶充分的視覺提示。
  9. 讓搜索框處于用戶預(yù)期的位置
  當(dāng)用戶想要使用搜索框,卻需要花費(fèi)不少精力去找時(shí),用戶的體驗(yàn)就已經(jīng)大大降低了。網(wǎng)站上的搜索框最好易于察覺,放在用戶預(yù)期的位置,哪里才是用戶預(yù)期的位置呢?下面這個(gè)圖表是來(lái)自 A. Dawn Shaikh 和 Keisi Lenz 的一項(xiàng)研究結(jié)果,他們抽樣調(diào)查了142名用戶,了解用戶對(duì)于網(wǎng)站搜索框位置的偏好。從圖表中,我們可以看出大多數(shù)用戶會(huì)在網(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)格保持一致。不過(guò)在視覺上要略微突出,便于用戶發(fā)覺它的存在;
  網(wǎng)站的內(nèi)容越多,搜索框就應(yīng)該越明顯,確保輸入框和按鈕能夠與背景區(qū)域相互區(qū)別。
  總體而言,雖然搜索框看似簡(jiǎn)單,其背后卻蘊(yùn)藏著大量的設(shè)計(jì)知識(shí)。由于一點(diǎn)點(diǎn)變化也會(huì)對(duì)整個(gè)網(wǎng)站的用戶體驗(yàn)造成很大的影響,我們?cè)诟膭?dòng)搜索框時(shí)一定要足夠謹(jǐn)慎。如果你網(wǎng)站目前的轉(zhuǎn)化率還不錯(cuò),搜索框就不要做什么大的改動(dòng)了;但如果你網(wǎng)站的轉(zhuǎn)化率很低,其他區(qū)塊設(shè)計(jì)也沒有發(fā)現(xiàn)什么問題,記得看看搜索框的設(shè)計(jì)是否存在缺陷。

我們專注高端建站,小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對(duì)接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn),每一個(gè)項(xiàng)目承諾做到滿意為止,多一次對(duì)比,一定讓您多一份收獲!

本文章出于推來(lái)客官網(wǎng),轉(zhuǎn)載請(qǐng)表明原文地址:https://www.tlkjt.com/web/11871.html
推薦文章

在線客服

掃碼聯(lián)系客服

3985758

回到頂部