U.C15 切換按鈕顯示目標模式被讀成當前狀態 — 標籤語意歧義
「顯示目標模式」和「顯示當前模式」是模式切換元件兩種並存的業界慣例,單獨一顆文字按鈕無法讓使用者判斷設計者用的是哪一種 — 驗收時被讀反是結構性風險、不是使用者的誤解。
觀察
書庫管理 app 的書庫畫面左上角有一顆 AppButton.neutral,在簡潔模式下顯示「管理模式」+ 清單圖示、在管理模式下顯示「簡潔模式」+ 網格圖示 — 標籤是切換後的目標模式(library_display_extensions.dart:108-129、toggleDisplayMode())。驗收者在簡潔模式下看到「管理模式」四個字,第一反應是「畫面正處於管理模式」— 把動作標的讀成了狀態指示。
附帶發現:規格(SPEC-006 FR-2.4)定義了專用元件 DisplayModeToggleButton、帶 Tooltip 與 Semantics 無障礙標籤、圖示也與實作不同 — 實作自繪按鈕未使用規格元件,tooltip 與無障礙標籤一併遺失(規格漂移)。
判讀
標籤歧義是結構性的、不是文案問題。播放器的「播放 / 暫停」鍵顯示目標動作、燈光開關顯示現態 — 兩種慣例都存在,使用者無法從單顆按鈕判斷設計者用的是哪種。文字越像名詞(「管理模式」)越容易被讀成狀態;動詞開頭(「切換」「進入」)才有動作語意。
顯示歸顯示、切換歸互動。畫面上的文字承擔「當下狀態」的顯示責任、行為改變透過互動元件觸發 — 兩個責任放在同一顆按鈕的同一段文字上,就是歧義的來源。分離的做法:非互動的狀態指示(「目前:簡潔模式」)+ 動作按鈕(「切換模式」);或改用自帶 on/off 語意的控件(switch、segmented control — 選中位置本身就是狀態顯示)。
不傳達語意的圖示是雜訊。這顆按鈕的圖示隨模式換(清單 / 網格),但圖示既不代表「切換」動作、也無法幫使用者消歧 — 對消歧沒有貢獻的圖示應該移除,保留的圖示要傳達動作語意(如雙向箭頭)。
規格元件未被使用讓配套設計一起消失。規格元件帶的 tooltip 和無障礙標籤本可部分補救歧義(長按提示「切換到管理模式」),自繪實作繞過規格元件時這些配套沒有跟過來。
策略
對每顆模式切換元件問:使用者會把這段文字讀成「我在哪」還是「按了去哪」?兩種讀法都說得通就是歧義、要拆。
拆法選擇:狀態顯示 + 動作按鈕(「切換模式」)適合模式多或狀態重要的場景;switch / segmented control 適合二至三態且切換頻繁的場景;最低成本的補救是把標籤改成動詞句(「切換到管理模式」)— 不動結構、只消動作歧義,代價是現態仍不可見。
實作對照規格元件清單 — 自繪替代規格元件時,把規格元件宣告的配套(tooltip / semantics / 圖示語意)列入 review 檢查。
下一步路由
- 按鈕各狀態傳達的系統訊息 → 按鈕狀態設計
- 書卡動作列的可點性歧義 → U.C18 狀態圖示被當成按鈕
#ux-design #case-study #interaction-feedback #toggle #label-semantics #flutter #mobile