移動(dòng)端搜索柔袁,那些你可能不知道的設(shè)計(jì)巧思

“搜索” 是許多移動(dòng)端應(yīng)用中的常見功能,尤其對(duì)于電商類插掂、引擎類辅甥、信息流類的應(yīng)用燎竖,搜索往往是其中最重要的功能之一构回,據(jù)說淘寶用戶 90%的行為都從搜索框開始。無論是移動(dòng)端還是 pc 端拨扶,“搜索” 的設(shè)計(jì)思考都以 “用戶要得到什么凳鬓?” 作為出發(fā)點(diǎn)茁肠;但兩者的展現(xiàn)形式卻不盡相同。相較于 pc 端缩举,移動(dòng)端的搜索功能需要在更小的屏幕空間上占有一席之地垦梆;根據(jù)不同的業(yè)務(wù)形式,其展現(xiàn)的方式也是多種多樣仅孩。本文以 “搜索的時(shí)間邏輯” 作為脈絡(luò)托猩,從 “為什么要搜索-搜索前-搜索時(shí)-搜索后” 對(duì)搜索功能進(jìn)行解剖式分析,給自己做分析整理的同時(shí)也分享給剛剛?cè)腴T做移動(dòng)端體驗(yàn)設(shè)計(jì)的同學(xué)辽慕。

為什么要搜索-關(guān)于搜索的行為思考

不同的搜索目的

不同的用戶或使用場景,用戶搜索的目的往往不同溅蛉,一般分以下三類公浪。

1他宛、精確搜索。這種場景下用戶目的清晰明確欠气、直奔主題厅各,通過在搜索框輸入內(nèi)容快速找到所需目標(biāo),完成此次搜索動(dòng)作预柒。常見案例如百度地圖队塘、UBER、網(wǎng)易有道詞典宜鸯、同花順的搜索功能等憔古。

2、提高尋找效率顾翼,高效鎖定目標(biāo)或快速縮小范圍投放。這時(shí)候 “搜索” 功能在一定程度上和 “篩選” 近似,有時(shí)候往往和篩選一起使用适贸。這種常見于信息瀏覽類應(yīng)用灸芳,在用戶瀏覽信息的同時(shí)往往 “迸發(fā)” 出念頭,想要快速瀏覽有針對(duì)性內(nèi)容拜姿,于是開始使用搜索烙样。常見案例如愛奇藝、下廚房蕊肥、優(yōu)酷谒获、美團(tuán)、大眾點(diǎn)評(píng)壁却、知乎等批狱。

3、用戶不知道自己想要什么展东,通過 “搜索” 啟發(fā)自己靈感赔硫。因?yàn)楹芏鄳?yīng)用的搜索頁面中往往有 “精心安排” 的信息。為迎合這類用戶需求盐肃,搜索頁面一般有熱門搜索的關(guān)鍵詞爪膊、搜索類目、記錄等等砸王。

寫在搜索前-搜索怎么放

1推盛、搜索圖標(biāo):在導(dǎo)航欄一側(cè)或其他位置放置,根據(jù)用戶場景和重要級(jí)需求決定谦铃。一般搜索圖標(biāo)放在右側(cè)耘成,當(dāng)右側(cè)有兩個(gè)及以上按鈕時(shí),考慮平鋪或折疊。

2瘪菌、搜索欄:以搜索欄的形式直接放在導(dǎo)航欄或放在導(dǎo)航欄下方等其他位置件豌,此時(shí)搜索欄可結(jié)合語音、拍照控嗜、刪除(在輸入后顯示)等功能按鈕茧彤。

3、搜索作為標(biāo)簽欄中的某一個(gè)功能:根據(jù)內(nèi)容重要性決定排在第幾個(gè)標(biāo)簽中疆栏。

4曾掂、搜索以單獨(dú)頁面或主頁 P0 功能展現(xiàn):直接作為主頁面或主頁以較大篇幅顯示搜索欄,內(nèi)容及形式根據(jù)用戶場景定義壁顶。(見圖一)

我是圖一

搜索時(shí)-搜索框的變身

1.以搜索欄形式展現(xiàn)的搜索功能珠洗,搜索框的位置可以出現(xiàn)較短的文案,長度需限制在搜索框的長度以內(nèi)若专,起到隱性提示和引導(dǎo)的作用许蓖,有時(shí)也會(huì)加入運(yùn)營內(nèi)容;當(dāng)出現(xiàn)搜索框時(shí)调衰,往往配合 “取消”“刪除”“語音輸入”“拍照輸入” 等功能膊爪;當(dāng)搜索框與其他功能按鈕一起出現(xiàn)時(shí),需要注意各個(gè)功能按鈕的可用性問題嚎莉。(見圖二)

我是圖二

2.以圖標(biāo)形式展現(xiàn)的搜索功能米酬,當(dāng)用戶點(diǎn)擊時(shí),或以動(dòng)效形式出現(xiàn)搜索框趋箩,或直接至單獨(dú)的搜索頁面赃额。當(dāng)然,搜索框的形式展現(xiàn)時(shí)叫确,點(diǎn)擊行為也會(huì)觸發(fā)至一個(gè)新的頁面跳芳。無論以上哪種形式,當(dāng)至單獨(dú)的搜索頁面時(shí)竹勉,可展現(xiàn)的關(guān)于 “搜索” 的內(nèi)容就更加精彩紛呈了飞盆。一般可以給出以下內(nèi)容:

1)與搜索字段相關(guān)的聯(lián)想詞列表:頁面上實(shí)時(shí)展現(xiàn)與搜索關(guān)鍵詞有關(guān)的單一內(nèi)容列表或多樣性內(nèi)容展示。若關(guān)聯(lián)詞有相關(guān)操作或二級(jí)內(nèi)容饶米,如關(guān)閉桨啃、搜索結(jié)果的副標(biāo)題或補(bǔ)充內(nèi)容等车胡,可直接在關(guān)聯(lián)詞后露出檬输。

2)搜索內(nèi)容的支持范圍:定義內(nèi)容、類目列表匈棘、范圍欄(scope bar)給出支持的標(biāo)簽或者 tab丧慈。其目的是讓用戶明確 “搜索” 支持的范圍,相當(dāng)于搜索的 tips,有時(shí)候 “篩選” 功能會(huì)在該頁配合搜索一起使用逃默。(見圖三)

我是圖三

3.搜索歷史

4.熱門搜索

5.可能在搜索(根據(jù)用戶習(xí)慣鹃愤、喜好等數(shù)據(jù)推薦)

6.精華內(nèi)容

7.運(yùn)營推廣內(nèi)容:如內(nèi)容推薦、建議類目的關(guān)鍵詞完域。(如類目的設(shè)計(jì)软吐、CMS 頻道的設(shè)計(jì)、促銷活動(dòng)的設(shè)計(jì))(參考案例百度地圖)

8.廣告

9.以上幾種內(nèi)容的結(jié)合體(見圖四)

我是圖四

10.針對(duì)關(guān)鍵詞的進(jìn)一步推薦搜索的列表(我個(gè)人稱之為漸進(jìn)式搜索吟税,參考案例:(知乎 APP)凹耙,這是一種搜索內(nèi)容未能提供情況下,讓用戶能夠 “有所得” 得好方法肠仪,提升了用戶體驗(yàn)肖抱。試想當(dāng)你輸入了一大段文字之后展現(xiàn)的頁面是 “暫無內(nèi)容”,相比于此异旧,提前讓用戶知道:“我們這里暫時(shí)沒有你要的意述。但是,或許可以看看別的”“別的內(nèi)容或許也有你意想不到的驚喜奧吮蛹!” 此方案看上去像降級(jí)方案荤崇,但本質(zhì)是讓用戶的搜索行為可控,反而提升了搜索結(jié)果的用戶體驗(yàn)潮针。(見圖 5)

我是圖五

搜索后-搜索的結(jié)果呈現(xiàn)

當(dāng)我們完成搜索時(shí)天试,以何種形式呈現(xiàn)什么樣的內(nèi)容才能更好的滿足我們的需求呢?當(dāng)用戶點(diǎn)擊搜索時(shí)然低,有兩種信息的呈現(xiàn)形式喜每,一種是在當(dāng)前頁面展示,另一種是新開頁面雳攘。

1带兜、在當(dāng)前頁面展示搜索結(jié)果的頁面,內(nèi)容較簡單吨灭,主要目的是為了讓用戶進(jìn)一步點(diǎn)擊選擇刚照,使得搜索的結(jié)果可控。這種情況下常以列表形式平鋪地展現(xiàn)信息喧兄,相關(guān)地二級(jí)標(biāo)題或按鈕會(huì)結(jié)合搜索結(jié)果同步露出无畔。這種情況下,很多時(shí)候鍵盤地 “搜索” 按鈕是禁用的或者鍵盤的設(shè)計(jì)無搜索按鈕吠冤。

2浑彰、當(dāng)需要展示的內(nèi)容有不同屬性,如列表拯辙、圖郭变、圖文結(jié)合或更多的其他形式颜价,則一般采用新開頁面的方式,信息的展示也需要做分層處理诉濒。信息的分層包括每個(gè)單元內(nèi)信息之間的對(duì)比周伦、強(qiáng)調(diào)和弱化。不同單元和屬性的信息間優(yōu)先級(jí)展示以及展示方式的區(qū)分未荒。參考案例如下:(見圖 7)

我是圖七

3专挪、當(dāng)搜索無內(nèi)容時(shí),我們給用戶什么片排?最簡單粗暴的形式是直接告訴用戶沒有狈蚤,但這種體驗(yàn)太不好,作為交互設(shè)計(jì)師應(yīng)該思考一件事 ““在沒有結(jié)果展示時(shí)我們還能為用戶做點(diǎn)兒什么划纽?” 從用戶的角度思考脆侮,即 “啥都沒有,我要做什么呢勇劣?” 帶著疑問來開始這個(gè)頁面的設(shè)計(jì)靖避,用戶分為主動(dòng)和被動(dòng)。主動(dòng)的用戶這時(shí)候會(huì)做什么比默?或許會(huì)重新發(fā)起一次搜索幻捏,輸入更加精確的關(guān)鍵詞、提交報(bào)錯(cuò)或反饋命咐,這類用戶總會(huì)找到他想做的事情篡九。而對(duì)于被動(dòng)的用戶,我們就應(yīng)該去了解他醋奠,投其所好榛臼。如相似度和關(guān)聯(lián)性推薦、熱門推薦窜司、可能喜歡沛善、搜索歷史等形式。(見圖 8)

我是圖八

有時(shí)候用戶對(duì)于搜索結(jié)果并不滿意塞祈,我們可以在頁面上做結(jié)果頁展示的補(bǔ)償方案:如讓用戶進(jìn)一步明確搜索詞金刁,縮小搜索范圍,如通過分類和篩選功能议薪。二是引導(dǎo)用戶在應(yīng)用可支持的范圍內(nèi)進(jìn)行搜索尤蛮,如同花順的股票搜索、知乎的搜索案例等斯议。

結(jié)語

本文僅從 “時(shí)間邏輯” 的角度把搜索功能的形式做了一次簡單總結(jié)产捞;但搜索的場景往往根據(jù)具體業(yè)務(wù)需求千變?nèi)f化,但這恰恰是用戶體驗(yàn)設(shè)計(jì)的意義點(diǎn)所在捅位,也是設(shè)計(jì)的本源轧葛,即 “探索人搜索的初始欲望”。關(guān)于搜索艇搀,可以思考的點(diǎn)還有很多尿扯,隨意拋出一個(gè)問題,如:點(diǎn)擊 “搜索” 的時(shí)候一定要喚起鍵盤嗎焰雕?再問衷笋,點(diǎn)擊 “搜索框” 的時(shí)候一定要喚起鍵盤嗎?這些都沒有永恒的固定答案矩屁,而相對(duì)正確的答案都在每一次的具體業(yè)務(wù)中辟宗。

source:36氪

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市吝秕,隨后出現(xiàn)的幾起案子泊脐,更是在濱河造成了極大的恐慌,老刑警劉巖烁峭,帶你破解...
    沈念sama閱讀 218,858評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件容客,死亡現(xiàn)場離奇詭異,居然都是意外死亡约郁,警方通過查閱死者的電腦和手機(jī)缩挑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鬓梅,“玉大人供置,你說我怎么就攤上這事≌揽欤” “怎么了芥丧?”我有些...
    開封第一講書人閱讀 165,282評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長坊罢。 經(jīng)常有香客問我娄柳,道長,這世上最難降的妖魔是什么艘绍? 我笑而不...
    開封第一講書人閱讀 58,842評(píng)論 1 295
  • 正文 為了忘掉前任赤拒,我火速辦了婚禮,結(jié)果婚禮上诱鞠,老公的妹妹穿的比我還像新娘挎挖。我一直安慰自己,他們只是感情好航夺,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6 392
  • 文/花漫 我一把揭開白布蕉朵。 她就那樣靜靜地躺著,像睡著了一般阳掐。 火紅的嫁衣襯著肌膚如雪始衅。 梳的紋絲不亂的頭發(fā)上冷蚂,一...
    開封第一講書人閱讀 51,679評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音汛闸,去河邊找鬼蝙茶。 笑死,一個(gè)胖子當(dāng)著我的面吹牛诸老,可吹牛的內(nèi)容都是我干的隆夯。 我是一名探鬼主播,決...
    沈念sama閱讀 40,406評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼别伏,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼蹄衷!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起厘肮,我...
    開封第一講書人閱讀 39,311評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤愧口,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后类茂,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體调卑,經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年大咱,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了恬涧。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡碴巾,死狀恐怖溯捆,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情厦瓢,我是刑警寧澤提揍,帶...
    沈念sama閱讀 35,785評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站煮仇,受9級(jí)特大地震影響劳跃,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜浙垫,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3 331
  • 文/蒙蒙 一刨仑、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧夹姥,春花似錦杉武、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至旦部,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背捞奕。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評(píng)論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留梁呈,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3 372
  • 正文 我出身青樓缰趋,卻偏偏與公主長得像捧杉,于是被迫代替她去往敵國和親陕见。 傳聞我的和親對(duì)象是個(gè)殘疾皇子秘血,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,164評(píng)論 25 707
  • 搜索功能無論在web端還是移動(dòng)端,都是產(chǎn)品中十分重要的功能评甜。文章主要從用戶體驗(yàn)和產(chǎn)品功能灰粮、策略角度來分析,提出一些...
    史蒂芬宋閱讀 2,773評(píng)論 4 44
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫忍坷、插件粘舟、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,105評(píng)論 4 62
  • 今天我就是來搞事兒的!昨天我臨時(shí)征集了一波荔枝帥哥美女的變身史佩研。 以前我們都聊亞洲的四大神術(shù)是:日本的化妝術(shù)柑肴、韓國...
    長腿周大樂閱讀 296評(píng)論 0 0
  • 為了生活他不得不早起奔波,他已經(jīng)習(xí)慣天未亮就發(fā)動(dòng)車子旬薯,多年的出租經(jīng)驗(yàn)告訴他火車站附近每次都不會(huì)跑空晰骑。他不喜歡太晚,...
    王小二哥閱讀 175評(píng)論 0 0