各位親愛的讀者小伙伴們，前面一系列文章為大家介紹了各種彈出物的用法，從今天起，我們開始介紹其它的非彈出類控件。此篇要說的是搜索。

搜索這個功能，在絕大多數(shù)應(yīng)用里都會用到。它的場景也相對單一：用戶通過搜索功能，快速找到自己需要的信息/物品等。

照例我們先說Android的規(guī)范。

Google Material Design Guideline

MD（Material Design的簡稱，下同）在關(guān)于Search這一章，開篇是一句加粗加字號的句子：“搜索使用戶可以迅速得定位應(yīng)用里的內(nèi)容”（Search allows users to locate app content quickly）。這句話也是很淺顯，不明白谷歌這么強調(diào)的原因。However ，這跟上面的介紹也是如出一轍。

MD建議，一般的搜索操作應(yīng)該至少包含以下三個要素：

1. 打開搜索輸入框；
2. 輸入和提交搜索詞的；
3. 展示搜索結(jié)果。

下面的元素可以幫助提高搜索的體驗：

• 語音搜索；
• 搜索歷史；
• 搜索詞自動補充，且補充的結(jié)果是你的應(yīng)用的數(shù)據(jù)庫中的已有詞匯（這樣可以更好地確保結(jié)果是有效的，筆者注）。

MD提供了兩種搜索的樣式：固定式搜索入口和可展開式搜索入口。下圖展現(xiàn)的是固定搜索入口：

固定式搜索入口

固定式搜索入口一般用于搜索是你應(yīng)用的重要功能的情況。當開始輸入關(guān)鍵詞，最好有關(guān)鍵詞自動補充，以及清空按鈕，如下圖：

可展開式入口，其實和固定式入口差不多，區(qū)別僅僅是入口形式上的不同：

可展開式搜索

關(guān)于可展開式，還有一點要補充一下（雖然MD沒有提），就是由于一般這種形式的入口，都是放大鏡這種類型的圖標，筆者建議點擊后最好有個動效，展示從放大鏡展開成為輸入框的過程。這樣會使你的應(yīng)用設(shè)計感更高，用起來更流暢。這是我的一點經(jīng)驗，供大家參考。

iOS Human Interface Guideline

在蘋果的規(guī)范中，搜索的部分是以控件“搜索欄”（Search Bar）的形式介紹的，這與MD在邏輯上不同。MD是把搜索當成一個模式（Pattern）來介紹的，所以從入口到輸入都有介紹。而iOS中，關(guān)于搜索的介紹只有入口：搜索欄。所以在介紹的邏輯上會有不同。

搜索欄也有兩種：視覺顯著型和視覺隱蔽型。下面展示了兩種搜索欄：

左：視覺顯著型；右：視覺隱蔽型

其實兩者的差別很小，僅限于它們的背景色：左邊的用的是純色（灰色）；右邊的用的是毛玻璃效果。其實兩種的差別，也就是在視覺上是否引起人的注意，所以當搜索的優(yōu)先級不同時，可以分情況使用。
蘋果建議搜索框可以包含下面的三個元素：

左：默認提示詞；中：清空按鈕；右：取消按鈕

另外，蘋果還給出了一些搜索欄在設(shè)計上的建議：

1. 如果有必要，可在搜索欄中提供一些提示和上下文（來幫助用戶）。

比如輸入框中的默認提示詞，文案可以為：“搜索衣服 鞋 首飾”或者單純的“搜索”兩個字。在輸入框的上面，也可以提供簡明的一句話提示，如下圖所示：

輸入框上方的一句話提示

2. 考慮在搜索欄下方提供快速入口和其他內(nèi)容，以幫助用戶更快找到結(jié)果。例如iOS自帶應(yīng)用Safari，當你點擊搜索欄的輸入框時，應(yīng)用就會展示你的書簽，這樣通過點擊書簽的內(nèi)容，有時候能免去輸入的麻煩。

另一個例子是iOS自帶的股票應(yīng)用，搜索欄下面的列表會根據(jù)用戶輸入的內(nèi)容不斷刷新，方便用戶的選擇。

3. 在搜索欄的下面，可加入“分段選擇控件”，以幫助用戶縮小搜索的范圍，如下圖：

分段選擇控件

分段選擇控件里，每一段所定義的范圍是否清晰且有用很重要。這里蘋果提示我們，最佳的手段，不是使用分段選擇控件，而是優(yōu)化搜索結(jié)果的列表，這樣用戶也不需要為了選擇分段而再多點擊一下。

補充一句，其實對搜索列表的篩選操作，國內(nèi)很多電商APP已經(jīng)做的非常出色了。國內(nèi)APP的設(shè)計，在有些方面其實已經(jīng)是國際一流。作為一名中國設(shè)計師，我也是很自豪的（傲嬌臉）。

以上對比了MD規(guī)范和iOS規(guī)范中，對于“搜索”的介紹。討論always讓我們的認識更深刻。歡迎留言討論。

#專欄作家#

沐風(fēng)，微信公眾號：“沐風(fēng)與體驗設(shè)計”。人人都是產(chǎn)品經(jīng)理專欄作家，2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團隊負責人。留德海龜，曾任職騰訊微生活、網(wǎng)易、宜信。6年交互設(shè)計經(jīng)驗，專注設(shè)計領(lǐng)域，歡迎關(guān)注。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。