1206 回家作業，UI Patterns For Mobile Apps: Search, Sort And Filter

Explicit Search 外顯查詢

Explicit Search外顯查詢，會有明確的操作執行，舉凡搜尋列後的搜尋按鈕或是輸入鍵盤上的Enter鍵。

範例一：在Google Play上輸入搜尋條件，接著點選Search Bar後的放大鏡圖示按鈕開始搜尋。

範例二：在yahoo奇摩首頁輸入搜尋條件後，點選鍵盤上的Enter鍵。

 

Search with Auto-Complete 自動完成搜尋
Search with Auto-Complete，能夠邊搜尋邊顯示結果，輸入搜尋字串後就會立刻在Search Bar下拉浮現出可能的結果供使用者直接選擇，使用者也可以繼續輸入自己完整的搜尋條件，輸入完畢後再點選明確的操作執行按鈕即可。

範例一：使用facebook搜尋功能，輸入『nutc』後，就會自動顯示可能符合的搜尋結果。
範例二：Google搜尋列，輸入『台中市北區』，就會自動顯示可能符合的搜尋結果。

 

Dynamic Search 動態搜尋
Dynamic Search 動態搜尋，也被稱為動態篩選，只要符合輸入的搜尋條件，便會將相符合的值都顯示出來。適合用於地址簿或個人媒體庫中，但若使用在搜尋多源大型資料可能就不那麼適合了，因為從大量的資料中做搜尋會到誌顯示結果壟長，增加搜尋時間。

範例一：Line好友，搜尋英文字母『o』，即可找到所有名稱內含『o』的朋友並顯示出來。範例二：搜尋連絡人『白』，即可找到所有名稱內含『白』的朋友並顯示出來。

Scoped Search 分類搜尋

Scoped Search 分類搜尋，可以在執行前先選擇分類，縮小搜尋範圍，以便得到更精準的搜尋結果。

範例一：以名片全能王為例，使用者搜尋名片時，可以選擇要以哪一種資料搜尋。

 

Saved and Recent Searches 儲存最近期的搜尋

Saved and Recent Searches 儲存最近期的搜尋，尊重使用者的努力，讓使用者可以從先前輸入的搜尋條件中做選擇，替代重複輸入同樣的關鍵字和搜尋條件的麻煩。

範例一：以YouTube為例，點選Youtube搜尋列，會自動跳出使用者蒐尋過的搜尋條件。

範例二：點選Googleplay搜尋app，會自動跳出使用者蒐尋過的搜尋條件。

     

Search Form 搜尋表單
一表單上面有多種欄位可供使用者輸入需要的情況，當使用者輸入好後就以這些規則來尋找相關資訊。

如下圖，火車時刻表，可選擇起迄站、車種、日期以及時間後，再按查詢按鈕依這些條件來做查詢。

Search Results/View Results

在歷史紀錄裡面搜尋想要的資料，意即之前必須要先搜尋過後才可以在這邊找到。

如下圖，這是一個英文字典查詢過的歷史紀錄，所以當還想要再次找出那個單字時，便可以此搜尋來查，優點是可以更快找到。

Onscreen Sort 直接排序

排序的模式已在同畫面上或下整排列出，只要使用者點選或滑過去便可看到以此排序出來的結果。

如下圖，Play商店可依最熱門付費項目、最熱門免費項目、最高營收...等等不同種類來做排序。

Sort Order Selector 選擇器排序

擁有跳出的視窗，可以提供使用者非常多樣的排序方式，當使用者點選其中一樣時，就以被選擇的那項來做排序。

如下圖左，HTC手機的應用程式可依使用者喜歡的方式做排序，像是最新、英文字母、或是自訂等等方式。下圖右則是信箱裡有非常多的mail，所以系統提供給使用者有多種樣式排序，以利使用者用最快的方式找出想要看的那封mail。

 

Sort Form

結合了搜尋和篩選，名為Refine，優點為在資料數量非常大量的時候，可以先透過篩選後，再進行排序，便可幫使用者先進一步篩掉不需要的資料。

如下圖，Yahoo拍賣，排序及篩選放在一起，可讓使用者同時做篩選及排序，讓使用者更快搜尋到自己想要的結果。

Onscreen Filter

讓使用者可以直接在頁面上，選擇欲搜尋的資料類別，並且顯示出符合該類別的資料，過濾掉大量非使用者所需要的資訊。

591租屋app搜尋頁面上方，有租屋、中古屋、頂讓、新房屋四種類別供使用者選擇，如下圖所示：

Filter Drawer

使用者可以利用手指滑動拉出新的區塊，此區塊內可以提供使用者選擇欲搜尋的資料類別，系統會顯示出符合該類別的資料，過濾掉大量非使用者所需要的資訊。

如下圖所示，將高級篩選由下而上拖曳，即可出現篩選項目供使用者選擇。

 

Filter Dialog

點擊按鈕會跳出一個視窗，此視窗有提供使用者選擇欲搜尋的資料類別，當使用者點選後，看到的結果便只有此一類別的資料。

如下圖點擊下拉式選單，出現一個視窗，供使用者選擇並點選。

 

Filter Form

漸進式的篩選，使用者可先從大方向去做篩選，篩選完後若還可以再詳細細分，系統就會提供使用者在篩選一次的頁面。

如下圖，可以選擇某地區的中古屋，地區可以先選擇縣市再選擇鄉鎮，一步步地縮小搜尋的範圍。