在之前的好幾篇的文章中刽漂,我都提到了設計師如果想完成自我提升演训,就應該懂產(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)絡原因導致頁面加載失敗而不是搜索不到你想要的商品。所以空頁面設計的一個重點要向用戶解釋清楚原因寸癌,讓用戶知道為什么沒有加載出信息专筷。
總結
以上就是我對搜索功能的一些總結,肯定還有很多知識點沒有涉及到蒸苇,希望各位看完以后能夠有所收獲磷蛹,多提意見。