“這有個搜索功能要加一下，樣式我給你。”

“好。”

“這搜索框連個提示也沒有怎么搜？歷史記錄呢？模糊匹配呢？還有…..balabala”

“你也沒說啊！”

——來自設計獅與程序猿的日常

搜索作為大部分互聯網產品都具備的功能，直接影響著產品的用戶體驗。在進行搜索功能的設計時要以簡單、高效為核心目標，每一步的細節設計都要反復驗證是否脫離了需求和核心目標。

根據搜索的行為，可將其拆分為五步：搜索入口-搜索觸發-內容輸入-點擊搜索-反饋結果。

一、搜索入口

搜索入口具有提示和引導操作的作用，主要類型有四種：主頁搜索、搜索框、多條件搜索、搜索icon。

1. 主頁搜索

將搜索作為獨立的頁面，以搜索為導向，整個產品的使用圍繞搜索這一核心功能功能展開。比較典型的如百度、谷歌等，搜索框功能強大，用戶可以進行各種嘗試。谷歌主頁中的手氣不錯以及百度搜索的個性化推薦和新聞，為產品引進更多的流量，增加了用戶黏性。

2. 搜索框

這種是在網頁中最為常見的，應用也最廣泛，大多居于頁面內容區域的上方，有的出于節省空間和搜索需求的考量，也內嵌在導航欄中。搜索框內會有文字的提示，提示用戶搜索的方式，還有一些產品在搜索框內放置當前的熱詞、活動、新功能等，將搜索框做成了運營的入口。

搜索框的后面一般會伴有搜索按鈕或放大鏡的icon，可點擊按鈕和鍵盤回車進行搜索。在頁面滑動時，搜索框一般會固定在頁面的頂端，用以提示用戶目前搜索內容，同時也方便重新搜索。

3. 多條件搜索

多條件搜索的方式常見于旅游、出行類的網站，如貓途鷹、攜程、東方航空等，需要輸入時間、地點、人員等信息，單一的搜索框不能滿足用戶的需求，多條件的搜索框一般置于頁面中較醒目的位置，引導用戶操作。

4. 搜索icon

頁面中僅僅展示搜索的icon，一般放在頁面的導航欄中偏右側的位置，點擊icon會拉出搜索框，典型的如站酷、ui中國等，還有的點擊icon會在頁面中喚醒搜索功能，如behance。

搜索icon的形式雖然可以節約導航欄的空間，但相對搜索框來說對用戶的引導性較差，因此比較適合以搜索為輔助功能的產品。

二、搜索觸發

1. 搜索框觸

點擊搜索框或搜索icon，呈激活狀態，光標在框內閃動，引導信息淡化或消失；有的搜索框還會伴隨彈出輔助區域，區域內包含熱詞、搜索歷史等信息，典型如騰訊視頻、淘寶等。

2. 搜索形式

第一種是有搜索/確定按鈕或icon的搜索框，用戶輸入完成后可點擊按鈕進行搜索，也可點擊鍵盤回車搜索；另一種是無搜索按鈕的搜索框，用戶需鍵盤回車搜索。

在網頁設計中，第一種應用比較廣泛，第二種國外網站應用較多，如dribbble等。還有一些搜索框內添加了拍照、上傳圖片、語音輸入等功能，使得搜索方式更加多元化。

文章題目：網站建設中搜索功能的一些細節
文章鏈接：http://www.js-pz168.com/news28/106578.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站建設等

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯