四顆篩選 chip、一顆固定在列尾的重新整理鈕、一條在螢幕邊緣被截斷的可捲動清單 — 驗收回報的是「篩選按鈕被重新整理按鈕遮蔽」。實作上沒有任何重疊：水平溢出的可見性沒被設計，截斷被讀成了遮蔽 — 這張卡談溢出 affordance 為什麼要主動設計。

觀察

書庫管理 app 的篩選列有四顆 FilterChip（我的書庫 / 電子書 / 實體書 / 借閱書籍）加一顆重新整理鈕。版面實作（library_display_extensions.dart:191-219）：同一個 Row 內，chips 包在 Expanded > SingleChildScrollView(horizontal)、重新整理鈕固定在 Row 尾端 — 程式上沒有重疊，chips 可水平捲動。

驗收的讀法完全不同：第四顆 chip 在捲動視窗邊緣被截斷、位置緊貼重新整理鈕，被回報為「篩選按鈕被重新整理按鈕遮蔽」。實作正確、感知錯誤 — 捲動視窗沒有任何 affordance（無漸層遮罩、無箭頭、截斷位置又剛好貼著一顆固定元件），截斷被歸因成遮蔽。

判讀

  1. 截斷的預設讀法是「壞了」、不是「可以捲」。使用者知道可以捲動的前提是畫面給了提示：邊緣漸層遮罩、下一個項目部分露出（刻意讓截斷停在半顆的位置）、方向箭頭。四顆 chip 剛好在視窗邊緣切齊或貼著固定鈕截斷時，連「有更多內容」的訊號都消失。

  2. 截斷位置緊貼固定元件會製造錯誤歸因。可捲動區域與固定按鈕同列時，截斷發生在兩者交界 — 使用者看到的是「chip 被 refresh 鈕壓住」。可捲動與固定元件的視覺分隔（間距、分隔線、遮罩）是同列混排的必要配套。

  3. 選項少時溢出本身可以被消除。四個篩選選項在多數螢幕寬度下接近放得下 — 換行 wrap、縮短文字、或改成下拉選單 / bottom sheet 都能根本消掉溢出，比補 affordance 更省。溢出處理的選擇順序：先問「能不能不溢出」、再設計溢出的可見性。

  4. 驗收者的誤讀本身是訊號。「實作沒有 bug」不能關閉這個 finding — 感知層的錯誤歸因就是 UX 缺口，修的是 affordance、不是修驗收者的理解。

策略

  1. 水平清單檢查一句：最後一個項目被截斷時，畫面給了什麼「還有更多」的提示？沒有提示就補（漸層 / 半顆露出 / 箭頭 / 捲軸指示 / 溢出計數）或消除溢出（wrap / 選單）。

  2. 可捲動區與固定元件同列時加視覺分隔，截斷邊緣與固定元件之間保持可辨識的間距。

  3. 驗收在窄幕裝置跑 — 溢出類問題在寬幕開發機上經常不出現。

下一步路由