- 相關(guān)推薦
搜索框設(shè)計(jì)和布局的方法
搜索框是網(wǎng)站上最重要的元素之一。無(wú)論您擁有什么類(lèi)型的業(yè)務(wù)，擁有精心設(shè)計(jì)的搜索框都是至關(guān)重要的，以便訪(fǎng)問(wèn)者可以輕松找到所需的內(nèi)容。這并不意味著只要添加搜索功能，甚至不考慮它的外觀(guān)就足夠了。那么在設(shè)計(jì)搜索框時(shí)你需要做什么？下面是小編整理的，歡迎大家閱讀！更多相關(guān)信息請(qǐng)關(guān)注相關(guān)欄目！
您需要考慮功能，用戶(hù)友好度，美觀(guān)性以及搜索框的位置。這樣做可以改善您網(wǎng)站上的用戶(hù)體驗(yàn)，甚至可能導(dǎo)致轉(zhuǎn)化次數(shù)增加。
雖然根據(jù)您的需求和目標(biāo)，確切的建議可能是主觀(guān)的，但有一些一般技巧可用于不同類(lèi)型的網(wǎng)站。所以這里是搜索框設(shè)計(jì)和布局中的一些最佳做法：
1、使它突出
搜索框設(shè)計(jì)中的第一個(gè)也是最重要的規(guī)則是使其容易引人注目。您可能會(huì)專(zhuān)注于設(shè)計(jì)美學(xué)，您可以創(chuàng)建一個(gè)與網(wǎng)站其他部分相融合的搜索框。但請(qǐng)務(wù)必記住，您正在為想要在您的網(wǎng)站上找到某些內(nèi)容的人添加一個(gè)搜索框。讓他們搜索搜索框不會(huì)有意義，甚至可能對(duì)他們的經(jīng)驗(yàn)產(chǎn)生負(fù)面影響。
這并不意味著你必須完全妥協(xié)美學(xué)。來(lái)看看一個(gè)設(shè)計(jì)，看起來(lái)對(duì)你現(xiàn)有的網(wǎng)站設(shè)計(jì)，而仍然足夠突出，讓人們注意到的設(shè)計(jì)。所以盒子的大小應(yīng)該很大，但不要太大，因?yàn)樗加昧颂嗟捻?yè)面空間。而顏色應(yīng)該是對(duì)比，但仍然補(bǔ)充頁(yè)面上使用的其余顏色。
在百思買(mǎi)的搜索框是一個(gè)很好的例子作為對(duì)比的白色對(duì)頁(yè)面的藍(lán)色，同時(shí)仍然在網(wǎng)頁(yè)設(shè)計(jì)中使用的其他顏色排列。搜索框的大小不是太大，而仍然足夠突出，使人們?cè)谶M(jìn)入頁(yè)面后立即注意到。
2.突出顯示提交按鈕
如前所述，搜索框的全部目的是讓網(wǎng)站訪(fǎng)問(wèn)者更容易。避免使用用戶(hù)必須關(guān)注的微型提交按鈕來(lái)過(guò)度復(fù)雜的事情，以便點(diǎn)擊。使提交按鈕突出提高了搜索框本身的可見(jiàn)性，也使用戶(hù)更容易點(diǎn)擊。
您是否選擇使用放大鏡圖標(biāo)或在提交按鈕中拼出“提交”，取決于您。然而，關(guān)注按鈕的大小和顏色，以確保用戶(hù)在輸入搜索字段后無(wú)需找到它。向他們說(shuō)明他們?cè)谳斎胨麄冋趯ふ业膬?nèi)容后要做什么。
一些網(wǎng)站甚至只能放大鏡圖標(biāo)，以供訪(fǎng)客搜索。這可能證明對(duì)于網(wǎng)站美學(xué)而言是非常有利的，就像Levi's Strauss一樣。但這不是一個(gè)最佳搜索框設(shè)計(jì)的例子。
雖然這在設(shè)計(jì)方面看起來(lái)不錯(cuò)，但對(duì)于訪(fǎng)問(wèn)者來(lái)說(shuō)這可能是不方便的，因?yàn)樗麄冊(cè)邳c(diǎn)擊放大鏡圖標(biāo)后必須等待搜索框加載。這可能令人沮喪，特別是如果您從連接較慢的地方訪(fǎng)問(wèn)該網(wǎng)站。而不是單獨(dú)加載，可能會(huì)更好的是在放大鏡放在相同位置的搜索框展開(kāi)。
當(dāng)被困在有限的空間，但搜索是重要的，它可以很好地融入到頂部的導(dǎo)航。這正是他們?cè)谝苿?dòng)網(wǎng)站上所做的一切。
另一方面，Xero鞋子根本沒(méi)有提交按鈕。訪(fǎng)問(wèn)者必須在搜索文件中輸入關(guān)鍵字，然后按Enter鍵才能搜索網(wǎng)站內(nèi)的某些內(nèi)容。現(xiàn)在您可能會(huì)認(rèn)為只要按Enter鍵即可開(kāi)始搜索，那么其他訪(fǎng)問(wèn)者呢？其中一些可能是專(zhuān)門(mén)搜索提交按鈕，可能難以使用這種類(lèi)型的設(shè)計(jì)進(jìn)行搜索。
亞馬遜的提交按鈕在橙色中相當(dāng)突出，而搜索框的其余部分是白色的。提交按鈕的顏色也與網(wǎng)站標(biāo)題的較暗顏色形成對(duì)比。因此，盡管他們只使用放大鏡圖標(biāo)作為提交按鈕，但與Levi的示例不同，它仍然顯著地可見(jiàn)。確保圖標(biāo)被填充，因?yàn)檫@將增加可見(jiàn)性。
3.放置用戶(hù)最可能看的地方
關(guān)于在網(wǎng)站上放置搜索框的最佳位置，正在進(jìn)行爭(zhēng)論。但是，如果您瀏覽一些最受歡迎的網(wǎng)站，您會(huì)注意到，搜索框通常位于頁(yè)面頂部中心或右上角。這從SLI系統(tǒng)公布的研究中可以看出。分析發(fā)現(xiàn)，54％的零售商將搜索框放在右上方，30％位于中心位置，左側(cè)僅占16％。
這意味著訪(fǎng)問(wèn)者可能希望在您的網(wǎng)站右上方找到搜索框。將其放置在意想不到的地方意味著用戶(hù)可能需要額外努力才能找到搜索框。盡管如此，使用熱圖或眼睛跟蹤工具來(lái)研究訪(fǎng)客活動(dòng)仍然是個(gè)好主意。這將幫助您確定他們最有可能看到的位置，幫助您了解您應(yīng)該將搜索框放在您的網(wǎng)站上。
無(wú)論你選擇左，右還是中間; 確保它位于頁(yè)面頂部，因?yàn)檫@是訪(fǎng)問(wèn)者根據(jù)NN Group眼動(dòng)跟蹤研究最有可能首先掃描的地方。您可以很好地對(duì)不同的搜索框展示進(jìn)行A / B測(cè)試，然后確定哪個(gè)位置似乎對(duì)你來(lái)說(shuō)最好。
以下是Get Plus關(guān)注者位于頁(yè)面右側(cè)的搜索框的示例。
EBay的搜索框位置位于頁(yè)面的中心，它的顯著位置是訪(fǎng)問(wèn)者首先注意到的網(wǎng)站之一。
4.將圖形自動(dòng)完成
您的網(wǎng)站可能在其搜索框中使用自動(dòng)完成功能的62.5％之中。為了獲得競(jìng)爭(zhēng)優(yōu)勢(shì)，您可以通過(guò)添加產(chǎn)品的圖像預(yù)覽以及搜索功能中的自動(dòng)完成建議來(lái)進(jìn)一步增強(qiáng)功能。這是因?yàn)橹挥?8.2％的參與網(wǎng)站正在實(shí)施此功能。
為進(jìn)一步制作自動(dòng)完成圖形的案例，您可能需要查看LED Hut的情況。在為自動(dòng)完成建議添加圖像預(yù)覽之后，LED照明提供商將其搜索轉(zhuǎn)換率提高了200％。當(dāng)您將圖像預(yù)覽添加到搜索建議中時(shí)，它將如何顯示。
5.避免隔離或過(guò)度擁擠搜索框
第一點(diǎn)提到使搜索框顯著的重要性。這意味著您應(yīng)避免過(guò)度擁擠圖標(biāo)或其他元素，從而使訪(fǎng)問(wèn)者從搜索框中分散注意力。搜索框需要優(yōu)先考慮并專(zhuān)注于此。同時(shí)，避免過(guò)度使用，因?yàn)槟赡軙?huì)最終將搜索框隔離到難以找到的程度。
Snow and Rock的搜索框是精心設(shè)計(jì)的搜索框的一個(gè)很好的例子。正如你可以在下面的圖像中看到的那樣，沒(méi)有太多的元素?cái)D在被放置的區(qū)域。但是，您仍然可以看到頁(yè)面的中心左側(cè)，并且不會(huì)放置在用戶(hù)將難以找到的位置。提交按鈕也與網(wǎng)站上的其余顏色形成鮮明對(duì)比，使其脫穎而出。
6.選擇擴(kuò)展搜索框
當(dāng)您正在尋找方法來(lái)節(jié)省空間，同時(shí)仍然使搜索框突出顯示給用戶(hù)時(shí)，您可以選擇不斷增長(zhǎng)的搜索框。這是搜索可能不太重要的網(wǎng)站的理想選擇，但您仍然希望為用戶(hù)提供搜索內(nèi)容的選項(xiàng)。而不是僅添加放大鏡圖標(biāo)，您將在其旁邊添加一個(gè)小型搜索框，以作為網(wǎng)站訪(fǎng)問(wèn)者的視覺(jué)線(xiàn)索。當(dāng)用戶(hù)單擊該字段時(shí)，該框?qū)⒄归_(kāi)，并使用戶(hù)能夠輸入他們需要的術(shù)語(yǔ)。
這是Net-a-Porter的一個(gè)很好的例子。如果您看網(wǎng)站的右上角，您會(huì)看到搜索框是可見(jiàn)的但不是太大。有一個(gè)放大鏡圖標(biāo)，供用戶(hù)識(shí)別它是一個(gè)搜索選項(xiàng)。
但是，一旦您點(diǎn)擊該字段，搜索框就會(huì)展開(kāi)，您可以輸入所需的搜索字詞。美觀(guān)和可用性的這種組合對(duì)于需要在主頁(yè)上包含大量元素的網(wǎng)站是非常好的，因?yàn)樗梢詭椭?jié)省空間，而不會(huì)影響搜索框的可見(jiàn)性。
7.考慮添加一個(gè)下拉菜單
搜索框?qū)τ谝呀?jīng)有一些想法他們正在尋找的人來(lái)說(shuō)是存在的。但是那些誰(shuí)不太確定他們?cè)趯ふ沂裁茨�？您可能擁有自�?dòng)完成建議功能，但在搜索框旁邊添加一個(gè)下拉功能可能是一些網(wǎng)站的好主意。它為用戶(hù)提供了方向感，并為他們提供了尋找內(nèi)容的線(xiàn)索。
這個(gè)策略證明是巴西地產(chǎn)公司Casa Mineira成功的。在網(wǎng)站進(jìn)行的案例研究中，用下拉菜單替換標(biāo)準(zhǔn)搜索框有助于產(chǎn)生更多潛在客戶(hù)。事實(shí)上，這種變化導(dǎo)致的線(xiàn)索比以前高出57.25％。
這種變化表現(xiàn)得很好的原因是因?yàn)橛慰捅唤o了一個(gè)明確的行動(dòng)路線(xiàn)，他們能夠快速找到他們正在尋找的內(nèi)容。在以前的設(shè)計(jì)中，游客必須確定他們正在尋找什么。為了更好地引導(dǎo)游客，他們決定覆蓋各種各樣的地點(diǎn)和類(lèi)型的住宿。
但請(qǐng)務(wù)必記住，此選項(xiàng)可能不適用于所有類(lèi)型的網(wǎng)站。例如，電子商務(wù)店可能無(wú)法使用這種技術(shù)的訪(fǎng)問(wèn)者更有效地進(jìn)行搜索。但對(duì)于房地產(chǎn)公司和服務(wù)相關(guān)業(yè)務(wù)，下拉式搜索功能可能是完美的解決方案。
【搜索框設(shè)計(jì)和布局的方法】相關(guān)文章：
如何個(gè)網(wǎng)頁(yè)設(shè)置搜索框11-25
網(wǎng)頁(yè)設(shè)計(jì)的布局12-06
php啟用sphinx全文搜索的方法03-02
Dreamweaver窗口如何布局的方法02-07
常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)04-21
PHP實(shí)現(xiàn)搜索查詢(xún)功能的方法技巧08-01
自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的概念和方法03-17