<?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>Toggle on Tarragon</title><link>https://tarrragon.github.io/blog/tags/toggle/</link><description>Recent content in Toggle 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/toggle/index.xml" rel="self" type="application/rss+xml"/><item><title>U.C15 切換按鈕顯示目標模式被讀成當前狀態 — 標籤語意歧義</title><link>https://tarrragon.github.io/blog/ux-design/cases/toggle-button-label-state-ambiguity/</link><pubDate>Fri, 17 Jul 2026 00:00:00 +0800</pubDate><guid>https://tarrragon.github.io/blog/ux-design/cases/toggle-button-label-state-ambiguity/</guid><description>&lt;p>「顯示目標模式」和「顯示當前模式」是模式切換元件兩種並存的業界慣例，單獨一顆文字按鈕無法讓使用者判斷設計者用的是哪一種 — 驗收時被讀反是結構性風險、不是使用者的誤解。&lt;/p>
&lt;h2 id="觀察">觀察&lt;/h2>
&lt;p>書庫管理 app 的書庫畫面左上角有一顆 &lt;code>AppButton.neutral&lt;/code>，在簡潔模式下顯示「管理模式」+ 清單圖示、在管理模式下顯示「簡潔模式」+ 網格圖示 — 標籤是&lt;strong>切換後的目標模式&lt;/strong>（&lt;code>library_display_extensions.dart:108-129&lt;/code>、&lt;code>toggleDisplayMode()&lt;/code>）。驗收者在簡潔模式下看到「管理模式」四個字，第一反應是「畫面正處於管理模式」— 把動作標的讀成了狀態指示。&lt;/p>
&lt;p>附帶發現：規格（SPEC-006 FR-2.4）定義了專用元件 &lt;code>DisplayModeToggleButton&lt;/code>、帶 Tooltip 與 Semantics 無障礙標籤、圖示也與實作不同 — 實作自繪按鈕未使用規格元件，tooltip 與無障礙標籤一併遺失（規格漂移）。&lt;/p>
&lt;h2 id="判讀">判讀&lt;/h2>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>標籤歧義是結構性的、不是文案問題&lt;/strong>。播放器的「播放 / 暫停」鍵顯示目標動作、燈光開關顯示現態 — 兩種慣例都存在，使用者無法從單顆按鈕判斷設計者用的是哪種。文字越像名詞（「管理模式」）越容易被讀成狀態；動詞開頭（「切換」「進入」）才有動作語意。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>顯示歸顯示、切換歸互動&lt;/strong>。畫面上的文字承擔「當下狀態」的顯示責任、行為改變透過互動元件觸發 — 兩個責任放在同一顆按鈕的同一段文字上，就是歧義的來源。分離的做法：非互動的狀態指示（「目前：簡潔模式」）+ 動作按鈕（「切換模式」）；或改用自帶 on/off 語意的控件（switch、segmented control — 選中位置本身就是狀態顯示）。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>不傳達語意的圖示是雜訊&lt;/strong>。這顆按鈕的圖示隨模式換（清單 / 網格），但圖示既不代表「切換」動作、也無法幫使用者消歧 — 對消歧沒有貢獻的圖示應該移除，保留的圖示要傳達動作語意（如雙向箭頭）。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>規格元件未被使用讓配套設計一起消失&lt;/strong>。規格元件帶的 tooltip 和無障礙標籤本可部分補救歧義（長按提示「切換到管理模式」），自繪實作繞過規格元件時這些配套沒有跟過來。&lt;/p>
&lt;/li>
&lt;/ol>
&lt;h2 id="策略">策略&lt;/h2>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>對每顆模式切換元件問&lt;/strong>：使用者會把這段文字讀成「我在哪」還是「按了去哪」？兩種讀法都說得通就是歧義、要拆。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>拆法選擇&lt;/strong>：狀態顯示 + 動作按鈕（「切換模式」）適合模式多或狀態重要的場景；switch / segmented control 適合二至三態且切換頻繁的場景；最低成本的補救是把標籤改成動詞句（「切換到管理模式」）— 不動結構、只消動作歧義，代價是現態仍不可見。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>實作對照規格元件清單&lt;/strong> — 自繪替代規格元件時，把規格元件宣告的配套（tooltip / semantics / 圖示語意）列入 review 檢查。&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/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/status-icon-mistaken-for-button/" data-link-title="U.C18 狀態圖示被當成按鈕點 — 非互動指示與動作按鈕同形" data-link-desc="使用者回報「某個按鈕點了沒反應」、查程式發現那不是按鈕時使用。非互動的狀態圖示與動作按鈕同列混排且形態近似（描邊 vs 實心），使用者無法區分可點性">U.C18 狀態圖示被當成按鈕&lt;/a>&lt;/li>
&lt;/ul></description><content:encoded><![CDATA[<p>「顯示目標模式」和「顯示當前模式」是模式切換元件兩種並存的業界慣例，單獨一顆文字按鈕無法讓使用者判斷設計者用的是哪一種 — 驗收時被讀反是結構性風險、不是使用者的誤解。</p>
<h2 id="觀察">觀察</h2>
<p>書庫管理 app 的書庫畫面左上角有一顆 <code>AppButton.neutral</code>，在簡潔模式下顯示「管理模式」+ 清單圖示、在管理模式下顯示「簡潔模式」+ 網格圖示 — 標籤是<strong>切換後的目標模式</strong>（<code>library_display_extensions.dart:108-129</code>、<code>toggleDisplayMode()</code>）。驗收者在簡潔模式下看到「管理模式」四個字，第一反應是「畫面正處於管理模式」— 把動作標的讀成了狀態指示。</p>
<p>附帶發現：規格（SPEC-006 FR-2.4）定義了專用元件 <code>DisplayModeToggleButton</code>、帶 Tooltip 與 Semantics 無障礙標籤、圖示也與實作不同 — 實作自繪按鈕未使用規格元件，tooltip 與無障礙標籤一併遺失（規格漂移）。</p>
<h2 id="判讀">判讀</h2>
<ol>
<li>
<p><strong>標籤歧義是結構性的、不是文案問題</strong>。播放器的「播放 / 暫停」鍵顯示目標動作、燈光開關顯示現態 — 兩種慣例都存在，使用者無法從單顆按鈕判斷設計者用的是哪種。文字越像名詞（「管理模式」）越容易被讀成狀態；動詞開頭（「切換」「進入」）才有動作語意。</p>
</li>
<li>
<p><strong>顯示歸顯示、切換歸互動</strong>。畫面上的文字承擔「當下狀態」的顯示責任、行為改變透過互動元件觸發 — 兩個責任放在同一顆按鈕的同一段文字上，就是歧義的來源。分離的做法：非互動的狀態指示（「目前：簡潔模式」）+ 動作按鈕（「切換模式」）；或改用自帶 on/off 語意的控件（switch、segmented control — 選中位置本身就是狀態顯示）。</p>
</li>
<li>
<p><strong>不傳達語意的圖示是雜訊</strong>。這顆按鈕的圖示隨模式換（清單 / 網格），但圖示既不代表「切換」動作、也無法幫使用者消歧 — 對消歧沒有貢獻的圖示應該移除，保留的圖示要傳達動作語意（如雙向箭頭）。</p>
</li>
<li>
<p><strong>規格元件未被使用讓配套設計一起消失</strong>。規格元件帶的 tooltip 和無障礙標籤本可部分補救歧義（長按提示「切換到管理模式」），自繪實作繞過規格元件時這些配套沒有跟過來。</p>
</li>
</ol>
<h2 id="策略">策略</h2>
<ol>
<li>
<p><strong>對每顆模式切換元件問</strong>：使用者會把這段文字讀成「我在哪」還是「按了去哪」？兩種讀法都說得通就是歧義、要拆。</p>
</li>
<li>
<p><strong>拆法選擇</strong>：狀態顯示 + 動作按鈕（「切換模式」）適合模式多或狀態重要的場景；switch / segmented control 適合二至三態且切換頻繁的場景；最低成本的補救是把標籤改成動詞句（「切換到管理模式」）— 不動結構、只消動作歧義，代價是現態仍不可見。</p>
</li>
<li>
<p><strong>實作對照規格元件清單</strong> — 自繪替代規格元件時，把規格元件宣告的配套（tooltip / semantics / 圖示語意）列入 review 檢查。</p>
</li>
</ol>
<h2 id="下一步路由">下一步路由</h2>
<ul>
<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/status-icon-mistaken-for-button/" data-link-title="U.C18 狀態圖示被當成按鈕點 — 非互動指示與動作按鈕同形" data-link-desc="使用者回報「某個按鈕點了沒反應」、查程式發現那不是按鈕時使用。非互動的狀態圖示與動作按鈕同列混排且形態近似（描邊 vs 實心），使用者無法區分可點性">U.C18 狀態圖示被當成按鈕</a></li>
</ul>
]]></content:encoded></item></channel></rss>