簡(jiǎn)體: 簡(jiǎn)體中文 English

尚品簽約辰欣藥業(yè)股份有限公司官網(wǎng)建設(shè)

類型：尚品動(dòng)態(tài) 了解更多

首頁(yè)/ 新聞/ 網(wǎng)站建設(shè) /正文

完美的網(wǎng)站搜索框需要符合哪些要求？

來(lái)源：尚品中國(guó)| 類型：網(wǎng)站百科| 時(shí)間：2018-06-01

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

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

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

　　2. 讓搜索框足夠顯眼

　　搜索框設(shè)計(jì)有一條重要的準(zhǔn)則就是：讓搜索框足夠顯眼，清晰可見的搜索框能讓用戶快速發(fā)現(xiàn)并使用。下圖就很好地證明這一點(diǎn)，左右兩側(cè)是兩種不同的搜索框設(shè)計(jì)，左邊的搜索框隱藏在圖標(biāo)之后，這種隱性的搜索框太不顯眼了，用戶很難發(fā)現(xiàn)并使用。相比而言，右側(cè)的搜索框就能及時(shí)給用戶提供幫助。

　　3. 提供搜索按鈕

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

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

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

　　5. 讓搜索框盡量簡(jiǎn)單

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

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

　　什么是自動(dòng)搜索推薦機(jī)制?以Google為例，當(dāng)我們?cè)谒阉骺蛑休斎?quot;Apple Watch 2"，它會(huì)自動(dòng)出現(xiàn)相關(guān)詞條推薦搜索，這就是自動(dòng)搜索推薦機(jī)制的表現(xiàn)形式。谷歌在這方面擁有絕對(duì)的發(fā)言權(quán)，從2008年開始，它就開始統(tǒng)計(jì)用戶的搜索歷史，整理詞條推薦，以幫助用戶節(jié)省時(shí)間，創(chuàng)造更佳的用戶體驗(yàn)。自動(dòng)搜索推薦機(jī)制能夠動(dòng)態(tài)地預(yù)測(cè)用戶的搜索方向，幫助用戶更快完成搜索。不過(guò)，在使用這種機(jī)制時(shí)我們也要注意以下幾點(diǎn)：

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

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

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

　　突出顯示輸入信息和推薦內(nèi)容之間的差異;

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

　　讓用戶知道在網(wǎng)站中可以搜索到哪些內(nèi)容，也是一種能夠提高用戶對(duì)網(wǎng)站好感度的方法，這可以通過(guò)在輸入框中添加占位符文字做到。下圖是IMDB的網(wǎng)站，它在搜索框中添加了一些占位字符，提示用戶搜索框中可搜索的內(nèi)容，吸引用戶進(jìn)行搜索。隨著HTML5建站技術(shù)的不斷發(fā)展，這種形式的占位符添加在設(shè)計(jì)時(shí)也不沒有什么難度。不過(guò)這里建議占位符的內(nèi)容不要太多，避免給用戶帶來(lái)認(rèn)知負(fù)擔(dān)。

　　8. 合理的輸入框尺寸

　　輸入框尺寸太小是最常見的搜索框設(shè)計(jì)錯(cuò)誤。不少網(wǎng)站的輸入框都太小，雖然可以容納較長(zhǎng)的內(nèi)容，但部分內(nèi)容卻是不可見的，這種設(shè)計(jì)的可用性很差。由于視覺范圍的限制，用戶在輸入內(nèi)容可能會(huì)下意識(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)什么問(wèn)題，記得看看搜索框的設(shè)計(jì)是否存在缺陷。

來(lái)源聲明：本文章系尚品中國(guó)編輯原創(chuàng)或采編整理，如需轉(zhuǎn)載請(qǐng)注明來(lái)自尚品中國(guó)。以上內(nèi)容部分(包含圖片、文字)來(lái)源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)及時(shí)與本站聯(lián)系（010-60259772）。

上一篇：網(wǎng)站更換服務(wù)器的需要注意哪些事項(xiàng)? 下一篇：如何設(shè)計(jì)響應(yīng)式網(wǎng)站？

TAG標(biāo)簽：

建站流程

網(wǎng)站需求
網(wǎng)站策劃方案
頁(yè)面設(shè)計(jì)風(fēng)格
確認(rèn)交付使用
資料錄入優(yōu)化
程序設(shè)計(jì)開發(fā)
后續(xù)跟蹤服務(wù)
聯(lián)系電話
010-60259772

預(yù)約專業(yè)咨詢顧問(wèn)溝通！

免責(zé)聲明

非常感謝您訪問(wèn)我們的網(wǎng)站。在您使用本網(wǎng)站之前，請(qǐng)您仔細(xì)閱讀本聲明的所有條款。

1、本站部分內(nèi)容來(lái)源自網(wǎng)絡(luò)，涉及到的部分文章和圖片版權(quán)屬于原作者，本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流，切勿用于任何商業(yè)活動(dòng)。

2、本站不承擔(dān)用戶因使用這些資源對(duì)自己和他人造成任何形式的損失或傷害。

3、本聲明未涉及的問(wèn)題參見國(guó)家有關(guān)法律法規(guī)，當(dāng)本聲明與國(guó)家法律法規(guī)沖突時(shí)，以國(guó)家法律法規(guī)為準(zhǔn)。

4、如果侵害了您的合法權(quán)益，請(qǐng)您及時(shí)與我們,我們會(huì)在第一時(shí)間刪除相關(guān)內(nèi)容!

聯(lián)系方式：010-60259772
電子郵件：394588593@qq.com

羞羞久久久久久,久久精品国产WWW456C0M,国产精品自产拍高潮在线观看,国产精品久久久久影院嫩草

高校集群解決方案

強(qiáng)軍網(wǎng)建設(shè)解決方案

政府事業(yè)解決方案

智慧會(huì)展解決方案

科研領(lǐng)域解決方案

智慧景區(qū)解決方案

海外房產(chǎn)解決方案

網(wǎng)站建設(shè)

小程序

移動(dòng)互聯(lián)網(wǎng)

網(wǎng)絡(luò)營(yíng)銷

VI設(shè)計(jì)

尚品簽約辰欣藥業(yè)股份有限公司官網(wǎng)建設(shè)

完美的網(wǎng)站搜索框需要符合哪些要求？

建站流程

網(wǎng)站需求

網(wǎng)站策劃方案

頁(yè)面設(shè)計(jì)風(fēng)格

確認(rèn)交付使用

資料錄入優(yōu)化

程序設(shè)計(jì)開發(fā)

后續(xù)跟蹤服務(wù)

熱門標(biāo)簽

最新文章

網(wǎng)站設(shè)計(jì)中不可忽視的三大關(guān)鍵要素

跨越語(yǔ)言障礙拓展國(guó)際市場(chǎng)，多語(yǔ)言支持助力外貿(mào)網(wǎng)站設(shè)計(jì)全球化布局

外貿(mào)網(wǎng)站建設(shè)一站式解決方案：從設(shè)計(jì)到優(yōu)化

推薦新聞

科研院所網(wǎng)站建設(shè)要考慮什么？從哪些角度出發(fā)？

SEO網(wǎng)站優(yōu)化之軟文推廣的問(wèn)題

網(wǎng)站建設(shè)好以后提交網(wǎng)站死鏈接的方法是？

2021年外貿(mào)企業(yè)網(wǎng)站建設(shè)費(fèi)用

電子商務(wù)下的貿(mào)易與傳統(tǒng)貿(mào)易的比較

新網(wǎng)站做seo優(yōu)化的方法

預(yù)約專業(yè)咨詢顧問(wèn)溝通！

免責(zé)聲明

電話咨詢

在線咨詢

微信咨詢

現(xiàn)在就與專業(yè)咨詢顧問(wèn)溝通！

免責(zé)聲明

科研院所網(wǎng)站建設(shè)要考慮什么？從哪些角度出發(fā)？

網(wǎng)站建設(shè)好以后提交網(wǎng)站死鏈接的方法是？

預(yù)約專業(yè)咨詢顧問(wèn)溝通！