2021-10-9 資深UI設計者
關鍵詞：搜索框，UI，UX交互，用戶體驗，響應式設計，網頁
題外話Tips: 在寫Amazon案例時，看到了歪果仁對國貨馬應龍的評論，簡直太歡樂（以前看過人家翻譯的帖子，但自己看一遍還是太搞笑了）。于是就寫跑偏了，翻譯了下貼了上來。隨便樂樂~ （CTRL+F頁內搜索可直達）
目錄：（CTRL+F頁內搜索可直達）
第一章 搜索框-默認狀態
一、 位置
二、 寬度（包含響應式設計）
三、 按鈕樣式
四、 展開 or 隱藏？
五、 默認要有提示文字啊！
六、 推薦詞
七、 有很多分類怎么辦？
八、 一個頁面里有2個搜索框怎么處理？
第二章 搜索框-光標觸發的狀態
一、下拉框中，歷史記錄+熱搜詞是標配
二、下拉框中，標配+額外內容
三、下拉框中，純個性化內容
第三章 搜索框-搜索中的狀態
一、 默認交互
二、 個性化交互
三、 搜索下拉框中的多選功能
四、 回車 or 不回車？
正文：
以下都是從Web端角度寫的總結，Web的空間比APP大，相對來說，交互可發揮的余地更大。APP端如果有時間，就另外再寫吧。
搜索框簡單吧，也就輸入框+按鈕。但是就那么點小元素，里面也是注滿了無數的小心思，死光了無數產品經理/交互設計師的腦細胞，只是為了讓交互更流暢，產品體驗更好。
搜索框的默認UI/UX樣式，取決于網站的業務性質，取決于搜索功能的重要性，取決于頁面布局。
一、位置
搜索框的位置放在哪里，取決于搜索功能對于網站的重要性。
N年前，就有很多小伙伴引用過如下研究報告了，我重復下吧。
Dawn Shikh 與 Keisi Lenz 的研究：展示了在142個參與者的調查中，網站搜索框的期望位置。研究發現，對用戶來說最方便使用的地方是網站的左上角與右上角位置。用戶可以使用常見的F形掃描模式輕松找到它。
如圖，搜索框要放置在網站的右上角或者中間位置，這是用戶所期望的位置。
目前大部分網站在UI布局搜索框時，也是大致遵循這個規則的。但總體來說，搜索框的位置，還是可以分為如下幾種：
1. 頁面-居中
2. 頁面-頂部居中
3. 頁面-頂部右邊
4. 其他
那么，分別討論：
1. 頁面-居中
為啥居中？當然因為對于網站，搜索是核心功能。如果沒有搜索功能的話，業務幾乎無法開展。它最最最重要啦！
1）絕對居中
這種一般適用于搜索引擎的首頁。頁面基本就是一屏，搜索是最主要功能，其他內容不重要。
比如Google, 百度。
Google的界面就相當干凈清爽。嘿，我就是純搜索的，趕緊搜唄！
百度，可以只顯示一個搜索框。
如圖所示的搜索框下的大塊資訊，是可以在設置中隱藏的，不想看，關掉就好。
2）相對居中，垂直略靠上部。
適用于數據庫網站的首頁。
因為數據庫的數據量動不動就是千萬、上億的，搜索是極其重要的功能，99%的用戶都是帶著目的來的，直接通過搜索找數據的。搜索框需要極其醒目，需要占據首屏大部分的位置。
但考慮到數據庫網站的首頁也需要展示其他信息，來增加用戶粘性，一般會有好幾屏，比如最新信息，熱點信息之類的。這些就放在搜索框大區塊的下方了。
比如 官方司法權威網站-中國裁判文書網，全國的1億多個案件都在這個數據庫里，供免費查閱。搜索數據是核心功能，因此搜索框最醒目，占首屏大部分位置。其他信息依次往下布局展示。
2. 頁面-頂部居中
為啥頂部居中？因為網站業務中，搜索是重要功能，但不是全部。不用夸大顯示，但頂部的居中好位置要留給它。
一般適用于電商平臺，資訊平臺。
這些網站中，展示商品、廣告、信息才是重點，是為了促成交易，增加流量的。搜索是工具，比較重要，但不是重點，只是為了達成目的的一個手段。因此可以放在頁面頂部且居中的顯眼好位置，重要，但是不過分夸張。
用戶場景：
如果用戶是漫無目的的瞎逛，可以隨便瀏覽頁面中提供的大量信息。
如果用戶是有目的的找某個商品或信息，也能很容易的在頁面頂部找到搜索框，定位目標。
比如，電商平臺-京東
比如，視頻平臺-Youtube
看到了嗎？頂部中間，不太顯眼的那個灰色搜索框。
3. 頁面-頂部右邊
為啥頂部右邊？因為網站業務中，搜索只是輔助功能，居中這么好個位置沒必要，放右邊看得見就行了。
比如， Dribbble
Dribbble，設計師都知道。一般大家都是去隨便看看找靈感的，瀏覽信息是重點，搜索功能不太重要，放邊上就行了。
比如，小米
提問：有同學會問，嗯哼，這是電商網站呀，要賣產品呀。為什么不像淘寶京東一樣放頂部居中呀？
回答：因為，這是品牌自己的平臺呀，就那么幾個品類，在頂部導航條內，側邊導航條內都已經展示得清清楚楚了，鼠標點點就行了。搜索是次要的功能。
根據設計原則——奧卡姆剃刀原理（簡單有效原理）
* 只放置必要的東西
* 給予更少的選項
頂部的品類導航條本身就能幫用戶找到產品了，可以直達分類頁面，是非常重要的入口，也是重要的產品宣傳，需要放在頂部首行的位置。
搜索是輔助功能（此處相信小米的PM是分析過search usage的），放在次要位置就可以了。
不需要同時突出搜索框+品類導航條，來增加用戶的選擇成本。
另外，要是搜索框居中了，那展示品類的重要導航條就得布局在第二行。Web/APP的第一屏都是黃金位置，能省一行是一行。
4. 其他
1）可以放logo的右邊。
比如google的搜索結果頁
從設計理念上說，google的搜索框和logo放在一起，也能組成品牌和搜索引擎之間的強關系。即google=search. 用戶們不也早就說，“你google一下”，而不是“你搜索一下了”嘛!
從UI上說，搜索引擎的內頁一般只有列表，這樣搜索框也能和列表左對齊，布局清晰。
2）其他位置，根據情況判斷。
比如Figma界面，文章最后有圖。此處不贅述。
二、寬度
搜索框的寬度（包括input box + search button），同樣取決于搜索功能的重要性。其中，大概率取決于上文所述的搜索框的位置。
其次，也需要考慮輸入的關鍵字的字符數。
另外，根據整體布局決定。
一般情況下，220px<寬度<650px。 請注意, 這是建議的相對值，不是絕對值。只表示搜索框在大部分Web中的情況，具體需根據自己的頁面情況調整。實際應用中，也有搜索框最長到1000px的情況。也有比220px更短的。
根據搜索框在頁面中的不同位置，搜索框寬度分別如下：
1. 如果搜索框位置在頁面居中，那搜索功能也極其重要，那當然寬一點。
比如上文提到的google，百度。搜索框寬度通常固定在650px以內，保證在所有分辨率中都能顯示全。也保證了可顯示的關鍵字字符數大于60個（即60個字母，30個中文字），大大的足夠了。
2. 如果搜索框位置在頂部居右，那搜索就是輔助功能，那當然短一點。
具體寬度，需要考慮頂部UI布局情況。但一般不小于220px（大概數值，自己平衡）. 不然就不太方便輸入關鍵字了，或者關鍵字就顯示不了幾個了。
3. 那如果搜索框位置在在頂部居中呢？則可長可短，根據業務情況和頁面布局判斷。
如果為了用戶體驗好的話，搜索框寬度也需要考慮「響應式設計Responsive Design」。
既然都說到 「響應式設計」了，那么就提一下吧。
概念：
響應式設計（Responsive Design）是頁面布局可以「響應」不同尺寸屏幕的設計方法。通常我們說起響應式設計都是針對網頁設計的。同一個頁面，隨著屏幕尺寸的改變，自適應地改變頁面布局。
通俗來說，這個網頁就可以自動適應手機，平板，和電腦的各個分辨率。用戶在各個設備上瀏覽這個web頁時，頁面布局和交互都是自動調節的，相當舒適。
以頁面中的單個功能區為例：
* 比如，內容區塊的在一定程度上能夠自動調整，以確保填滿整個頁面。
* 比如，網格排布，能夠減少/增加排布的列數。如圖片布局在“1行1列” 到“1行N列” 之間，自動調整列數。
* 比如，能夠適應比例變化的圖片。圖片自動調整大小。
* 比如，篩選功能在網頁里是在頁面左側一列，全部展開顯示的，在手機里就可以隱藏顯示，通過按鈕點擊，有滑出菜單之類的。
Tips: 做響應式設計，需要公司舍得投入資源，因為涉及到很多額外的工作量。最起碼有以下：
* Designer | 設計——做3套設計。
* Frontend Engineer | 前端——寫響應式設計的代碼，可寫1套，可寫3套（方便維護）。
* QA Engineer | 測試——測不同的分辨率，最起碼測3套。這還沒算fix bug后的retest.
為啥3套？因為針對分辨率需要做2個節點。我司一般是792px<X<1440px
好了，響應式設計就大概講一下吧。不然又能寫好幾頁。收~
以Youtube為例，大家可以感受下搜索框的響應式設計。
搜索框的寬度是會自動調節的。最小的時候就一個放大鏡圖標（此時為適應手機分辨率），但最寬也就是固定到640px，不然太寬了，輸入關鍵詞時，搜索按鈕離得太遠，點擊也會很不方便。
三、 按鈕樣式
搜索框的按鈕樣式，同樣取決于搜索功能的重要性。也需要平衡整體頁面布局。
按鈕樣式大致情況，如下圖所示：
* 色塊帶圖標的
* 只有一個圖標的
* 沒有按鈕的
* 色塊帶圖標+文字的。
* 其他（比如就一個放大鏡圖標等。圖片中沒做展示）
具體怎么應用，詳見后文：
四、 正常顯示 or 簡化顯示？
九、 一個頁面里有2個搜索框怎么處理？
四、正常顯示 or 簡化顯示？
有些Web中的搜索框，因為各種原因，可能就會做簡化。而不是整個顯示，這個需要根據情況決定，就是——隨機應變~
比如，Apple官網，只顯示一個放大鏡圖標。
此處跟上文提到的小米官網的情況類似。商品品類就這些，導航條突出品類，搜索功能弱化。
但蘋果在此處更弱化了搜索，只放一個放大鏡圖標。（從UI上看，目測是由于導航條中品類太多，放不下搜索框了。） 等用戶點擊了放大鏡圖標后，才使用CSS / JS特效，滑動顯示完整的搜索框，且居中顯示。
再比如，Airbnb 愛彼迎，全球民宿短租公寓預訂平臺。
網站中，搜索功能很重要，是用戶預定，增加銷售的入口。因此需要突出搜索框。
* 首頁，默認顯示完整的搜索框。
* 當頁面滾動時，搜索框置頂顯示，方便用戶查詢和預定，增加潛在銷售可能。但是這個搜索框的內容太多，硬要在置頂層中全部顯示的話，這個始終置頂的層的高度就會很高，會影響用戶瀏覽頁面內容。
那么就把搜索框略微簡化，相應的高度也就小了。（不建議只放一個放大鏡按鈕，太弱化搜索功能了。會流失潛在客戶，流失潛在銷售可能）
* 搜索框在置頂層中居中顯示，點擊簡化版搜索框后，才動效顯示完整的搜索框。
五、默認要顯示提示文字啊！
在輸入框中可以提示搜索示例，告知網站支持哪些內容的搜索，以及如何使用功能。防止用戶一臉懵，優化用戶體驗。
通常適用于數據庫，資訊類這些內容類型較多的網站。
比如，天眼查。（垂直頂部居中的搜索框）
比如，網易云音樂。 （右上角搜索框）
六、推薦詞
基于業務需要，搜索框內經常會有推薦詞，方便用戶不用輸入關鍵詞就可以直達結果。同時，也是一種對商品的促銷，對資訊的推廣。根據不同需要，可以有不同的顯示方式。
Tips: 推薦詞，熱搜詞，促銷，廣告都可以這么處理。
1. 框內
1）單個推薦詞交替顯示
比如，小米官網
截圖為動態圖哦，大概5秒換一個推薦詞。個人覺得間隔時間有點長了。
2）多個推薦詞同時顯示
比如，LexisNexis 全球頂級法律數據庫 中國站
沒有和小米一樣，做1個推薦詞的動態交替顯示，是因為用戶場景不同。
考慮到LexisNexis的用戶都是律師群體，工作中時間寶貴。使用網站不是閑逛，而是為了快速查詢數據，沒有時間等待。因此一次性顯示2-3個推薦詞，方便用戶直接看到，直接點擊。
提示：推薦詞可能會大于3個的，比如有8個。那就在用戶每次回到首頁后，顯示一批新的推薦詞。
或者，直接顯示在框外，如下文所述。
2. 框外
比如，淘寶
七、有很多分類怎么辦？
如果要針對很多內容類型分別搜索怎么辦呢？搜索框怎么處理呢？有很多方法。
按復雜程度，依次進階如下：
1. 下拉框型
一般用下拉框了，那通常分類對于搜索不是太重要，不用突出顯示。
2.Tab型
如果用tab來展示分類了，那目的通常是：
* 推廣產品或內容
* 引導用戶，優化用戶體驗
1）橫版顯示。比如 某房產網站
2）豎版顯示。比如 知網
搜索框的左側的3個Tab為內容類型分類。
搜索框中展開的下拉框中是字段，此處一并展示。
3）豎版+橫板顯示。比如 某房產網站
如上圖，是豎版分類+橫版的兩個搜索按鈕。
如上圖，是豎版的分類+橫版的分類。橫版的分類還做了2級分類。分類太多，相信設計師們在處理時也挺頭大。
八、 一個頁面里有2個搜索框怎么處理？
回答：哪個重要，就突出顯示哪個唄！
以Amazon為例，
該頁為商品評論頁面。
* 頂部搜索框為全站搜索，非常重要。因此寬度較長，按鈕為亞馬遜的主色調黃色，醒目。
* 頁面內的搜索框，為針對評論內容的搜索，則相對弱化。
搜索框的默認狀態講完了。那么當鼠標點擊搜索框，此時還沒有輸入任何內容，那么光標觸發的狀態是怎樣的呢？通常，根據業務情況，大多數搜索框都會自動彈出下拉框。
我們此處只討論下拉框中的顯示情況。
一、下拉框中，歷史記錄+熱搜詞是大部分網站的標配。
比如，B站。
二、 下拉框中，在歷史記錄+熱搜詞的基礎上，再添加些網站自己想推廣的內容。
比如，Zcool本酷。
三、下拉框中，根據網站自身業務情況，顯示個性化內容。
1. 比如 Zillow, 美國知名房產估價網
網站業務就是估房價。下拉框中，第一行就是“當前位置”，點擊后跳轉到結果頁，顯示定位地址的相關結果。優化用戶體驗。
2. 比如，攜程。
攜程的業務結構相對復雜，搜索也就相對復雜。搜索項同時也涉及到很多字段/參數，其實也類似表單了。后面有機會可以講下表單的交互，此處不延伸討論了。大家有興趣可以去逛逛攜程。
在搜索框中，一旦開始輸入字符，那新一輪的交互又開始了。
一、 默認交互
目前通用的規則——搜索聯想功能，Google已經定義好了。我就不重復寫了，如下摘自UXPlanet：
Google自2008年以來掌握并實施了“搜索聯想”。
“搜索聯想”（自動建議）可以幫助用戶通過已輸入的文本來預測可以找到的查詢結果，為用戶節省了時間并創造了更加便捷的體驗。
交互細節如下：
* 確保搜索聯想是有效的，設計不完善的搜索聯想會混淆和分散用戶的注意力，所以使用拼寫自動更正、詞根識別、語義識別和預測，可以改進搜索體驗。
（Lu傾傾 注：中文搜索還要識別拼音）
* 盡可能快速的提供搜索聯想，例如輸入到第三個字的時候，就給用戶提供相匹配的聯想詞匯，以此減少用戶數據錄入的工作。
（Lu傾傾 注：現在其實輸入第1個字就可以提供聯想了。）
* 只提供少于10個項目的聯想詞句（不建議使用滾動條），否則信息將會變得難以承受。
* 允許用戶通過鍵盤的上下鍵控制選擇列表。
（Lu傾傾 注：
百度在使用“鍵盤”（鼠標不行）上下選擇列表時，如果高亮在某個聯想詞上停頓2秒以上，則等同于“回車鍵”，整個頁面的搜索結果刷新。 Google不支持此功能。
這是用戶體驗的差異）
* UI上，已輸入文本和建議文本視覺上保持差異（例如，通常情況下建議的詞匯通過加粗表示）
二、 個性化交互
1. 比如，Google
（Google作為搜索引擎的燈塔，搜索交互亮點的地方太多太多了，這里只舉個小例子。）
如上圖，不只在下拉框中展示搜索聯想的關鍵詞。
還把關鍵詞作為一個詞條顯示給客戶，比如電影，比如品牌。還同時顯示各自的參數，比如 圖片，字段。
可以幫助用戶了解信息，精準定位。
2. 比如，維基百科。
由于網站的定位不同。維基百科是一個百科全書，其中都是各類詞條相關的知識/信息。因此下拉框中的聯想，都是以詞條形式顯示的。包含了圖片，詞條名， 參數/字段。
3. Amazon 亞馬遜
亞馬遜的用戶體驗也是做到極致了。搜索下拉框除了提供搜索聯想的關鍵詞，還按照不同的特殊關鍵詞，提供不同的參數選項，方便用戶一步到位，不用再到搜索結果頁里做一次篩選了。優化用戶體驗。
比如，想搜索“chair”, 輸入了關鍵詞“chai”(注意，還沒打全 chair)，下拉框中除了顯示chair相關的商品。還直接把chair的價格區間顯示出來，方便用戶點擊后，直接顯示相關搜索結果。
相信此處亞馬遜的PM們是做過usage分析的，chair列表頁中，應該是 “價格”篩選的usage是最高的，并且極有可能用戶進入chair列表頁的第一個用戶行為就是對價格做篩選。PM們就干脆把篩選項放到了搜索下拉框中了。
針對關鍵詞”ipad”, 也是同樣的交互處理方式，此處是顯示“尺寸”區間。
針對關鍵詞“alarm”,下拉框中按照鬧鐘的不同“功能”，顯示“圖片+分類“，方便用戶直接點擊。
【亞馬遜篇 番外】
在收集亞馬遜案例的時候，好玩就去搜了搜國貨之光“馬應龍“，歪果仁們的評論簡直是太歡樂了，看著看著我都笑出了鵝叫聲。
于是就跑偏了，翻譯了2個評論，貼了上來。大家看文章看久了，休息下~
以上，討論的都是輸入單個關鍵詞搜索的情況。
那么輸入多個關鍵詞的交互該怎么處理呢？
N年前，我在《交互設計稿-純實例》之前我寫過，此處不再贅述了。
如有興趣，請戳，https://www.zcool.com.cn/work/ZMjY4Nzg3MDA=.html
大部分的網站的搜索功能，都是需要在輸入關鍵詞后，點擊“搜索按鈕“ or “回車”，才展示新的搜索結果頁的。（此處不討論百度中，鍵盤移動到聯想上就刷新結果頁等特殊情況）
即一定要有個確認的命令，才觸發搜索。這里面有很多考慮。比如：
* 數據量大，如果是實時響應+即時加載搜索結果頁，對服務器和代碼質量的要求都太高。
* 用戶體驗不太好。因為用戶還沒輸入完，或者還沒確定。頁面就在不停的刷新，會干擾用戶。
但，也有個別工具軟件中，不用按回車，就實時刷新搜索結果。比如，Figma.
在軟件中，都是自己的存檔文件，數據量本身就不大。此時邊輸入關鍵字，邊實時響應，刷新搜索結果頁，讓用戶隨時看到自己的文檔。這種情況下，不用按回車，用戶體驗還更好。
以上，終于寫完了。
暫時寫到這吧，總結太累，但是值得！
最后，附上Amazon貝索斯的原話：
翻譯如下：（沒有太直譯，不然有點拗口）
“以用戶為中心”有很多優點，但最大的一個就是：用戶是美麗的、棒棒的、不會滿意的，即使他們說我們的商業很贊，他們表示很開心很滿意。但他們其實想要更好的東西，不過他們自己并不知道。那么你的讓用戶愉悅的渴望，會驅使你代替他們去發明創造。
——杰夫*貝索斯，2016年給股東的信
額，還是拗口。簡單來說，就是：
筒子們，為了讓用戶高興，發揮你們做產品/交互的主觀能動性吧，自己研究創造去，做個好產品出來。不用指望用戶告訴你做什么/怎么做，他們也不知道。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( paul-jarrel.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務