宜信大數(shù)據(jù)創(chuàng)新中心-UI 設(shè)計師李婷婷 ：文章帶大家一起了解如何通過設(shè)計提升搜索功能的視覺層次、情感體驗、搜索效率等。

一、搜索功能的作用

搜索是我們經(jīng)常使用的功能，當我們面對復(fù)雜的信息時，想找到目標信息，就會尋找搜索功能的位置，它能高效精準的幫我們找到想要的目標。因而，我們可以從這兩個維度去衡量一個搜索功能是否好用：

• 是否高效節(jié)省用戶時間
• 是否精準直達用戶目標

作為用戶體驗設(shè)計師，在設(shè)計搜索功能時，不僅要考慮視覺美觀，還需要考慮內(nèi)容層次、交互引導(dǎo)，以及在提升搜索效率時如何巧妙融入視覺情感體驗、商業(yè)價值等等。下面帶大家一起了解搜索功能的3個步驟，如何通過設(shè)計提升視覺層次、情感體驗、搜索效率等。

二、搜索功能的三個步驟

搜索前?- 搜索中?- 搜索后

1. 搜索前，常見的搜索入口

• 搜索icon：節(jié)省空間，位置靈活。
• 底部導(dǎo)航入口：觸發(fā)后對應(yīng)的搜索頁面功能。
• 頂部固定搜索欄：任務(wù)型功能，一目了然，快速點擊搜索。
• 懸浮窗搜索icon：懸浮窗搜索入口能夠使用戶在瀏覽的狀態(tài)下總能注意到搜索圖標，隨時可以搜索的狀態(tài)。

通常會把搜索放在比較明顯的位置，具體怎么設(shè)計需要看搜索功能在這個產(chǎn)品中的權(quán)重。

2. 搜索中，輸入頁

常見的搜索輸入頁有兩個狀態(tài)：一個是剛進入時候的默認狀態(tài)，另外一個是用戶已經(jīng)開始輸入時候的輸入狀態(tài)。

用戶進入搜索輸入頁時立即彈出鍵盤，并且輸入框是焦點狀態(tài)，保證用戶無需其他點擊，直接輸入即可。另外需要增加快捷搜索詞入口，展示5～10個歷史搜索詞，方便用戶快速鍵入。

進入搜索輸入頁的用戶，都具有比較明確的意圖，可以在搜索頁增加業(yè)務(wù)導(dǎo)向的模塊，提高相關(guān)業(yè)務(wù)搜索。比如：熱門搜索模塊、推薦搜索詞模塊等。

3. 搜索后，搜索結(jié)果頁

搜索結(jié)果頁的主要目的是讓用戶準確找到自己的目標信息或結(jié)果。在搜索結(jié)果頁里以下五種功能展示：

分類展示：當結(jié)果頁內(nèi)容展示過多時，應(yīng)按模塊對內(nèi)容進行分類展示，可提升信息的清晰度和可讀性，幫用戶快速找到想要的內(nèi)容。

增加操作功能：在結(jié)果頁上增加操作功能，讓用戶快速抵達目的地，縮短操作路徑，更有利于提升用戶操作效率及提升購買轉(zhuǎn)化等。

結(jié)果數(shù)展示：展示搜索出來的結(jié)果數(shù)量，讓用戶清晰了解搜索內(nèi)容的多少及預(yù)估瀏覽所需時間。

關(guān)鍵詞高亮顯示：對結(jié)果頁中關(guān)鍵字高亮顯示，可以讓用戶快速找到自己想要的目標。

有效的糾錯展示：當出現(xiàn)輸入錯誤時，對用戶進行有效的糾錯或提示，可幫助用戶快速且準確的完成輸入，減少流失。

三、如何通過設(shè)計提升

視覺層次、情感體驗、搜索效率。

1. 搜索功能的視覺提升

搜索框設(shè)計

統(tǒng)一設(shè)計語言：根據(jù) app 的整體設(shè)計語言來考慮，頁面中是具有親和力的圓角按鈕，大圓角的卡片樣式，那么搜索框的設(shè)計語言也應(yīng)保持一致。如下圖飛豬的搜索框右上角與品牌圖形相呼應(yīng)，達到設(shè)計語言的統(tǒng)一性。

搜索框比例：搜索框長度確?？奢斎氲淖址臉O限長度、推薦詞的字符數(shù)，輸入框高度符合移動端手指觸碰面積。

搜索框視覺層次突出：搜索框線與面在視覺層次是否更突出。

搜索icon設(shè)計

圖標符合用戶心智：在用戶的心智中放大鏡圖標即是「搜索」，如果圖標很明顯，那么就不需要再顯示「搜索」二字了。

搜索icon形體：在設(shè)計中我們發(fā)現(xiàn) icon 設(shè)計大小與屏幕有較大關(guān)系，在移動端里屏幕較小，可放置的圖標和文字按鈕更少。在較小的面積里對 icon 形體需要有高度的提煉，線條過于繁瑣、過細都會造成視覺對比關(guān)系弱。

位置設(shè)計

用戶對一些用戶界面元素和模式的位置有一定的期待和習(xí)慣性的認知。搜索作為其中的一種模式，大多數(shù)用戶希望在界面的頂部或右上角找到它。

2. 搜索中加入微交互提升情感體驗

隨著技術(shù)的發(fā)展和體驗的提升，越來越多的 APP 中增加了微交互動效，比如在搜索頁中增加了過渡動畫，語音搜索中的引導(dǎo)動效，如：百度地圖的語音搜索，在開啟語音搜索后，同時以簡短的文字動效和語音圖標不斷擴大的圓環(huán)來引導(dǎo)用戶說出需要搜索的地址，簡單清晰又不影響用戶操作。

在實際設(shè)計中我們發(fā)現(xiàn)適當增加微交互有超出用戶預(yù)期的3個作用：

△ 《懂唄》APP搜索功能設(shè)計演示demo

提供即時反饋：在搜索時，視覺反饋的微交互讓用戶明白，操作已經(jīng)被系統(tǒng)接受，讓用戶擁有掌控感。

促進互動：搜索中的微交互鼓勵用戶進行更多互動，它能夠指引用戶，教育用戶，降低學(xué)習(xí)成本，讓用戶明白如何使用。

帶來愉悅感：在搜索過程微交互動效給用戶帶來流暢愉快的體驗。

比如：把語音搜索的功能與品牌吉祥物結(jié)合起來，創(chuàng)造出未來的智能感，在搜索等待時加入品牌吉祥物的 loading動效，或者對搜索不到的內(nèi)容，搜索結(jié)果頁可以增加一些萌趣的小動效等，來引導(dǎo)用戶進行下一步操作，避免用戶在搜索不到產(chǎn)生的消極情緒而影響產(chǎn)品的使用。

3. 設(shè)計形式如何提升搜索效率

搜索效率在搜索功能里扮演著至關(guān)重要的角色，下面從3個維度了解在設(shè)計形式中搜索功能的效率如何提升：信息效率設(shè)計、輸入效率設(shè)計、商業(yè)效率設(shè)計。

信息展示效率設(shè)計

移動端屏幕小，內(nèi)容呈現(xiàn)少，用戶希望最快找到目標結(jié)果，搜索的信息展示設(shè)計應(yīng)簡潔高效、顯而易見、層次分明。最常見的設(shè)計方式：分類、分區(qū)、排序展示等。

輸入效率設(shè)計

為了減少用戶輸入成本，我們比較常見的是推薦位、歷史搜索、關(guān)鍵詞聯(lián)想設(shè)計等，同時為了降低搜索跳出率，會規(guī)劃出大家都在搜的模塊。有這些關(guān)鍵詞：

• 用戶常搜的，從常搜的詞庫中抽選幾個展示，即推薦的模塊，根據(jù)推薦內(nèi)容展示形式不同。
• 用戶的歷史搜索設(shè)計。
• 關(guān)鍵詞聯(lián)想設(shè)計，即高亮部分，一般都采用 app 主色或品牌色。

業(yè)務(wù)效率設(shè)計：相關(guān)業(yè)務(wù)的推薦、標簽樣式設(shè)計

• 當前正在進行的活動相關(guān)關(guān)鍵詞；
• 當前要推的相關(guān)業(yè)務(wù)。

總的來說，在實際設(shè)計中提升搜索信息展示效率、輸入效率、業(yè)務(wù)效率需要注意以下幾點：

• 合理利用手機屏幕空間，把關(guān)鍵信息簡單明了展示。
• 考慮用戶特點及當前與更廣泛的場景。
• 突出關(guān)鍵匹配字段。
• 保持設(shè)計語言的一致性，保證信息閱讀的順暢度。

更有人性化的無結(jié)果引導(dǎo)

• 通過對用戶的行為習(xí)慣記錄、歷史瀏覽記錄，在無結(jié)果頁中增加更準確、人性化的結(jié)果推薦，降低用戶的失望，提升搜索效率。
• 趣味性的引導(dǎo)：設(shè)計搜索無結(jié)果頁時，可采用萌趣化的品牌IP形象，同時增加猜你喜歡，聯(lián)想搜索關(guān)鍵詞也能增加好的用戶體驗。

四、關(guān)于搜索功能的其他思考

至今為止，我們常見到的搜索形式主要有：文字搜索、語音搜索、圖片搜索，另外還有一些特殊場景使用的搜索形式，比如掃碼搜索，拍照搜索，拍照翻譯搜索等等。最近幾年，隨著語音技術(shù)的不斷成熟，語音搜索功能在音樂類APP 上應(yīng)用越來越多，通過識別音樂來搜索音樂的相關(guān)內(nèi)容，部分音樂類app 還針對一些場合做了些語音搜索上的優(yōu)化，比如哼歌識曲，提高了用戶搜索的內(nèi)容的效率。

如今，我們看到搜索的效率、體驗設(shè)計都在不斷發(fā)生著變化，或許今后搜索結(jié)果頁面中將更多應(yīng)用于 AI領(lǐng)域，或許搜索答案的準確性和相關(guān)性更大幅度的提高，或許搜索更加互動、或許更加個性化的社會關(guān)系搜索等等。雖然目前我們還無法預(yù)知，但我們知道一件事，搜索體驗在不斷提升。

歡迎關(guān)注「宜信大數(shù)據(jù)用戶體驗設(shè)計部」公眾號：

「搜索設(shè)計體驗細節(jié)」

• 《超全面總結(jié)！搜索體系的建立與優(yōu)化》
• 《如何讓搜索框的體驗更好？我總結(jié)了這些設(shè)計套路！》
• 《這篇搜索功能設(shè)計的總結(jié)，幫你從產(chǎn)品的角度看問題》
• 《交互基礎(chǔ)小課堂！移動端「搜索功能」設(shè)計超全面總結(jié)！》