一個(gè)成熟的網(wǎng)站中總是充斥著(zhù)大量的內容，而如果用戶(hù)想要在對短的時(shí)間內找到自己想要的內容，那么就免不了對搜索欄的使用，而搜索欄也順理成章的成為了一個(gè)網(wǎng)站中最重要的組成部分之一。既然重要，那么就需要在設計的時(shí)候多費一些心思，如果能讓用戶(hù)在使用搜索欄時(shí)得到良好的使用體驗，那么無(wú)疑是網(wǎng)站的一個(gè)加分項目，反之用戶(hù)在使用的過(guò)程中可能就會(huì )遇到一些困難。那么，在搜索欄的設計中，如何才能讓它變成更高的工具呢？有以下幾個(gè)要點(diǎn)需要注意：

一、使用放大鏡的圖標

可能有一些網(wǎng)站在設計時(shí)希望能夠展現出與眾不同的一面，帶給用戶(hù)一些新奇的體驗，所以會(huì )在很多元素的設計上做出改進(jìn)。但不得不說(shuō)的是，一些功能最好還是按照用戶(hù)們最為熟悉的方法設計才能給用戶(hù)帶來(lái)良好的使用體驗。

誠然，放大鏡的圖標絕對算不上新穎，甚至可以說(shuō)十分的老套，但不得不考慮的是，這恰恰是大部分用戶(hù)最能接受的展現方式。放大鏡圖標與搜索欄的綁定關(guān)系是在多年來(lái)的互聯(lián)網(wǎng)使用過(guò)程中養成的習慣，以至于用戶(hù)在希望使用搜索欄的時(shí)候總會(huì )下意識的去尋找放大鏡的圖標。所以，在網(wǎng)站搜索欄的設計時(shí)，也應該盡量的使用放大鏡圖標，這樣可以讓用戶(hù)輕松的辨認出來(lái)。同時(shí)需要注意的是，放大鏡圖標在設計時(shí)也應該盡量的簡(jiǎn)單明了，以此來(lái)提高圖標的辨識度。

二、保證搜索欄非常顯眼

無(wú)論網(wǎng)站的主體顏色是什么，一個(gè)白色并帶有放大鏡圖標的搜索欄都一定會(huì )顯得十分顯然，并且它們經(jīng)常出沒(méi)于網(wǎng)站頂端或是右側，這樣的設計不是沒(méi)有意義的，而是最大程度的保證了搜索欄的顯眼。

同時(shí)，占地不大的搜索欄不會(huì )在用戶(hù)使用不到的時(shí)候影響他們的視線(xiàn)，卻能夠在他們需要使用時(shí)第一時(shí)間發(fā)現，這一點(diǎn)也非常重要，搜索欄存在的目的就是方便用戶(hù)的瀏覽，而如果用戶(hù)很難看見(jiàn)搜索欄在哪，那么這一個(gè)最大的特點(diǎn)無(wú)疑就無(wú)法發(fā)揮其作用。

三、保證每個(gè)頁(yè)面都有搜索欄

大部分用戶(hù)都不會(huì )喜歡每看完一個(gè)頁(yè)面就要回到主頁(yè)去尋找搜索欄，所以搜索欄應該盡量的充斥在網(wǎng)站的每一個(gè)頁(yè)面中。這樣可以保證用戶(hù)在每一個(gè)特定頁(yè)面都可以通過(guò)搜索欄跳到另一個(gè)頁(yè)面，而不是點(diǎn)擊后退按鈕回到主頁(yè)。

這種設計也是為了方便用戶(hù)的使用，能夠很大程度的提升用戶(hù)對于網(wǎng)站的好感。

四、讓搜索欄位于用戶(hù)習慣的位置

與搜索欄的顯眼設計同理，搜索欄應該盡量的放置于用戶(hù)所習慣的位置，比如頂端或者右側。這樣的設計能夠保證用戶(hù)在需要使用搜索欄時(shí)可以第一時(shí)間發(fā)現并使用，而不必等到他們需要使用的時(shí)候再在頁(yè)面中尋找，這已經(jīng)違背了搜索欄存在的初衷。

五、注意搜索欄尺寸大小的合理性

搜索欄的設計無(wú)論太大還是太小都會(huì )影響用戶(hù)的使用體驗。如果搜索欄的尺寸太大的話(huà)，就會(huì )遮擋內容，而如果搜索欄的設計太小，用戶(hù)輸入的內容很可能無(wú)法完全顯示，這樣十分的影響用戶(hù)的使用體驗。

目前有很多網(wǎng)站的搜索欄設計過(guò)小，導致用戶(hù)在使用時(shí)下意識的縮短自己想要搜索的內容，這樣一來(lái)就從精確搜索變?yōu)榱舜蠓秶乃阉?，即使你的搜索欄可以滿(mǎn)足用戶(hù)很長(cháng)的搜索關(guān)鍵詞，但由于視覺(jué)效果，仍然會(huì )有很多用戶(hù)會(huì )自主的縮短在搜索欄輸入的內容，這樣一來(lái)無(wú)疑讓搜索欄的可用性變得很差。

搜索欄是網(wǎng)站建設過(guò)程中一個(gè)看似非常簡(jiǎn)單的事情，但其背后仍有很多細節需要站長(cháng)仔細考慮。在搜索欄的設計中，一些小的改動(dòng)也可以讓用戶(hù)的使用體驗發(fā)生很多的變化，所以在進(jìn)行搜索欄的設計時(shí)，一定要保證小心謹慎。

作者: http://www.shzxfb.com/