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