搜索框雖然在整個(gè)網(wǎng)站頁(yè)面上可以說(shuō)是不起眼的一丟丟，但它存在的意義是非常大的。可以方便任何用戶(hù)想要找到他們想要了解的東西，在設計搜索框時(shí)就需要用心，才能讓用戶(hù)用的得心應手。那么，的搜索框設計，需要注意哪幾點(diǎn)要素？具體我們看看深圳網(wǎng)站設計小編的介紹吧。

　　搜索框時(shí)我們常用的UI控件之一，它存在于所有的網(wǎng)站和APP中，很多人認為搜索框是不需要設計的，感覺(jué)它的存在在普通不過(guò)的元素組成的，其實(shí)搜索框存在的明顯與否，會(huì )直接影響用戶(hù)體驗度，而明顯程度是可以用設計來(lái)體現的。

　　1、使用放大鏡圖標

　　時(shí)至今日，搜索的概念和放大鏡圖標之間的關(guān)系已經(jīng)深入人心，根深蒂固了。在日常常用、易于識別的幾個(gè)圖標當中，放大鏡所帶代表的搜索圖標就是其中之一。

　　即使在沒(méi)有文本標簽標識的情況下，用戶(hù)也能輕松地識別圖標的含義。

　　小貼士：使用簡(jiǎn)略直觀(guān)的放大鏡圖標，細節越少，越容易識別。

　　2、顯眼的搜索輸入框

　　如果搜索是你的網(wǎng)站或者APP的重要功能的話(huà)，你應當讓搜索框足夠顯眼，這樣的能設計讓用戶(hù)快發(fā)現它的存在。

　　左邊：搜索功能隱藏在圖標之后

　　顯示完整的文本輸入框是很重要的，隱藏在按鈕背后的輸入框會(huì )讓用戶(hù)覺(jué)得不是那么明顯，不容易被快速發(fā)現。需要點(diǎn)擊之后用戶(hù)才能看到。
　　3、提供搜索按鈕

　　按鈕的存在讓用戶(hù)能夠明白搜索的觸發(fā)方式——也就是說(shuō)通過(guò)觸發(fā)按鈕來(lái)完成這一操作。

　　小貼士：

　　·控制搜索按鈕的尺寸大小，讓用戶(hù)使用光標可以輕松找到并點(diǎn)擊，讓觸發(fā)區域大小合適。
　　·讓用戶(hù)可以通過(guò)回車(chē)鍵提交搜索，許多用戶(hù)仍然有通過(guò)點(diǎn)擊鍵盤(pán)按鍵來(lái)觸發(fā)搜索的習慣。

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

　　你應該為用戶(hù)擁有在每個(gè)頁(yè)面都能立刻進(jìn)行搜索的權限，如果你的用戶(hù)在特定的頁(yè)面找不到他們想要的內容，可以立刻通過(guò)搜索獲取內容，無(wú)論他在網(wǎng)站的哪個(gè)地方。

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

　　在你設計搜索框的時(shí)候，請盡量讓它看起來(lái)就是一個(gè)搜索框，并且簡(jiǎn)單易用。可用性研究表明，默認沒(méi)有顯示高級選項的搜索框看起來(lái)更加友好，所以，通常情況下給用戶(hù)提供的搜索框知名不要提供進(jìn)階的搜索選項。

　　6、讓搜索框處于用戶(hù)預期的位置

　　當用戶(hù)想要搜索內容的時(shí)候還需要花費精力來(lái)尋找搜索框，這就非常尷尬了。這意味著(zhù)搜索框本身就不容易被察覺(jué)。

　　下面的研究，它展示出了142名被調查者對于網(wǎng)站的搜索框的預期的位置。這項研究表明，網(wǎng)站的左上角和右上角是用戶(hù)所期待的搜索框的位置，用戶(hù)在使用F型掃視法查看內容的時(shí)候，可以輕松找到搜索框。

　　這份研究還表明，右上角的區域是用戶(hù)搜尋輸入框的選區域。因此，將輸入框置于頂部靠右或者頂部居中的位置，用戶(hù)會(huì )主動(dòng)在這個(gè)地方尋找搜索框。

　　小貼士：

　　·在理想情況下，搜索框的設計應當和整個(gè)網(wǎng)站的設計風(fēng)格保持一致，同時(shí)在視覺(jué)上要略顯突出，便于用戶(hù)發(fā)覺(jué)它的存在。
　　·如果網(wǎng)站的內容足夠多，搜索框在設計上顯著(zhù)程度應該越高，如果搜索功能對于你的網(wǎng)站至關(guān)重要，那么你應該采用較大的對比度，確保輸入框和按鈕從背景中脫穎而出。

　　7、合理的輸入框尺寸

　　輸入框太小是常見(jiàn)的搜索框設計錯素，雖然用戶(hù)可以輸入比輸入框更長(cháng)的內容，但是可見(jiàn)的部分往往無(wú)法完全可見(jiàn)，這種設計的可用性并不強。這樣的輸入框可能因為可視范圍的限制，促使用戶(hù)使用短的、不精確的查詢(xún)方式，因為更長(cháng)的內容并不適合閱讀。如果輸入框能夠符合用戶(hù)的常見(jiàn)輸入內容的尺寸來(lái)進(jìn)行匹配，那么它的可用性會(huì )更強。

　　根據經(jīng)驗，輸入框能夠承載的理想字符數量為27個(gè)，百分之90的搜索內容都在這個(gè)長(cháng)度以?xún)取?

　　小貼士：建議考慮使用能根據輸入長(cháng)度增長(cháng)而能變長(cháng)的輸入框，這不僅節省了屏幕空間，而且能夠給予用戶(hù)足夠的視覺(jué)提示，并快速進(jìn)入搜索環(huán)節。

　　8、使用自動(dòng)搜索建議機制

　　自動(dòng)建議機制能夠幫助用戶(hù)在輸入的過(guò)程中，動(dòng)態(tài)地預測正確的查詢(xún)方向。自動(dòng)建議并不會(huì )加快搜索的過(guò)程，但是能夠幫助用戶(hù)構建正確的搜索關(guān)鍵詞/內容。普通用戶(hù)在次搜索結果不理想的情況下，很少會(huì )繼續進(jìn)行嘗試，而自動(dòng)建議運作順利的情況下，將會(huì )幫助用戶(hù)更好的搜索。

　　谷歌搜索在這方面有著(zhù)豐富的經(jīng)驗，自2008年開(kāi)始，谷歌開(kāi)始記錄用戶(hù)的搜索記錄，并且通過(guò)這種方式節省時(shí)間，優(yōu)化結果，創(chuàng )造更為優(yōu)秀的體驗。

　　小貼士

　　·確保你的自動(dòng)搜索建議是有用的。不當的搜索建議內容可能會(huì )混淆和分散用戶(hù)的注意力。盡量幫助用戶(hù)更正拼寫(xiě)，識別詞根，預測文本，并改進(jìn)你的工具。
　　·當用戶(hù)開(kāi)始輸入之后，盡快開(kāi)始給予用戶(hù)建議，例如在第三個(gè)字符之后，為用戶(hù)開(kāi)始提供即時(shí)的、有價(jià)值的建議，降低用戶(hù)的輸入難度和工作量。
　　·盡量為用戶(hù)提供少于10個(gè)搜索結果，避免信息過(guò)載。
　　·允許使用鍵盤(pán)進(jìn)行交互，當用戶(hù)使用方向鍵向下滾動(dòng)到后的條目之后，繼續滾動(dòng)會(huì )跳轉到頂部的項目。允許用戶(hù)使用Esc按鍵推出列表。
　　·突出顯示輸入的信息和建議的信息之間的差異。

　　9、讓用戶(hù)明白哪些可以搜索到

　　知名是在輸入框中包含示例，這樣可以向用戶(hù)給予建議。如果用戶(hù)可以輸入多個(gè)關(guān)鍵詞搜索，那么可以像下面的IMDB的網(wǎng)站一樣給予建議。HTML5可以輕松的實(shí)現在輸入框內加入文本占位符。

　　小貼士：建議的內容不宜過(guò)多，這樣對于用戶(hù)會(huì )有認知負荷。

http://ezekroy.com/jianzhanzhishi/7089.html 網(wǎng)站搜索框設計技巧,搜索框怎么設計好看