Search、Sort、Filter 舉例及解釋

Search 搜尋：

1.      Explicit Search 外顯搜尋

解釋：由輸入框及搜尋按鈕組合而成，在輸入完畢所需要搜尋的內容後，點擊搜尋才開始啟動搜尋動作

範例：
圖1-1 輸入搜尋關鍵字	圖1-2 搜尋結果

範例說明：以Sony Xperia Z Ultra手機內建的月曆程式作範例，在搜尋框內輸入關鍵字”聖誕”，輸入完成後點擊搜尋，產生搜尋的結果。

2.       Auto-Complete 自動完成搜尋

解釋：由輸入框、顯示頁面、搜尋按鈕組合而成，在輸入過程中會自動進行搜尋，若使用者尚未搜尋完畢，即產生了使用者所需要的結果，使用者便可以直接點選所需要之搜尋，達到節省時間之效果。

範例：
圖2-1 輸入過程-1個關鍵字	圖2-2 輸入過程-2個關鍵字

範例說明：以Facebook提供之內建應用程式中的好友搜尋作範例，在搜尋區域輸入關鍵字”許”，便開始產生與關鍵字相關的搜尋結果，在輸入完整搜尋關鍵字”許桔”後，便產生與關鍵字相關之搜尋結果。

3.       Dynamic Search 動態搜尋

解釋：由輸入框、顯示頁面、搜尋按鈕組合而成，在輸入過程中會搜尋資料庫或裝置內擁有的資料，適用於資料量較少資訊，若關鍵字搜尋與資料符合，則會產生符合關鍵字的搜尋結果。

範例：
圖3-1 輸入過程-3個關鍵字	圖3-2 輸入過程-8個關鍵字

範例說明：以ES檔案瀏覽器的檔案搜尋功能作範例，在搜尋區域輸入關鍵字”goo”，便產生與關鍵字符合的搜尋結果，在關鍵字”google.”輸入完畢後，便產生與關鍵字完全符合的搜尋結果。

4.       Scoped Search 分類搜尋

解釋：由輸入框、顯示頁面、分類區、搜尋按鈕組合而成，在輸入過程中可選擇需要之分類進行搜尋，將關鍵字輸入完畢及類別選擇完畢後點選搜尋，便會產生設定之搜尋條件。

範例：
圖4-1 輸入過程-網頁搜尋	圖4-2 輸入過程-圖片搜尋

範例說明：以行動裝置內的Chrome瀏覽器作範例，在搜尋區域輸入關鍵字”facebook”，選擇分類”網站”進行搜尋，便產生與關鍵字以及所設定之類別相關的搜尋結果，另以關鍵字”facebook”進行搜尋，選擇分類”圖片”進行搜尋，便產生與關鍵字以及所設定之類別相關的搜尋結果。

5.       Saved and Recent Searches自動儲存最新的搜尋紀錄

解釋：由輸入框、顯示頁面、搜尋按鈕組合而成，在輸入過程中會把曾經輸入過的關鍵字提示在下方可以選擇。

範例： 圖5-1 iOS系統搜尋畫面

範例說明：以iOS系統下瀏覽器，曾經輸入過相關的關鍵字都會在下方提示。

6.       Search Form 搜尋表單

解釋：由輸入框、顯示頁面、搜尋按鈕組合而成，在輸入過程中會把曾經輸入過的關鍵字提示在下方可以選擇。

                範例:

圖6-1 台灣高鐵iOS版搜尋畫面

範例說明:以台灣高鐵iOS版舉例，乘客可以利用搜尋表單可以快速訂到票，及所要搭乘的時間、班次及特殊條件選擇。

7.       Search Results/View Results 搜尋與顯示結果

解釋：由輸入框、顯示頁面、搜尋按鈕組合而成，輸入後底下會以不同的方式呈現，如以清單、圖片、地圖來呈現。

範例： 圖7-1 Google瀏覽器iOS版搜尋畫面

範例說明：用Google瀏覽器iOS版輸入搜尋關鍵字，會以列表旁邊還會有圖片一起呈現。

Sort 排序：

1.    Onscreen Sort 直接出現

描述：

畫面上的排序可以提供簡單的單擊方案，把排序項目放在畫面的上方或下方取決於其它畫面元素。

清楚顯示哪個項目在選取中或「開啓中」，如果項目標籤不適合放在雙態觸變按鈕列裡，則使用 Sort Order Selector 模式。

範例

2.    Sort Order Selector 選擇器

描述：

以下拉式選單或是對話框的方式來選擇排序方法。

有很多用來選取不同介面控制項。

範例

3.    Sort Form排序表單(排序Refine)

描述：

將排序和篩選的項目合併在同一個畫面。

使用此模式前，要考慮有效率的排序項目雙態觸變，或排序選擇器模式。

範例

Filter 篩選：

1.    Onscreen Filter直接篩選：頁面上直接選擇篩選條件，將結果直接顯示於頁面上。

範例：台灣高鐵APP，在訂票紀錄中，可以選擇觀看已訂票卻未付款或未取票的票。

2.    Filter Drawer抽屜：利用抽屜的形式，將其他功能隱藏在旁邊，以節省螢幕空間。

範例：iTunes上的Exxon Mobil Fuel Finder，在抽屜裡可以選擇要在地圖上尋找的地點。

3.    Filter Dialog對話方塊：利用對話方塊，進行更進一步的選擇。

範例：台灣高鐵APP，在訂票時選擇出發日期與出發時間。

4.    Filter Form 過濾表單：利用條件，一步步過濾出符合使用者需求的結果。

範例：Hotels in New York，可以利用價錢、星等、位置等條件搜尋符合需求的飯店。