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