大家在用 GitHub 的安全設定頁面時，有沒有覺得腦袋卡卡的？其實這不是你的錯，是因為這個畫面同時混用了兩套完全不同的設計邏輯，讓大腦在閱讀時產生了很重的負擔。
為什麼這個介面會讓人「大腦當機」？
簡單來說，這個畫面存在著兩種互相衝突的規則：
- 第一種是「命令模式」(Verb-based)，也就是畫面上看到的紅色或白色按鈕。這種按鈕代表的是「動作」，它在告訴你按下去之後會發生什麼事。例如標籤寫著 Disable ，它的意思是：「如果你點這裡，我就會幫你關掉這個功能。」
- 第二種是「狀態模式」(State-based)，通常出現在下拉選單裡面。它顯示的是這項功能目前的「屬性」。例如選單顯示 Enabled ，它的意思是：「這個功能現在的狀態是開啟的。」
當這兩種邏輯排在一起時，使用者就必須一直切換腦袋：這一行是在跟我說「現在是什麼狀態」，另一行卻是在叫我「下指令」。
為什麼強大的 GitHub 會出現這種混亂的設計？
這通常不是刻意設計成這樣的，而是功能慢慢累積出來的「歷史共業」：
早期有些功能只有開跟關兩種選擇， GitHub 喜歡用按鈕來處理，尤其是紅色的按鈕可以當作一種警告，提醒你關掉安全功能是有風險的。
後來功能變複雜了，有些設定不只是開與關，可能還有好幾種不同的選項。這時候「按鈕」就不夠用了，只好改用「下拉選單」來呈現。
結果當 GitHub 把這些新舊功能塞進同一個清單時，就出現了按鈕（動作導向）（Action-oriented）與下拉框（狀態導向）並排的尷尬景象。
| 元素類型 | 邏輯屬性 | 核心問句 | 優點 | 缺點 |
| 按鈕 | 動作導向 | 「我要執行什麼動作？」 | 強調「改變」的瞬間，紅色具警示感。 | 使用者必須倒推目前的狀態。 |
| 下拉框 | 狀態導向 | 「現在是什麼樣子？」 | 直觀、符合資料庫欄位的邏輯。 | 較難一眼看出哪些操作具有危險性。 |
更好的設計應該長什麼樣子？
在現代的介面設計準則中，這類設定通常建議統一使用「帶有標籤的開關」。
- 狀態顯示：左邊文字永遠固定顯示 Enabled 或 Disabled ，代表目前的狀態。
- 操作方式：右邊用一個撥桿開關，用顏色（如綠色與灰色）來區分開關。
這樣使用者一眼望過去，就能立刻知道哪些功能有開、哪些沒開，不需要再花腦袋去推算按鈕文字的意思。
總結一下這堂 UX 課
你感受到的不協調是完全正確的！這在介面設計上確實是一個反面教材。 GitHub 為了兼顧簡單功能的快速切換，又想保留複雜功能的擴充性，最後犧牲了視覺邏輯的一致性。
下次遇到這種介面，記得把按鈕當成「遙控器上的按鍵」（按 Off 就會關），而把下拉選單當成「儀表板上的燈號」就對了。
你在使用其他知名網站時，也有遇過這種讓人困惑的設計嗎？歡迎在下面留言分享你的發現！
#UXDesign #使用者體驗 #GitHub #介面設計 #軟體開發 #產品設計 #設計思考
Facebook網友回應