搜尋這件事在後台有兩個層次:跨整個系統的 global search 和只搜當前頁的 in-page search,兩者不能混用同一個 UI。這章講它們各自的觸發方式、filter chip 與 saved view 怎麼設計,以及為什麼所有篩選狀態都要寫進 URL。要做搜尋框、filter 面板或「儲存的檢視」前,先翻這頁對齊。
這是什麼
全站搜尋用快捷鍵(Mac 為 Command+K)開啟指令列,可跨專案、人員、設定頁找東西;頁內搜尋則是工具列輸入框,只篩選當前列表。
什麼時候用
使用者要快速跳轉全站資源時用指令列;只在當前表格或清單內找資料時用頁內搜尋。
這是什麼
按快捷鍵開啟的指令列搜尋面板:結果依類型分組,可用方向鍵選取、Enter 前往,沒輸入時顯示最近使用項目。
什麼時候用
後台功能多、使用者需要快速跳頁或執行常用動作時;放在頂部列或全域快捷鍵。
這是什麼
在列表或表格上方輸入關鍵字,稍停即時篩選;命中文字高亮;找不到時顯示空狀態並建議清除條件。
什麼時候用
單一頁面資料量中等、使用者需要邊打邊找時;不要拿來取代全站跳轉搜尋。
這是什麼
用篩選列或彈出面板設定條件,已選條件以標籤顯示並可個別移除,也可一鍵清除全部。
什麼時候用
列表資料可依狀態、負責人、日期等維度縮小範圍時;條件較多時用彈出面板較整潔。
這是什麼
點欄位標題切換升序/降序,並用箭頭標示目前排序欄與方向;進階可按住 Shift 再點第二欄。
什麼時候用
表格需要依名稱、日期、狀態等排序時;預設排序要符合最常見的使用情境。
這是什麼
把目前的篩選、排序、顯示欄位、每頁筆數存成命名檢視,之後一鍵切換;可設個人或團隊共用。
什麼時候用
使用者常重複套用同一組條件(例如「我負責的進行中專案」)時,減少每次手動設定。
這是什麼
篩選、排序、頁碼、檢視名稱等狀態寫進網址參數,重新整理或分享連結後仍維持相同畫面。
什麼時候用
使用者需要書籤、複製連結給同事,或按瀏覽器上一頁回到先前列表狀態時。
這是什麼
側邊列出各篩選選項及符合筆數,勾選後主列表即時更新;常用分類預設展開。
什麼時候用
資料有多個可組合的維度(狀態、類型、標籤)且使用者需要邊篩邊看數量時。
這是什麼
搜尋結果上方顯示總筆數與耗時,關鍵字在標題或摘要中高亮;無結果時提供清除條件或建立新項目的按鈕。
什麼時候用
全站或頁內搜尋完成後,讓使用者確認結果規模並決定下一步。
這是什麼
常用快捷鍵:Command+K 開指令列搜尋、Command+F 或斜線鍵聚焦頁內搜尋、Esc 關閉或清空。
什麼時候用
設計搜尋相關互動時一併規劃鍵盤路徑,方便進階使用者快速操作。
這是什麼
頁首含圖示標題、雙主要按鈕,下方接搜尋與篩選工具列(參考 Cloudflare Domains)。
什麼時候用
列表或管理頁需要標題、快速動作與篩選並列時。
這是什麼
頁籤列切換區塊,搭配分段控制切換計費週期等二選一選項。
什麼時候用
同一頁有多個平行視圖,或需要在兩三個選項間快速切換時。