<?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>Icon-Semantics on Tarragon</title><link>https://tarrragon.github.io/blog/tags/icon-semantics/</link><description>Recent content in Icon-Semantics 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/icon-semantics/index.xml" rel="self" type="application/rss+xml"/><item><title>U.C18 狀態圖示被當成按鈕點 — 非互動指示與動作按鈕同形</title><link>https://tarrragon.github.io/blog/ux-design/cases/status-icon-mistaken-for-button/</link><pubDate>Fri, 17 Jul 2026 00:00:00 +0800</pubDate><guid>https://tarrragon.github.io/blog/ux-design/cases/status-icon-mistaken-for-button/</guid><description>&lt;p>這是 &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>的鏡像案例：U.C8 是可點範圍小於視覺暗示、本案是不可點元素帶著可點暗示。非互動的狀態指示與動作按鈕排在同一列、又用近似圖示時，使用者的預設是「整列都可以點」— 點到狀態圖示的「沒反應」會被讀成功能壞掉。&lt;/p>
&lt;h2 id="觀察">觀察&lt;/h2>
&lt;p>書庫管理 app 書卡的 trailing 區（列表項尾端的元件區）是一個 Row 三格（&lt;code>library_display_extensions.dart:432-448&lt;/code>）：&lt;/p>
&lt;table>
 &lt;thead>
 &lt;tr>
 &lt;th>格位&lt;/th>
 &lt;th>元件&lt;/th>
 &lt;th>可點性&lt;/th>
 &lt;/tr>
 &lt;/thead>
 &lt;tbody>
 &lt;tr>
 &lt;td>左&lt;/td>
 &lt;td>&lt;code>Icons.label_outline&lt;/code> 按鈕&lt;/td>
 &lt;td>可點 — 開標籤編輯 bottom sheet&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>中&lt;/td>
 &lt;td>&lt;code>Icons.menu_book_outlined&lt;/code> 按鈕&lt;/td>
 &lt;td>可點 — push 書籍補充查詢頁（整頁流程）&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>右&lt;/td>
 &lt;td>來源類型指示：實體書顯示 &lt;code>Icons.menu_book&lt;/code>&lt;/td>
 &lt;td>&lt;strong>不可點&lt;/strong> — 純 Icon、無 handler、無 tooltip&lt;/td>
 &lt;/tr>
 &lt;/tbody>
&lt;/table>
&lt;p>驗收回報兩件事：「右邊兩個按鈕的圖示重複了」「最右邊的按鈕點了沒反應」。程式碼事實：中格是描邊 menu-book 的&lt;strong>按鈕&lt;/strong>、右格是實心 menu-book 的&lt;strong>狀態圖示&lt;/strong>（實體書的來源標記）— 描邊與實心的差異太細，兩者被讀成重複的兩顆按鈕，其中一顆「壞了」。&lt;/p>
&lt;p>管理模式下右格換成 Checkbox — 選取控制與兩顆動作圖示混排在同一個 trailing 列，不是獨立的勾選欄。驗收另回報「勾選框沒有靠右對齊」；程式上 checkbox 恆為列末位、緊貼 trailing 邊界，視覺上不靠右的成因（padding / 卡片內距）待 app 端重查 — 混排本身則是可確認的設計層議題。&lt;/p>
&lt;h2 id="判讀">判讀&lt;/h2>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>同列混排讓可點性預設擴散&lt;/strong>。一列裡有兩顆按鈕時，使用者掃視的預設是「這一列是動作區、全部可點」— 混進去的狀態指示自動繼承這個預設。指示「沒反應」不會被讀成「這是標記」，會被讀成「按鈕壞了」（體感等同 &lt;a href="https://tarrragon.github.io/blog/ux-design/cases/export-button-zero-feedback/" data-link-title="U.C5 匯出按鈕按下零回饋 — 狀態機完備但 UI 沒接線" data-link-desc="Flutter app 匯出設定頁的確認匯出按鈕 onPressed 是空 callback，按下畫面毫無變化 — 使用者無法分辨匯出成功、進行中、還是功能根本沒做。ViewModel 的 idle/inProgress/completed/failed 狀態機早已完備，缺的只是頁面接線與三層回饋">U.C5 匯出按鈕零回饋&lt;/a>）。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>描邊 vs 實心不是可靠的互動性訊號&lt;/strong>。同一個圖形的 outline / filled 變體在小尺寸下幾乎不可分，而且業界對「哪個代表可點」沒有慣例。可點性要用更強的形態訊號：按鈕容器（邊框 / 底色 / ripple）、或把指示改成明顯非按鈕的形態（文字 chip、彩色圓點）。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>圖示語意撞名是第二層問題&lt;/strong>。中格按鈕的 menu-book 圖示想表達「查書籍資料」、右格指示的 menu-book 想表達「實體書」— 同一個圖形承載兩個語意，即使解決了可點性、語意混淆仍在。圖示選擇要全畫面去重。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>選取控制與動作按鈕混排增加誤觸成本&lt;/strong>。批次勾選的操作是「沿一條垂直線往下點」— checkbox 與兩顆動作圖示同列時，勾選目標緊鄰著會觸發導航或 bottom sheet 的按鈕，動線上每一步都帶著誤觸風險。獨立成與動作列分開的勾選欄，批次動線才乾淨。&lt;/p>
&lt;/li>
&lt;/ol>
&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>：同一個圖形只承載一個語意；狀態指示與動作按鈕禁用同形圖示。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>選取控制（checkbox）獨立成與動作列分開的固定欄&lt;/strong>（LTR 慣例放尾端、iOS 編輯模式放前端 — 關鍵是單一對齊軸、不是左右），不與動作圖示混排 — 對齊軸就是批次操作的動線。&lt;/p>
&lt;/li>
&lt;/ol>
&lt;h2 id="下一步路由">下一步路由&lt;/h2>
&lt;ul>
&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;li>按鈕的可辨識性要求 → &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/toggle-button-label-state-ambiguity/" data-link-title="U.C15 切換按鈕顯示目標模式被讀成當前狀態 — 標籤語意歧義" data-link-desc="模式切換按鈕的文字被使用者讀成「現在的狀態」而非「按了會去哪」— 單顆文字按鈕無法自證標籤是現態還是目標，歧義是結構性的，解法是把狀態顯示與切換動作的責任拆開">U.C15 切換按鈕標籤被讀成當前狀態&lt;/a>&lt;/li>
&lt;/ul></description><content:encoded><![CDATA[<p>這是 <a href="/blog/ux-design/cases/tag-row-touch-target-scope/" data-link-title="U.C8 標籤行只有箭頭可點 — 觸控目標小於視覺單元" data-link-desc="列表行的展開/收合看起來整行可點、實機測試點文字卻無反應時使用。gesture 只掛在尾端箭頭 icon 上、整行的視覺暗示範圍遠大於實際可點區域，使用者體感等同功能壞掉。">U.C8 標籤行只有箭頭可點</a>的鏡像案例：U.C8 是可點範圍小於視覺暗示、本案是不可點元素帶著可點暗示。非互動的狀態指示與動作按鈕排在同一列、又用近似圖示時，使用者的預設是「整列都可以點」— 點到狀態圖示的「沒反應」會被讀成功能壞掉。</p>
<h2 id="觀察">觀察</h2>
<p>書庫管理 app 書卡的 trailing 區（列表項尾端的元件區）是一個 Row 三格（<code>library_display_extensions.dart:432-448</code>）：</p>
<table>
  <thead>
      <tr>
          <th>格位</th>
          <th>元件</th>
          <th>可點性</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>左</td>
          <td><code>Icons.label_outline</code> 按鈕</td>
          <td>可點 — 開標籤編輯 bottom sheet</td>
      </tr>
      <tr>
          <td>中</td>
          <td><code>Icons.menu_book_outlined</code> 按鈕</td>
          <td>可點 — push 書籍補充查詢頁（整頁流程）</td>
      </tr>
      <tr>
          <td>右</td>
          <td>來源類型指示：實體書顯示 <code>Icons.menu_book</code></td>
          <td><strong>不可點</strong> — 純 Icon、無 handler、無 tooltip</td>
      </tr>
  </tbody>
</table>
<p>驗收回報兩件事：「右邊兩個按鈕的圖示重複了」「最右邊的按鈕點了沒反應」。程式碼事實：中格是描邊 menu-book 的<strong>按鈕</strong>、右格是實心 menu-book 的<strong>狀態圖示</strong>（實體書的來源標記）— 描邊與實心的差異太細，兩者被讀成重複的兩顆按鈕，其中一顆「壞了」。</p>
<p>管理模式下右格換成 Checkbox — 選取控制與兩顆動作圖示混排在同一個 trailing 列，不是獨立的勾選欄。驗收另回報「勾選框沒有靠右對齊」；程式上 checkbox 恆為列末位、緊貼 trailing 邊界，視覺上不靠右的成因（padding / 卡片內距）待 app 端重查 — 混排本身則是可確認的設計層議題。</p>
<h2 id="判讀">判讀</h2>
<ol>
<li>
<p><strong>同列混排讓可點性預設擴散</strong>。一列裡有兩顆按鈕時，使用者掃視的預設是「這一列是動作區、全部可點」— 混進去的狀態指示自動繼承這個預設。指示「沒反應」不會被讀成「這是標記」，會被讀成「按鈕壞了」（體感等同 <a href="/blog/ux-design/cases/export-button-zero-feedback/" data-link-title="U.C5 匯出按鈕按下零回饋 — 狀態機完備但 UI 沒接線" data-link-desc="Flutter app 匯出設定頁的確認匯出按鈕 onPressed 是空 callback，按下畫面毫無變化 — 使用者無法分辨匯出成功、進行中、還是功能根本沒做。ViewModel 的 idle/inProgress/completed/failed 狀態機早已完備，缺的只是頁面接線與三層回饋">U.C5 匯出按鈕零回饋</a>）。</p>
</li>
<li>
<p><strong>描邊 vs 實心不是可靠的互動性訊號</strong>。同一個圖形的 outline / filled 變體在小尺寸下幾乎不可分，而且業界對「哪個代表可點」沒有慣例。可點性要用更強的形態訊號：按鈕容器（邊框 / 底色 / ripple）、或把指示改成明顯非按鈕的形態（文字 chip、彩色圓點）。</p>
</li>
<li>
<p><strong>圖示語意撞名是第二層問題</strong>。中格按鈕的 menu-book 圖示想表達「查書籍資料」、右格指示的 menu-book 想表達「實體書」— 同一個圖形承載兩個語意，即使解決了可點性、語意混淆仍在。圖示選擇要全畫面去重。</p>
</li>
<li>
<p><strong>選取控制與動作按鈕混排增加誤觸成本</strong>。批次勾選的操作是「沿一條垂直線往下點」— checkbox 與兩顆動作圖示同列時，勾選目標緊鄰著會觸發導航或 bottom sheet 的按鈕，動線上每一步都帶著誤觸風險。獨立成與動作列分開的勾選欄，批次動線才乾淨。</p>
</li>
</ol>
<h2 id="策略">策略</h2>
<ol>
<li>
<p><strong>審查每一列混排的元件問一句</strong>：這一列哪些可點、哪些不可點，使用者分得出來嗎？分不出來就把指示改形態（文字 chip / 圓點）或移出動作列。</p>
</li>
<li>
<p><strong>圖示全畫面去重</strong>：同一個圖形只承載一個語意；狀態指示與動作按鈕禁用同形圖示。</p>
</li>
<li>
<p><strong>選取控制（checkbox）獨立成與動作列分開的固定欄</strong>（LTR 慣例放尾端、iOS 編輯模式放前端 — 關鍵是單一對齊軸、不是左右），不與動作圖示混排 — 對齊軸就是批次操作的動線。</p>
</li>
</ol>
<h2 id="下一步路由">下一步路由</h2>
<ul>
<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>
<li>按鈕的可辨識性要求 → <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/toggle-button-label-state-ambiguity/" data-link-title="U.C15 切換按鈕顯示目標模式被讀成當前狀態 — 標籤語意歧義" data-link-desc="模式切換按鈕的文字被使用者讀成「現在的狀態」而非「按了會去哪」— 單顆文字按鈕無法自證標籤是現態還是目標，歧義是結構性的，解法是把狀態顯示與切換動作的責任拆開">U.C15 切換按鈕標籤被讀成當前狀態</a></li>
</ul>
]]></content:encoded></item></channel></rss>