60 秒決策
先確認使用者要完成的事。
適合使用
- 使用者要在同一個尺度選擇最低與最高範圍，例如價格或預算。
- 兩端值之間的關係比單一數值更重要。
不適合使用
- 需要輸入精確、不規律的兩個數字。
- 最小與最大值沒有共同尺度或數量級差異太大。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
兩端數字必須同時可見
不要要求使用者用兩個拇指的位置猜目前範圍。
最小不能越過最大
控制規則應阻止交叉或清楚處理交換結果。
提供精確替代方案
篩選可用滑桿快速調整，但預算等高精確情境應保留數字輸入。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
預設範圍
明確顯示最低、最高與完整尺度。
調整最小值
最小值靠近最大值時，不能越過或造成難以理解的交叉。
調整最大值
最大值改變後，兩端數字與視覺範圍同步更新。
邊界值
到達完整範圍兩端時，仍清楚顯示現在篩選了什麼。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
活動預算範圍
先觀察：兩個滑塊、最小值與最大值如何保持一致。
操作：拖曳兩端控制，嘗試讓最小值超過最大值。
預期結果：範圍不會反轉，兩端金額始終可見。
可操作 Demo
活動預算範圍
範圍 0 至 200,000，每次調整 5,000；兩端數字會同步更新。
目前活動預算：NT$ 30,000 至 80,000。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立「活動預算範圍」Range Slider，範圍為 0 到 200000，步進 5000。清楚顯示目前最低與最高金額，不能讓最小值大於最大值；也提供可精確輸入的替代方式。驗收清單
不要只確認欄位能不能點。
- 最低與最高值是否始終可見？
- 最小值是否無法大於最大值？
- 完整範圍與步進是否說明清楚？
- 是否提供精確輸入的替代控制？
- 手機上兩個控制是否容易分別拖曳？