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

創(chuàng)新互聯(lián)長期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為虹口企業(yè)提供專業(yè)的網(wǎng)站制作、成都做網(wǎng)站，虹口網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

搜索這個(gè)功能，在絕大多數(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）。這句話也是很淺顯，不明白谷歌這么強(qiáng)調(diào)的原因。However ，這跟上面的介紹也是如出一轍。

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

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

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

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

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

固定式搜索入口

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

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

可展開式搜索

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

iOS Human Interface Guideline

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

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

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

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

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

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

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

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

輸入框上方的一句話提示

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

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

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

分段選擇控件

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

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

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

文章題目：iOS和Android規(guī)范解析——搜索
本文地址：http://jinyejixie.com/article6/cjdeog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、網(wǎng)站維護(hù)、電子商務(wù)、手機(jī)網(wǎng)站建設(shè)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)