從產(chǎn)品的角度進(jìn)行搜索功能的UI設(shè)計(jì)

搜索功能的作用

搜索功能的出現(xiàn)追根溯源上來(lái)說(shuō)是因?yàn)楝F(xiàn)在一款產(chǎn)品所包含的內(nèi)容太多了，特別是阿里的產(chǎn)品。

內(nèi)容越多，用戶的學(xué)習(xí)成本也越大。用戶使用你的產(chǎn)品，他們希望越簡(jiǎn)單越好，越容易上手越好。自己可以快速而又準(zhǔn)確的找到期望的功能或內(nèi)容是用戶的目標(biāo)。所以從這個(gè)角度來(lái)說(shuō)，搜索功能的出現(xiàn)勢(shì)在必行。

那么為什么我建議設(shè)計(jì)師給自己的產(chǎn)品做一個(gè)搜索功能呢？因?yàn)橥ㄟ^(guò)建立搜索功能可以幫助你了解你現(xiàn)在所負(fù)責(zé)的這款產(chǎn)品里究竟有哪些東西。

其實(shí)很多設(shè)計(jì)師工作的時(shí)間也蠻久的，但是對(duì)于其產(chǎn)品所包含的內(nèi)容和功能可能還不能完全吃透。 口口聲聲說(shuō)要懂得產(chǎn)品，但是連產(chǎn)品里究竟有哪些東西都不知道，其實(shí)想想挺無(wú)厘頭的。

舉一個(gè)例子，你在微信中搜索「邁克爾杰克遜」，搜索結(jié)果會(huì)出現(xiàn)名稱(chēng)中帶有邁克爾杰克遜的群聊／好友、關(guān)注的公眾號(hào)、聊天記錄、還有收藏記錄。

當(dāng)你點(diǎn)開(kāi)更多，你還會(huì)看到關(guān)于邁克爾杰克遜的新聞資訊、表情包、音樂(lè)、朋友圈等。如果你剛使用微信不久，通過(guò)這個(gè)搜索結(jié)果你就會(huì)對(duì)微信可以提供的服務(wù)有了大致的了解。所以說(shuō)通過(guò)建立搜索功能可以幫助你很好的了解一款產(chǎn)品。

 

搜索功能的三個(gè)階段

知道了搜索功能的必要性，接下來(lái)我們真正的開(kāi)始去進(jìn)入搜索功能的設(shè)計(jì)階段。

其實(shí)談到搜索功能設(shè)計(jì)，很多人會(huì)想到搜索框設(shè)計(jì)。搜索框可能是搜索功能一個(gè)最主要的展現(xiàn)形式。但是搜索功能里學(xué)問(wèn)遠(yuǎn)不止是簡(jiǎn)單的搜索框可以概括的，一個(gè)完整的搜索功能/流程應(yīng)該由以下三個(gè)方面/階段組成：

• 打開(kāi)搜索框
• 信息錄入
• 搜索結(jié)果展示

1. 搜索框

搜索框的設(shè)計(jì)我覺(jué)得有三點(diǎn)需要我們注意。

第一，不同的產(chǎn)品對(duì)于搜索框的展示方式存在差異。有的產(chǎn)品搜索框直接就放在界面上方，用戶可以直接進(jìn)入信息錄入階段。

但是有的產(chǎn)品的搜索框需要你點(diǎn)擊放大鏡按鈕彈出。

前者的好處就是用戶隨時(shí)看到搜索框，使用起來(lái)也方便。而后者的優(yōu)勢(shì)在于占據(jù)更少的空間，適合實(shí)現(xiàn)產(chǎn)品迭代期的搜索功能需求。

例如，在工作中我們會(huì)經(jīng)常遇到突發(fā)奇想的領(lǐng)導(dǎo)，他們哪天一開(kāi)心拍板說(shuō)，不如我們?cè)谶@個(gè)界面里加一個(gè)搜索功能吧。而這個(gè)界面可能已經(jīng)放不下一個(gè)搜索框了，所以只能放一個(gè)搜索框的入口——放大鏡圖標(biāo)。

第二，用戶需要查找的內(nèi)容可能屬于不同的類(lèi)別。以UI中國(guó)為例，用戶可能需要查找的是一位設(shè)計(jì)師，一篇文章或者一個(gè)插畫(huà)作品。在這種情況下，我們需要在搜索框的左邊給用戶提供了一個(gè)下拉列表給他們?nèi)ミx擇查找期望的內(nèi)容類(lèi)別。

當(dāng)然并不一定非要放在搜索框左邊，微信這種分類(lèi)樣式也很出彩。

最后一個(gè)需要我們注意的是搜索框的設(shè)計(jì)風(fēng)格應(yīng)該和產(chǎn)品里其他的輸入框保持一致，不能你這里的輸入框帶有圓角，而那里的是直角。這種比較低級(jí)的錯(cuò)誤我們不要犯。
 

2. 信息錄入

信息錄入目前來(lái)說(shuō)最常見(jiàn)的就是文字錄入，不過(guò)現(xiàn)在我們也開(kāi)始看到新興的錄入方式：語(yǔ)音錄入和圖片錄入。

語(yǔ)音錄入我們最熟悉的產(chǎn)品就是一些音樂(lè)播放軟件還有外語(yǔ)詞典，比如QQ音樂(lè)或者網(wǎng)易云音樂(lè)。用戶想聽(tīng)一首歌，可以直接輸入歌曲名，但是不知道歌名的情況下，可以通過(guò)語(yǔ)音的形式完成歌曲信息的錄入。

而使用圖片完成信息錄入的一個(gè)比較典型的例子就是淘寶的拍立淘，用戶可以拍下心儀產(chǎn)品的照片，系統(tǒng)就會(huì)給你匹配相似的商品，非常方便。

從這點(diǎn)來(lái)看，設(shè)計(jì)師必須要時(shí)刻掌握最新的科技信息，要不然很容易就被淘汰。

我們可以看到很多產(chǎn)品的搜索功能都為用戶提供了搜索記錄和熱門(mén)搜索這兩個(gè)服務(wù)。有的搜索記錄和熱門(mén)搜索都是通過(guò)下拉列表的樣式來(lái)實(shí)現(xiàn)的。例如知乎。

但是淘寶和京東選擇的卻是另一種布局方式。這種布局方式可以展示更多的信息。這迎合了電商產(chǎn)品的一個(gè)目標(biāo)，但是無(wú)法完成單條記錄的刪減，這在我看來(lái)影響不是很大。

此外為了更方便用戶操作，我們還可以在用戶錄入階段給用戶以自動(dòng)提示。這樣可以節(jié)省用戶的操作時(shí)間，避免打錯(cuò)字。
 

3. 搜索結(jié)果

搜索結(jié)果在我看來(lái)最難的一點(diǎn)就是如何展示不同類(lèi)型和級(jí)別的內(nèi)容。例如，你在支付寶里搜索賬單，搜索出來(lái)的結(jié)果包括賬單相關(guān)的應(yīng)用，生活號(hào)和資訊。為了進(jìn)行區(qū)分，級(jí)別更高的應(yīng)用和生活號(hào)我們會(huì)加一個(gè)圖標(biāo)展示。

當(dāng)然用戶還可以通過(guò)tab切換的形式選擇合適的內(nèi)容類(lèi)別。

有的情況下搜索結(jié)果過(guò)多，而用戶又沒(méi)有時(shí)間一個(gè)個(gè)的去看。我們可以引入篩選器來(lái)幫助用戶在短時(shí)間內(nèi)找到期望的內(nèi)容，不要花時(shí)間去翻頁(yè)或者滑動(dòng)查找。

剛才說(shuō)的都是搜索結(jié)果過(guò)多的情況下應(yīng)該怎么辦。我們還應(yīng)該考慮的是搜索結(jié)果為零的時(shí)候，我們?nèi)绾谓o用戶設(shè)計(jì)合適的空頁(yè)面。

現(xiàn)在一些搜索結(jié)果是通過(guò)加載一個(gè)新的頁(yè)面來(lái)展示的，如果我們不給用戶說(shuō)清楚。用戶會(huì)誤以為是網(wǎng)絡(luò)原因?qū)е马?yè)面加載失敗而不是搜索不到你想要的商品。所以空頁(yè)面設(shè)計(jì)一定要向用戶解釋清楚原因。