“搜索”是產(chǎn)品中一個(gè)非常必要的功能模塊，搜索就像為用戶(hù)提供了一條便捷的綠色通道，方便用戶(hù)快速檢索內(nèi)容。

搜索動(dòng)作在 App 中依靠搜索框來(lái)完成，好用的搜索框很大程度上決定了產(chǎn)品的搜索體驗(yàn)如何。大多數(shù)搜索框存在相似性，但真正好的搜索框會(huì)在細(xì)節(jié)上為用戶(hù)帶來(lái)差異化的反饋，帶來(lái)很暖很貼心的感覺(jué)。

搜索框結(jié)構(gòu)分析

從體驗(yàn)層面上看，一個(gè)良好的用戶(hù)體驗(yàn)需要具備完整的流程。搜索框的使用流程可以簡(jiǎn)單劃分為：

• 使用前-找到搜索框入口；
• 使用中-點(diǎn)擊輸入內(nèi)容；
• 使用后-展示搜索結(jié)果。

其中使用中會(huì)涉及到跳轉(zhuǎn)和輸入兩種不同的狀態(tài)，在下面的文章里我會(huì)展開(kāi)來(lái)分析。

搜索框的常見(jiàn)類(lèi)型

回想常用 App 的搜索框，好像它們的樣式看起來(lái)差別并不是很大，但其實(shí)每個(gè)搜索框的細(xì)節(jié)都是經(jīng)過(guò)精心設(shè)計(jì)的，下面總結(jié)了幾種常見(jiàn)的搜索框類(lèi)型。

1. 搜索圖標(biāo)

頁(yè)面上只提供一個(gè)放大鏡圖標(biāo)，通常需要用戶(hù)點(diǎn)擊圖標(biāo)后才能跳轉(zhuǎn)到搜索頁(yè)面，例如小紅書(shū)就將搜索圖標(biāo)放置在頁(yè)面右上角。

2. 基本搜索框

基本的搜索框組成包括放大鏡圖標(biāo)、文字提示、輸入框三部分。微信主頁(yè)的搜索框采用了這種基本形式，文字提示為搜索，簡(jiǎn)潔清晰。

3. 文字提示類(lèi)搜索框

和基本搜索框的唯一不同的地方在于，這類(lèi)搜索框中的文字提示部分不再是搜索兩個(gè)字，而是根據(jù)產(chǎn)品需求支持預(yù)置多組文字提示并在搜索框內(nèi)循環(huán)展示。

△ 在大眾點(diǎn)評(píng)的頂部搜索框中，文字提示部分循環(huán)展示了三組不同的內(nèi)容，引導(dǎo)用戶(hù)快速檢索到好吃的和好玩的。

4. 功能類(lèi)搜索框

之所以叫做功能類(lèi)搜索框，是在文字提示類(lèi)搜索框的基礎(chǔ)上根據(jù)產(chǎn)品功能的需要額外添加了常用的功能性圖標(biāo)，如掃碼圖標(biāo)、拍照?qǐng)D標(biāo)、語(yǔ)音圖標(biāo)等，賦予搜索框更多的功能屬性。

△ 經(jīng)常使用豆瓣看書(shū)評(píng)的同學(xué)可能會(huì)注意到豆瓣主頁(yè)的搜索框中有一個(gè)掃碼圖標(biāo)，點(diǎn)擊之后可以快速掃描圖書(shū)條碼或二維碼，快速識(shí)別書(shū)的內(nèi)容，省去檢索的麻煩。

△ 淘寶搜索框的組成更復(fù)雜，除了支持掃碼外還有相機(jī)圖標(biāo)，方便用戶(hù)拍照識(shí)別商品。

搜索框設(shè)計(jì)狀態(tài)分析

使用搜索框搜索的過(guò)程總體可以分為四部分：搜索前、點(diǎn)擊搜索框、輸入中、搜索后。設(shè)計(jì)分析過(guò)程中我們要先理清整體的搜索流程，再考慮每個(gè)狀態(tài)對(duì)應(yīng)的交互細(xì)節(jié)及反饋，這樣才能保持邏輯清晰。

1. 搜索前-默認(rèn)狀態(tài)

位置

大多數(shù)搜索框出現(xiàn)在頁(yè)面頂部，作為一個(gè)大的觸摸目標(biāo)更符合用戶(hù)的認(rèn)知習(xí)慣，更容易被用戶(hù)發(fā)現(xiàn)和使用。

△ 在蘋(píng)果自帶的地圖應(yīng)用中，搜索框放在頁(yè)面中部偏下的位置，相比于頂部搜索框，這樣的位置分布更方便用戶(hù)單手操作。

樣式

搜索前的狀態(tài)除了前面講的幾種常見(jiàn)的搜索框樣式外，有些產(chǎn)品會(huì)直接在搜索框增加“搜索”按鈕。

△ 阿里系產(chǎn)品包括淘寶、支付寶、閑魚(yú)等主頁(yè)搜索框都額外添加了“搜索”按鈕，相比于點(diǎn)擊搜索框再點(diǎn)擊鍵盤(pán)搜索內(nèi)容推薦，直接點(diǎn)擊按鈕簡(jiǎn)化了搜索流程。

2. 點(diǎn)擊后-獲取焦點(diǎn)

搜索框

點(diǎn)擊搜索框后，框內(nèi)的放大鏡圖標(biāo)會(huì)消失，出現(xiàn)閃爍的光標(biāo)引導(dǎo)用戶(hù)輸入，搜索框右側(cè)會(huì)出現(xiàn)“取消”按鈕。

△ 點(diǎn)擊大眾點(diǎn)評(píng)的搜索框后，搜索頁(yè)會(huì)出現(xiàn)三個(gè)選項(xiàng)，點(diǎn)擊每一個(gè)選項(xiàng)，搜索框內(nèi)的文字提示都會(huì)改變，有效幫助用戶(hù)提升搜索準(zhǔn)確度，雖然是很小的點(diǎn)但做的很用心。

鍵盤(pán)

點(diǎn)擊搜索框后會(huì)彈起鍵盤(pán)，在不輸入內(nèi)容的情況下，點(diǎn)擊鍵盤(pán)自帶的“搜索”按鈕能查詢(xún)搜索框中推薦的內(nèi)容。

搜索頁(yè)

搜索頁(yè)的內(nèi)容通常包括歷史搜索、搜索發(fā)現(xiàn)、熱門(mén)推薦等版塊，記錄用戶(hù)的搜索行為，推薦目標(biāo)商品或服務(wù)，提高轉(zhuǎn)化率。

△ 豆瓣將最熱門(mén)的內(nèi)容都展現(xiàn)在搜索頁(yè)中，包括實(shí)時(shí)更新的熱門(mén)書(shū)影音榜單、熱門(mén)小組、熱門(mén)話(huà)題等，為用戶(hù)提供有效的引導(dǎo)。

關(guān)于歷史搜索我們還可以繼續(xù)深入分析，思考這些記錄怎么排序、最多顯示幾條記錄……

△ 網(wǎng)易云音樂(lè)的歷史搜索最多可以保留10條，采用橫向滑動(dòng)的手勢(shì)交互可以節(jié)省屏幕空間。根據(jù)內(nèi)容長(zhǎng)短一屏一次可以顯示2-3條記錄，這會(huì)導(dǎo)致排在后面的歷史記錄不容易被用戶(hù)快速發(fā)現(xiàn)。

△ 淘寶的歷史搜索可以容納更多的數(shù)量，當(dāng)搜索記錄超過(guò)兩行時(shí)會(huì)有一個(gè)小的展開(kāi)按鈕，點(diǎn)擊按鈕可以查看早期的記錄，這樣既能節(jié)省屏幕空間也能最大化容納歷史記錄。

3. 搜索中-輸入內(nèi)容

刪除/取消

當(dāng)開(kāi)始輸入內(nèi)容時(shí)，在搜索框的右側(cè)會(huì)出現(xiàn)刪除圖標(biāo)，方便用戶(hù)一鍵刪除輸入的內(nèi)容，這里要注意區(qū)分刪除和取消的區(qū)別。

△ 在淘寶中點(diǎn)擊“刪除”圖標(biāo)，頁(yè)面會(huì)返回到上一級(jí)也就是搜索頁(yè)；

△ 點(diǎn)擊“取消”按鈕，頁(yè)面會(huì)直接返回到主頁(yè)也就是搜索前的狀態(tài)。

搜索提示

在用戶(hù)輸入內(nèi)容時(shí)，產(chǎn)品會(huì)根據(jù)用戶(hù)輸入的內(nèi)容提供相對(duì)應(yīng)的搜索推薦，這是搜索框的必備的交互反饋。

通過(guò)合理的詞條推薦能極大降低用戶(hù)的思考時(shí)間，提高搜索效率，同時(shí)省去再次點(diǎn)擊搜索按鈕的流程，降低用戶(hù)的操作步驟。

字?jǐn)?shù)限制

目前我所知道的大多數(shù) App 在搜索時(shí)都沒(méi)有字?jǐn)?shù)限制問(wèn)題。

回顧一下搜索使用場(chǎng)景會(huì)發(fā)現(xiàn)用戶(hù)在搜索框內(nèi)輸入任何內(nèi)容都是有可能的，盡量不要約束用戶(hù)的輸入內(nèi)容。無(wú)論用戶(hù)輸入多少內(nèi)容，點(diǎn)擊都可以完成基本的搜索操作，這樣整個(gè)流程才完整。

△ 在百度中輸入過(guò)多字符時(shí)，會(huì)提示查詢(xún)限制在38個(gè)漢字以?xún)?nèi)，多的字符會(huì)被忽略，雖然給出了提示但并未打斷用戶(hù)的操作流程，可以讓用戶(hù)繼續(xù)完成搜索。

4. 搜索后-展示結(jié)果

符合預(yù)期

搜索的理想狀態(tài)是搜索到的結(jié)果符合用戶(hù)的預(yù)期，滿(mǎn)足用戶(hù)的搜索需求，并把最吻合的搜索結(jié)果排在前面，為用戶(hù)帶來(lái)清晰的結(jié)果展示。

智能提示

智能提示是對(duì)用戶(hù)輸入內(nèi)容上的一種提示或糾正，如果用戶(hù)輸入的內(nèi)容有問(wèn)題或不夠標(biāo)準(zhǔn)，在搜索結(jié)果中會(huì)能給最貼切的搜索結(jié)果。

△ 在淘寶中輸入“shouji”或“souji”，淘寶會(huì)根據(jù)拼音給出“手機(jī)”的搜索結(jié)果，但仍保留原標(biāo)簽，方便用戶(hù)再次點(diǎn)擊搜索；輸入“手ji”時(shí)，會(huì)直接給出“手機(jī)”標(biāo)簽，這種差異化的反饋能更好的為用戶(hù)服務(wù)。

無(wú)結(jié)果提示

△ 相比于直接顯示搜索無(wú)結(jié)果的狀態(tài)，拼多多的搜索結(jié)果首先會(huì)標(biāo)明相關(guān)商品較少，然后將搜索內(nèi)容拆分成不同的標(biāo)簽進(jìn)一步引導(dǎo)用戶(hù)來(lái)發(fā)現(xiàn)內(nèi)容。

最后

這里介紹了關(guān)于搜索框設(shè)計(jì)的一些基本體驗(yàn)，學(xué)會(huì)從整體到局部再到具體細(xì)節(jié)一步步分析，大家會(huì)挖掘到更多更細(xì)的設(shè)計(jì)要點(diǎn)。

文章來(lái)源：優(yōu)設(shè)  作者：Clip設(shè)計(jì)夾

藍(lán)藍(lán)設(shè)計(jì)( m.sdgs6788.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)