觸屏開關設計常見嚴重可用性缺陷：標籤「ON/OFF」究竟表示當前狀態還是待執行功能？本文劃清狀態型按鈕與功能型按鈕的本質界限，給出清晰視覺傳達方案。

經典反面教材

某開關藍底白字並列「ON」「OFF」，無任何視覺區分。用戶無法判斷當前是開還關，點擊後會發生什麼。

正面教材：iOS 系統開關

• ON (綠底)：表示當前狀態為開啟，點擊將關閉。
• OFF (灰底)：表示當前狀態為關閉，點擊將開啟。
• 視覺編碼：色彩語義 (綠=啟用/通、灰=禁用/斷) + 滑塊位置 + 文字標籤 三重冗餘編碼，零認知負荷。

按鈕本質二分法

類型	定義	典型案例	視覺關鍵
狀態型	顯示當前狀態，點擊切換至相反狀態	單選按鈕、複選框、開關、鎖定/解鎖	「選中/開啟」態高亮/品牌色，「未選/關閉」態弱化/灰色；滑塊位置指示
功能型	觸發特定動作，不表達持久狀態	播放/暫停、提交/取消、刪除、分享、下載	圖標+文字語義明確；互斥功能可合並為切換按鈕 (播放⇄暫停)，但必須以當前狀態為視覺錨點

合併切換按鈕的視覺傳達鐵律

當將互斥功能 (播放/暫停、登入/登出) 合併為單一按鈕時：

1. 必須以「狀態型」視覺語言呈現：顯示當前狀態，而非下一步動作。
2. 三重編碼保險：圖標變化 + 顏色/填充狀態變化 + 文字標籤變化 (或 Tooltip)。
3. 動畫過渡：狀態切換時平滑動畫強化因果認知。

設計檢查清單

• [ ] 按鈕是狀態型還是功能型？團隊內部定義統一？
• [ ] 視覺上能否在 0.5 秒內無歧義識別當前狀態？
• [ ] 色盲/弱視用戶能否通過形狀/位置/文字辨識？
• [ ] 交互文檔是否標註狀態機邏輯與視覺規範？

「照著葫蘆畫瓢」不懂底層邏輯，必生可用性災難。搞清「狀態 vs 功能」，是交互設計師的基本功。