60 秒決策
先確認使用者要完成的事。
適合使用
- 使用者以文字縮小一份已存在的資料集。
- 結果列表會隨關鍵字變化,並能顯示結果或零結果。
不適合使用
- 使用者需要輸入並儲存一個新的資料值。
- 欄位需要自動完成建議或從大量既有資料選一筆。
畫面要說清楚的事
不要只交代外觀,也要交代資料與輸入規則。
說明搜尋對象
用「搜尋成員」比單純的放大鏡更能說明會搜尋什麼。
有內容就能清除
清除控制讓使用者快速回到完整結果,並保留鍵盤可及性。
零結果也要有下一步
說明找不到的範圍,建議檢查拼字或清除篩選。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
初始
說明搜尋範圍或輸入範例,不假裝這是一般表單欄位。
搜尋中
遠端資料時顯示載入狀態,避免結果突然跳動卻沒有說明。
有結果
回饋結果數量或已套用的關鍵字。
零結果
提供清除、換關鍵字或調整篩選的方向。
操作 Demo
先知道要觀察什麼,再動手操作。
操作前先知道
篩選與清除
先觀察:輸入關鍵字後,結果數量、清除按鈕與零結果如何改變。
操作:搜尋「設計」、輸入不存在的字,再清除。
預期結果:這是縮小既有清單,不是允許建立新值的輸入欄。
可操作 Demo
搜尋與清除結果
顯示全部 4 位成員。
- 陳怡安|設計組
- 王子維|產品組
- 林佩珊|營運組
- 許博文|平台工程組
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立「搜尋成員」Search Field。輸入時即時篩選既有清單,顯示結果數量;有內容時提供清除按鈕,零結果時說明找不到什麼並給下一步,不要把它做成可任意新增資料的欄位。驗收清單
不要只確認欄位能不能點。
- Label 是否說明搜尋對象?
- 有內容時是否可清除?
- 是否提供搜尋中、結果數量與零結果回饋?
- 搜尋是否不會意外建立新資料?
- 鍵盤焦點與清除操作是否可及?