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