文字輸入

Search Field|搜尋欄

用關鍵字縮小既有資料範圍,並回饋結果數量、零結果與清除方式。

常見俗稱:搜尋欄、關鍵字欄、查詢欄、Search Input

60 秒決策

先確認使用者要完成的事。

適合使用

  • 使用者以文字縮小一份已存在的資料集。
  • 結果列表會隨關鍵字變化,並能顯示結果或零結果。

不適合使用

  • 使用者需要輸入並儲存一個新的資料值。
  • 欄位需要自動完成建議或從大量既有資料選一筆。

畫面要說清楚的事

不要只交代外觀,也要交代資料與輸入規則。

說明搜尋對象

用「搜尋成員」比單純的放大鏡更能說明會搜尋什麼。

有內容就能清除

清除控制讓使用者快速回到完整結果,並保留鍵盤可及性。

零結果也要有下一步

說明找不到的範圍,建議檢查拼字或清除篩選。

必要狀態與回應

每個狀態都要讓使用者知道下一步。

初始

說明搜尋範圍或輸入範例,不假裝這是一般表單欄位。

搜尋中

遠端資料時顯示載入狀態,避免結果突然跳動卻沒有說明。

有結果

回饋結果數量或已套用的關鍵字。

零結果

提供清除、換關鍵字或調整篩選的方向。

操作 Demo

先知道要觀察什麼,再動手操作。

操作前先知道

  1. 篩選與清除

    先觀察:輸入關鍵字後,結果數量、清除按鈕與零結果如何改變。

    操作:搜尋「設計」、輸入不存在的字,再清除。

    預期結果:這是縮小既有清單,不是允許建立新值的輸入欄。

可操作 Demo

搜尋與清除結果

顯示全部 4 位成員。

  • 陳怡安|設計組
  • 王子維|產品組
  • 林佩珊|營運組
  • 許博文|平台工程組

告訴 AI

把任務、規則、狀態與操作條件一次寫清楚。

建立「搜尋成員」Search Field。輸入時即時篩選既有清單,顯示結果數量;有內容時提供清除按鈕,零結果時說明找不到什麼並給下一步,不要把它做成可任意新增資料的欄位。

驗收清單

不要只確認欄位能不能點。

  • Label 是否說明搜尋對象?
  • 有內容時是否可清除?
  • 是否提供搜尋中、結果數量與零結果回饋?
  • 搜尋是否不會意外建立新資料?
  • 鍵盤焦點與清除操作是否可及?