在內(nèi)容為主的網(wǎng)站中，搜索框往往是最常用的設(shè)計(jì)元素之一。從可用性的角度來看，搜索功能是用戶有了明確的內(nèi)容想看的時(shí)候最后使用的功能。如果一個(gè)網(wǎng)站沒有足夠合理的信息架構(gòu)體系，那么搜索引擎不僅僅是有幫助性的，甚至是至關(guān)重要的設(shè)計(jì)功能。有可能比網(wǎng)站的導(dǎo)航更對(duì)用戶有幫助。事實(shí)上，搜索是用戶了解在一些綜合性網(wǎng)站內(nèi)容最直接有效的方式。最好的設(shè)計(jì)就是給用戶提供一個(gè)簡(jiǎn)簡(jiǎn)單單的搜索框在頁(yè)面顯眼固定的位置上，但卻有強(qiáng)力搜索的能力和范圍寬廣的功能。

在現(xiàn)實(shí)中，網(wǎng)站往往會(huì)隨著時(shí)間的推移，新的內(nèi)容不斷的增遞，而且這些新內(nèi)容會(huì)更加重要，那么他對(duì)你之前設(shè)計(jì)的信息架構(gòu)會(huì)有一定挑戰(zhàn)，可能新的內(nèi)容不一定適合整個(gè)信息架構(gòu)，這個(gè)時(shí)候會(huì)和你的當(dāng)時(shí)精心設(shè)計(jì)架構(gòu)是有違背的。那么你的內(nèi)容會(huì)打散在各個(gè)地方，每塊內(nèi)容都會(huì)看上去比較特別，感覺不是在網(wǎng)站架構(gòu)中的一樣。

當(dāng)內(nèi)容被分散四處，沒有內(nèi)容組織的時(shí)候，用戶就更加困難找到他說需要的信息了。用戶的可用性降低了，沒有他所需信息的時(shí)候，用戶會(huì)選擇離開網(wǎng)站，或去Google去試試運(yùn)氣。這個(gè)時(shí)候還有唯一的希望那就是：一個(gè)搜索框。

雖然搜索的背后需要很高深厲害的程序算法，但不要忽視了前臺(tái)的UI設(shè)計(jì)，我想可以看看更多現(xiàn)有網(wǎng)站的搜索框的設(shè)計(jì)。

什么時(shí)候需要搜索？ 并非每一個(gè)網(wǎng)站都需要搜索功能的，但隨之網(wǎng)站越來越多內(nèi)容，它是滿足用戶以最快速度獲得所需信息的最有效的方法。如果網(wǎng)站導(dǎo)航非常簡(jiǎn)單直觀，沒有內(nèi)容能逃出網(wǎng)站的導(dǎo)航的話，那么搜索對(duì)于這樣的網(wǎng)站沒有太大作用。 搜索應(yīng)該是一種預(yù)防性的功能，因?yàn)楫?dāng)導(dǎo)航系統(tǒng)十分龐大復(fù)雜的時(shí)候，搜索是能力立即去解決麻煩的方法。它可以培養(yǎng)用戶要如何使用網(wǎng)絡(luò)獲得他們想要的信息。

因此，如果網(wǎng)站夠大，或者網(wǎng)站會(huì)逐漸龐大的網(wǎng)站，早點(diǎn)考慮優(yōu)化自己的搜索引擎，那么您的用戶會(huì)感謝你滴。

搜索框=輸入框+提交按鈕 在設(shè)計(jì)中的搜索框變得很重要。輸入框必須清晰可見，很容易辨認(rèn)和使用。有人可能會(huì)認(rèn)為，在搜索框并不需要什么設(shè)計(jì)。看上去，這只有兩個(gè)簡(jiǎn)單的要素：輸入框和提交按鈕。任何設(shè)計(jì)都不平凡。設(shè)計(jì)是很多要考慮的，比如：輸入框的長(zhǎng)度取舍，輸入文字顯示的設(shè)計(jì)。有些設(shè)計(jì)師就連提交按鈕都沒有設(shè)計(jì)上去。

事實(shí)上，設(shè)計(jì)的搜尋框是一個(gè)大問題。因?yàn)楫?dāng)用戶有需求找某些信息的時(shí)候，搜索是最有效果的功能。那么搜索框的位置很重要，還有輸入框應(yīng)該讓用戶感覺可以輸入，搜索按鈕看上去應(yīng)該更像是個(gè)按鈕。

看看TechCrunch的設(shè)計(jì)，輸入框和提交按鈕，在配色方案完全符合網(wǎng)站的整體視覺風(fēng)格。然而，它導(dǎo)致了一個(gè)問題：乍看之下，這真的很難看到的搜索框。用戶可以搜索它，因?yàn)樗徽境鰜硎遣蝗菀装l(fā)現(xiàn)。雖然位置的搜索框不錯(cuò)，很容易忽視，但這是不是一件好事。

搜索框容易犯的錯(cuò)誤 在設(shè)計(jì)的時(shí)候我發(fā)現(xiàn)了幾個(gè)問題： 1.?把搜索框放到頁(yè)面底部，或隱藏在導(dǎo)航菜單中。 2.?將輸入框設(shè)計(jì)比較短，暗示讓用戶使用短詞來查詢。 3.?提交按鈕設(shè)計(jì)的比較小，迫使用戶必須讓鼠標(biāo)指向非常精準(zhǔn)。 4.?搜索框比較難讓用戶發(fā)現(xiàn)。 5.?搜索框的形式和其他功能形式一樣的設(shè)計(jì)，比如聯(lián)系人中的設(shè)計(jì)。 6.?在全設(shè)計(jì)中的頁(yè)面（推廣宣傳），搜索框被設(shè)計(jì)的很難發(fā)現(xiàn)。 7.?提供功能過于強(qiáng)大的搜索，當(dāng)用戶是需要簡(jiǎn)單。 8.?提交按鈕的名字隨意的亂叫。 9.?并非搜索的功能，當(dāng)看上去很像搜索框。 10.?提供多個(gè)提交按鈕。

Wikipedia的搜索框就沒有很直觀的體現(xiàn)搜索。用戶點(diǎn)擊“Go”和“Search”有什么區(qū)別？功能上有什么不同？能不能在設(shè)計(jì)上讓他們不太一樣么。 設(shè)計(jì)體貼的搜索框

讓我們來看看一些經(jīng)常反復(fù)出現(xiàn)的困難和問題，設(shè)計(jì)師可能會(huì)在設(shè)計(jì)搜索框時(shí)所顧慮的。

搜索框放在什么位置？ 有比較多的可能性，但只有少許是正確的設(shè)計(jì)。最方便的地方是網(wǎng)站頂部左上角或右上角。這兩個(gè)位置比較讓用戶發(fā)現(xiàn)。因?yàn)橛脩糇畛Ｒ姷腇-型眼掃描模式。很多的博客往往將搜索框放在網(wǎng)站底部，看上去這個(gè)不是個(gè)好主意，但可能處于廣告等的考慮吧。

如何命名提交按鈕？ 讓提交按鈕根據(jù)使用場(chǎng)景和用戶情感化的設(shè)計(jì)來命名，是一個(gè)不錯(cuò)的主意。如：查找、查詢、搜索或者一個(gè)ICON來表示。

這樣的搜索按鈕圖片是非常讓用戶困惑的。

如何讓用戶如何搜索？ 一個(gè)很好的想法就是把提示的文字放在輸入框內(nèi)，當(dāng)鼠標(biāo)點(diǎn)擊輸入框時(shí)提示消失。這樣能明確告知該怎么利用搜索框。雖然它需要用小小段JavaScript來實(shí)現(xiàn)。 許多網(wǎng)站開始使用Google提供的一些搜索服務(wù)，但是可能用戶不太喜歡這樣的搜索結(jié)果，而且Google的算法也不太適合某些公司的網(wǎng)站需求。當(dāng)不可否認(rèn)Google的出現(xiàn)打破了一些規(guī)則

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)站欄目：網(wǎng)站的搜索框設(shè)計(jì)
標(biāo)題來源：http://www.rwnh.cn/news12/314462.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站排名、云服務(wù)器、網(wǎng)頁(yè)設(shè)計(jì)公司、企業(yè)網(wǎng)站制作、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)