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