DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 網頁交互設計:網站的搜索框設計
網頁交互設計:網站的搜索框設計
編輯:關於網頁技巧     

網頁制作poluoluo文章簡介:在現實中,網站往往會隨著時間的推移,新的內容不斷的增遞,而且這些新內容會更加重要,那麼他對你之前設計的信息架構會有一定挑戰,可能新的內容不一定適合整個信息架構,這個時候會和你的當時精心設計架構是有違背的。那麼你的內容會打散在各個地方,每塊內容都會看上

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

在現實中,網站往往會隨著時間的推移,新的內容不斷的增遞,而且這些新內容會更加重要,那麼他對你之前設計的信息架構會有一定挑戰,可能新的內容不一定適合整個信息架構,這個時候會和你的當時精心設計架構是有違背的。那麼你的內容會打散在各個地方,每塊內容都會看上去比較特別,感覺不是在網站架構中的一樣。

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

雖然搜索的背後需要很高深厲害的程序算法,但不要忽視了前台的UI設計,我想可以看看更多現有網站的搜索框的設計。

什麼時候需要搜索?
並非每一個網站都需要搜索功能的,但隨之網站越來越多內容,它是滿足用戶以最快速度獲得所需信息的最有效的方法。如果網站導航非常簡單直觀,沒有內容能逃出網站的導航的話,那麼搜索對於這樣的網站沒有太大作用。
搜索應該是一種預防性的功能,因為當導航系統十分龐大復雜的時候,搜索是能力立即去解決麻煩的方法。它可以培養用戶要如何使用網絡獲得他們想要的信息。

因此,如果網站夠大,或者網站會逐漸龐大的網站,早點考慮優化自己的搜索引擎,那麼您的用戶會感謝你滴。

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

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

看看TechCrunch的設計,輸入框和提交按鈕,在配色方案完全符合網站的整體視覺風格。然而,它導致了一個問題:乍看之下,這真的很難看到的搜索框。用戶可以搜索它,因為它不站出來是不容易發現。雖然位置的搜索框不錯,很容易忽視,但這是不是一件好事。

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

Wikipedia的搜索框就沒有很直觀的體現搜索。用戶點擊“Go”和“Search”有什麼區別?功能上有什麼不同?能不能在設計上讓他們不太一樣麼。
設計體貼的搜索框

讓我們來看看一些經常反復出現的困難和問題,設計師可能會在設計搜索框時所顧慮的。

搜索框放在什麼位置?
有比較多的可能性,但只有少許是正確的設計。最方便的地方是網站頂部左上角或右上角。這兩個位置比較讓用戶發現。因為用戶最常見的F-型眼掃描模式。很多的博客往往將搜索框放在網站底部,看上去這個不是個好主意,但可能處於廣告等的考慮吧。

如何命名提交按鈕?
讓提交按鈕根據使用場景和用戶情感化的設計來命名,是一個不錯的主意。如:查找、查詢、搜索或者一個ICON來表示。

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

如何讓用戶如何搜索?
一個很好的想法就是把提示的文字放在輸入框內,當鼠標點擊輸入框時提示消失。這樣能明確告知該怎麼利用搜索框。雖然它需要用小小段JavaScript來實現。
 
許多網站開始使用Google提供的一些搜索服務,但是可能用戶不太喜歡這樣的搜索結果,而且Google的算法也不太適合某些公司的網站需求。當不可否認Google的出現打破了一些規則。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved