電商平臺首頁搜尋功能互動設計研究

我們可以在電商軟體上解決絕大部分的購物需求，而搜尋功能作為一個基礎功能，是使用者尋找匹配商品的不可或缺的工具。本文作者以淘寶、京東、拼多多三個電商產品為例，對其搜尋功能的互動設計進行對比，希望對你有幫助。

本文章中主要以淘寶、京東、拼多多三個電商平臺搜尋功能的互動設計不同進行分析。文章的結構不從搜尋元件拆分進行分析，而是以使用者使用首頁搜尋功能的任務流程進行分析。主要分為搜尋前、搜尋中、搜尋後。

一、搜尋前

淘寶：

在淘寶首頁，搜尋功能在訂閱和推薦tab下，搜尋元件中包含有掃一掃、推薦搜尋詞、淘寶拍照和搜尋按鈕，其中搜索按鈕設計為主按鈕。搜尋推薦詞輪播展示，時間間隔大概為3秒，推薦詞內容和使用者之前和當下瀏覽內容相關進行推薦。

京東：

在京東首頁，搜尋功能在首頁和附近tab下，搜尋元件中有搜尋icon、搜尋推薦詞、拍照、掃一掃，搜尋推薦詞輪播展示，時間間隔大概為3秒，推薦詞內容和使用者之前和當下瀏覽內容相關進行推薦。整個搜尋元件會在使用者向下滑動瀏覽內容時向上移動，縮小展示空間，和京東icon、活動、訊息位於置頂導航欄。

拼多多：

在拼多多首頁，搜尋框置頂，其中包含搜尋icon、搜尋推薦詞、拍照。推薦詞內容不進行輪播展示，進行單一推薦內容。推薦詞內容預設展示上上次瀏覽商品相關內容。

搜尋前總結：

淘寶首頁搜尋功能權重最高，表明使用淘寶的使用者使用搜索功能的佔比更大，同時作為主按鈕的搜尋按鈕可以直接點選進入推薦結果頁，在減少使用者操作步驟的同時，展示了淘寶對千人千面內容分發的自信。可通過搜尋功能直達的頁面有搜尋結果頁、淘寶拍照頁面、掃一掃頁面、搜尋頁。

京東首頁搜尋功能權重次之，京東搜尋功能可直達的頁面有拍照頁面、掃一掃頁面、搜尋頁。

拼多多在首頁弱化搜尋功能，可直達的頁面有搜尋頁、拍照頁面。

淘寶和京東使用推薦詞輪播展示的形式也更能增加使用者的點選率，原因是人體的眼睛中視感細胞更容易受到移動元素的吸引，吸引使用者後，內容滿足使用者心理預期或好奇心就有可能提高點選率，從而完成轉化率的提升。

二、搜尋中

淘寶：

點選搜尋框進入，可搜尋的方式有鍵盤輸入內容、點選歷史搜尋、點選搜尋發現、點選淘寶熱搜、點選拍照搜尋、點選語音輸入。在搜尋頁面，會出現近期最後瀏覽內容推薦圖片，點選任意處可消失。單擊搜尋頁面下部分卡片可進入全網熱搜排名榜，其中Tab分類有淘寶熱搜、家裝季大促、時髦穿搭、人氣美妝、吃貨星人、二次元、新趨熱點。

京東：

點選搜尋框進入，可搜尋的方式有鍵盤輸入、語音輸入、點選搜尋歷史、點選搜尋發現、拍照搜尋、點選今日熱搜卡片。點選今日熱榜進入京東熱榜，其中Tab分類有今日熱搜、數碼極客、家庭洗護、熱門手機、煥新家電、吃貨清單、時髦穿搭、親子樂園、珍味尋鮮、圖書文教、花花草草。

拼多多：

點選搜尋框進入，可搜尋的方式有鍵盤輸入內容、語音輸入、點選猜你想搜、點選最近搜尋、點選搜尋發現、拍照搜尋。搜尋框左側可點選下拉分類選擇，分類有商品和店鋪。

搜尋中總結：

淘寶和京東最大程度的降低使用者輸入成本。產品使用多種觸達方式、多種觸達內容，減少使用者操作和記憶負擔。

此前使用者大多使用搜索功能都是有精確目的，現在使用者可以通過搜尋功能跳轉到多種商品介面，商品和使用者連結的方式更加多樣化，使用者進行搜尋過程中，出於興趣和好奇心完成轉化的可能性也變得越來越高。

三、搜尋後

淘寶：

搜尋結果頁面，商品展示主要分為了4個Tab進行篩選，分別是全部、天貓、店鋪、逛逛。其次是搜尋商品的分類用小卡片的形式展示，幫助使用者快速查詢目標商品。

京東：

搜尋結果頁面，可直接進行篩選的方式更多樣，採用兩個滾動Tab欄幫助使用者快速篩選，商品類別同樣採用圖片加文字的展示形式。

拼多多：

搜尋結果頁面，主要分為5個Tab進行篩選，分別是綜合、銷量、價格、品牌、好評，同時在Tab篩選欄下增加文字標籤幫助使用者快速進行篩選。

全部篩選：

淘寶：

搜尋結果頁面支援使用者點選右上角“更多”進行更多操作，可跳轉到其他頁面，旨在讓使用者並行和頁面相關或更多操作，突出靈活高效。在全部篩選的卡片中，突出服務和品質。

京東：

全部篩選採用抽屜樣式，突出和產品優質服務相關的篩選選項。強調位置，提醒使用者收貨地址的同時，提升產品服務的質量和物流的準時性。

拼多多：

全部篩選主要突出價格的優勢，其次是精選服務。

在三者中，全部篩選是個產品的自我價值展示，使用者點選的是全部篩選，實則是在挑選三個產品的專屬服務，也是產品在展示價值。

搜尋後的總結：

淘寶在搜尋結果頁面突出商品類別篩選，讓使用者逛淘寶；京東搜尋結果頁面突出和自身優質服務相關的篩選，包括京東物流、plus會員權益、小時達等等，讓使用者快速選中目標商品；拼多多搜尋結果頁面突出價格優惠的優勢，所以篩選標籤主要為百億補貼、退貨包運費、回頭客長拼。

看完了國內三個頭部電商首頁的搜尋功能互動設計。也給我們更多的啟發價值。

在搜尋前：

1. 按照個人使用者不同特點分發推薦搜尋詞；
2. 功能可見性，頁面明確告知使用者可使用多種多種搜尋方式；
3. 搜尋任務可優化，支援使用者點選“搜尋”一步完成搜尋任務的優化；
4. 根據產品自身定位，確定搜尋功能權重，採用對應搜尋設計的樣式。

在搜尋中：

1. 更快搜索操作完成，減少使用者操作成本；
2. 操作引導，助力使用者完成搜尋工作，搜尋歷史、推薦等可以提高使用者點選率；
3. 資訊梳理和使用者控制，展示資訊多的同時支援使用者控制資訊密度。

在搜尋後：

1. 資訊準確，提升準確性的方法可以是幫助使用者進行快速篩選，例如自行車商品分類；
2. 價值傳遞，構建價值傳遞的有效路徑，在機會點刻畫自身價值；
3. 靈活高效，多工流程可以靈活自然切換是增加產品好感度的好方法。

本文由 @汪仔9878 原創釋出於人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。

給作者打賞，鼓勵TA抓緊創作！