隨著我們產(chǎn)品承載的內(nèi)容越來越多，搜索功能在大多產(chǎn)品中都成了一個必不可少的功能。最初我們在看搜索框的時候，都會把它當(dāng)作是一個常規(guī)的UI控件來對待，但隨著我們對產(chǎn)品的用戶體驗越來越重視的情況下，搜索框在設(shè)計時還是有許多需要我們注意的地方。

不管用戶帶著什么目的去使用搜索功能，其使用行為都是點擊搜索框，彈出搜索中間頁，輸入搜索內(nèi)容，最后查看結(jié)果頁。因此我們應(yīng)依次對照這些操作行為進行關(guān)鍵點設(shè)計。這也是今天我要跟大家分享的重點內(nèi)容。

搜索入口

首先給大家看一個調(diào)查表，這是兩名在谷歌工作的人為因素心理學(xué)博士A.Dawn Shaikh（道恩·沙謝赫）和Keisi Lenz做的一項研究（用戶對于搜索框在網(wǎng)頁中預(yù)期出現(xiàn)的位置）。從結(jié)果可以看出左上角和右上角是占比最高的兩個部分，大部分用戶還是希望搜索功能出現(xiàn)在一個明顯的位置上。

因此產(chǎn)品中只要有搜索功能，我們通常會把它放在一個相對明顯的位置上，但是搜索入口具體怎么設(shè)計還是得看搜索功能在這個產(chǎn)品中的權(quán)重如何。小編在這里不做過多的分析，簡單給大家介紹一下現(xiàn)在APP中搜索入口最常見的三種形式。

1. 獨立導(dǎo)航標(biāo)簽

如上圖中「1」的位置。這種搜索入口，說明搜索功能在整個產(chǎn)品中占據(jù)絕對的權(quán)重，直接出現(xiàn)在底部或頂部導(dǎo)航欄中，這樣用戶在切換幾個導(dǎo)航頁面時，搜索入口是常態(tài)存在的。全局性的設(shè)計讓用戶可以隨時點擊進入到搜索頁面。一般而言，此類操作觸發(fā)后對應(yīng)的搜索頁面功能和層級也更加豐富。

2. 搜索框式

如上圖中「2」的位置。 任務(wù)型應(yīng)用通常使用搜索框形式，這種設(shè)計方式占據(jù)了足夠的屏幕寬度，一般放在屏幕的核心位置，通常會在頁面頂部位置出現(xiàn)，用戶對此一目了然，可以快速點擊搜索。

3. ICON入口式

如上圖中「3」的位置。 這種入口通常出現(xiàn)在以瀏覽為主、搜索為輔的頁面。由于占據(jù)空間較小，出現(xiàn)的位置沒有嚴(yán)格限制，因此放置位置較為靈活，可以出現(xiàn)在頁面角落或者收起在更多入口當(dāng)中，避免與其它高權(quán)重需求爭權(quán)，它更多只是作為一個輔助功能出現(xiàn)。

搜索中間頁

這個頁面簡單的來說，就是用戶點擊搜索按鈕，頁面立即彈起的一個過渡頁面。由提示語、返回按鈕、歷史記錄、熱門推薦、清除按鈕這些基本功能組成。但當(dāng)我們滿足這些基本功能點時，如何讓搜索中間頁的設(shè)計更加貼心呢？

1. 給我一個精確的提示語

在搜索框中放置提示語或者示范性搜索問題來建議用戶如何使用這個功能，幫用戶弄清可以搜索些什么。這樣對用戶也是一種良性的引導(dǎo)，給用戶提供了一個心理預(yù)期，如下圖中（圖一）和（圖二）。

（圖三）在完成基本功能時，它根據(jù)用戶之前的大數(shù)據(jù)搜索情況，量身定制了每個用戶的專屬提示語。把用戶的習(xí)慣放在第一位，打造一種專屬感，讓用戶覺得他是被區(qū)別對待的，從細(xì)節(jié)中去打動用戶。

2. 歷史記錄靠近一點

在開始這個話題之前先給大家說一個概念，如上圖展示，我們的眼睛會自動把紅色圓形從黑色圓形中找出歸為一類，這就是格式塔-相似律原則。相似律本質(zhì)上是簡化和整體化認(rèn)知對象的組織原則，它傾向于將接近、近似的元素組合起來作為一個整體。

如圖四、圖五，歷史記錄可以有效的減少用戶對重復(fù)性內(nèi)容的不必要操作，呈現(xiàn)用戶的搜索歷史。根據(jù)認(rèn)知心理學(xué)中的相似律，搜索框通常位于頁面頂部，歷史記錄緊貼搜索框展示，此時用戶的視覺焦點在這里，更容易注意到，也不會產(chǎn)生認(rèn)知偏差，因此該位置要避免被其他信息模塊占據(jù)從而割裂二者的聯(lián)系。同時對不同模塊在樣式上做點區(qū)別，更好的幫用戶區(qū)分模塊間的區(qū)別。

3. 分類搜索

在搜索功能全局性的情況下，搜索涵蓋的內(nèi)容太多，僅在搜索框中出現(xiàn)提示詞已不足以滿足用戶對于信息分類搜索的需求。可以前置分類搜索模塊，在搜索開始前就縮小搜索范圍。

搜索過程

通常當(dāng)我們點擊搜索框之后到進入搜索頁，輸入內(nèi)容，點擊「搜索」按鈕到最后完成搜索。通常幾秒就完成了，但就是這幾秒鐘的時間，是我們產(chǎn)品功能人性化與智能化的體現(xiàn)。那我們應(yīng)該怎么更好的完善這個過程呢？

1. 動態(tài)實時搜索

根據(jù)你輸入的文本，對應(yīng)的搜索結(jié)果將會實時動態(tài)過濾顯示在屏幕上，幫助用戶更快地找到自己想要的結(jié)果，體現(xiàn)我們產(chǎn)品的智能性。

2. 給用戶一點建議

當(dāng)用戶在搜索框輸入內(nèi)容時，搜索框下面出現(xiàn)了關(guān)于這個關(guān)鍵詞的眾多搜索建議，然后把每條建議進行了細(xì)化的拆分，用標(biāo)簽提示。為用戶省去了到結(jié)果頁進行篩選的步驟，可以幫助用戶更快地到達(dá)搜索結(jié)果頁。

3. 加點微交互

在輸入關(guān)鍵字時，搜索框下方會出現(xiàn)一系列的聯(lián)想，而在點擊某條聯(lián)想右邊的箭頭后，我們會發(fā)現(xiàn)該聯(lián)想進入搜索框并引發(fā)了又一系列的聯(lián)想，選擇最終確認(rèn)詞條，點擊搜索按鈕到達(dá)結(jié)果頁。整個過程可以讓用戶快速精準(zhǔn)的到達(dá)搜索結(jié)果頁，避免輸入過程中出現(xiàn)錯誤輸入，最終提升產(chǎn)品轉(zhuǎn)化率。

4. 搜索時間過長，請考慮動畫

雖然搜索的過程正常3秒內(nèi)可以完成，當(dāng)網(wǎng)絡(luò)不好或者內(nèi)容過多的時候，一定要給一個搜索狀態(tài)展示（或進度展示）。告訴用戶我們這個頁面正在進行中，分散用戶等待過程中的無聊感。

搜索結(jié)果頁

搜索結(jié)果頁是用戶的終極目標(biāo)。怎樣把用戶所需要的信息準(zhǔn)確且重點的展示出來，讓用戶一目了然，是這個頁面的主要任務(wù)。

1. 多維度展示

當(dāng)展示內(nèi)容過多時，應(yīng)該對不同模塊的內(nèi)容進行分類整理，把結(jié)果內(nèi)容進行模塊展示，提升信息的清晰度和可讀性，幫助用戶快速找到目標(biāo)信息。

2. 增加操作功能

在反饋結(jié)果頁上附加操作功能，讓用戶快速抵達(dá)目的地，縮短操作路徑，更有利于提升用戶操作效率。

3. 結(jié)果數(shù)呈現(xiàn)

顯示搜索出來的結(jié)果的數(shù)量，以便用戶可以決定他們要花費多長時間瀏覽結(jié)果。

4. 關(guān)鍵字高亮

結(jié)果頁面中快速查看到關(guān)鍵字并非一件易事，尤其是頁面文字?jǐn)?shù)量眾多且關(guān)鍵字多次出現(xiàn)時。對結(jié)果頁中關(guān)鍵字高亮顯示，可以讓用戶快速找到自己想要的東西。

5. 進行有效的提示和糾錯

當(dāng)我們出現(xiàn)輸入錯誤的時候，不要給用戶一個錯誤呈現(xiàn)頁，可以對用戶進行有效的糾錯和提示，以便幫助用戶快速且準(zhǔn)確的完成輸入。

以上說的這些內(nèi)容都是基于現(xiàn)階段的交互形式，我們在設(shè)計時應(yīng)該注意的地方。但隨著科技的發(fā)展，搜索的形式也不僅僅只局限在文字搜索，越來越多的交互媒介出現(xiàn)在我們身邊。這就要求我們，與時俱進，更多的了解和探索這些交互媒介，以便更好的提升我們的產(chǎn)品體驗。

歡迎關(guān)注微信公眾號：「 融360RUX」

「不懂搜索交互的產(chǎn)品不是好設(shè)計師」

• 《專業(yè)干貨！一個特別好用的搜索框必須考慮的五個方面》
• 《如何讓搜索框的體驗更好？我總結(jié)了這些設(shè)計套路！》
• 《這篇搜索功能設(shè)計的總結(jié)，幫你從產(chǎn)品的角度看問題》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備： http://hao.uisdc.com