Godzilla. 2017-01-04
網(wǎng)站建設(shè)
怎么樣設(shè)計(jì)網(wǎng)頁(yè)的搜索框？
搜索框是網(wǎng)站上最重要的元素之一。無論您擁有什么類型的業(yè)務(wù)，設(shè)計(jì)精良的搜索框都是必不可少的，以便訪問者可以輕松找到他們正在尋找的內(nèi)容。 這并不意味著設(shè)計(jì)者只需添加一個(gè)搜索功能，而不考慮它的外觀。您需要考慮功能，用戶友好，美觀，甚至搜索框的位置。這一切都是為了提高您網(wǎng)站上的用戶體驗(yàn)，甚至可以提高轉(zhuǎn)化次數(shù)。那么，在設(shè)計(jì)搜索框時(shí)你需要做什么？雖然根據(jù)您的需求和目標(biāo)，確切的建議可能是主觀的，但有一些一般的提示可以適用于不同類型的網(wǎng)站。怎么樣設(shè)計(jì)網(wǎng)頁(yè)的搜索框？以下是搜索框設(shè)計(jì)和展示位置的一些最佳做法：
1.使它突出
搜索框設(shè)計(jì)中的第一個(gè)也是最重要的規(guī)則是使其顯而易見。你可能過于專注于設(shè)計(jì)美學(xué)，你創(chuàng)建一個(gè)搜索框，與網(wǎng)站的其余部分融合。但重要的是要記住，您要為想在您的網(wǎng)站上找到某些內(nèi)容的用戶添加一個(gè)搜索框。讓他們尋找搜索框的位置不會(huì)有任何意義，甚至可能對(duì)他們的體驗(yàn)產(chǎn)生負(fù)面影響。
這并不意味著你必須在美學(xué)上妥協(xié)。設(shè)計(jì)一個(gè)搜索框，需要讓它看起來美觀同時(shí)仍然突出，足以讓人們注意到。因此，框的大小應(yīng)該很大，但不能太大，因?yàn)樗加昧隧?yè)面上太多的空間。顏色應(yīng)該是對(duì)比的，但仍然與頁(yè)面上使用的其余顏色互補(bǔ)。
下方例子是一個(gè)很好的例子，因?yàn)榘咨c頁(yè)面的藍(lán)色對(duì)比，同時(shí)仍然與頁(yè)面設(shè)計(jì)中使用的其他顏色對(duì)齊。搜索框的大小不會(huì)太大，但仍然足夠突出，以便人們?cè)谶M(jìn)入網(wǎng)頁(yè)后立即注意到。
2.突出顯示提交按鈕
如前所述，搜索框的整體目的是使網(wǎng)站訪問者更容易地搜索。避免過度復(fù)雜的事情與微小的提交按鈕，用戶必須專注于點(diǎn)擊。使提交按鈕脫穎而出提高了搜索框本身的可見性，也使用戶更容易點(diǎn)擊。無論您選擇使用放大鏡圖標(biāo)還是在提交按鈕中拼出“提交”，都是由您決定的。但是，重點(diǎn)放在按鈕的大小和顏色，以確保用戶在搜索字段中輸入后沒有問題。一些網(wǎng)站用到放大鏡圖標(biāo)為游客搜索的東西，這可能被證明對(duì)于網(wǎng)站美學(xué)有很大的好處，如在Levi's Strauss的情況。但這不是一個(gè)最佳的搜索框設(shè)計(jì)示例。
3.將它放在用戶最習(xí)慣的位置
有一個(gè)關(guān)于在網(wǎng)站上放置搜索框的最佳地方的爭(zhēng)論。但是，如果你看看一些最熱門的網(wǎng)站，你會(huì)注意到，搜索框通常放置在頁(yè)面的頂部中心或右上角。這從SLI系統(tǒng)公布的研究中是顯而易見的。分析發(fā)現(xiàn)，54％的零售商將搜索框放在右上角，30％在中心，只有16％在左邊。
這意味著訪問者可能希望在網(wǎng)站右上角找到搜索框。將它放在意想不到的地方意味著用戶可能需要投入額外的時(shí)間來找到搜索框。盡管如此，仍然是一個(gè)好主意，使用熱圖或眼睛跟蹤工具研究訪問者活動(dòng)。這將幫助您確定他們最有可能看到的位置，幫助您了解應(yīng)該搜索框放置的位置。
無論你選擇左，右還是中心;確保它是朝向頁(yè)面的頂部，因?yàn)檫@是訪問者更可能掃描的位置。你會(huì)好的進(jìn)行A / B測(cè)試不同的搜索框布局，然后確定這個(gè)位置似乎是為你執(zhí)行最好的。
4.將自動(dòng)完成與圖形組合
您的網(wǎng)站可能是搜索框中使用自動(dòng)完成功能的62.5％之一。為了獲得競(jìng)爭(zhēng)優(yōu)勢(shì)，您可以通過在搜索功能中添加產(chǎn)品的圖片預(yù)覽和自動(dòng)完成建議來進(jìn)一步增強(qiáng)功能。這是因?yàn)橹挥?8.2％的參與網(wǎng)站目前正在實(shí)施此功能。
5.避免隔離或過度擁擠
第一點(diǎn)提到了使搜索框突出的重要性。這意味著您應(yīng)避免使用圖標(biāo)或其他可能會(huì)使訪問者從搜索框分散注意力的元素來過度擁擠周圍區(qū)域。搜索框需要確定優(yōu)先級(jí)和重點(diǎn)。同時(shí)，避免過度使用搜索框，因?yàn)槟赡茏罱K將搜索框隔離到難以找到的程度。
如下圖所示，是一個(gè)精心設(shè)計(jì)的搜索框的一個(gè)很好的例子，沒有太多的元素?fù)頂D它放置的區(qū)域。但你仍然可以看到它的頁(yè)面左側(cè)中心，而不是放置在某個(gè)地方，用戶將很難找到。提交按鈕也與網(wǎng)站上的其他顏色形成對(duì)比，使其脫穎而出。
6.選擇擴(kuò)展搜索框
當(dāng)您在尋找節(jié)省空間的方法，同時(shí)仍然為用戶顯示搜索框時(shí)，您可以選擇不斷增長(zhǎng)的搜索框。這是一個(gè)理想的選擇，網(wǎng)站的搜索可能不是太重要，但你仍然想給用戶選擇搜索的東西。而不是只添加一個(gè)放大鏡圖標(biāo)，你會(huì)添加一個(gè)小搜索框旁邊作為一個(gè)視覺線索的網(wǎng)站訪問者。當(dāng)用戶單擊字段時(shí)，該框?qū)⒄归_，并使用戶能夠輸入他們需要的字詞。如果你有更多關(guān)于網(wǎng)站建設(shè)（定制網(wǎng)站、模板網(wǎng)站）、廣告設(shè)計(jì)包年服務(wù)(經(jīng)濟(jì)套餐)、網(wǎng)站優(yōu)化、logo設(shè)計(jì)、品牌設(shè)計(jì)、印刷、APP/微信開發(fā)等產(chǎn)品服務(wù)的需求，歡迎咨詢摩恩網(wǎng)絡(luò)官網(wǎng)，新上線企業(yè)VI設(shè)計(jì)套餐和網(wǎng)站營(yíng)銷推廣系統(tǒng)（強(qiáng)）！
7.考慮添加一個(gè)下拉菜單
在搜索框旁邊添加一個(gè)下拉功能對(duì)于某些網(wǎng)站可能是一個(gè)好主意。它給用戶一種方向感，并給他們關(guān)于尋找什么的線索。這一策略證明對(duì)巴西房地產(chǎn)公司Casa Mineira的成功。網(wǎng)站上進(jìn)行的案例研究中，將標(biāo)準(zhǔn)搜索框替換為下拉菜單有助于生成更多潛在客戶。事實(shí)上，變化導(dǎo)致比以前多57.25％的潛在客戶。
現(xiàn)在，您可以借助示例和提示更好地了解搜索框設(shè)計(jì)和布局。那么你從這學(xué)到了什么？您可能已經(jīng)注意到對(duì)搜索框的突出和可見性的壓力。這意味著搜索框的顏色對(duì)比，美觀和尺寸是一些最重要的方面。你的焦點(diǎn)應(yīng)該讓功能與美學(xué)結(jié)合，這可能不容易執(zhí)行。有關(guān)于搜索框設(shè)計(jì)的任何問題？ 請(qǐng)隨時(shí)留下評(píng)論。
文章標(biāo)簽：
搜索框
Godzilla 簽
為了在編輯、圖象設(shè)計(jì)方面進(jìn)一步的提高，我想投身于網(wǎng)站行業(yè)中，一展所長(zhǎng)，為所在的公司和社會(huì)貢獻(xiàn)一分力量!
文章評(píng)論：