電商網(wǎng)站建設(shè)的搜索框是怎樣設(shè)計(jì)的？在進(jìn)行一次大規(guī)模的迭代之后，最近在查看公司網(wǎng)站運(yùn)營數(shù)據(jù)時，發(fā)現(xiàn)數(shù)據(jù)并不是太好看，通過查看瀏覽頁面的查看時間以及下單的轉(zhuǎn)化率，發(fā)現(xiàn)并沒有太大變化，于是一直在思考如何提升數(shù)據(jù)，達(dá)到公司的最大利潤化。
通過不斷地使用產(chǎn)品，仔細(xì)揣摩，發(fā)現(xiàn)站內(nèi)搜索太爛，于是決定針對搜索進(jìn)行詳細(xì)深入研究，為用戶創(chuàng)造一個好的搜索用戶體驗(yàn)，相信會提高網(wǎng)站的購買轉(zhuǎn)化率。
在這里先說下背景，所說的站內(nèi)搜索指的是以電商網(wǎng)站的站內(nèi)搜索為例，然后我分為幾部分進(jìn)行講解。
這篇文章針對搜索框的用戶體驗(yàn)進(jìn)行詳細(xì)講解，如果感興趣，隨時關(guān)注之后的文章。
搜索框的位置
圖片示例：亞馬遜
現(xiàn)狀：進(jìn)入亞馬遜的網(wǎng)站頁面，搜索框放在一個很明顯的位置。
設(shè)計(jì)的理由：當(dāng)用戶進(jìn)入電商網(wǎng)站，大部分人都是很精準(zhǔn)地根據(jù)需要才進(jìn)行網(wǎng)上購物，進(jìn)行搜索就需要尋找搜索框，搜索框就必然置于顯要的位置
默認(rèn)商品提示
圖片示例：淘寶
現(xiàn)狀：淘寶頁面的輸入框內(nèi)有默認(rèn)的一句話：裙裝節(jié)新品大賞！
設(shè)計(jì)的理由：
當(dāng)網(wǎng)站想推薦某一個品類的商品時，搜索是用戶使用高頻次的功能，那么在搜索框中進(jìn)行推薦，那么這個品類的銷量也將會帶動起來
網(wǎng)站推薦的資源位置是有限的，如何充分利用起來，很明顯這是一個不錯的方法。
下拉框熱搜詞推薦提示
圖片示例：蘇寧易購
現(xiàn)狀：在點(diǎn)擊輸入框時，下方彈出推薦類：正在熱搜中，下方有眾多的品類以及商品進(jìn)行推薦
設(shè)計(jì)的理由：當(dāng)用戶在進(jìn)行網(wǎng)上購物時，準(zhǔn)備精準(zhǔn)地搜索想購買的商品時，出現(xiàn)熱搜詞，無意中會出現(xiàn)用戶也想購買的商品，那么很容易激發(fā)用戶的購買欲，可以提升熱搜商品的銷量。
用戶情景模擬：我平生痛恨逛超市，本來想去買點(diǎn)菜，在逛的過程中，不知不覺最后又買了一堆水果以及零食回來，所買商品是我預(yù)想中的幾倍。
如何進(jìn)行設(shè)計(jì)：在設(shè)計(jì)此功能時，作為產(chǎn)品經(jīng)理，不應(yīng)當(dāng)只關(guān)注到表面太膚淺的用戶體驗(yàn)，同樣應(yīng)該分兩方面進(jìn)行處理
根據(jù)網(wǎng)站的所有售賣結(jié)果進(jìn)行統(tǒng)計(jì)，自動將熱搜詞推上去
根據(jù)網(wǎng)站運(yùn)營部門的需要，因?yàn)檫\(yùn)營會有推薦品類商品的需求，技術(shù)需要在后臺開發(fā)出一套獨(dú)立于熱搜詞可以手動設(shè)置排名在前的功能。
既有系統(tǒng)自動抓取更新，同時滿足運(yùn)營需要，這才是一個完整的熱搜詞推薦。
搜索框下拉框歷史記錄推薦提示
圖片示例：京東
現(xiàn)狀：在京東網(wǎng)站中先后搜索和顯卡以及電腦的選項(xiàng)，再次進(jìn)入京東主頁時，點(diǎn)擊搜索，會出現(xiàn)你的搜索歷史記錄。
設(shè)計(jì)的理由：用戶進(jìn)行過搜索的商品，是有極大的購買傾向，在進(jìn)行查看后，但是沒有購買行為，返回去再進(jìn)行搜索時，自動出現(xiàn)搜索歷史記錄，無需手動繼續(xù)進(jìn)行再次輸入，極大地提高了用戶體驗(yàn)。相應(yīng)地可以提升用戶購買的轉(zhuǎn)化率。
搜索下拉框出現(xiàn)分類提示
圖片示例：亞馬遜、淘寶
現(xiàn)狀：在用戶進(jìn)行搜索商品時，搜索框下拉框進(jìn)行提示在某品類中進(jìn)行搜索
設(shè)計(jì)的理由：
性別男，想買一件短袖，那么直接進(jìn)行搜索后，系統(tǒng)會出現(xiàn)男性和女性的短袖，你需要再次進(jìn)行篩選，但是如果在輸入框下方直接選擇品類，那么顯然可以更快地達(dá)到精準(zhǔn)搜索的目的。
當(dāng)然，現(xiàn)在的淘寶根據(jù)用戶資料以及行為進(jìn)行了大量的數(shù)據(jù)存儲，所以我直接進(jìn)行搜索，搜索結(jié)果頁也是出現(xiàn)男裝，但是新建賬號，沒有數(shù)據(jù)基礎(chǔ)直接進(jìn)行搜索短袖，是會出現(xiàn)男女裝并存在頁面的情況。
分類選擇框
參考圖片：亞馬遜
現(xiàn)狀：在搜索框的左方，可以先選擇品類，然后輸入商品進(jìn)行搜索。
設(shè)計(jì)的理由：通過先選擇搜索的品類，再進(jìn)行填寫輸入的內(nèi)容，那么會更容易精準(zhǔn)地搜索到想要的結(jié)果。
自動容錯功能
參考圖片：亞馬遜、淘寶
現(xiàn)狀：
在亞馬遜中，輸入drass，下拉框中自動糾正為dress的一些選項(xiàng)，而淘寶并無此功能
在淘寶中，輸入斷袖，在搜索結(jié)果中出現(xiàn)你要找的是不是斷袖的提示
以上兩類，統(tǒng)稱為自動容錯功能。
在用戶搜索商品，打錯字符進(jìn)行搜索時，系統(tǒng)自動識別進(jìn)行糾正，并推薦正確的字符（用戶想進(jìn)行搜索的結(jié)果）。
設(shè)計(jì)的理由：當(dāng)用戶在無意間輸入錯誤的字符進(jìn)行搜索，得到一個無結(jié)果提示或是不想要的結(jié)果頁，再進(jìn)行返回搜索框重新輸入字符，這個過程是崩潰的。
所以有了自動容錯功能，將極大地提升用戶體驗(yàn)，并提升用戶的購買率。
語音輸入搜索
現(xiàn)狀：市場上主流的電商網(wǎng)站web端是無此功能的，而移動端大部分都添加了此功能。
設(shè)計(jì)的理由：人不可能對著電腦去進(jìn)行語音搜索，還沒這種用戶習(xí)慣，而手機(jī)的方便便攜性，微信等一系列的社交APP培養(yǎng)了用戶使用語音的習(xí)慣，添加此功能，自然為最佳之選。
以上只是有關(guān)搜索框用戶體驗(yàn)的一部分，更多的體驗(yàn)需要多去研究探討。
作為搜索的展示面：搜索框，細(xì)細(xì)深究發(fā)現(xiàn)有如此多的規(guī)則以及交互體驗(yàn)可以讓我們進(jìn)行提升，每一個細(xì)節(jié)的改善都可以讓用戶的搜索體驗(yàn)更加棒，討好了用戶，自然可以讓網(wǎng)站從中受益。
以上的搜索框用戶體驗(yàn)不僅針對于電商網(wǎng)站的站內(nèi)搜索，同樣地適用于其他類型網(wǎng)站。
