去年年底，我們曾經(jīng)學(xué)習(xí)過一篇“具有引導(dǎo)性的移動應(yīng)用界面設(shè)計(jì)模式”，其英文原文來自O(shè)’Reilly動物園的一本新書，”Mobile Design Pattern Gallery”，就是封面上是個(gè)大公雞的那本兒。今次這篇則是來自于本書的第四章——搜索、排序和篩選。貌似國內(nèi)引進(jìn)版也由XX出版社在做著了，真心不關(guān)我事，自己走起。接下來果斷精分，進(jìn)入原文作者人格。

很多信息類服務(wù)站點(diǎn)都是通過分類的方式來組織相關(guān)內(nèi)容信息的，例如交通工具方面的卡車、貨車、SUV等；而Greensheet這樣的網(wǎng)站則是直接將售賣信息一股腦的堆在一個(gè)又一個(gè)的頁面中，如果我(英文原文作者)想找點(diǎn)兒什么，真的必須挨個(gè)看下去。謝了，我還不如直接在手機(jī)上用Craigslist應(yīng)用呢。

在使用Craigslist的過程中，我就琢磨著，作為普通用戶，我們確實(shí)可以很明顯的受益于那些在信息的搜索、排序和篩選方面做的很到位的UI設(shè)計(jì)模式。在本文中，我們將一起了解一下，有哪些設(shè)計(jì)模式可以幫助我們按照用戶所期望的方式將數(shù)據(jù)信息更加有效的組織和呈現(xiàn)出來。

搜索

首先為各位推薦兩本這方面的好書，”Search Patterns: Design for Discovery”和”Designing Search: UX Strategies for eCommerce Success” (前者國內(nèi)有引進(jìn)，即《搜索模式》一書)。然后我們接茬來看移動應(yīng)用當(dāng)中與搜索相關(guān)的設(shè)計(jì)模式。

• 顯性搜索
• 自動完成
• 動態(tài)搜索
• 指定搜索范圍
• 已保存的/最近的搜索條目
• 搜索表單
• 搜索結(jié)果

顯性搜索

作為最普通和最常見的搜索模式，顯性搜索依靠顯性的動作行為及表現(xiàn)方式來執(zhí)行搜索任務(wù)、展示搜索結(jié)果。在這種模式中，搜索按鈕會出現(xiàn)在輸入框的右側(cè)，或直接嵌入虛擬鍵盤中 (這種情況下可以將“取消”按鈕放在搜索欄中)。搜索結(jié)果通常會直接呈現(xiàn)在搜索欄下面的區(qū)域當(dāng)中。在設(shè)計(jì)方案里，可以考慮將線性搜索與自動完成模式搭配使用。

在這種模式中，提供顯性的搜索按鈕，同時(shí)還可以為用戶提供用來取消當(dāng)前搜索行為的操作方式。當(dāng)搜索正在執(zhí)行時(shí)，提供明確的狀態(tài)反饋。

自動完成

可以說，這是隨著Web 2.0那波兒大潮所涌現(xiàn)出的一種最經(jīng)典最實(shí)用的搜索模式。用戶在輸入關(guān)鍵詞的同時(shí)，系統(tǒng)會即時(shí)提供一些根據(jù)當(dāng)前已輸入文字所猜測出來的搜索結(jié)果，如果用戶發(fā)現(xiàn)其中的某個(gè)條目正是自己想要的，那么直接點(diǎn)擊就可以完成搜索。當(dāng)然，在沒有恰當(dāng)?shù)暮蜻x條目或是用戶覺得不手動輸入完整關(guān)鍵詞就活不下去的情況下，這仍然是一個(gè)能夠正常完成搜索功能的普通模式。

理想情況下，系統(tǒng)應(yīng)該隨著用戶的輸入而立刻提供搜索結(jié)果，但在實(shí)際當(dāng)中，用來反饋系統(tǒng)工作狀態(tài)的視覺提示也是必要的。上圖右側(cè)，Netflix直接將狀態(tài)提示做在了關(guān)鍵詞輸入框內(nèi)部靠右端的位置；另一種常見的做法是將其放置在搜索結(jié)果所要出現(xiàn)在的位置。

TripAdvisor提供了一種更為出色的自動完成模式，他們直接將即時(shí)呈現(xiàn)的搜索結(jié)果按照熱門的旅行目的地、賓館酒店等類型進(jìn)行了歸類。LinkedIn的做法也有幾分類似，他們會優(yōu)先顯示那些與當(dāng)前用戶有直接聯(lián)絡(luò)關(guān)系的搜索結(jié)果。

通過視覺提示向用戶反饋系統(tǒng)當(dāng)前的工作狀態(tài)；可以考慮在搜索結(jié)果中對當(dāng)前已輸入的字符進(jìn)行著重顯示。

動態(tài)搜索

這種模式也可以被稱為“動態(tài)篩選”，當(dāng)用戶在搜索欄中輸入關(guān)鍵詞時(shí)，已有的搜索結(jié)果會隨之進(jìn)行動態(tài)的篩選?？瓷先?，這與前面的“自動完成”模式是差不多的，但實(shí)際上它們在交互模型方面有所區(qū)別。動態(tài)搜索模式的主要作用是對已有的信息列表進(jìn)行提煉和篩選。

動態(tài)搜索模式用來對數(shù)據(jù)集進(jìn)行即時(shí)的精煉和篩選，例如可以被用在地址簿或個(gè)人媒體庫等方面的應(yīng)用當(dāng)中。但該模式不適于數(shù)據(jù)規(guī)模過于龐大的狀況。

指定搜索范圍

在某些情況下，可以讓用戶在執(zhí)行搜索之前對搜索對象的類型和范圍進(jìn)行界定，從而得到更符合需求的搜索結(jié)果。Google和Photobucket的應(yīng)用在指定搜索范圍的操作形式上略有不同，但最終目的都是一致的。

采用類似做法的還有AllRecipes以及Dropbox的應(yīng)用。在Dropbox中，默認(rèn)的搜索范圍是全部內(nèi)容，但無論在搜索被執(zhí)行之前，還是結(jié)束之后，用戶都可以進(jìn)一步選擇搜索范圍，例如搜文件或是文件夾。

根據(jù)產(chǎn)品自身的情況，合理的劃分搜索類型，以便用戶在執(zhí)行搜索的時(shí)候進(jìn)行選擇。通常三到六個(gè)選項(xiàng)就夠了，必要的時(shí)候可以通過表單來實(shí)現(xiàn)高級搜索功能。

已保存的/最近的搜索條目

優(yōu)秀的移動應(yīng)用界面設(shè)計(jì)都會尊崇一條最基本的可用性原則：尊重用戶的付出。在搜索中，已保存的或是最近的搜索結(jié)果就是這條原則的良好體現(xiàn)。通過這兩種模式，用戶可以輕松的選擇曾經(jīng)搜索過的關(guān)鍵詞，完全不必重新輸入。

與這條可用性原則相關(guān)的設(shè)計(jì)模式還包括Trulia中的基于地理位置的搜索、Amazon的條碼搜索、Google Shopper中的掃描及語音搜索，以及按照搜索日期進(jìn)行分組的搜索歷史記錄。

在保存搜索結(jié)果的模式中，用戶通常還需要花費(fèi)額外的步驟為搜索結(jié)果命名，作為將來查看時(shí)的索引方式。而“最近的搜索條目”則由系統(tǒng)自行保存及呈現(xiàn)。對于自己的產(chǎn)品，要考慮哪種方式更加適合。

搜索表單

用戶可以在搜索表單中使用某些高級搜索選項(xiàng)，例如通過某種方式選定搜索范圍等。另外，搜索表單當(dāng)中通常還會包含一個(gè)在視覺呈現(xiàn)方式上很突出的搜索按鈕。

盡量控制搜索表單中的交互元素?cái)?shù)量，并按照正確的方式使用這些交互元素。在視覺上注意細(xì)節(jié)的把握，例如元素的對齊、文字標(biāo)簽的布局及字號等。

搜索結(jié)果

我們將搜索結(jié)果自身也看作整個(gè)搜索功能中的一個(gè)模式。搜索結(jié)果可以出現(xiàn)在與搜索操作相同的界面中，也可以存在于一個(gè)單獨(dú)的搜索結(jié)果界面當(dāng)中，看需求。搜索結(jié)果的呈現(xiàn)方式是多種多樣的，包括表格(table)、列表(list)、縮略圖等，另外還可以顯示在地圖當(dāng)中。同一款應(yīng)用可以同時(shí)使用幾種不同的搜索結(jié)果表現(xiàn)形式，具體方式取決于搜索結(jié)果的類型及用戶的設(shè)置。

很多應(yīng)用都會在搜索結(jié)果中使用延遲加載技術(shù)(lazy loading)，通過這種方式首先加載一部分搜索結(jié)果，同時(shí)另外一部分繼續(xù)載入。通常有兩種方式可以觸發(fā)更多內(nèi)容的加載，一是自動加載，二是由用戶手動點(diǎn)擊某個(gè)按鈕或鏈接來執(zhí)行。

我們可以使用延遲加載技術(shù)來代替?zhèn)鹘y(tǒng)的分頁瀏覽模式，特別是在移動應(yīng)用的上下文環(huán)境中，分頁導(dǎo)航方式有悖于自然的交互模型，不符合用戶直覺。另外，最好讓用戶了解搜索結(jié)果的條目總數(shù)，并為搜索結(jié)果提供合理的默認(rèn)排序規(guī)則。

排序

為搜索結(jié)果選擇一種最恰當(dāng)?shù)哪J(rèn)排序方式是很重要的，通常，我們可以根據(jù)自己產(chǎn)品的實(shí)際特性以及用戶期望來對其進(jìn)行設(shè)定。而改變搜索結(jié)果排序方式的設(shè)計(jì)模式大致有以下三種：

• 排序切換
• 排序選擇器
• 排序表單

排序切換

如果可選的排序方式不算太多，我們可以使用這種最簡單的解決方案。將排序切換按鈕放置在搜索結(jié)果的頂部或底部(具體位置根據(jù)界面中其他相關(guān)元素的布局而定)，用戶無需離開當(dāng)前視圖就可以輕松改變排序方式。

下圖右側(cè)的Target應(yīng)用將四種排序方式整合到了三個(gè)切換按鈕中，其中的“價(jià)格”是可以進(jìn)一步切換成為升序或降序的。

排序切換要有清晰明確的視覺呈現(xiàn)方式來表達(dá)“當(dāng)前”的狀態(tài)。

排序選擇器

選擇器模式算得上是切換模式的良好替代品。很多類型的UI控件都可以在這個(gè)模式中派上用場，具體的運(yùn)用方式還要參考不同系統(tǒng)平臺所提供的設(shè)計(jì)規(guī)范。例如，在Android應(yīng)用中，菜單形式比較常見，而對于iOS來說，選擇器(picker)和動作表單(actionsheet)都是比較合適的控件。

相比于切換模式來說，選擇器模式允許更長的文字標(biāo)題以及更多的選項(xiàng)。上圖中，Walmart的Android應(yīng)用在搜索欄當(dāng)中放置了一個(gè)按鈕，用來打開排序彈出層。而下圖中，Kayak的iPhone應(yīng)用則將用于展開排序選擇器的按鈕放在了搜索結(jié)果的底部。

此外，Android中的組合框以及iOS中的彈出覆蓋菜單都可以用在這種模式當(dāng)中。

參考相關(guān)系統(tǒng)平臺的設(shè)計(jì)規(guī)范，在排序選擇器模式中使用最恰當(dāng)?shù)腢I控件。對當(dāng)前選中的排序方式，要以清晰的、容易辨識的視覺表現(xiàn)形式來突出顯示。

排序表單

很多應(yīng)用會在同一個(gè)界面中整合運(yùn)用多種排序及篩選方式，這種方法通常被稱作“精煉(refine)”，它很復(fù)雜，但卻能幫助用戶得到最精確的搜索結(jié)果。在移動應(yīng)用中，“精煉”的方式大多承載于一個(gè)表單界面中，用戶需要在里面根據(jù)自己的需求做出選擇，并提交這些搜索條件。

源地址：http://beforweb.com/node/70