界面設(shè)計1:移動端搜索設(shè)計

在不同的APP或者不同的場景下搜索入口有著不同的表現(xiàn)形式,具體的表現(xiàn)形式取決于產(chǎn)品對搜索功能權(quán)重的定義,如果說在某一場景下搜索功能是用戶常用的核心功能那么他在界面上所表現(xiàn)出來的權(quán)重就要高些,反之則低些。下圖是常見的搜索功能的入口形式,他們的權(quán)重從左到右依次降低,我將對它們進行精細分析。

圖片發(fā)自簡書App


方式一:如下圖APP Store的搜索入口

圖片發(fā)自簡書App
搜索放在標簽欄上作為一個獨立的功能模塊,它的功能層級是最高的。不管用戶操作到哪里都可以隨時進入搜索頁面,這樣的搜索入口通常用在搜索場景非常多的內(nèi)容型APP上,方便用戶在任何時候快速進入搜索頁面。


方式二:搜索框外漏在nav bar上

圖片發(fā)自簡書App

這樣的形式有著兩個設(shè)計的關(guān)鍵點:

關(guān)鍵點一:搜索框外漏在頂部導(dǎo)航條上

搜索框直接外漏在導(dǎo)航條上是為了突顯該功能,這一功能往往是用戶在該頁面非常核心的操作任務(wù),類似天貓京東這類電商型app,通常情況下用戶都是帶著明確目的來購買東西的,那么他們采取的最快最直接的方式就是搜索。

關(guān)鍵點二:在向上滾動界面時,搜索框一直懸停在頂部

這樣做的場景是這樣的,在用戶滾動頁面尋找內(nèi)容時,可能并不能找到自己想要的內(nèi)容,搜索框一直懸停一是為了暗示用戶可以進行搜索,二是為了讓用戶在想搜索時快速觸發(fā)搜索

方式三:出現(xiàn)在NAV BAR下面,默認隱藏或顯示

圖片發(fā)自簡書App

如上圖是微信在聊天頁面和通訊錄頁面的搜索入口,初始化狀態(tài)時聊天頁面的搜索框是不出現(xiàn)在用戶的可視范圍內(nèi)的,當頁面下滑時搜索框才出現(xiàn),而在通訊錄頁面里搜索框是默認出現(xiàn)在用戶的可視范圍內(nèi)的。

分析:微信在最近聯(lián)系人和通訊錄上搜索框的默認狀態(tài)不同,這很好地詮釋了這兩種場景下的搜索功能的權(quán)重。最近聯(lián)系人頁面上的搜索入口顯得更加隱蔽,因為在這個頁面下用戶產(chǎn)生搜索的場景很少,把其隱藏簡化了界面的元素,提升了界面的美觀性。

方式四:通過點擊icon觸發(fā)搜索

圖片發(fā)自簡書App

如上圖今日頭條的搜索的入口,通過點擊右上角的搜索icon進入搜索頁面:

分析:在界面權(quán)重上,這樣的方式相對于以上三種方式來說顯得較弱一點,因為在這樣的場景下用戶使用搜索的概率并不是很高,如果把搜索外漏就會占據(jù)更多的屏幕空間,破壞界面的權(quán)重等級和美觀性。

總結(jié):依據(jù)用戶的需求場景,搜索入口放在不同的位置,如果說在該頁面搜索是一個主要的功能,我們就應(yīng)該去突顯它,提升它在界面上的權(quán)重,反之則減輕它的權(quán)重。

搜索中間頁——運營的重災(zāi)區(qū),用戶搜索行為的關(guān)鍵點

搜索中間頁本來應(yīng)該是一個輕量化的頁面,用戶在這里輸入內(nèi)容進行搜索即可。但隨著運營需求的擴張,這個頁面逐漸成為了一個運營重災(zāi)區(qū),多了很多推薦的內(nèi)容。我將從“輸入框提示信息、搜索分類、搜索歷史、搜索推薦、搜索輸入、搜索建議”等方面分析一下這個頁面的設(shè)計。

1. 輸入框提示信息

圖片發(fā)自簡書App

搜索框內(nèi)的提示信息通常是提示用戶當下可以搜索什么樣的內(nèi)容,如上圖bilibi的搜索提示,告訴用戶可以進行“視頻、番劇、UP主或者AV號”的搜索,這樣的提示信息對用戶也是一種良性的引導(dǎo),給用戶提供了一個心理預(yù)期,同時也對用戶隨意輸入關(guān)鍵詞造成無結(jié)果的傷害體驗的可能進行了限制。例如一個房產(chǎn)APP,搜索框內(nèi)提示輸入樓盤或小區(qū)名,如果沒有這樣的提示有的用戶可能就會去輸入價格去篩選房源,這句提示語很好地降低了這樣的風(fēng)險。

但隨著人們對APP使用的熟悉,用戶在這里的認知負擔(dān)基本消除,運營人員逐漸搶占了這塊地方,這句話變成了內(nèi)容的推薦或者產(chǎn)品的Slogan,這些推薦的內(nèi)容可以是運營人員手動維護的也可以是依據(jù)用戶的購買和行為習(xí)慣進行推薦的。如上圖右邊是淘寶的搜索提示,搜索框的文案變成了“紅人最愛潮牌名服”,這就是運營人員在為特定內(nèi)容進行導(dǎo)流。

2. 搜索分類

在內(nèi)容型APP中搜索時通常會對內(nèi)容進行分類搜索,這是為了幫助用戶更精確地找到相關(guān)內(nèi)容,分類的操作可以發(fā)生在搜索前也可以發(fā)生在搜索后,如下圖是“淘寶、微信、網(wǎng)易云音樂”搜索分類的方式,我將分別對他們進行分析。

圖片發(fā)自簡書App

淘寶是將搜索分類前置,默認搜索寶貝,點擊后彈出浮層進行切換。這樣的方式存在一個明顯的缺點就是由于該入口所占空間位置不顯著,會導(dǎo)致用戶感知太弱。 這樣的方式通常用在用戶大多數(shù)情況下只搜索某一分類的內(nèi)容,如淘寶這樣,用戶大部分的搜索場景都是在尋找寶貝。

微信默認搜索所有內(nèi)容,將分類通過三個很顯著的入口放在搜索框下方,當點擊某一分類時跳轉(zhuǎn)到該分類的搜索界面,同時搜索框的文案以及搜索界面的內(nèi)容發(fā)生相應(yīng)變化,提示用戶搜索范圍被改變。這種方式通常用在這些分類搜索的場景都很常見時,它的缺點在于,從界面表現(xiàn)形式來看,這三個分類更像是三個功能的入口,他們與搜索框聯(lián)系得不是很緊密,很多用戶最開始使用時并不知道點擊這些分類是進行搜索范圍的限制。經(jīng)測試3個從未使用過該功能的用戶,他們都認為點擊朋友圈后就是進入朋友圈,點擊文章后就是顯示所有文章。

網(wǎng)易云音樂是將搜索分類進行后置了,在下文關(guān)于搜索結(jié)果的展示我會分析它的優(yōu)劣勢。

3.搜索歷史

搜索歷史記住用戶的足跡,方便用戶快速向以前搜索過的內(nèi)容進行轉(zhuǎn)換。設(shè)計上我們需要注意的一點就是需要把搜索歷史和搜索推薦區(qū)分開來,在位置上,盡量讓搜索歷史靠近搜索框(如下圖),因為從認知心理學(xué)上來講,越靠近搜索框的內(nèi)容越能表示它是搜索歷史。在表現(xiàn)形式上,搜索歷史和搜索推薦盡量采用不同的表現(xiàn)形式。搜索歷史伴隨的交互操作有刪除單條或者清空搜索歷史。但我們往往會被運營強制將搜索推薦放在上面。

圖片發(fā)自簡書App

4. 搜索推薦

這里的搜索推薦通常有三種來源:

第一種:按照用戶的搜索熱度進行推薦;

第二種:運營手動配置;

第三種:按照搜索行為進行計算和推薦;

它存在的目的主要有兩個:

一是挖掘用戶的潛在需求,讓用戶更快地找到想找的內(nèi)容;

二是作為運營位為特定的內(nèi)容導(dǎo)流。

建議:

不要漏出太多的推薦內(nèi)容,畢竟它帶有一些運營和廣告性質(zhì),用戶的接受度并不會很高。

在界面上讓推薦內(nèi)容和搜索歷史有明顯的區(qū)分,方便用戶在形式上一眼就能區(qū)分出搜索歷史和推薦內(nèi)容

盡量推薦一些對用戶有真正價值的內(nèi)容


5. 搜索輸入

受移動端操控方式的限制,在輸入內(nèi)容時存在兩個明顯的痛點:“修改內(nèi)容”和“輸入速度”。

關(guān)于修改內(nèi)容:當用戶想更改語句中一部分文字時,將光標移動到想要更改的地方是一件很難的事,點擊操作真的很令人發(fā)狂,通常情況下我寧愿重新輸入。但是針對這一點搜狗輸入法做了一個很人性的交互,當用戶按住鍵盤左右滑動時就能移動光標(如下圖)。

圖片發(fā)自簡書App

關(guān)于輸入速度:很早之前偶然間發(fā)現(xiàn)了UC瀏覽器在輸入文字時的一個交互功能,如下圖所示,當輸入文字后,用戶可以將搜索建議的詞語直接加入到搜索框中然后繼續(xù)輸入文字。這樣的需求場景在很常見,比如我想搜索“交互設(shè)計師的前景”,當我輸入交互二字后就會有“交互設(shè)計”的搜索建議,點擊搜索建議后面的箭頭將這個詞直接加入搜索框,然后就出現(xiàn)了“交互設(shè)計師的前景”的搜索建議,點擊搜索建議后進入搜索結(jié)果的頁面,這個過程中我少打了很多字,對我的搜索速度有很大的提升。

圖片發(fā)自簡書App

6.搜索建議

當用戶輸入內(nèi)容后,搜索框下面出現(xiàn)了眾多的搜索建議,這些搜索建議是為了幫助用戶快速向目標進行轉(zhuǎn)化,如下圖是京東的搜索建議,當我輸入畫框后,一系列畫框的搜索建議就出來了,它還有一個亮點就是在此提供了細化篩選條件,畫框后面緊跟了“長方形、實木、正方形”等關(guān)鍵的篩選條件,為用戶省去了到結(jié)果頁進行篩選的步驟。

圖片發(fā)自簡書App

搜索結(jié)果背后的邏輯決定了用戶是否能找到準確的內(nèi)容,搜索結(jié)果是搜索過程中最關(guān)鍵的點,結(jié)果的準確性確定了用戶體驗的好壞,我將從“搜索結(jié)果的形式、搜索結(jié)果的操作、搜索結(jié)果的分類、搜索結(jié)果的排序”等方面來對搜索結(jié)果進行分析。

1. 搜索結(jié)果的形式

搜索結(jié)果一般分為兩種,一種是所見即所得,用戶輸入內(nèi)容后出現(xiàn)在搜索框下面的搜索建議就是搜索結(jié)果,這種搜索通常出現(xiàn)在一些輕量化的APP中,因為搜索建議對應(yīng)的就是唯一的搜索結(jié)果,如下圖微信的搜索一樣。

圖片發(fā)自簡書App
第二種形式就是一個關(guān)鍵詞對應(yīng)了多個搜索建議,每個搜索建議又對應(yīng)了多個搜索結(jié)果,當用戶點擊搜索后進入了一個專門的搜索結(jié)果頁,如下圖京東的搜索一樣。

圖片發(fā)自簡書App

2. 搜索結(jié)果的操作

依據(jù)用戶的需求目的,在搜索結(jié)果的列表上我們可以外漏用戶大部分情況下會采取的操作,比如說視頻類網(wǎng)站,用戶搜索到某一內(nèi)容后,最常采取的操作就是播放,我們就可以把播放按鈕外漏,縮短用戶的操作路徑(如下圖愛奇藝的搜索結(jié)果頁)

圖片發(fā)自簡書App

3. 搜索結(jié)果的分類

通常的分類方式是tab切換和卡片,以下是微信和網(wǎng)易云音樂的分類。

圖片發(fā)自簡書App

這兩種方式有各自的應(yīng)用場景,TAB切換主要應(yīng)用在搜索結(jié)果有固定的幾種分類,并且通常的情況下搜索結(jié)果都有很多的內(nèi)容,如上圖的網(wǎng)易云音樂,每一個分類都有很多的搜索結(jié)果,如果它采用卡片式的瀑布流布局,用戶需要不停往下翻才能看到第二種分類的內(nèi)容。卡片式主要運用在搜索結(jié)果的內(nèi)容不多,如微信這樣的情況,每一類結(jié)果并不是很多,卡片式的瀑布流布局能讓用戶快速定位到自己想要的內(nèi)容,如果這里用TAB切換就很尷尬了,因為每一類的內(nèi)容都很少或者很多類里根本沒有內(nèi)容,這樣的用戶感受就不好了。

4. 搜索結(jié)果的排序

搜索結(jié)果的排序是一個比較復(fù)雜的工作,里面涉及了很多的算法邏輯,但是一般的垂直內(nèi)容型APP并沒有這么復(fù)雜的算法在里面,就是按照搜索的關(guān)鍵字去一一匹配。

圖片發(fā)自簡書App

如上圖是說我在QQ閱讀輸入一個“男”字,然后就給我建議第一個字是“男”的所有可能的結(jié)果,當?shù)谝粋€字匹配完后就匹配第二個字,這樣以此類推。他們的整體順序就是按照匹配關(guān)鍵字的先后進行排列的,其實在排序中還牽涉了很多的算法,比如說它可能會摻雜一些“熱度、人氣、人為意圖、語義”等因素的權(quán)重,這里不展開贅述了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,501評論 6 544
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,673評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,610評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,939評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,668評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 56,004評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,001評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 43,173評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,705評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,426評論 3 359
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,656評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,139評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,833評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,247評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,580評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,371評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,621評論 2 380

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

  • 在不同的APP或者不同的場景下搜索入口有著不同的表現(xiàn)形式,具體的表現(xiàn)形式取決于產(chǎn)品對搜索功能權(quán)重的定義,如果說在某...
    Perry阿力閱讀 2,405評論 2 42
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,761評論 25 708
  • 陳生就這么靜靜的看著安心,清秀白嫩的臉上透著粉紅的羞澀。很多時候,一件尷尬的事情發(fā)生,一方先不好意思了,另一方反倒...
    人丑就應(yīng)多讀書閱讀 518評論 8 3
  • 老師出題真是牛, 全班學(xué)生舉右手。 撅撅手指抓抓頭, 幸好美術(shù)解了愁。 一一彭甫2018年 3月18日書
    彭甫閱讀 342評論 0 7
  • 今天這篇文章,我想來分享下截止目前為止,自己人生當中折騰自己的經(jīng)歷,不管是有轉(zhuǎn)折的還是落入低谷的。 人生為什么需要...
    AbleLiu閱讀 691評論 3 5