本文要義：大量實例介紹——Web端“搜索框”的設計思路。全文包括了UX交互設計，用戶體驗，UI設計，響應式設計（responsive design）。

關鍵詞：搜索框，UI，UX 交互，用戶體驗，響應式設計，網頁

第一章 搜索框-默認狀態

1. ?位置
2. 寬度（包含響應式設計）
3. 按鈕樣式
4. ?展開 or 隱藏？
5. 默認要有提示文字
6. 推薦詞
7. 有很多分類怎么辦？
8. ?一個頁面里有 2 個搜索框怎么處理？

第二章 搜索框-光標觸發的狀態

1. 下拉框中，歷史記錄+熱搜詞是標配
2. 下拉框中，標配+額外內容
3. 下拉框中，純個性化內容

第三章 搜索框-搜索中的狀態

1. ?默認交互
2. ?個性化交互
3. 搜索下拉框中的多選功能
4. ?回車 or 不回車？

正文：

以下都是從 Web 端角度寫的總結，Web 的空間比 APP 大，相對來說，交互可發揮的余地更大。APP 端如果有時間，就另外再寫吧。

搜索框簡單吧，也就輸入框+按鈕。但是就那么點小元素，里面也是注滿了無數的小心思，死光了無數產品經理/交互設計師的腦細胞，只是為了讓交互更流暢，產品體驗更好。

第一章 搜索框-默認狀態

搜索框的默認 UI/UX 樣式，取決于網站的業務性質，取決于搜索功能的重要性，取決于頁面布局。

1. 位置

搜索框的位置放在哪里，取決于搜索功能對于網站的重要性。

N 年前，就有很多小伙伴引用過如下研究報告了，我重復下吧。

Dawn Shikh 與 Keisi Lenz 的研究：展示了在 142 個參與者的調查中，網站搜索框的期望位置。研究發現，對用戶來說最方便使用的地方是網站的左上角與右上角位置。用戶可以使用常見的 F 形掃描模式輕松找到它。

如圖，搜索框要放置在網站的右上角或者中間位置，這是用戶所期望的位置。

目前大部分網站在 UI 布局搜索框時，也是大致遵循這個規則的。但總體來說，搜索框的位置，還是可以分為如下幾種：

1. 頁面-居中
2. 頁面-頂部居中
3. 頁面-頂部右邊
4. 其他

那么，分別討論：

頁面-居中

為啥居中？當然因為對于網站，搜索是核心功能。如果沒有搜索功能的話，業務幾乎無法開展。它最最最重要啦！

1）絕對居中

這種一般適用于搜索引擎的首頁。頁面基本就是一屏，搜索是最主要功能，其他內容不重要。

比如 Google, 百度。

Google 的界面就相當干凈清爽。嘿，我就是純搜索的，趕緊搜唄！

百度，可以只顯示一個搜索框。

如圖所示的搜索框下的大塊資訊，是可以在設置中隱藏的，不想看，關掉就好。

2）相對居中，垂直略靠上部。

適用于數據庫網站的首頁。

因為數據庫的數據量動不動就是千萬、上億的，搜索是極其重要的功能，99%的用戶都是帶著目的來的，直接通過搜索找數據的。搜索框需要極其醒目，需要占據首屏大部分的位置。

但考慮到數據庫網站的首頁也需要展示其他信息，來增加用戶粘性，一般會有好幾屏，比如最新信息，熱點信息之類的。這些就放在搜索框大區塊的下方了。

比如 官方司法權威網站-中國裁判文書網，全國的 1 億多個案件都在這個數據庫里，供免費查閱。搜索數據是核心功能，因此搜索框最醒目，占首屏大部分位置。其他信息依次往下布局展示。

頁面-頂部居中

為啥頂部居中？因為網站業務中，搜索是重要功能，但不是全部。不用夸大顯示，但頂部的居中好位置要留給它。

一般適用于電商平臺，資訊平臺。

這些網站中，展示商品、廣告、信息才是重點，是為了促成交易，增加流量的。搜索是工具，比較重要，但不是重點，只是為了達成目的的一個手段。因此可以放在頁面頂部且居中的顯眼好位置，重要，但是不過分夸張。

用戶場景：

如果用戶是漫無目的的瞎逛，可以隨便瀏覽頁面中提供的大量信息。

如果用戶是有目的的找某個商品或信息，也能很容易的在頁面頂部找到搜索框，定位目標。

比如，電商平臺-京東

比如，視頻平臺-Youtube

看到了嗎？頂部中間，不太顯眼的那個灰色搜索框。

頁面-頂部右邊

為啥頂部右邊？因為網站業務中，搜索只是輔助功能，居中這么好個位置沒必要，放右邊看得見就行了。

比如，Dribbble

Dribbble，設計師都知道。一般大家都是去隨便看看找靈感的，瀏覽信息是重點，搜索功能不太重要，放邊上就行了。

比如，小米

提問：有同學會問，嗯哼，這是電商網站呀，要賣產品呀。為什么不像淘寶京東一樣放頂部居中呀？

回答：因為，這是品牌自己的平臺呀，就那么幾個品類，在頂部導航條內，側邊導航條內都已經展示得清清楚楚了，鼠標點點就行了。搜索是次要的功能。

根據設計原則——奧卡姆剃刀原理（簡單有效原理）

• 只放置必要的東西
• 給予更少的選項

頂部的品類導航條本身就能幫用戶找到產品了，可以直達分類頁面，是非常重要的入口，也是重要的產品宣傳，需要放在頂部首行的位置。

搜索是輔助功能（此處相信小米的 PM 是分析過 search usage 的），放在次要位置就可以了。

不需要同時突出搜索框+品類導航條，來增加用戶的選擇成本。

另外，要是搜索框居中了，那展示品類的重要導航條就得布局在第二行。Web/APP 的第一屏都是黃金位置，能省一行是一行。

其他

1）可以放 logo 的右邊。

比如 google 的搜索結果頁

從設計理念上說，google 的搜索框和 logo 放在一起，也能組成品牌和搜索引擎之間的強關系。即 google=search. 用戶們不也早就說，“你 google 一下”，而不是“你搜索一下了”嘛!

從 UI 上說，搜索引擎的內頁一般只有列表，這樣搜索框也能和列表左對齊，布局清晰。

2）其他位置，根據情況判斷。

比如 Figma 界面，文章最后有圖。此處不贅述。

2. 寬度

搜索框的寬度（包括 input box + search button），同樣取決于搜索功能的重要性。其中，大概率取決于上文所述的搜索框的位置。

其次，也需要考慮輸入的關鍵字的字符數。

另外，根據整體布局決定。

一般情況下，220px<寬度<650px。 請注意, 這是建議的相對值，不是絕對值。只表示搜索框在大部分 Web 中的情況，具體需根據自己的頁面情況調整。實際應用中，也有搜索框最長到 1000px 的情況。也有比 220px 更短的。

根據搜索框在頁面中的不同位置，搜索框寬度分別如下：

如果搜索框位置在頁面居中，那搜索功能也極其重要，那當然寬一點。

比如上文提到的 google，百度。搜索框寬度通常固定在 650px 以內，保證在所有分辨率中都能顯示全。也保證了可顯示的關鍵字字符數大于 60 個（即 60 個字母，30 個中文字），大大的足夠了。

如果搜索框位置在頂部居右，那搜索就是輔助功能，那當然短一點。

具體寬度，需要考慮頂部 UI 布局情況。但一般不小于 220px（大概數值，自己平衡）. 不然就不太方便輸入關鍵字了，或者關鍵字就顯示不了幾個了。

那如果搜索框位置在在頂部居中呢？則可長可短，根據業務情況和頁面布局判斷。

如果為了用戶體驗好的話，搜索框寬度也需要考慮「響應式設計 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，不然太寬了，輸入關鍵詞時，搜索按鈕離得太遠，點擊也會很不方便。

3. 按鈕樣式

搜索框的按鈕樣式，同樣取決于搜索功能的重要性。也需要平衡整體頁面布局。

按鈕樣式大致情況，如下圖所示：

• 色塊帶圖標的
• 只有一個圖標的
• 沒有按鈕的
• 色塊帶圖標+文字的。
• 其他（比如就一個放大鏡圖標等。圖片中沒做展示）

具體怎么應用，詳見后文：

• 4: 正常顯示 or 簡化顯示？
• 9: 一個頁面里有 2 個搜索框怎么處理？

4. 正常顯示 or 簡化顯示？

有些 Web 中的搜索框，因為各種原因，可能就會做簡化。而不是整個顯示，這個需要根據情況決定，就是——隨機應變~

比如，Apple 官網，只顯示一個放大鏡圖標。

此處跟上文提到的小米官網的情況類似。商品品類就這些，導航條突出品類，搜索功能弱化。

但蘋果在此處更弱化了搜索，只放一個放大鏡圖標。（從 UI 上看，目測是由于導航條中品類太多，放不下搜索框了。） 等用戶點擊了放大鏡圖標后，才使用 CSS / JS 特效，滑動顯示完整的搜索框，且居中顯示。

再比如，Airbnb 愛彼迎，全球民宿短租公寓預訂平臺。

網站中，搜索功能很重要，是用戶預定，增加銷售的入口。因此需要突出搜索框。

首頁，默認顯示完整的搜索框。

當頁面滾動時，搜索框置頂顯示，方便用戶查詢和預定，增加潛在銷售可能。但是這個搜索框的內容太多，硬要在置頂層中全部顯示的話，這個始終置頂的層的高度就會很高，會影響用戶瀏覽頁面內容。

那么就把搜索框略微簡化，相應的高度也就小了。（不建議只放一個放大鏡按鈕，太弱化搜索功能了。會流失潛在客戶，流失潛在銷售可能）

搜索框在置頂層中居中顯示，點擊簡化版搜索框后，才動效顯示完整的搜索框。

5. 默認要顯示提示文字

在輸入框中可以提示搜索示例，告知網站支持哪些內容的搜索，以及如何使用功能。防止用戶一臉懵，優化用戶體驗。

通常適用于數據庫，資訊類這些內容類型較多的網站。

比如，天眼查。（垂直頂部居中的搜索框）

比如，網易云音樂。 （右上角搜索框）

6. 推薦詞

基于業務需要，搜索框內經常會有推薦詞，方便用戶不用輸入關鍵詞就可以直達結果。同時，也是一種對商品的促銷，對資訊的推廣。根據不同需要，可以有不同的顯示方式。

Tips: 推薦詞，熱搜詞，促銷，廣告都可以這么處理。

框內

1）單個推薦詞交替顯示

比如，小米官網

截圖為動態圖哦，大概 5 秒換一個推薦詞。個人覺得間隔時間有點長了。

2）多個推薦詞同時顯示

比如，LexisNexis 全球頂級法律數據庫 中國站

沒有和小米一樣，做 1 個推薦詞的動態交替顯示，是因為用戶場景不同。

考慮到 LexisNexis 的用戶都是律師群體，工作中時間寶貴。使用網站不是閑逛，而是為了快速查詢數據，沒有時間等待。因此一次性顯示 2-3 個推薦詞，方便用戶直接看到，直接點擊。

提示：推薦詞可能會大于 3 個的，比如有 8 個。那就在用戶每次回到首頁后，顯示一批新的推薦詞。

或者，直接顯示在框外，如下文所述。

框外

比如，淘寶

7. 有很多分類怎么辦？

如果要針對很多內容類型分別搜索怎么辦呢？搜索框怎么處理呢？有很多方法。

按復雜程度，依次進階如下：

下拉框型

一般用下拉框了，那通常分類對于搜索不是太重要，不用突出顯示。

Tab 型

如果用 tab 來展示分類了，那目的通常是：

• 推廣產品或內容
• 引導用戶，優化用戶體驗

1）橫版顯示。比如 某房產網站

2）豎版顯示。比如 知網

搜索框的左側的 3 個 Tab 為內容類型分類。

搜索框中展開的下拉框中是字段，此處一并展示。

3）豎版+橫板顯示。比如 某房產網站

如上圖，是豎版分類+橫版的兩個搜索按鈕。

如上圖，是豎版的分類+橫版的分類。橫版的分類還做了 2 級分類。分類太多，相信設計師們在處理時也挺頭大。

8. 一個頁面里有 2 個搜索框怎么處理？

回答：哪個重要，就突出顯示哪個唄！

以 Amazon 為例，

該頁為商品評論頁面。

• 頂部搜索框為全站搜索，非常重要。因此寬度較長，按鈕為亞馬遜的主色調黃色，醒目。
• 頁面內的搜索框，為針對評論內容的搜索，則相對弱化。

第二章 搜索框-光標觸發的狀態

搜索框的默認狀態講完了。那么當鼠標點擊搜索框，此時還沒有輸入任何內容，那么光標觸發的狀態是怎樣的呢？通常，根據業務情況，大多數搜索框都會自動彈出下拉框。

我們此處只討論下拉框中的顯示情況。

1. 下拉框中，歷史記錄+熱搜詞是大部分網站的標配。

比如，B 站。

2. 下拉框中，在歷史記錄+熱搜詞的基礎上，再添加些網站自己想推廣的內容。

比如，Zcool 本酷。

3. 下拉框中，根據網站自身業務情況，顯示個性化內容。

比如 Zillow, 美國知名房產估價網

網站業務就是估房價。下拉框中，第一行就是“當前位置”，點擊后跳轉到結果頁，顯示定位地址的相關結果。優化用戶體驗。

比如，攜程。

攜程的業務結構相對復雜，搜索也就相對復雜。搜索項同時也涉及到很多字段/參數，其實也類似表單了。后面有機會可以講下表單的交互，此處不延伸討論了。大家有興趣可以去逛逛攜程。

第三章 搜索框-搜索中的狀態

在搜索框中，一旦開始輸入字符，那新一輪的交互又開始了。

1.? 默認交互

目前通用的規則——搜索聯想功能，Google已經定義好了。我就不重復寫了，如下摘自UXPlanet：

Google 自 2008 年以來掌握并實施了“搜索聯想”。

“搜索聯想”（自動建議）可以幫助用戶通過已輸入的文本來預測可以找到的查詢結果，為用戶節省了時間并創造了更加便捷的體驗。

交互細節如下：

• 確保搜索聯想是有效的，設計不完善的搜索聯想會混淆和分散用戶的注意力，所以使用拼寫自動更正、詞根識別、語義識別和預測，可以改進搜索體驗。（ 注：中文搜索還要識別拼音）
• 盡可能快速的提供搜索聯想，例如輸入到第三個字的時候，就給用戶提供相匹配的聯想詞匯，以此減少用戶數據錄入的工作。（注：現在其實輸入第 1 個字就可以提供聯想了。）
• 只提供少于 10 個項目的聯想詞句（不建議使用滾動條），否則信息將會變得難以承受。
• 允許用戶通過鍵盤的上下鍵控制選擇列表。（注：百度在使用“鍵盤”（鼠標不行）上下選擇列表時，如果高亮在某個聯想詞上停頓 2 秒以上，則等同于“回車鍵”，整個頁面的搜索結果刷新。Google 不支持此功能。這是用戶體驗的差異）
• UI 上，已輸入文本和建議文本視覺上保持差異（例如，通常情況下建議的詞匯通過加粗表示）

2.? 個性化交互

比如，Google

（Google 作為搜索引擎的燈塔，搜索交互亮點的地方太多太多了，這里只舉個小例子。）

如上圖，不只在下拉框中展示搜索聯想的關鍵詞。

還把關鍵詞作為一個詞條顯示給客戶，比如電影，比如品牌。還同時顯示各自的參數，比如 圖片，字段。

可以幫助用戶了解信息，精準定位。

比如，維基百科。

由于網站的定位不同。維基百科是一個百科全書，其中都是各類詞條相關的知識/信息。因此下拉框中的聯想，都是以詞條形式顯示的。包含了圖片，詞條名， 參數/字段。

Amazon 亞馬遜

亞馬遜的用戶體驗也是做到極致了。搜索下拉框除了提供搜索聯想的關鍵詞，還按照不同的特殊關鍵詞，提供不同的參數選項，方便用戶一步到位，不用再到搜索結果頁里做一次篩選了。優化用戶體驗。

比如，想搜索“chair”, 輸入了關鍵詞“chai”(注意，還沒打全 chair)，下拉框中除了顯示 chair 相關的商品。還直接把 chair 的價格區間顯示出來，方便用戶點擊后，直接顯示相關搜索結果。

相信此處亞馬遜的 PM 們是做過 usage 分析的，chair 列表頁中，應該是 “價格”篩選的 usage 是最高的，并且極有可能用戶進入 chair 列表頁的第一個用戶行為就是對價格做篩選。PM 們就干脆把篩選項放到了搜索下拉框中了。

針對關鍵詞”ipad”, 也是同樣的交互處理方式，此處是顯示“尺寸”區間。

針對關鍵詞“alarm”,下拉框中按照鬧鐘的不同“功能”，顯示“圖片+分類“，方便用戶直接點擊。

「亞馬遜篇 番外」

在收集亞馬遜案例的時候，好玩就去搜了搜國貨之光“馬應龍“，歪果仁們的評論簡直是太歡樂了，看著看著我都笑出了鵝叫聲。

于是就跑偏了，翻譯了 2 個評論，貼了上來。大家看文章看久了，休息下~

3. 回車 or 不回車？

大部分的網站的搜索功能，都是需要在輸入關鍵詞后，點擊“搜索按鈕“ or “回車”，才展示新的搜索結果頁的。（此處不討論百度中，鍵盤移動到聯想上就刷新結果頁等特殊情況）

即一定要有個確認的命令，才觸發搜索。這里面有很多考慮。比如：

• 數據量大，如果是實時響應+即時加載搜索結果頁，對服務器和代碼質量的要求都太高。
• 用戶體驗不太好。因為用戶還沒輸入完，或者還沒確定。頁面就在不停的刷新，會干擾用戶。

但，也有個別工具軟件中，不用按回車，就實時刷新搜索結果。比如，Figma.

在軟件中，都是自己的存檔文件，數據量本身就不大。此時邊輸入關鍵字，邊實時響應，刷新搜索結果頁，讓用戶隨時看到自己的文檔。這種情況下，不用按回車，用戶體驗還更好。

以上，終于寫完了。

暫時寫到這吧，總結太累，但是值得！

最后，附上 Amazon 貝索斯的原話：

翻譯如下：（沒有太直譯，不然有點拗口）

“以用戶為中心”有很多優點，但最大的一個就是：用戶是美麗的、棒棒的、不會滿意的，即使他們說我們的商業很贊，他們表示很開心很滿意。但他們其實想要更好的東西，不過他們自己并不知道。那么你的讓用戶愉悅的渴望，會驅使你代替他們去發明創造。

——杰夫*貝索斯，2016年給股東的信

額，還是拗口。簡單來說，就是：

筒子們，為了讓用戶高興，發揮你們做產品/交互的主觀能動性吧，自己研究創造去，做個好產品出來。不用指望用戶告訴你做什么/怎么做，他們也不知道。

自己研究? 那怎么試錯呢？看來后面我可以講講 User Research, Agile, A/B Testing, Working Backward Method 啥的。

共勉！

------以上，皆為辛苦籌備+整理+碼字，歡迎學習。但抄襲必究。Biu~------

Witten by “Lu 傾傾”