搜索功能設計總結

在之前的好幾篇的文章中刽漂,我都提到了設計師如果想完成自我提升演训,就應該懂產(chǎn)品弟孟。但是設計師如何去跨越那條“鴻溝”贝咙,學習站在產(chǎn)品的角度去構思設計,我卻很少提及拂募。不是我高冷庭猩,故意賣關子,因為我也不是很懂陈症,所以也不敢亂說蔼水。

最近我接到一個需求,是給一個后管系統(tǒng)做搜索功能录肯。在做的過程中趴腋,我發(fā)現(xiàn)了搜索功能對于設計師學習產(chǎn)品可以起到一個很好的引導作用。


搜索功能的作用

搜索功能的出現(xiàn)追根溯源上來說是因為現(xiàn)在一款產(chǎn)品所包含的內容太多了论咏,特別是阿里的產(chǎn)品优炬。

內容越多,用戶的學習成本也越大厅贪。用戶使用你的產(chǎn)品蠢护,他們希望越簡單越好,越容易上手越好养涮。自己可以快速而又準確的找到期望的功能或內容是用戶的目標葵硕。所以從這個角度來說,搜索功能的出現(xiàn)勢在必行贯吓。

那么為什么我建議設計師給自己的產(chǎn)品做一個搜索功能呢懈凹?因為通過建立搜索功能可以幫助你了解你現(xiàn)在所負責的這款產(chǎn)品里究竟有哪些東西。

其實很多設計師工作的時間也蠻久的悄谐,但是對于其產(chǎn)品所包含的內容和功能可能還不能完全吃透介评。 口口聲聲說要懂得產(chǎn)品,但是連產(chǎn)品里究竟有哪些東西都不知道尊沸,其實想想挺無厘頭的威沫。

舉一個例子,你在微信中搜索“邁克爾杰克遜”洼专,搜索結果會出現(xiàn)名稱中帶有邁克爾杰克遜的群聊/好友棒掠,關注的公眾號,聊天記錄,還有收藏記錄累榜。當你點開更多,你還會看到關于邁克爾杰克遜的新聞資訊茫舶,表情包雾袱,音樂恤筛,朋友圈等。如果你剛使用微信不久芹橡,通過這個搜索結果你就會對微信可以提供的服務有了大致的了解毒坛。所以說通過建立搜索功能可以幫助你很好的了解一款產(chǎn)品。


搜索功能的三個階段

知道了搜索功能的必要性林说,接下來我們真正的開始去進入搜索功能的設計階段煎殷。

其實談到搜索功能設計,很多人會想到搜索框設計腿箩。搜索框可能是搜索功能一個最主要的展現(xiàn)形式豪直。但是搜索功能里學問遠不止是簡單的搜索框可以概括的,一個完整的搜索功能/流程應該由以下三個方面/階段組成:

(打開)搜索框

信息錄入

搜索結果展示


搜索框

搜索框的設計我覺得有三點需要我們注意珠移。

第一弓乙,不同的產(chǎn)品對于搜索框的展示方式存在差異。有的產(chǎn)品搜索框直接就放在界面上方钧惧,用戶可以直接進入信息錄入階段暇韧。

但是有的產(chǎn)品的搜索框需要你點擊放大鏡按鈕彈出。

前者的好處就是用戶隨時看到搜索框垢乙,使用起來也方便锨咙。而后者的優(yōu)勢在于占據(jù)更少的空間,適合實現(xiàn)產(chǎn)品迭代期的搜索功能需求追逮。

例如酪刀,在工作中我們會經(jīng)常遇到突發(fā)奇想的領導,他們哪天一開心拍板說钮孵,不如我們在這個界面里加一個搜索功能吧骂倘。而這個界面可能已經(jīng)放不下一個搜索框了,所以只能放一個搜索框的入口——放大鏡圖標巴席。

第二历涝,用戶需要查找的內容可能屬于不同的類別。以UI中國為例漾唉,用戶可能需要查找的是一位設計師荧库,一篇文章或者一個插畫作品。在這種情況下赵刑,我們需要在搜索框的左邊給用戶提供了一個下拉列表給他們去選擇查找期望的內容類別分衫。

當然并不一定非要放在搜索框左邊,微信這種分類樣式也很出彩般此。

最后一個需要我們注意的是搜索框的設計風格應該和產(chǎn)品里其他的輸入框保持一致蚪战,不能你這里的輸入框帶有圓角牵现,而那里的是直角。這種比較低級的錯誤我們不要犯邀桑。


信息錄入

信息錄入目前來說最常見的就是文字錄入瞎疼,不過現(xiàn)在我們也開始看到新興的錄入方式:語音錄入和圖片錄入。

語音錄入我們最熟悉的產(chǎn)品就是一些音樂播放軟件還有外語詞典壁畸,比如qq音樂或者網(wǎng)易云音樂贼急。用戶想聽一首歌,可以直接輸入歌曲名瓤摧,但是不知道歌名的情況下竿裂,可以通過語音的形式完成歌曲信息的錄入玉吁。

而使用圖片完成信息錄入的一個比較典型的例子就是淘寶的拍立淘照弥,用戶可以拍下心儀產(chǎn)品的照片,系統(tǒng)就會給你匹配相似的商品进副,非常方便这揣。從這點來看,設計師必須要時刻掌握最新的科技信息影斑,要不然很容易就被淘汰给赞。

我們可以看到很多產(chǎn)品的搜索功能都為用戶提供了搜索記錄和熱門搜索這兩個服務。有的搜索記錄和熱門搜索都是通過下拉列表的樣式來實現(xiàn)的矫户。例如知乎

但是淘寶和京東選擇的卻是另一種布局方式片迅。這種布局方式可以展示更多的信息。這迎合了電商產(chǎn)品的一個目標皆辽,但是無法完成單條記錄的刪減柑蛇,這在我看來影響不是很大。

此外為了更方便用戶操作驱闷,我們還可以在用戶錄入階段給用戶以自動提示耻台。這樣可以節(jié)省用戶的操作時間,避免打錯字空另。


搜索結果

搜索結果在我看來最難的一點就是如何展示不同類型和級別的內容盆耽。例如,你在支付寶里搜索賬單扼菠,搜索出來的結果包括賬單相關的應用摄杂,生活號和資訊。為了進行區(qū)分循榆,級別更高的應用和生活號我們會加一個圖標展示析恢。

當然用戶還可以通過tab切換的形式選擇合適的內容類別。

有的情況下搜索結果過多冯痢,而用戶又沒有時間一個個的去看氮昧。我們可以引入篩選器來幫助用戶在短時間內找到期望的內容框杜,不要花時間去翻頁或者滑動查找。

剛才說的都是搜索結果過多的情況下應該怎么辦袖肥。我們還應該考慮的是搜索結果為零的時候咪辱,我們如何給用戶設計合適的空頁面。

現(xiàn)在一些搜索結果是通過加載一個新的頁面來展示的椎组,如果我們不給用戶說清楚油狂。用戶會誤以為是網(wǎng)絡原因導致頁面加載失敗而不是搜索不到你想要的商品。所以空頁面設計的一個重點要向用戶解釋清楚原因寸癌,讓用戶知道為什么沒有加載出信息专筷。

總結

以上就是我對搜索功能的一些總結,肯定還有很多知識點沒有涉及到蒸苇,希望各位看完以后能夠有所收獲磷蛹,多提意見。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末溪烤,一起剝皮案震驚了整個濱河市味咳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌檬嘀,老刑警劉巖槽驶,帶你破解...
    沈念sama閱讀 221,695評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異鸳兽,居然都是意外死亡掂铐,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評論 3 399
  • 文/潘曉璐 我一進店門揍异,熙熙樓的掌柜王于貴愁眉苦臉地迎上來全陨,“玉大人,你說我怎么就攤上這事蒿秦】靖洌” “怎么了?”我有些...
    開封第一講書人閱讀 168,130評論 0 360
  • 文/不壞的土叔 我叫張陵棍鳖,是天一觀的道長炮叶。 經(jīng)常有香客問我,道長渡处,這世上最難降的妖魔是什么镜悉? 我笑而不...
    開封第一講書人閱讀 59,648評論 1 297
  • 正文 為了忘掉前任,我火速辦了婚禮医瘫,結果婚禮上侣肄,老公的妹妹穿的比我還像新娘。我一直安慰自己醇份,他們只是感情好稼锅,可當我...
    茶點故事閱讀 68,655評論 6 397
  • 文/花漫 我一把揭開白布吼具。 她就那樣靜靜地躺著,像睡著了一般矩距。 火紅的嫁衣襯著肌膚如雪拗盒。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,268評論 1 309
  • 那天锥债,我揣著相機與錄音陡蝇,去河邊找鬼。 笑死哮肚,一個胖子當著我的面吹牛登夫,可吹牛的內容都是我干的。 我是一名探鬼主播允趟,決...
    沈念sama閱讀 40,835評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼恼策,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了拼窥?” 一聲冷哼從身側響起戏蔑,我...
    開封第一講書人閱讀 39,740評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎鲁纠,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體鳍寂,經(jīng)...
    沈念sama閱讀 46,286評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡改含,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,375評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了迄汛。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片捍壤。...
    茶點故事閱讀 40,505評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖鞍爱,靈堂內的尸體忽然破棺而出鹃觉,到底是詐尸還是另有隱情,我是刑警寧澤睹逃,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布盗扇,位于F島的核電站,受9級特大地震影響沉填,放射性物質發(fā)生泄漏疗隶。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,873評論 3 333
  • 文/蒙蒙 一翼闹、第九天 我趴在偏房一處隱蔽的房頂上張望斑鼻。 院中可真熱鬧,春花似錦猎荠、人聲如沸坚弱。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,357評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽荒叶。三九已至琼掠,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間停撞,已是汗流浹背瓷蛙。 一陣腳步聲響...
    開封第一講書人閱讀 33,466評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留戈毒,地道東北人艰猬。 一個月前我還...
    沈念sama閱讀 48,921評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像埋市,于是被迫代替她去往敵國和親冠桃。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,515評論 2 359

推薦閱讀更多精彩內容