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

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

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

Google Material Design Guideline

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

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

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

下面的元素可以幫助提高搜索的體驗(yàn)：

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

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

固定式搜索入口

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

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

可展開(kāi)式搜索

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

iOS Human Interface Guideline

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

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

左：視覺(jué)顯著型；右：視覺(jué)隱蔽型

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

左：默認(rèn)提示詞；中：清空按鈕；右：取消按鈕

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

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

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

輸入框上方的一句話提示

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

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

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

分段選擇控件

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

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

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

#專欄作家#

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

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

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