決定放假期間先不上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的做法也有幾分類似,他們會優先顯示那些與當前用戶有直接聯絡關系的搜索結果。

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