搜索設計看似簡單，展現形式上只有一個輸入框和搜索按鈕就可以了，但是里面隱藏了很多交互細節。最近工作中剛好有搜索相關的設計需求，今天就來總結下搜索中的交互細節設計。
本文的主要內容包括：
- 搜索的作用
- 搜索欄的形式
- 搜索設計的原則
搜索的作用
用戶是懶惰的，不愿意花太多精力去記憶信息，“無腦刷”的抖音玩法讓億萬用戶樂在其中。因此產品設計時需要盡可能的降低用戶的行為門檻，“千人千面”推薦機制越來越重要。但是搜索查詢是用戶主動行為，相對更有掌控感，始終都是產品設計中非常重要的方式。
搜索主要是幫助用戶從海量數據中快速找到想要瀏覽的內容，例如百度、谷歌等搜索引擎能夠成為單獨的產品，可以看出搜索在互聯網時代具有極其重要的作用。主要包含以下兩個方面：
1. 降低用戶的行為門檻
搜索實現了簡單的輸入，快速輸出，只要幾個關鍵字就可以獲得符合用戶需求的內容，將原有的用戶行為成本轉移給系統，從而讓購物消費更加快捷、輕松。而語音輸入和拍照搜索進一步降低了用戶行為門檻。
2. 減少用戶操作，縮短行為路徑
搜索功能可以幫助用戶快速定位信息，從而提高了用戶對內容的觸達效率。例如當用戶有明確的購物需求時，不需要一步步點擊商品分類，選擇商品類型、品牌等信息，就可以快速直達自己所需的商品。
搜索的形式
搜索欄是搜索功能的起點，內容不復雜，但是也有多種形式。我簡單的將其分為完全形式、簡化形式以及類搜索形式 3 種類型。
1. 完全形式
我們大多見到的搜索欄是由輸入框和搜索按鈕組成的，用戶輸入相關內容后，點擊按鈕或者回車就可以執行搜索了。
在完全形式下，根據搜索范圍的設定，又可以分為全量搜索和定向搜索兩種形式。
全量搜索就是直接對全平臺內容執行搜索，在搜索結果中分類展示。例如騰訊云 Web 端搜索功能，用戶只需要輸入關鍵字進行模糊搜索就可以了。
定向搜索則是用戶可以預先設定搜索范圍，可以減少后續用戶的篩選操作。例如淘寶 Web 端搜索欄可以設定“寶貝、天貓、店鋪”3 個搜索類別。
微信搜索欄兼具了兩者的功能，既可以直接輸入關鍵詞完成全平臺內容搜索，也可以設定范圍定向搜索。
完全搜索欄包含了分類項、輸入框、搜索按鈕等形式，因此占據的頁面空間也相對較大，更適合重搜索場景的產品。例如在電商移動端產品中，雖然頁面寸土寸金，但是搜索欄仍然采用完全搜索欄形式，輔助關鍵詞引導，可以更好的抓住用戶視線。
2. 簡化形式
簡化形式主要用于弱搜索的場景中，通常只是用圖標來告知用戶存在搜索功能，更有利于頁面空間布局。
當然形式也是隨著頁面的不同而改變的。今日頭條的首頁都是采用了完全搜索欄的形式，進入到資訊詳情頁面時，用戶的核心任務是查看頁面信息，用戶的搜索需求則變成了弱需求，只是提供了圖標入口，能夠滿足用戶的快捷操作即可。
3. 類搜索形式
如果用戶沒有直接的搜索需求，而是在瀏覽商品過程中，對某類型商品產生了興趣，希望查看更多相似商品。電商平臺專門增加了“查看相似”的功能，用戶不需要輸入任何內容，只需要點擊按鈕就可以查找相似商品，從而提高了用戶的搜索效率。
搜索的交互設計原則
完整的搜索流程包含了各種細節。例如搜索欄的形式、光標停留、輸入狀態、異常數據、搜索結果、二次篩選等等。整個過程沒有非常艱深的業務內容，主要是交互的細節設計，可以總結以下 3 個設計原則。
1. 信息引導
移動端產品中頁面空間有限，搜索欄更多的是作為入口，通常會增加關鍵詞引導用戶點擊。用戶點擊操作后會進入到專門的落地頁面，里面平鋪了各種搜索信息，例如搜索歷史、推薦內容，甚至各類營銷榜單等，方便用戶快速操作的同時，增強的內容的曝光和引導性。
而在 PC 端產品具有頁面空間優勢，用戶的搜索過程完全是通過搜索欄完成的。為了做好用戶引導，搜索欄中會增加歷史搜索記錄，下方增加推薦關鍵詞，幫助用戶快速完成搜索。同時也可以喚醒用戶對某些商品的興趣和記憶，從而挖掘用戶潛在的搜索需求。
2. 用戶效率
搜索是效率型操作，如何快速幫助用戶完成輸入、結果查詢是最主要的設計目標。例如當光標停留時，搜索欄就會呈現各種已有信息，方便用戶選擇輸入。
用戶輸入過程中，搜索欄通常會展示關鍵詞聯想信息，方便用戶快速選擇相關內容。淘寶甚至給出了二級的商品標簽，引導用戶更準確的定義商品，從而提高搜索的準確率，最終更好的提升用戶的購物效率。
當關鍵詞與內容不匹配時，反饋結果前置可以減少用戶的后續操作。騰訊云搜索欄輸入的關鍵詞不符合內容時，并沒有跳轉到結果頁面再給出信息反饋，而是直接在搜索欄中做出反饋，從而減少了用戶的跳轉次數。
由于 PC 頁面的展示空間更大，用戶的行為成本相對更高，為了幫助用戶實時搜索，首頁內容滾動時還會增加吸頂搜索浮層，方便用戶快速操作。
3. 隱私保護
搜索歷史有利有弊，不經意間可能會泄露自己的隱私。為了打消用戶的顧慮，搜索通常都會增加清除記錄功能。
而在今日頭條中細化了隱私保護項，搜索歷史不是簡單的全部清空，而是可以單獨刪除，便于用戶保留所需的內容。另外還增加了無痕搜索模式，避免用戶搜索之后會忘記刪除關鍵詞的場景。
寫在最后
設計就是細節不斷打磨提升的過程。搜索中還有很多細節設計，例如關鍵詞的視覺引導性、常搜選項置頂、搜索結果的二次篩選等等，今天就不一一討論了。
原文地址：https://www.uisdc.com/3-search-design-principle
