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

一、搜索功能的作用

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

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

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

二、搜索功能的三個步驟

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

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

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

通常會把搜索放在比較明顯的位置，具體怎么設計需要看搜索功能在這個產品中的權重。

2. 搜索中，輸入頁

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

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

進入搜索輸入頁的用戶，都具有比較明確的意圖，可以在搜索頁增加業務導向的模塊，提高相關業務搜索。比如：熱門搜索模塊、推薦搜索詞模塊等。

3. 搜索后，搜索結果頁

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

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

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

結果數展示：展示搜索出來的結果數量，讓用戶清晰了解搜索內容的多少及預估瀏覽所需時間。

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

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

三、如何通過設計提升

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

1. 搜索功能的視覺提升

搜索框設計

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

搜索框比例：搜索框長度確保可輸入的字符的極限長度、推薦詞的字符數，輸入框高度符合移動端手指觸碰面積。

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

搜索icon設計

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

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

位置設計

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

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

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

在實際設計中我們發現適當增加微交互有超出用戶預期的3個作用：

△ 《懂唄》APP搜索功能設計演示demo

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

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

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

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

3. 設計形式如何提升搜索效率

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

信息展示效率設計

移動端屏幕小，內容呈現少，用戶希望最快找到目標結果，搜索的信息展示設計應簡潔高效、顯而易見、層次分明。最常見的設計方式：分類、分區、排序展示等。

輸入效率設計

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

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

業務效率設計：相關業務的推薦、標簽樣式設計

• 當前正在進行的活動相關關鍵詞；
• 當前要推的相關業務。

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

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

更有人性化的無結果引導

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

四、關于搜索功能的其他思考

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

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

歡迎關注「宜信大數據用戶體驗設計部」公眾號：

「搜索設計體驗細節」

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