搜尋介面系統 是做什麼的？
目的
搜尋介面系統提供了一套方法論，用於設計一致且高效能的探索體驗。internal-search-optimization 側重於「成長」與邏輯層面，而本系統則定義了搜尋 UI 的設計模式與空間人體工學。它確保使用者能立即找到搜尋入口、輕鬆地與其互動（即使在行動裝置上），並以最小化認知負擔與最大化「資訊的氣味」的方式處理結果。
使用案例
- 設計全域頁首或持久工具列中的搜尋入口。
- 為 SaaS 應用程式打造「指令中心」或「多功能搜尋框」體驗。
- 為電子商務結構化「視覺搜尋」與自動完成下拉選單。
- 為文件或目錄設計高密度的搜尋結果頁面（SERP）。
- 為行動優先設計實作「全螢幕搜尋」覆蓋層。
何時不該使用
- 靜態登陸頁面： 內容固定且探索並非主要目標時。
- 微型網站（少於 20 頁）： 僅靠穩固的導航與麵包屑就足以滿足可尋性時。
- 純關聯式儀表板： 資料僅透過定義好的篩選器與分頁標籤存取，而非透過自由文字搜尋時。
輸入
- 使用者意圖檔案： 使用者是在尋找特定 SKU（精確搜尋）還是探索某個主題（發現搜尋）？
- 目錄密度： 系統中有多少項目？中繼資料的多樣性如何？
- 主要裝置： 搜尋主要是在行動裝置（觸控）還是桌面裝置（鍵盤）上使用？
- 現有系統： 色彩系統、間距記號與字體級數（來自
fluid-spacing-system與fluid-typography-system）。
輸出
- 搜尋觸發器規格： 搜尋列的視覺定義（靜態、可展開或僅圖示）。
- 自動完成解剖學： 建議下拉選單的設計，包含類別、圖片與鍵盤狀態。
- SERP 佈局藍圖： 結果頁面的空間組織，平衡中繼資料密度與可讀性。
- 行動互動地圖： 搜尋如何從頁首圖示轉變為全螢幕聚焦介面的計畫。
工作流程
1. 定義搜尋觸發模式
根據其在使用者旅程中的重要性選擇觸發器：
- 持久列： 始終可見、高對比的輸入框。最適合電子商務或搜尋為主的網站。
- 可展開輸入框： 以圖示或小列開始，點擊後展開。最適合搜尋功能次要於導航的網站。
- 「Command + K」觸發器： 一個微小的提示或圖示，用於開啟模態框。最適合高階使用者的 SaaS 工具或文件網站。
2. 設計自動完成（即時）體驗
透過提供即時回饋來縮短「結果的距離」：
- 分類： 按類型分組結果（例如：產品、文章、說明）。
- 豐富的中繼資料： 在下拉選單中包含小型縮圖、價格或狀態徽章。
- 聚焦狀態： 使用
interactive-state-system來清晰地突顯當前選中的建議，以便鍵盤使用者操作。 - ARIA 模式： 將輸入/列表箱的關係建模為 ARIA APG Combobox 模式（
role="combobox"，搭配aria-expanded、aria-controls以及指向被突顯的role="option"的aria-activedescendant），而不是自訂互動模型。
3. 建立結果頁面（SERP）層級
將 visual-hierarchy-system 應用於搜尋結果：
- 「查詢回音」： 顯眼地顯示使用者的搜尋詞以確認上下文。
- 結果卡片： 使用
card-ui-system標準化結果格式。 - 中繼資料權重： 確保標題最為突出，其次是「片段」（內容中與查詢相符的部分）。
4. 建置行動探索層
在行動裝置上，搜尋是一個專屬模式，而非一個小工具：
- 模式轉換： 點擊搜尋應開啟一個全螢幕覆蓋層，以移除背景干擾。
- 自動聚焦： 自動聚焦輸入框並觸發鍵盤。
- 「拇指區域」操作： 將「清除」與「取消」按鈕放置在拇指易於觸及的範圍內（至少 44x44px）。
5. 定義載入與空白狀態
- 骨架結果： 使用
skeleton-state-system在擷取結果時維持佈局穩定性。 - 智能無結果： 使用
empty-state-system在無完全相符結果時提供替代路徑。
決策規則
- 可見性規則： 如果搜尋功能被超過 30% 的使用者使用，則在桌面上必須是一個持久、全寬的輸入列。
- 「最少三字元」規則： 在使用者輸入至少 3 個字元之前，不要開始顯示自動建議（以防止視覺抖動）。
- 結果限制： 將自動完成建議限制在 5-8 個項目。如果還有更多，提供「查看『...』的所有結果」連結。
- 資訊的氣味： 在搜尋結果片段中將相符的詞彙加粗，幫助使用者快速掃描以找到相關性。
限制條件
- 無障礙性： 搜尋輸入框必須有可見的標籤（或
aria-label）。鍵盤使用者必須能使用方向鍵瀏覽自動完成列表、使用Enter選擇，並使用Escape關閉，而不會遺失已輸入的查詢。所有互動目標（清除按鈕、建議列）必須符合 WCAG 2.2 的 24x24px 最小目標尺寸（2.5.8）。 - 回應式設計： 自動完成下拉選單絕不能超過視口寬度。
- 對比度： 突顯相符文字必須符合 WCAG AA 對比度比率（通常使用背景顏色變換或加粗）。
常見失敗模式
- 「隱藏的搜尋」： 當搜尋是使用者的主要導航方式時，卻強迫他們尋找放大鏡圖示。
- 「脫節的」下拉選單： 自動完成選單的寬度或對齊方式與輸入框不一致，造成視覺上的「漂浮」。
- 鍵盤陷阱： 不允許使用者使用
Escape鍵退出搜尋覆蓋層或下拉選單。 - 死胡同結果： 在結果頁面上未將搜尋詞保留在輸入框中，強迫使用者若想修改則必須重新輸入。
驗證標準
- 搜尋入口在頁面掃描 2 秒內即可見。
- 自動完成下拉選單在適當時包含豐富的中繼資料（圖片/標籤）。
- 搜尋的鍵盤導航（方向鍵、Enter、Escape）已完全定義，並遵循 ARIA APG combobox 模式。
- 行動搜尋開啟全螢幕模式，並立即聚焦鍵盤。
- 搜尋結果頁面會回顯查詢並突顯相符詞彙。
- 結果載入時使用骨架狀態。
- 所有互動元素符合 44x44px 觸控目標最小尺寸。