移動應用界面設計模式 - 搜索、排序、篩選

　　決定放假期間先不上iOS Wow體驗了;手頭這篇譯文不做完的話我心不甘。去年年底，我們曾經學習過一篇"具有引導性的移動應用界面設計模式"，其英文原文來自O'Reilly動物園的一本新書，"Mobile Design Pattern Gallery"，就是封面上是個大公雞的那本兒。今次這篇則是來自於本書的第四章——搜索、排序和篩選。貌似國內引進版也由XX出版社在做著了，真心不關我事，自己走起。接下來果斷精分，進入原文作者人格。

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

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

　　搜索

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

　　顯性搜索

　　自動完成

　　動態搜索

　　指定搜索范圍

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

　　搜索表單

　　搜索結果

　　顯性搜索

　　作為最普通和最常見的搜索模式，顯性搜索依靠顯性的動作行為及表現方式來執行搜索任務、展示搜索結果。在這種模式中，搜索按鈕會出現在輸入框的右側，或直接嵌入虛擬鍵盤中 (這種情況下可以將"取消"按鈕放在搜索欄中)。搜索結果通常會直接呈現在搜索欄下面的區域當中。在設計方案裡，可以考慮將線性搜索與自動完成模式搭配使用。

　　在這種模式中，提供顯性的搜索按鈕，同時還可以為用戶提供用來取消當前搜索行為的操作方式。當搜索正在執行時，提供明確的狀態反饋。

　　自動完成

　　可以說，這是隨著Web 2.0那波兒大潮所湧現出的一種最經典最實用的搜索模式。用戶在輸入關鍵詞的同時，系統會即時提供一些根據當前已輸入文字所猜測出來的搜索結果，如果用戶發現其中的某個條目正是自己想要的，那麼直接點擊就可以完成搜索。當然，在沒有恰當的候選條目或是用戶覺得不手動輸入完整關鍵詞就活不下去的情況下，這仍然是一個能夠正常完成搜索功能的普通模式。

　　理想情況下，系統應該隨著用戶的輸入而立刻提供搜索結果，但在實際當中，用來反饋系統工作狀態的視覺提示也是必要的。上圖右側，Netflix直接將狀態提示做在了關鍵詞輸入框內部靠右端的位置;另一種常見的做法是將其放置在搜索結果所要出現在的位置。

　　TripAdvisor提供了一種更為出色的自動完成模式，他們直接將即時呈現的搜索結果按照熱門的旅行目的地、賓館酒店等類型進行了歸類。LinkedIn的做法也有幾分類似，他們會優先顯示那些與當前用戶有直接聯絡關系的搜索結果。

　　通過視覺提示向用戶反饋系統當前的工作狀態;可以考慮在搜索結果中對當前已輸入的字符進行著重顯示。

　　動態搜索

　　這種模式也可以被稱為"動態篩選"，當用戶在搜索欄中輸入關鍵詞時，已有的搜索結果會隨之進行動態的篩選。看上去，這與前面的"自動完成"模式是差不多的，但實際上它們在交互模型方面有所區別。動態搜索模式的主要作用是對已有的信息列表進行提煉和篩選。

　　動態搜索模式用來對數據集進行即時的精煉和篩選，例如可以被用在地址簿或個人媒體庫等方面的應用當中。但該模式不適於數據規模過於龐大的狀況。

　　指定搜索范圍

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

　　采用類似做法的還有AllRecipes以及Dropbox的應用。在Dropbox中，默認的搜索范圍是全部內容，但無論在搜索被執行之前，還是結束之後，用戶都可以進一步選擇搜索范圍，例如搜文件或是文件夾。

　　根據產品自身的情況，合理的劃分搜索類型，以便用戶在執行搜索的時候進行選擇。通常三到六個選項就夠了，必要的時候可以通過表單來實現高級搜索功能。

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

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

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

　　在保存搜索結果的模式中，用戶通常還需要花費額外的步驟為搜索結果命名，作為將來查看時的索引方式。而"最近的搜索條目"則由系統自行保存及呈現。對於自己的產品，要考慮哪種方式更加適合。

　　搜索表單

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

　　盡量控制搜索表單中的交互元素數量，並按照正確的方式使用這些交互元素。在視覺上注意細節的把握，例如元素的對齊、文字標簽的布局及字號等。

　　搜索結果

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