手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

抓住關(guān)鍵點,提升App搜索設(shè)計的體驗!

2024-5-15    資深UI設(shè)計者

抓住關(guān)鍵點,提升App搜索設(shè)計的體驗!

 
 
 

大家好,我是Clippp。今天為大家?guī)硪环荨杆阉髟O(shè)計」全面指南,請查收!

可能很多人認(rèn)為搜索設(shè)計很簡單:在主頁頂部設(shè)計一個搜索框或者搜索圖標(biāo),就可以完成操作。但搜索前、中、后的體驗大家有沒有仔細(xì)考慮過呢?

在搜索過程中需要展示什么?如何幫助用戶盡快找到他們想要的?搜索的體驗如何與其他體驗相聯(lián)系?這是很多設(shè)計師思維模糊的地方。

在本文中,將介紹搜索設(shè)計需要了解的內(nèi)容,以及在不同App和案例中的搜索體驗。 

一、搜索前的體驗

搜索是產(chǎn)品中不可或缺的一部分,無論打開哪個App, 我們都能很快找到搜索功能。搜索作為一個功能入口,簡單的呈現(xiàn)方式對用戶來說很重要。

搜索設(shè)計常見的形式有3種:

  • 頂部搜索框

  • 圖標(biāo)(放大鏡)搜索

  • 底部搜索導(dǎo)航

從視覺和優(yōu)先程度來看,底部導(dǎo)航>搜索框>圖標(biāo)。那么每種形式的優(yōu)缺點是什么,又分別在什么時候使用呢? 

1、頂部搜索框

搜索框通常位于App主頁的頂部,作為一個大的觸摸目標(biāo),更容易被用戶發(fā)現(xiàn)和使用。搜索框的組成一般包括容器、預(yù)設(shè)文字、操作按鈕。

容器通常填充為白色或灰色,里面帶有預(yù)設(shè)好的產(chǎn)品文案。但是容器什么時候用白色,什么時候用淺灰色呢?這取決于App主頁的背景色。

設(shè)計準(zhǔn)則是始終將容器的顏色與頁面背景色相對比。拿谷歌地圖和微信讀書相比較,灰色背景下用白色的搜索框,反之亦然。

當(dāng)然也有例外,Airbnb在白色背景上就有一個白色的搜索框。為什么這樣設(shè)計呢?因為它的搜索框帶有陰影,能和背景作出區(qū)分,也是一種可行的設(shè)計方法。

預(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)。

另外一個好的搜索體驗的關(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)航的第二個標(biāo)簽,這樣用戶就能夠不斷看到和探索新餐廳。

Tiktok也將搜索入口放在第二導(dǎo)航中,完整的首頁有利于為瀏覽視頻的用戶提供沉浸式的體驗。

二、搜索頁內(nèi)容展示

當(dāng)用戶想搜索某個內(nèi)容,點擊搜索框之后該做什么呢?App應(yīng)該如何幫助用戶搜索?

用戶點擊搜索框時會彈出一個頁面,我們將其定義為“搜索頁”。搜索頁的目的是讓用戶做好搜索的準(zhǔn)備,對要尋找的內(nèi)容進行提示,拓寬用戶對要搜索的內(nèi)容的看法。

彈出的搜索頁幫助產(chǎn)品完成兩個主要任務(wù):

  • 利用視覺和交互告訴用戶已經(jīng)做好搜索的準(zhǔn)備;

  • 通過頁面上的內(nèi)容提醒用戶他們正在尋找的東西,或者為他們提供可能感興趣的東西。 

1、視覺和交互——做好搜索的準(zhǔn)備

當(dāng)我們有一個特定的搜索目標(biāo)時,我們的注意力就會完全放在搜索框(或搜索圖標(biāo))上,如果突然被引導(dǎo)到一個新的頁面,可能會帶來零碎的體驗。

所以要把“搜索前”到“搜索頁”的轉(zhuǎn)換做得更自然,讓用戶感覺仍然在同一個頁面上操作一樣。點擊Facebook的搜索圖標(biāo),圖標(biāo)通過平滑的動效擴展成一個搜索框。

無論搜索在什么位置,顯示搜索框的不同狀態(tài)很重要,告訴用戶“已經(jīng)準(zhǔn)備好進行搜索”。以領(lǐng)英為例,分析一下從搜索前到搜索頁面發(fā)生了哪些變化:

  • 從搜索中返回的方法:取消。這對所有的搜索體驗都是必要的,可以使用取消或者返回圖標(biāo)。

  • 搜索框改變了填充色。搜索框從灰色變?yōu)榘咨?,反映?dāng)前搜索操作處于焦點狀態(tài)。

  • 只留下必要的圖標(biāo)。二維碼能幫助搜索所以仍然保留,而左邊的個人資料圖標(biāo)和搜索圖標(biāo)都會消失。

  • 彈出光標(biāo)來鼓勵用戶輸入文字。

在某些App中,搜索框在“搜索前”和“搜索頁”中的位置可能不相同,這樣做的目的是在兩種體驗之間進行平滑的過渡。Google的搜索框向上滑動來展示搜索內(nèi)容,保證過渡動效的流暢性。

有些搜索體驗不可能讓用戶停留在同一頁面上。Airbnb的搜索需要一系列的引導(dǎo)將用戶轉(zhuǎn)移到一個全屏的流程中。

關(guān)鍵的地方在于,搜索頁面在屏幕中間彈出,鍵盤向上滑動,用戶可以通過無縫的交互從“搜索前”平滑過渡到“搜索中”。 

2、內(nèi)容——提示搜索的信息

歷史記錄可以幫助用戶進行有針對性的搜索,因為過去的興趣是當(dāng)前興趣的有力指標(biāo)。但是只顯示歷史搜索記錄會將用戶的注意力集中到過去的搜索上,而不是保持搜索的最新狀態(tài)。所以除了顯示搜索記錄外,顯示推薦內(nèi)容能拓寬用戶對潛在事物的興趣。

關(guān)鍵點1:“沒有內(nèi)容可推薦”

當(dāng)一款產(chǎn)品的功能主要是為了讓用戶完成某個特定的任務(wù)或達(dá)到某個目標(biāo),那么它可能就沒有動機去推廣任何內(nèi)容。這類產(chǎn)品只會顯示最近的搜索記錄,比如Notion是一個筆記應(yīng)用,只負(fù)責(zé)存儲用戶的筆記,因此只顯示過去的搜索記錄來幫助用戶進行搜索。

關(guān)鍵點2:“在搜索前推廣內(nèi)容”

有的產(chǎn)品通過將各種內(nèi)容提供給用戶查看和探索,為用戶實現(xiàn)某個目標(biāo)。谷歌地圖的搜索框下面有熱門的標(biāo)簽,用戶很可能會從標(biāo)簽中找到他們感興趣的類別。用戶點擊搜索框后,谷歌就會假設(shè)用戶有特定的去處,只專注于幫助他們到達(dá)想去的地方。

關(guān)鍵點3:“平衡內(nèi)容推薦和歷史搜索”

主頁上的推薦內(nèi)容可能很容易被忽略(因為它可能與用戶的操作無關(guān)),但是搜索頁上的熱門推薦很少會被忽視。因為用戶是帶著目標(biāo)主動進入搜索頁,所以不會省略頁面上的任何信息。

熱門類別

通過在最近搜索頁上將各種美食放在首位,UberEats和Doordash這類送餐App就可以引導(dǎo)用戶嘗試更多的餐廳。

熱門話題

展示熱門話題能為用戶創(chuàng)造一種社區(qū)感,會讓用戶覺得他們與更大的社會保持聯(lián)系。Quora是很大的問答平臺,它不僅顯示推薦的話題,還顯示了關(guān)注者的數(shù)量??吹竭@一點,用戶會想:“如果一個話題有13萬追隨者,那一定很好!我也想成為其中的一員。”

熱門新聞

新聞類搜索具有很強的時效性,用戶很清楚明天的內(nèi)容將不同于今天的內(nèi)容。所以有些App會對新聞或熱搜進行實時排名,向用戶展示最熱門的資訊。

Reddit展示了當(dāng)前的趨勢,讓用戶了解最新的內(nèi)容,Robinhood每小時都會更新華爾街關(guān)于股市的文章,這樣用戶就可以做出及時和明智的財務(wù)選擇。

搜索推薦

通過算法,很多App都能從用戶過去的興趣中推斷用戶的喜好,然后不斷推送相似的內(nèi)容,比如淘寶的相似商品推薦。

同樣的策略也可以應(yīng)用于搜索頁。小紅書作為一款流行App,搜索頁顯示根據(jù)用戶口味定制的推薦;Twitter的“For you”標(biāo)簽根據(jù)過去的搜索展示的相關(guān)內(nèi)容。顯示更多與用戶相關(guān)的內(nèi)容可以拉近與產(chǎn)品的距離,用戶也會花更多的時間使用產(chǎn)品。

搜索細(xì)分

Medium的搜索做得很聰明,它將搜索頁面細(xì)分為兩個步驟:先點擊搜索框來瀏覽不同的主題,再次點擊會顯示光標(biāo)和搜索記錄。通過這種分解體驗,用戶在搜索時獲得了更多的信息量和更簡潔的體驗。

總結(jié)

以上是關(guān)于搜索前和搜索頁的體驗設(shè)計。產(chǎn)品的搜索體驗受到多方面的影響:自身目的、內(nèi)容種類、受眾類型。希望這篇文章能夠讓你了解搜索體驗的可能性,為搜索設(shè)計帶來更清晰的方向。

 

文章很長,感謝看到最后!在下一篇文章中,將繼續(xù)介紹搜索中、搜索后的體驗設(shè)計~

 


作者:Clippp
鏈接:https://www.zcool.com.cn/article/ZMTE0NTU5Mg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

 
 
 

 

藍(lán)藍(lán)設(shè)計(m.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

分享本文至:

日歷

鏈接

個人資料

存檔