今天為大家?guī)淼奈恼率恰杆阉鳌乖O(shè)計(jì)？赡芎芏嗳苏J(rèn)為搜索設(shè)計(jì)很簡單：在主頁頂部設(shè)計(jì)一個(gè)搜索框或者搜索圖標(biāo)，就可以完成操作。但搜索前、中、后的體驗(yàn)大家有沒有仔細(xì)考慮過呢？
在本文中，將介紹搜索設(shè)計(jì)需要了解的內(nèi)容，以及在不同App和案例中的搜索體驗(yàn)。
搜索是產(chǎn)品中不可或缺的一部分，無論打開哪個(gè)App, 我們都能很快找到搜索功能。
搜索作為一個(gè)功能入口，簡單的呈現(xiàn)方式對用戶來說很重要。
搜索設(shè)計(jì)常見的形式有3種:
- 頂部搜索框
- 圖標(biāo)(放大鏡)搜索
- 底部搜索導(dǎo)航
從視覺和優(yōu)先程度來看，底部導(dǎo)航>搜索框>圖標(biāo)。那么每種形式的優(yōu)缺點(diǎn)是什么，又分別在什么時(shí)候使用呢？
1. 頂部搜索框
搜索框通常位于App主頁的頂部，作為一個(gè)大的觸摸目標(biāo)，更容易被用戶發(fā)現(xiàn)和使用。
搜索框的組成一般包括容器、預(yù)設(shè)文字、操作按鈕。
容器通常填充為白色或灰色，里面帶有預(yù)設(shè)好的產(chǎn)品文案。但是容器什么時(shí)候用白色，什么時(shí)候用淺灰色呢？這取決于App主頁的背景色。
設(shè)計(jì)準(zhǔn)則是始終將容器的顏色與頁面背景色相對比。拿谷歌地圖和微信讀書相比較，灰色背景下用白色的搜索框，反之亦然。
當(dāng)然也有例外，Airbnb在白色背景上就有一個(gè)白色的搜索框。為什么這樣設(shè)計(jì)呢？
因?yàn)樗乃阉骺驇в嘘幱，能和背景作出區(qū)分，也是一種可行的設(shè)計(jì)方法。
預(yù)設(shè)文字的作用是提示用戶要搜索的內(nèi)容或搜索方向，告訴用戶可以從搜索中得到什么。
在App Store中，預(yù)設(shè)文字告訴用戶可以搜索「游戲、應(yīng)用、故事等」，Messenger中的預(yù)設(shè)文字只有「搜索」，為用戶提供功能入口。
預(yù)設(shè)文字在內(nèi)容瀏覽類App中很常見——不僅可以展示擁有的內(nèi)容類別，還能結(jié)合搜索趨勢來積極地推廣熱門內(nèi)容。
比如微信讀書的搜索框使用最近流行的書作為預(yù)設(shè)文字，以此提高內(nèi)容的曝光率，吸引用戶閱讀。
操作按鈕雖然與搜索相關(guān)，但擺放的位置不固定？赡茉谒阉骺騼(nèi)部，也可能在搜索框兩側(cè)。
哪些圖標(biāo)/文本按鈕對搜索有幫助呢？最常見的是搜索框中的語音輸入功能和二維碼圖標(biāo)。
另外一個(gè)好的搜索體驗(yàn)的關(guān)鍵是能從視覺上區(qū)分與搜索相關(guān)的圖標(biāo)。
2. 搜索圖標(biāo)
如果一款產(chǎn)品希望用戶專注于瀏覽內(nèi)容，或者不需要頻繁使用搜索，可以采用圖標(biāo)的樣式將搜索入口放在頁面頂部。
例如，在Medium上用戶通常是漫無目的地瀏覽內(nèi)容，而不是搜索特定的主題；Facebook上的用戶通常只想瀏覽朋友的帖子，很少搜索內(nèi)容。
3. 底部搜索導(dǎo)航
與前兩種形式相比，底部搜索導(dǎo)航離用戶距離最近，更容易作為接觸目標(biāo)也被賦予更多的特性。
UberEats通過主頁的排序和過濾，幫助用戶分類感興趣的餐廳，并將搜索作為底部導(dǎo)航的第二個(gè)標(biāo)簽，這樣用戶就能夠不斷看到和探索新餐廳。
Tiktok也將搜索入口放在第二導(dǎo)航中，完整的首頁有利于為瀏覽視頻的用戶提供沉浸式的體驗(yàn)。
當(dāng)用戶想搜索某個(gè)內(nèi)容，點(diǎn)擊搜索框之后該做什么呢？App應(yīng)該如何幫助用戶搜索？
用戶點(diǎn)擊搜索框時(shí)會(huì)彈出一個(gè)頁面，我們將其定義為「搜索頁」。搜索頁的目的是讓用戶做好搜索的準(zhǔn)備，對要尋找的內(nèi)容進(jìn)行提示，拓寬用戶對要搜索的內(nèi)容的看法。
彈出的搜索頁幫助產(chǎn)品完成兩個(gè)主要任務(wù)：
- 利用視覺和交互告訴用戶已經(jīng)做好搜索的準(zhǔn)備；
- 通過頁面上的內(nèi)容提醒用戶他們正在尋找的東西，或者為他們提供可能感興趣的東西。
1. 視覺和交互——做好搜索的準(zhǔn)備
當(dāng)我們有一個(gè)特定的搜索目標(biāo)時(shí)，我們的注意力就會(huì)完全放在搜索框(或搜索圖標(biāo))上，如果突然被引導(dǎo)到一個(gè)新的頁面，可能會(huì)帶來零碎的體驗(yàn)。
所以要把「搜索前」到「搜索頁」的轉(zhuǎn)換做得更自然，讓用戶感覺仍然在同一個(gè)頁面上操作一樣。點(diǎn)擊Facebook的搜索圖標(biāo)，圖標(biāo)通過平滑的動(dòng)效擴(kuò)展成一個(gè)搜索框。
無論搜索在什么位置，顯示搜索框的不同狀態(tài)很重要，告訴用戶「已經(jīng)準(zhǔn)備好進(jìn)行搜索」。以領(lǐng)英為例，分析一下從搜索前到搜索頁面發(fā)生了哪些變化：
- 從搜索中返回的方法：取消。這對所有的搜索體驗(yàn)都是必要的，可以使用取消或者返回圖標(biāo)。
- 搜索框改變了填充色。搜索框從灰色變?yōu)榘咨从钞?dāng)前搜索操作處于焦點(diǎn)狀態(tài)。
- 只留下必要的圖標(biāo)。二維碼能幫助搜索所以仍然保留，而左邊的個(gè)人資料圖標(biāo)和搜索圖標(biāo)都會(huì)消失。
- 彈出光標(biāo)來鼓勵(lì)用戶輸入文字。
在某些App中，搜索框在「搜索前」和「搜索頁」中的位置可能不相同，這樣做的目的是在兩種體驗(yàn)之間進(jìn)行平滑的過渡。
Google的搜索框向上滑動(dòng)來展示搜索內(nèi)容，保證過渡動(dòng)效的流暢性。
有些搜索體驗(yàn)不可能讓用戶停留在同一頁面上。Airbnb的搜索需要一系列的引導(dǎo)將用戶轉(zhuǎn)移到一個(gè)全屏的流程中。
關(guān)鍵的地方在于，搜索頁面在屏幕中間彈出，鍵盤向上滑動(dòng)，用戶可以通過無縫的交互從「搜索前」平滑過渡到「搜索中」。
2. 內(nèi)容——提示搜索的信息
歷史記錄可以幫助用戶進(jìn)行有針對性的搜索，因?yàn)檫^去的興趣是當(dāng)前興趣的有力指標(biāo)。
但是只顯示歷史搜索記錄會(huì)將用戶的注意力集中到過去的搜索上，而不是保持搜索的最新狀態(tài)。所以除了顯示搜索記錄外，顯示推薦內(nèi)容能拓寬用戶對潛在事物的興趣。
關(guān)鍵點(diǎn)1：「沒有內(nèi)容可推薦」
當(dāng)一款產(chǎn)品的功能主要是為了讓用戶完成某個(gè)特定的任務(wù)或達(dá)到某個(gè)目標(biāo)，那么它可能就沒有動(dòng)機(jī)去推廣任何內(nèi)容。
這類產(chǎn)品只會(huì)顯示最近的搜索記錄，比如Notion是一個(gè)筆記應(yīng)用，只負(fù)責(zé)存儲用戶的筆記，因此只顯示過去的搜索記錄來幫助用戶進(jìn)行搜索。
關(guān)鍵點(diǎn)2：「在搜索前推廣內(nèi)容」
有的產(chǎn)品通過將各種內(nèi)容提供給用戶查看和探索，為用戶實(shí)現(xiàn)某個(gè)目標(biāo)。谷歌地圖的搜索框下面有熱門的標(biāo)簽，用戶很可能會(huì)從標(biāo)簽中找到他們感興趣的類別。
用戶點(diǎn)擊搜索框后，谷歌就會(huì)假設(shè)用戶有特定的去處，只專注于幫助他們到達(dá)想去的地方。
關(guān)鍵點(diǎn)3：「平衡內(nèi)容推薦和歷史搜索」
主頁上的推薦內(nèi)容可能很容易被忽略(因?yàn)樗赡芘c用戶的操作無關(guān))，但是搜索頁上的熱門推薦很少會(huì)被忽視。因?yàn)橛脩羰菐е繕?biāo)主動(dòng)進(jìn)入搜索頁，所以不會(huì)省略頁面上的任何信息。
熱門類別。通過在最近搜索頁上將各種美食放在首位，UberEats和Doordash這類送餐App就可以引導(dǎo)用戶嘗試更多的餐廳。
熱門話題。展示熱門話題能為用戶創(chuàng)造一種社區(qū)感，會(huì)讓用戶覺得他們與更大的社會(huì)保持聯(lián)系。
Quora是很大的問答平臺，它不僅顯示推薦的話題，還顯示了關(guān)注者的數(shù)量？吹竭@一點(diǎn)，用戶會(huì)想：「如果一個(gè)話題有13萬追隨者，那一定很好！我也想成為其中的一員。」
熱門新聞。新聞?lì)愃阉骶哂泻軓?qiáng)的時(shí)效性，用戶很清楚明天的內(nèi)容將不同于今天的內(nèi)容。所以有些App會(huì)對新聞或熱搜進(jìn)行實(shí)時(shí)排名，向用戶展示最熱門的資訊。
Reddit展示了當(dāng)前的趨勢，讓用戶了解最新的內(nèi)容，Robinhood每小時(shí)都會(huì)更新華爾街關(guān)于股市的文章，這樣用戶就可以做出及時(shí)和明智的財(cái)務(wù)選擇。
搜索推薦。通過算法，很多App都能從用戶過去的興趣中推斷用戶的喜好，然后不斷推送相似的內(nèi)容，比如淘寶的相似商品推薦。
同樣的策略也可以應(yīng)用于搜索頁。小紅書作為一款流行App，搜索頁顯示根據(jù)用戶口味定制的推薦；Twitter的「For you」標(biāo)簽根據(jù)過去的搜索展示的相關(guān)內(nèi)容。
顯示更多與用戶相關(guān)的內(nèi)容可以拉近與產(chǎn)品的距離，用戶也會(huì)花更多的時(shí)間使用產(chǎn)品。
搜索細(xì)分。Medium的搜索做得很聰明，它將搜索頁面細(xì)分為兩個(gè)步驟：先點(diǎn)擊搜索框來瀏覽不同的主題，再次點(diǎn)擊會(huì)顯示光標(biāo)和搜索記錄。
通過這種分解體驗(yàn)，用戶在搜索時(shí)獲得了更多的信息量和更簡潔的體驗(yàn)。
以上是關(guān)于搜索前和搜索頁的體驗(yàn)設(shè)計(jì)。產(chǎn)品的搜索體驗(yàn)受到多方面的影響：自身目的、內(nèi)容種類、受眾類型。
希望這篇文章能夠讓你了解搜索體驗(yàn)的可能性，為搜索設(shè)計(jì)帶來更清晰的方向。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。