APP中搜索框的樣式以及區(qū)別

云和數(shù)據(jù)西安中心 2018-07-09 13:24:29

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

前言

搜索框是 app 內(nèi)最常見的控件之一，可以幫助用戶快速又精準(zhǔn)找到期望的內(nèi)容與功能。不同的使用場景下，根據(jù)頁面中搜索的重要程度，搜索框也有著不同的樣式。

下面就和大家聊聊常見的四種樣式：一級(jí)tab、頂部搜索、搜索 icon 、隱藏式搜索。

01.一級(jí)tab

位于屏幕底部的導(dǎo)航，搜索作為一個(gè)獨(dú)立的入口，適用于搜索場景相對(duì)重要的 app 。設(shè)計(jì)的時(shí)候通常會(huì)使用“放大鏡” icon ，簡單、識(shí)辨度高符合用戶已有的認(rèn)知。

部分 app 會(huì)在一級(jí) tab 中設(shè)置“發(fā)現(xiàn)”入口來承接搜索功能，在“發(fā)現(xiàn)”頁面中，由于增加其他運(yùn)營內(nèi)容導(dǎo)致流量被分?jǐn)偅阉飨鄬?duì)就會(huì)弱一些。

一級(jí) tab 相比其他方式，搜索過程更方便，點(diǎn)擊操作更容易。

例如在貝殼找房 app 中，“找”作為該 app 的重要功能單獨(dú)設(shè)立一個(gè)入口，用戶搜索時(shí)無需進(jìn)入二級(jí)頁面中去完成條件篩選，搜索過程更方便、一目了然。

在篩選中選擇總價(jià)、房型、特色、朝向等條件后，點(diǎn)擊“開始找房”按鈕進(jìn)入搜索結(jié)果頁。如果在搜索過程中退出，再次回到該頁面后，仍會(huì)保留上一次操作的結(jié)果，方便下次修改和查找。

貝殼找房和 App Store 搜索入口在底部導(dǎo)航，這個(gè)位置符合拇指熱力區(qū)操作，屏幕偏下的位置單手持握手機(jī)的時(shí)候更容易點(diǎn)擊。

需要注意的是底部導(dǎo)航的數(shù)量有限。在底部導(dǎo)航超過5個(gè)的時(shí)候不建議在底部再增加入口，過于擁擠不適合用戶點(diǎn)擊。

02.頂部搜索

位于屏幕頂部的導(dǎo)航，讓用戶打開 app 想要搜索時(shí)能快速找到，符合用戶期待，適用于當(dāng)前搜索頻率高的頁面。當(dāng)用戶瀏覽的時(shí)候，搜索框也會(huì)懸停在頂部，不斷引導(dǎo)用戶進(jìn)行搜索。

通常以搜索框的形式存在，為了突出搜索框，搜索框會(huì)有淺灰色的底/描邊/投影、帶顏色的導(dǎo)航襯底或者有明顯的提示語。

不同類型的 app 搜索功能也不一樣，除了文本搜索，淘寶有圖片搜索功能，方便拍圖找物；蝦米音樂還有語音搜索功能，方便查歌找曲。

頂部搜索相比其他方式，搜索入口更顯眼，為轉(zhuǎn)化提供更多流量。

例如在天貓 app 中，當(dāng)用戶進(jìn)入的時(shí)候，部分是帶著明確的購買意圖，這時(shí)就需要讓他們快速找到搜索功能。所以天貓 app 把搜索框置頂在導(dǎo)航欄上，即使是在上滑的時(shí)候，也是在頂部。

在頂部搜索框內(nèi)推薦了客廳地毯，根據(jù)用戶的歷史搜索行為觸發(fā)的引導(dǎo)，在用戶已經(jīng)搜索的基礎(chǔ)上，轉(zhuǎn)化率會(huì)大大的提升。 App 運(yùn)營還會(huì)根據(jù)熱點(diǎn)、時(shí)節(jié)更換搜索框的預(yù)設(shè)關(guān)鍵詞，能吸引更多的點(diǎn)擊量。

需要注意的是結(jié)合場景去使用搜索功能，例如支付寶，剛進(jìn)入 app 用戶可能找不到想要的功能在哪里，這時(shí)候搜索框置頂讓用戶方便去查找。但是當(dāng)用戶在向下瀏覽的時(shí)候，用戶想要瀏覽推薦內(nèi)容，搜索功能相對(duì)減弱，為了減少空間占用，搜索框變搜索 icon 。

03.搜索icon

使用 icon 作為搜索點(diǎn)擊區(qū)域，減少導(dǎo)航欄占用，弱化了搜索功能，適用于當(dāng)前搜索頻率較低的頁面。設(shè)計(jì)的時(shí)候通常也會(huì)使用“放大鏡” icon 。

搜索 icon 相比其他方式，搜索位置更靈活，可以單獨(dú)出現(xiàn)，也可以和其他功能組合。

當(dāng)搜索功能在頁面中不再是高頻使用功能時(shí)，僅通過搜索 icon 讓用戶知曉有搜索功能存在即可。由于搜索 icon 占用區(qū)域少，可與其他功能組合出現(xiàn)，例如 in ；也可單獨(dú)出現(xiàn)，如貓眼，僅靠圖標(biāo)標(biāo)紅來提示用戶此功能。

需要注意的是在同一個(gè) app 的不同頁面中，由于對(duì)搜索功能的需求不同，有些頁面會(huì)選擇搜索 icon ，有些頁面會(huì)選擇頂部導(dǎo)航。例如天貓 app ，在品牌頁面中，對(duì)于用戶即將瀏覽的內(nèi)容都是根據(jù)用戶行為產(chǎn)生和運(yùn)營推薦的，自然搜索功能也會(huì)弱一些，采用搜索icon 即可。天貓首頁強(qiáng)調(diào)引導(dǎo)用戶去搜索、購買商品，采用頂部搜索框。

04.隱藏式搜索

位于屏幕頂部的導(dǎo)航，以搜索框的形式。只會(huì)在用戶需要的時(shí)候才出現(xiàn)，平時(shí)不會(huì)打亂用戶的行為。微信首頁的搜索功能在初始進(jìn)入時(shí)是隱藏的，當(dāng)用戶下拉頁面時(shí)，頂部搜索框才會(huì)出現(xiàn)，這就和使用場景密不可分。

微信首頁（iOS端）剛進(jìn)來的時(shí)候主要以處理最近回復(fù)為主，搜索功能相對(duì)弱化，在用戶瀏覽列表的時(shí)候，搜索框也不會(huì)懸停在頂部導(dǎo)航。而在第二個(gè) tab 通訊錄列表中，主要以查找聯(lián)系人為主，搜索功能一開始進(jìn)入就顯示在列表頂部。

總結(jié)

絕大部分的 app 里帶有搜索功能，搜索功能可以幫助用戶快速找到所需內(nèi)容，減少時(shí)間成本。搜索也是提高流量的重要入口，吸引用戶注意力。

但想要搜索在頁面中恰如其分的應(yīng)用并不那么容易，需要引導(dǎo)用戶行為和分析使用場景，這就依賴我們前期大量樣式積累，才能輸出合理的設(shè)計(jì)方式。

我們再來回顧文中提及的四種搜索框樣式：

1.一級(jí) tab ：位于屏幕底部的導(dǎo)航，搜索作為一個(gè)獨(dú)立的入口，適用于搜索場景相對(duì)重要的 app 。

2.頂部搜索：位于屏幕頂部的導(dǎo)航，讓用戶打開 app 想要搜索時(shí)能快速找到，符合用戶期待，適用于當(dāng)前搜索頻率高的頁面。

3.搜索 icon ：使用 icon 作為搜索點(diǎn)擊區(qū)域，減少導(dǎo)航欄占用，弱化了搜索功能，適用于當(dāng)前搜索頻率較低的頁面。

4.隱藏式搜索：位于屏幕頂部的導(dǎo)航，以搜索框的形式。只會(huì)在用戶需要的時(shí)候才出現(xiàn)，平時(shí)不會(huì)打亂用戶的行為。

藍(lán)藍(lán)設(shè)計(jì)( m.skdbbs.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)