2018-8-2 博博
云和數(shù)據(jù)西安中心 2018-07-09 13:24:29
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
前言
搜索框是 app 內(nèi)最常見(jiàn)的控件之一,可以幫助用戶快速又精準(zhǔn)找到期望的內(nèi)容與功能。不同的使用場(chǎng)景下,根據(jù)頁(yè)面中搜索的重要程度,搜索框也有著不同的樣式。
下面就和大家聊聊常見(jiàn)的四種樣式:一級(jí)tab、頂部搜索、搜索 icon 、隱藏式搜索。
位于屏幕底部的導(dǎo)航,搜索作為一個(gè)獨(dú)立的入口,適用于搜索場(chǎng)景相對(duì)重要的 app 。設(shè)計(jì)的時(shí)候通常會(huì)使用“放大鏡” icon ,簡(jiǎn)單、識(shí)辨度高符合用戶已有的認(rèn)知。
部分 app 會(huì)在一級(jí) tab 中設(shè)置“發(fā)現(xiàn)”入口來(lái)承接搜索功能,在“發(fā)現(xiàn)”頁(yè)面中,由于增加其他運(yùn)營(yíng)內(nèi)容導(dǎo)致流量被分?jǐn)?,搜索相?duì)就會(huì)弱一些。
一級(jí) tab 相比其他方式,搜索過(guò)程更方便,點(diǎn)擊操作更容易。
例如在貝殼找房 app 中,“找”作為該 app 的重要功能單獨(dú)設(shè)立一個(gè)入口,用戶搜索時(shí)無(wú)需進(jìn)入二級(jí)頁(yè)面中去完成條件篩選,搜索過(guò)程更方便、一目了然。
在篩選中選擇總價(jià)、房型、特色、朝向等條件后,點(diǎn)擊“開(kāi)始找房”按鈕進(jìn)入搜索結(jié)果頁(yè)。如果在搜索過(guò)程中退出,再次回到該頁(yè)面后,仍會(huì)保留上一次操作的結(jié)果,方便下次修改和查找。
貝殼找房和 App Store 搜索入口在底部導(dǎo)航,這個(gè)位置符合拇指熱力區(qū)操作,屏幕偏下的位置單手持握手機(jī)的時(shí)候更容易點(diǎn)擊。
需要注意的是底部導(dǎo)航的數(shù)量有限。在底部導(dǎo)航超過(guò)5個(gè)的時(shí)候不建議在底部再增加入口,過(guò)于擁擠不適合用戶點(diǎn)擊。
位于屏幕頂部的導(dǎo)航,讓用戶打開(kāi) app 想要搜索時(shí)能快速找到,符合用戶期待,適用于當(dāng)前搜索頻率高的頁(yè)面。當(dāng)用戶瀏覽的時(shí)候,搜索框也會(huì)懸停在頂部,不斷引導(dǎo)用戶進(jìn)行搜索。
通常以搜索框的形式存在,為了突出搜索框,搜索框會(huì)有淺灰色的底/描邊/投影、帶顏色的導(dǎo)航襯底或者有明顯的提示語(yǔ)。
不同類型的 app 搜索功能也不一樣,除了文本搜索,淘寶有圖片搜索功能,方便拍圖找物;蝦米音樂(lè)還有語(yǔ)音搜索功能,方便查歌找曲。
頂部搜索相比其他方式,搜索入口更顯眼,為轉(zhuǎn)化提供更多流量。
例如在天貓 app 中,當(dāng)用戶進(jìn)入的時(shí)候,部分是帶著明確的購(gòu)買意圖,這時(shí)就需要讓他們快速找到搜索功能。所以天貓 app 把搜索框置頂在導(dǎo)航欄上,即使是在上滑的時(shí)候,也是在頂部。
在頂部搜索框內(nèi)推薦了客廳地毯,根據(jù)用戶的歷史搜索行為觸發(fā)的引導(dǎo),在用戶已經(jīng)搜索的基礎(chǔ)上,轉(zhuǎn)化率會(huì)大大的提升。 App 運(yùn)營(yíng)還會(huì)根據(jù)熱點(diǎn)、時(shí)節(jié)更換搜索框的預(yù)設(shè)關(guān)鍵詞,能吸引更多的點(diǎn)擊量。
需要注意的是結(jié)合場(chǎng)景去使用搜索功能,例如支付寶,剛進(jìn)入 app 用戶可能找不到想要的功能在哪里,這時(shí)候搜索框置頂讓用戶方便去查找。但是當(dāng)用戶在向下瀏覽的時(shí)候,用戶想要瀏覽推薦內(nèi)容,搜索功能相對(duì)減弱,為了減少空間占用,搜索框變搜索 icon 。
使用 icon 作為搜索點(diǎn)擊區(qū)域,減少導(dǎo)航欄占用,弱化了搜索功能,適用于當(dāng)前搜索頻率較低的頁(yè)面。設(shè)計(jì)的時(shí)候通常也會(huì)使用“放大鏡” icon 。
搜索 icon 相比其他方式,搜索位置更靈活,可以單獨(dú)出現(xiàn),也可以和其他功能組合。
當(dāng)搜索功能在頁(yè)面中不再是高頻使用功能時(shí),僅通過(guò)搜索 icon 讓用戶知曉有搜索功能存在即可。由于搜索 icon 占用區(qū)域少,可與其他功能組合出現(xiàn),例如 in ;也可單獨(dú)出現(xiàn),如貓眼,僅靠圖標(biāo)標(biāo)紅來(lái)提示用戶此功能。
需要注意的是在同一個(gè) app 的不同頁(yè)面中,由于對(duì)搜索功能的需求不同,有些頁(yè)面會(huì)選擇搜索 icon ,有些頁(yè)面會(huì)選擇頂部導(dǎo)航。例如天貓 app ,在品牌頁(yè)面中,對(duì)于用戶即將瀏覽的內(nèi)容都是根據(jù)用戶行為產(chǎn)生和運(yùn)營(yíng)推薦的,自然搜索功能也會(huì)弱一些,采用搜索icon 即可。天貓首頁(yè)強(qiáng)調(diào)引導(dǎo)用戶去搜索、購(gòu)買商品,采用頂部搜索框。
位于屏幕頂部的導(dǎo)航,以搜索框的形式。只會(huì)在用戶需要的時(shí)候才出現(xiàn),平時(shí)不會(huì)打亂用戶的行為。微信首頁(yè)的搜索功能在初始進(jìn)入時(shí)是隱藏的,當(dāng)用戶下拉頁(yè)面時(shí),頂部搜索框才會(huì)出現(xiàn),這就和使用場(chǎng)景密不可分。
微信首頁(yè)(iOS端)剛進(jìn)來(lái)的時(shí)候主要以處理最近回復(fù)為主,搜索功能相對(duì)弱化,在用戶瀏覽列表的時(shí)候,搜索框也不會(huì)懸停在頂部導(dǎo)航。而在第二個(gè) tab 通訊錄列表中,主要以查找聯(lián)系人為主,搜索功能一開(kāi)始進(jìn)入就顯示在列表頂部。
總結(jié)
絕大部分的 app 里帶有搜索功能,搜索功能可以幫助用戶快速找到所需內(nèi)容,減少時(shí)間成本。搜索也是提高流量的重要入口,吸引用戶注意力。
但想要搜索在頁(yè)面中恰如其分的應(yīng)用并不那么容易,需要引導(dǎo)用戶行為和分析使用場(chǎng)景,這就依賴我們前期大量樣式積累,才能輸出合理的設(shè)計(jì)方式。
我們?cè)賮?lái)回顧文中提及的四種搜索框樣式:
1.一級(jí) tab :位于屏幕底部的導(dǎo)航,搜索作為一個(gè)獨(dú)立的入口,適用于搜索場(chǎng)景相對(duì)重要的 app 。
2.頂部搜索:位于屏幕頂部的導(dǎo)航,讓用戶打開(kāi) app 想要搜索時(shí)能快速找到,符合用戶期待,適用于當(dāng)前搜索頻率高的頁(yè)面。
3.搜索 icon :使用 icon 作為搜索點(diǎn)擊區(qū)域,減少導(dǎo)航欄占用,弱化了搜索功能,適用于當(dāng)前搜索頻率較低的頁(yè)面。
4.隱藏式搜索:位于屏幕頂部的導(dǎo)航,以搜索框的形式。只會(huì)在用戶需要的時(shí)候才出現(xiàn),平時(shí)不會(huì)打亂用戶的行為。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com