最近跟小伙伴們做界面設計的練習，在設計到首頁頂部的時候，對于搜索設計成什么樣式，我們產生了不同的想法，今天這篇文章就是對搜索這個小組件進行分析，如何正確的使用不同形式的搜索功能。

什么是搜索？

百度百科里說，搜索就是將APP里的內容存在數(shù)據庫里，然后索引器打上關鍵詞標簽，存在索引數(shù)據庫，當用戶搜索時，檢索器去索引數(shù)據庫提取，將提取的內容呈現(xiàn)給用戶。

搜索的樣式

不同的功能需求會影響搜索功能入口的樣式，根據目前市面上大部分產品的搜索樣式，我們將搜索功能的樣式分為了5種。

1、頁面只有搜索框

類似于像夸克，百度等以搜索為他們的主營業(yè)務，因此他們的產品首頁就將搜索功能放在了頁面的中心位置，極大的滿足了用戶的核心需求。如下圖所示：

夸克的頁面保持了一貫的極簡風格，在搜索框的下面放了其他社交網站的鏈接，即保持了界面的視覺，也提高了用戶的搜索體驗。

百度的搜索框下面是用算法推出的關于新聞個人推薦，首頁內容相對夸克來說會多一點，因此視覺上夸克會顯得簡潔一點。

設計注意要點：

1、越簡單的事情越復雜，在一整塊空白的界面上僅僅放搜索功能，要做到好用和好看都很難，因此加入產品元素或者產品Logo是最實用的方案。

2、在產品功能范圍內可加入其他不同的搜索方式，例如相機、語音、圖片等，使用icon的展現(xiàn)形式，不會讓界面看起來因為留白過多，造成視覺落差。

2、icon形式

這種形式一般出現(xiàn)以內容為主的APP上，位置大多在首頁的左上角或者右上角，作為單獨或者跟別的圖標一起出現(xiàn)，如下圖所示：

貓耳FM和最右的搜索入口就在首頁作為一個單獨的放大鏡icon，除了能夠更好的節(jié)約空間展示更多重要的信息以外，也能夠使界面更有設計感，讓界面更加簡潔。

設計注意要點：

1、由于頂部的icon不會只出現(xiàn)一個，因此要注意設計時icon的視覺統(tǒng)一性；

2、當有兩個圖標放在一起的時候，需要注意點擊尺寸。

3、頂端搜索框

搜索框往往都是固定在界面頂部，以便讓用戶快速使用搜索操作，來直接達到自己想要的頁面。如下圖所示：

飛豬和馬蜂窩都是使用的頂部搜索框，因為這兩款產品的首頁內容相對來說都比較復雜，因此使用占用空間比較大，但相對來說最直觀的一種搜索展現(xiàn)形式，能夠最快的讓用戶找到。

設計注意要點：

1、如果搜索在產品架構中的重要程度不是很高，可以通過減少透明度來降低搜索框的視覺層級；

2、可以加入一些品牌基因在外框設計上。

4、底部標簽icon

當產品中搜索功能的層級更高，并且用戶使用的頻次也比較頻繁的時候，就將它放在底部標簽欄上。如下圖所示：

APP store和微博的底部icon都有搜索的功能，因為搜索在app store這樣一個應用商場的產品里，是用戶使用最多的一個功能，放在底部能夠更快的提高用戶找到自己想要的應用軟件；

微博作為一款社交內容型軟件，熱搜這個名詞也是微博特別擁有的詞匯，這也側面說明了搜索在這個產品中的重要性，能夠全方位的給微博用戶推薦信息。

底部的icon設計如果要說的話，下次單獨出一篇文章寫，這里簡單的說明一下。

設計注意要點：

1、底部icon設計要保持視覺的統(tǒng)一性，最好加入一些趣味性和品牌特征，能夠更具有識別度；

2、如果有產品需求，可增加小紅點或者角標來提高搜索的點擊率。

5、下拉頁面出現(xiàn)

下面頁面出現(xiàn)搜索的情況在系統(tǒng)界面比較容易看到，給用戶提供搜索各個APP功能入口，但使用頻率不是很高，因此做了隱藏處理。如下圖所示：

在生活中，用戶對會對手機的信息做一些管理較為注重，并且大多都是按最新的信息排列，沒有顯示搜索功能。但針對手機APP太多不好找的情況，則可以讓采用下拉出搜索框的方式，下拉是用戶在使用手機中較自然的一個交互動作，能夠極大的提高用戶查找信息的速度和體驗。

總結

不同功能，不同需求的界面會影響到搜索框入口的設計。

目前主要的入口有在首頁只有搜索框、點搜索icon后出現(xiàn)搜索框、在首頁的最頂端的搜索框、底部icon的搜索框、在下拉頁面時才會出現(xiàn)搜索框。

面對具體的需求，還需要具體分析，搜索作為應用的重要功能，有著不可代替的作用，本文只是講了最基礎的入口設計，下篇再討論搜索方式和輔助功能。