搜尋/篩選/排序

搜尋這件事在後台有兩個層次:跨整個系統的 global search 和只搜當前頁的 in-page search,兩者不能混用同一個 UI。這章講它們各自的觸發方式、filter chip 與 saved view 怎麼設計,以及為什麼所有篩選狀態都要寫進 URL。要做搜尋框、filter 面板或「儲存的檢視」前,先翻這頁對齊。

全站搜尋 vs 頁內搜尋

這是什麼

全站搜尋用快捷鍵(Mac 為 Command+K)開啟指令列,可跨專案、人員、設定頁找東西;頁內搜尋則是工具列輸入框,只篩選當前列表。

什麼時候用

使用者要快速跳轉全站資源時用指令列;只在當前表格或清單內找資料時用頁內搜尋。

預覽依本指南規則實作

Global · ⌘K

專案、人員、動作、設定頁—全站可達。

In-page · Toolbar

指令列搜尋(Command Palette)

這是什麼

按快捷鍵開啟的指令列搜尋面板:結果依類型分組,可用方向鍵選取、Enter 前往,沒輸入時顯示最近使用項目。

什麼時候用

後台功能多、使用者需要快速跳頁或執行常用動作時;放在頂部列或全域快捷鍵。

預覽依本指南規則實作

這是什麼

在列表或表格上方輸入關鍵字,稍停即時篩選;命中文字高亮;找不到時顯示空狀態並建議清除條件。

什麼時候用

單一頁面資料量中等、使用者需要邊打邊找時;不要拿來取代全站跳轉搜尋。

預覽依本指南規則實作
2 results for 'acme'
  • Acme 官網
  • Acme CRM

篩選(Filter)

這是什麼

用篩選列或彈出面板設定條件,已選條件以標籤顯示並可個別移除,也可一鍵清除全部。

什麼時候用

列表資料可依狀態、負責人、日期等維度縮小範圍時;條件較多時用彈出面板較整潔。

預覽依本指南規則實作
Status: ActiveOwner: Alice

排序(Sort)

這是什麼

點欄位標題切換升序/降序,並用箭頭標示目前排序欄與方向;進階可按住 Shift 再點第二欄。

什麼時候用

表格需要依名稱、日期、狀態等排序時;預設排序要符合最常見的使用情境。

預覽依本指南規則實作
Acme CRMAliceActive
Acme 官網AliceActive
Beta 行銷BobDraft

已儲存檢視(Saved View)

這是什麼

把目前的篩選、排序、顯示欄位、每頁筆數存成命名檢視,之後一鍵切換;可設個人或團隊共用。

什麼時候用

使用者常重複套用同一組條件(例如「我負責的進行中專案」)時,減少每次手動設定。

預覽依本指南規則實作

切換 view 時 URL 同步更新(見下方 URL Sync)。

網址同步(URL Sync)

這是什麼

篩選、排序、頁碼、檢視名稱等狀態寫進網址參數,重新整理或分享連結後仍維持相同畫面。

什麼時候用

使用者需要書籤、複製連結給同事,或按瀏覽器上一頁回到先前列表狀態時。

預覽依本指南規則實作
位址列

/projects?status=active&owner=alice&sort=updated_at,desc&page=2&pageSize=25&view=all

這是什麼

側邊列出各篩選選項及符合筆數,勾選後主列表即時更新;常用分類預設展開。

什麼時候用

資料有多個可組合的維度(狀態、類型、標籤)且使用者需要邊篩邊看數量時。

預覽依本指南規則實作
主列表區(124 筆符合 Active)

搜尋結果顯示

這是什麼

搜尋結果上方顯示總筆數與耗時,關鍵字在標題或摘要中高亮;無結果時提供清除條件或建立新項目的按鈕。

什麼時候用

全站或頁內搜尋完成後,讓使用者確認結果規模並決定下一步。

預覽依本指南規則實作

12 results in 0.3s for "acme"

Sort by: · Date · Name

鍵盤行為

這是什麼

常用快捷鍵:Command+K 開指令列搜尋、Command+F 或斜線鍵聚焦頁內搜尋、Esc 關閉或清空。

什麼時候用

設計搜尋相關互動時一併規劃鍵盤路徑,方便進階使用者快速操作。

預覽依本指南規則實作
⌘KCommand palette
⌘F聚焦 in-page search
/聚焦 search(GitHub 慣例)
Esc清空或關閉

Page Header + Filter Toolbar

這是什麼

頁首含圖示標題、雙主要按鈕,下方接搜尋與篩選工具列(參考 Cloudflare Domains)。

什麼時候用

列表或管理頁需要標題、快速動作與篩選並列時。

預覽依本指南規則實作

Overview

Manage your domains and DNS settings.

Tab Nav + Segmented Control

這是什麼

頁籤列切換區塊,搭配分段控制切換計費週期等二選一選項。

什麼時候用

同一頁有多個平行視圖,或需要在兩三個選項間快速切換時。

預覽依本指南規則實作

規格速查

項目定稿值
Global searchCmd/Ctrl + K command palette,跨資源 + 頁面 + 動作 + 文件
In-page searchtoolbar 左側 input,寬 240–320px,placeholder 標明搜什麼欄位
Filter chip套用後變 chip,可單獨 ✕,並提供 Clear all
Chip 格式「欄位:值」,例如 Status: Active
Filter 邏輯多 chip 預設 AND;同欄位多值預設 OR
Saved view命名儲存 filter + sort + 欄位 + page size,可個人/團隊共用
Sort點 header 切換 asc/desc/取消,預設單欄、Shift+click 多欄
結果顯示highlight 關鍵字 + 總筆數,無結果給清空與引導
Faceted searchfilter 顯示每個選項命中筆數,常用展開、其餘 collapse
URL syncsearch/filter/sort/view 全寫入 URL query,可分享可 back

常見做錯

做錯正確
global 與 in-page search 混用 UIcommand palette 走 Cmd K,頁內搜尋走 toolbar input,分開
filter 只能逐個移除沒有整批清每個 chip 可單獨 ✕,另提供 Clear all 一鍵清除
無結果只顯示空白沒有引導no-results 提供清空搜尋、減少 filter、新增資源 CTA
搜尋/篩選狀態不進 URL狀態一律 URL sync,才能分享、書籤、回上一頁

相關章節

  • 資料表格 — toolbar 上 search 與 filter chip 的擺放位置
  • 分頁 — filter/sort 變更後回到第 1 頁與 URL 同步
  • 批次操作 — 篩選後再對結果做批次選取與操作