U.C8 標籤行只有箭頭可點 — 觸控目標小於視覺單元
書庫管理 App 的標籤管理頁需要展開/收合二級標籤。每一行的視覺設計(整行反白、尾端箭頭圖示)暗示整行可點,但 gesture 只掛在尾端的 IconButton 上。
觀察
實機測試路徑:標籤管理頁 → 點擊二級標籤行的標籤名稱位置 → 無反應。點擊尾端箭頭才能展開/收合。使用者連續點同一行不同位置 2-3 次後才命中箭頭,體感等同功能壞掉。
| 項目 | 修復前 | 修復後(W1-087) |
|---|---|---|
| gesture 掛載點 | 尾端 IconButton | 外層 InkWell 的 onTap(與箭頭同一 callback) |
| 可點範圍 | 箭頭 icon 區域 | 整行 |
| 內層箭頭 | 唯一 gesture | 獨立 gesture 區域,點箭頭由它處理、不被外層重複觸發 |
| 視覺 vs 實際 | 視覺暗示整行可點、實際只有箭頭(範圍錯位) | 視覺暗示與實際可點範圍一致 |
判讀
範圍錯位與尺寸底線是兩個獨立問題。箭頭圖示本身可能已達 48x48dp 最小觸控目標底線——尺寸合格不代表範圍正確。使用者的預期可點範圍由視覺單元決定(整行),不由 icon 尺寸決定。這個案例的根因是範圍錯位、不是尺寸不足。
gesture 掛載點 = 觸控目標的邊界。列表行的主要操作(展開/收合)以整行為觸控目標;行內若有次要操作(刪除、更多選單),保留為獨立的內層 gesture 區域。程式碼層的掃描訊號是 gesture 只掛在視覺單元的子元件(trailing icon、小圖示)而非整個單元容器。
實機測試是唯一揭露管道。靜態 review 和單元測試都不會問「使用者會點行的哪個位置」。可用性測試觀察到「使用者重複點擊同一行」或觸控熱點分析顯示大量落在 gesture 區域外的點擊,才暴露這個缺口。
策略
對每個可互動視覺單元問一句:使用者最直覺點的位置,在 gesture 區域內嗎?設計審查時逐一檢查,列表行特別容易錯。
程式碼掃描訊號:gesture 只掛在視覺單元的子元件(
trailing、leading)而非整個 row/tile 容器。greponTap掛載點與視覺容器的層級關係。外層 gesture 與內層 gesture 共存模式:行級
InkWell掛主要操作、子元件掛次要操作,Flutter 的 gesture arena 讓兩者互不干擾。
下一步路由
- 觸控目標的尺寸底線與範圍對齊概念 → Touch Target
- 點擊後的三層回饋(本案修的是回饋之前的問題)→ 互動回饋三層模型
- 類似案例(回饋缺失)→ U.C5 匯出按鈕零回饋
- 鏡像案例(不可點元素帶著可點暗示)→ U.C18 狀態圖示被當成按鈕
#ux-design #case-study #touch-target #interaction-feedback #flutter #mobile