<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Overflow on Tarragon</title><link>https://tarrragon.github.io/blog/tags/overflow/</link><description>Recent content in Overflow on Tarragon</description><generator>Hugo -- gohugo.io</generator><language>zh-TW</language><copyright>Tarragon (CC BY 4.0)</copyright><lastBuildDate>Fri, 17 Jul 2026 00:00:00 +0800</lastBuildDate><atom:link href="https://tarrragon.github.io/blog/tags/overflow/index.xml" rel="self" type="application/rss+xml"/><item><title>U.C16 篩選列截斷被讀成遮蔽 — 水平溢出沒有捲動提示</title><link>https://tarrragon.github.io/blog/ux-design/cases/filter-chips-overflow-no-affordance/</link><pubDate>Fri, 17 Jul 2026 00:00:00 +0800</pubDate><guid>https://tarrragon.github.io/blog/ux-design/cases/filter-chips-overflow-no-affordance/</guid><description>&lt;p>四顆篩選 chip、一顆固定在列尾的重新整理鈕、一條在螢幕邊緣被截斷的可捲動清單 — 驗收回報的是「篩選按鈕被重新整理按鈕遮蔽」。實作上沒有任何重疊：水平溢出的可見性沒被設計，截斷被讀成了遮蔽 — 這張卡談溢出 affordance 為什麼要主動設計。&lt;/p>
&lt;h2 id="觀察">觀察&lt;/h2>
&lt;p>書庫管理 app 的篩選列有四顆 FilterChip（我的書庫 / 電子書 / 實體書 / 借閱書籍）加一顆重新整理鈕。版面實作（&lt;code>library_display_extensions.dart:191-219&lt;/code>）：同一個 Row 內，chips 包在 &lt;code>Expanded &amp;gt; SingleChildScrollView(horizontal)&lt;/code>、重新整理鈕固定在 Row 尾端 — &lt;strong>程式上沒有重疊&lt;/strong>，chips 可水平捲動。&lt;/p>
&lt;p>驗收的讀法完全不同：第四顆 chip 在捲動視窗邊緣被截斷、位置緊貼重新整理鈕，被回報為「篩選按鈕被重新整理按鈕遮蔽」。實作正確、感知錯誤 — 捲動視窗沒有任何 affordance（無漸層遮罩、無箭頭、截斷位置又剛好貼著一顆固定元件），截斷被歸因成遮蔽。&lt;/p>
&lt;h2 id="判讀">判讀&lt;/h2>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>截斷的預設讀法是「壞了」、不是「可以捲」&lt;/strong>。使用者知道可以捲動的前提是畫面給了提示：邊緣漸層遮罩、下一個項目部分露出（刻意讓截斷停在半顆的位置）、方向箭頭。四顆 chip 剛好在視窗邊緣切齊或貼著固定鈕截斷時，連「有更多內容」的訊號都消失。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>截斷位置緊貼固定元件會製造錯誤歸因&lt;/strong>。可捲動區域與固定按鈕同列時，截斷發生在兩者交界 — 使用者看到的是「chip 被 refresh 鈕壓住」。可捲動與固定元件的視覺分隔（間距、分隔線、遮罩）是同列混排的必要配套。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>選項少時溢出本身可以被消除&lt;/strong>。四個篩選選項在多數螢幕寬度下接近放得下 — 換行 wrap、縮短文字、或改成下拉選單 / bottom sheet 都能根本消掉溢出，比補 affordance 更省。溢出處理的選擇順序：先問「能不能不溢出」、再設計溢出的可見性。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>驗收者的誤讀本身是訊號&lt;/strong>。「實作沒有 bug」不能關閉這個 finding — 感知層的錯誤歸因就是 UX 缺口，修的是 affordance、不是修驗收者的理解。&lt;/p>
&lt;/li>
&lt;/ol>
&lt;h2 id="策略">策略&lt;/h2>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>水平清單檢查一句&lt;/strong>：最後一個項目被截斷時，畫面給了什麼「還有更多」的提示？沒有提示就補（漸層 / 半顆露出 / 箭頭 / 捲軸指示 / 溢出計數）或消除溢出（wrap / 選單）。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>可捲動區與固定元件同列時加視覺分隔&lt;/strong>，截斷邊緣與固定元件之間保持可辨識的間距。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>驗收在窄幕裝置跑&lt;/strong> — 溢出類問題在寬幕開發機上經常不出現。&lt;/p>
&lt;/li>
&lt;/ol>
&lt;h2 id="下一步路由">下一步路由&lt;/h2>
&lt;ul>
&lt;li>溢出 affordance 與元件語意的章節整理 → &lt;a href="https://tarrragon.github.io/blog/ux-design/06-interaction-feedback/button-state-design/" data-link-title="按鈕狀態設計：一個按鈕的完整生命週期" data-link-desc="按鈕每種視覺狀態各傳達一種系統訊息 — 設計按鈕互動、無障礙焦點與非同步回饋時的狀態清單依據。">按鈕狀態設計&lt;/a>&lt;/li>
&lt;li>同一條篩選列的選中態對比問題 → &lt;a href="https://tarrragon.github.io/blog/ux-design/cases/selected-chip-contrast-not-paired/" data-link-title="U.C17 選中態換底色不換文字色 — 對比沒有成對設計" data-link-desc="選中的 chip / tab / 按鈕文字看不清楚：選中態是「底色 × 文字色」的成對設計，只指定其中一半、另一半走元件庫預設，組合對比從未被驗證">U.C17 選中態換底色不換文字色&lt;/a>&lt;/li>
&lt;li>同構案例（視覺暗示與實際行為錯位）→ &lt;a href="https://tarrragon.github.io/blog/ux-design/cases/tag-row-touch-target-scope/" data-link-title="U.C8 標籤行只有箭頭可點 — 觸控目標小於視覺單元" data-link-desc="列表行的展開/收合看起來整行可點、實機測試點文字卻無反應時使用。gesture 只掛在尾端箭頭 icon 上、整行的視覺暗示範圍遠大於實際可點區域，使用者體感等同功能壞掉。">U.C8 標籤行只有箭頭可點&lt;/a>&lt;/li>
&lt;/ul></description><content:encoded><![CDATA[<p>四顆篩選 chip、一顆固定在列尾的重新整理鈕、一條在螢幕邊緣被截斷的可捲動清單 — 驗收回報的是「篩選按鈕被重新整理按鈕遮蔽」。實作上沒有任何重疊：水平溢出的可見性沒被設計，截斷被讀成了遮蔽 — 這張卡談溢出 affordance 為什麼要主動設計。</p>
<h2 id="觀察">觀察</h2>
<p>書庫管理 app 的篩選列有四顆 FilterChip（我的書庫 / 電子書 / 實體書 / 借閱書籍）加一顆重新整理鈕。版面實作（<code>library_display_extensions.dart:191-219</code>）：同一個 Row 內，chips 包在 <code>Expanded &gt; SingleChildScrollView(horizontal)</code>、重新整理鈕固定在 Row 尾端 — <strong>程式上沒有重疊</strong>，chips 可水平捲動。</p>
<p>驗收的讀法完全不同：第四顆 chip 在捲動視窗邊緣被截斷、位置緊貼重新整理鈕，被回報為「篩選按鈕被重新整理按鈕遮蔽」。實作正確、感知錯誤 — 捲動視窗沒有任何 affordance（無漸層遮罩、無箭頭、截斷位置又剛好貼著一顆固定元件），截斷被歸因成遮蔽。</p>
<h2 id="判讀">判讀</h2>
<ol>
<li>
<p><strong>截斷的預設讀法是「壞了」、不是「可以捲」</strong>。使用者知道可以捲動的前提是畫面給了提示：邊緣漸層遮罩、下一個項目部分露出（刻意讓截斷停在半顆的位置）、方向箭頭。四顆 chip 剛好在視窗邊緣切齊或貼著固定鈕截斷時，連「有更多內容」的訊號都消失。</p>
</li>
<li>
<p><strong>截斷位置緊貼固定元件會製造錯誤歸因</strong>。可捲動區域與固定按鈕同列時，截斷發生在兩者交界 — 使用者看到的是「chip 被 refresh 鈕壓住」。可捲動與固定元件的視覺分隔（間距、分隔線、遮罩）是同列混排的必要配套。</p>
</li>
<li>
<p><strong>選項少時溢出本身可以被消除</strong>。四個篩選選項在多數螢幕寬度下接近放得下 — 換行 wrap、縮短文字、或改成下拉選單 / bottom sheet 都能根本消掉溢出，比補 affordance 更省。溢出處理的選擇順序：先問「能不能不溢出」、再設計溢出的可見性。</p>
</li>
<li>
<p><strong>驗收者的誤讀本身是訊號</strong>。「實作沒有 bug」不能關閉這個 finding — 感知層的錯誤歸因就是 UX 缺口，修的是 affordance、不是修驗收者的理解。</p>
</li>
</ol>
<h2 id="策略">策略</h2>
<ol>
<li>
<p><strong>水平清單檢查一句</strong>：最後一個項目被截斷時，畫面給了什麼「還有更多」的提示？沒有提示就補（漸層 / 半顆露出 / 箭頭 / 捲軸指示 / 溢出計數）或消除溢出（wrap / 選單）。</p>
</li>
<li>
<p><strong>可捲動區與固定元件同列時加視覺分隔</strong>，截斷邊緣與固定元件之間保持可辨識的間距。</p>
</li>
<li>
<p><strong>驗收在窄幕裝置跑</strong> — 溢出類問題在寬幕開發機上經常不出現。</p>
</li>
</ol>
<h2 id="下一步路由">下一步路由</h2>
<ul>
<li>溢出 affordance 與元件語意的章節整理 → <a href="/blog/ux-design/06-interaction-feedback/button-state-design/" data-link-title="按鈕狀態設計：一個按鈕的完整生命週期" data-link-desc="按鈕每種視覺狀態各傳達一種系統訊息 — 設計按鈕互動、無障礙焦點與非同步回饋時的狀態清單依據。">按鈕狀態設計</a></li>
<li>同一條篩選列的選中態對比問題 → <a href="/blog/ux-design/cases/selected-chip-contrast-not-paired/" data-link-title="U.C17 選中態換底色不換文字色 — 對比沒有成對設計" data-link-desc="選中的 chip / tab / 按鈕文字看不清楚：選中態是「底色 × 文字色」的成對設計，只指定其中一半、另一半走元件庫預設，組合對比從未被驗證">U.C17 選中態換底色不換文字色</a></li>
<li>同構案例（視覺暗示與實際行為錯位）→ <a href="/blog/ux-design/cases/tag-row-touch-target-scope/" data-link-title="U.C8 標籤行只有箭頭可點 — 觸控目標小於視覺單元" data-link-desc="列表行的展開/收合看起來整行可點、實機測試點文字卻無反應時使用。gesture 只掛在尾端箭頭 icon 上、整行的視覺暗示範圍遠大於實際可點區域，使用者體感等同功能壞掉。">U.C8 標籤行只有箭頭可點</a></li>
</ul>
]]></content:encoded></item></channel></rss>