書庫管理 App 的標籤管理頁需要展開/收合二級標籤。每一行的視覺設計(整行反白、尾端箭頭圖示)暗示整行可點,但 gesture 只掛在尾端的 IconButton 上。

觀察

實機測試路徑:標籤管理頁 → 點擊二級標籤行的標籤名稱位置 → 無反應。點擊尾端箭頭才能展開/收合。使用者連續點同一行不同位置 2-3 次後才命中箭頭,體感等同功能壞掉。

項目修復前修復後(W1-087)
gesture 掛載點尾端 IconButton外層 InkWellonTap(與箭頭同一 callback)
可點範圍箭頭 icon 區域整行
內層箭頭唯一 gesture獨立 gesture 區域,點箭頭由它處理、不被外層重複觸發
視覺 vs 實際視覺暗示整行可點、實際只有箭頭(範圍錯位)視覺暗示與實際可點範圍一致

判讀

  1. 範圍錯位與尺寸底線是兩個獨立問題。箭頭圖示本身可能已達 48x48dp 最小觸控目標底線——尺寸合格不代表範圍正確。使用者的預期可點範圍由視覺單元決定(整行),不由 icon 尺寸決定。這個案例的根因是範圍錯位、不是尺寸不足。

  2. gesture 掛載點 = 觸控目標的邊界。列表行的主要操作(展開/收合)以整行為觸控目標;行內若有次要操作(刪除、更多選單),保留為獨立的內層 gesture 區域。程式碼層的掃描訊號是 gesture 只掛在視覺單元的子元件(trailing icon、小圖示)而非整個單元容器。

  3. 實機測試是唯一揭露管道。靜態 review 和單元測試都不會問「使用者會點行的哪個位置」。可用性測試觀察到「使用者重複點擊同一行」或觸控熱點分析顯示大量落在 gesture 區域外的點擊,才暴露這個缺口。

策略

  1. 對每個可互動視覺單元問一句:使用者最直覺點的位置,在 gesture 區域內嗎?設計審查時逐一檢查,列表行特別容易錯。

  2. 程式碼掃描訊號:gesture 只掛在視覺單元的子元件(trailingleading)而非整個 row/tile 容器。grep onTap 掛載點與視覺容器的層級關係。

  3. 外層 gesture 與內層 gesture 共存模式:行級 InkWell 掛主要操作、子元件掛次要操作,Flutter 的 gesture arena 讓兩者互不干擾。

下一步路由