這是 U.C8 標籤行只有箭頭可點的鏡像案例:U.C8 是可點範圍小於視覺暗示、本案是不可點元素帶著可點暗示。非互動的狀態指示與動作按鈕排在同一列、又用近似圖示時,使用者的預設是「整列都可以點」— 點到狀態圖示的「沒反應」會被讀成功能壞掉。

觀察

書庫管理 app 書卡的 trailing 區(列表項尾端的元件區)是一個 Row 三格(library_display_extensions.dart:432-448):

格位元件可點性
Icons.label_outline 按鈕可點 — 開標籤編輯 bottom sheet
Icons.menu_book_outlined 按鈕可點 — push 書籍補充查詢頁(整頁流程)
來源類型指示:實體書顯示 Icons.menu_book不可點 — 純 Icon、無 handler、無 tooltip

驗收回報兩件事:「右邊兩個按鈕的圖示重複了」「最右邊的按鈕點了沒反應」。程式碼事實:中格是描邊 menu-book 的按鈕、右格是實心 menu-book 的狀態圖示(實體書的來源標記)— 描邊與實心的差異太細,兩者被讀成重複的兩顆按鈕,其中一顆「壞了」。

管理模式下右格換成 Checkbox — 選取控制與兩顆動作圖示混排在同一個 trailing 列,不是獨立的勾選欄。驗收另回報「勾選框沒有靠右對齊」;程式上 checkbox 恆為列末位、緊貼 trailing 邊界,視覺上不靠右的成因(padding / 卡片內距)待 app 端重查 — 混排本身則是可確認的設計層議題。

判讀

  1. 同列混排讓可點性預設擴散。一列裡有兩顆按鈕時,使用者掃視的預設是「這一列是動作區、全部可點」— 混進去的狀態指示自動繼承這個預設。指示「沒反應」不會被讀成「這是標記」,會被讀成「按鈕壞了」(體感等同 U.C5 匯出按鈕零回饋)。

  2. 描邊 vs 實心不是可靠的互動性訊號。同一個圖形的 outline / filled 變體在小尺寸下幾乎不可分,而且業界對「哪個代表可點」沒有慣例。可點性要用更強的形態訊號:按鈕容器(邊框 / 底色 / ripple)、或把指示改成明顯非按鈕的形態(文字 chip、彩色圓點)。

  3. 圖示語意撞名是第二層問題。中格按鈕的 menu-book 圖示想表達「查書籍資料」、右格指示的 menu-book 想表達「實體書」— 同一個圖形承載兩個語意,即使解決了可點性、語意混淆仍在。圖示選擇要全畫面去重。

  4. 選取控制與動作按鈕混排增加誤觸成本。批次勾選的操作是「沿一條垂直線往下點」— checkbox 與兩顆動作圖示同列時,勾選目標緊鄰著會觸發導航或 bottom sheet 的按鈕,動線上每一步都帶著誤觸風險。獨立成與動作列分開的勾選欄,批次動線才乾淨。

策略

  1. 審查每一列混排的元件問一句:這一列哪些可點、哪些不可點,使用者分得出來嗎?分不出來就把指示改形態(文字 chip / 圓點)或移出動作列。

  2. 圖示全畫面去重:同一個圖形只承載一個語意;狀態指示與動作按鈕禁用同形圖示。

  3. 選取控制(checkbox)獨立成與動作列分開的固定欄(LTR 慣例放尾端、iOS 編輯模式放前端 — 關鍵是單一對齊軸、不是左右),不與動作圖示混排 — 對齊軸就是批次操作的動線。

下一步路由