網(wǎng)站的搜索框設(shè)計

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

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

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

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

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

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

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

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

看看TechCrunch的設(shè)計，輸入框和提交按鈕，在配色方案完全符合網(wǎng)站的整體視覺風(fēng)格。然而，它導(dǎo)致了一個問題：乍看之下，這真的很難看到的搜索框。用戶可以搜索它，因為它不站出來是不容易發(fā)現(xiàn)。雖然位置的搜索框不錯，很容易忽視，但這是不是一件好事。

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

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

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

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

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

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

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

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

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

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

廣告

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