萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 程式設計 >  >> 網頁製作 >> 互動設計

UI 中「狀態」與「動作」的表達邏輯:從物理開關到數字界面的認知對齊

按鈕到底顯示「當前狀態」還是「待執行動作」?這個困擾設計師數十年的問題,作者通過物理世界與數字界面的對比研究,給出四種處理策略的適用場景判斷框架。

「啟用/停用」按鈕:到底是狀態還是動作?歧義極強

核心定義

  • 動作:有目的、指向對象的運動,促使狀態改變。
  • 狀態:人/事物表現出的形態,動作的結果。
  • 關係:動作→狀態改變;新狀態→成為下一動作前提。

物理世界的教科書級案例

1. 單控燈開關

按下一邊亮、另一邊滅。無標識也無妨:試錯成本極低,即時反饋(亮/滅)即狀態顯示。

2. iPod HOLD 開關

撥到 HOLD 端露出紅條,另一端無色。用顏色強隱喻「危險/鎖定」狀態,零認知負擔。

3. 顯示器電源鍵

凸起按鈕暗示「可按」(動作),背景燈亮/滅顯示開/關(狀態)。動態與靜態視覺通道分離,互不干擾。

數字界面四種處理模式

策略適用場景經典案例
1. 狀態動作分離顯示歧義成本高、空間允許賬戶管理列表:狀態列+操作列分欄(圖9)
2. 忽略狀態、突出動作執行後狀態可直接感知播放/暫停鍵(圖5)、視圖切換(圖6)——結果即反饋
3. 忽略動作、突出狀態動作入口固定、狀態難感知隨機播放開關(圖7)——狀態標識為主,動作弱化
4. 具象仿生/擬物化利用現實心智模型降低學習成本手機撥動開關(圖10)——物理隱喻自帶狀態+動作雙重語義

音量控制的線性狀態表達

左喇叭小→右喇叭大,中間滑塊既是操縱桿又是刻度,水槽隱喻直觀;對比僅左側圖標變化的版本,認知負荷差異巨大。

決策清單

  1. 用戶能否直接感知執行後的狀態變化?能→策略2;否→續問。
  2. 空間是否允許分欄?允許→策略1;不允許→續問。
  3. 動作入口是否固定可預期?是→策略3;否→策略4(擬物化)。

作者:Tony Lee | 來源:aliued.cn

copyright © 萬盛學電腦網 all rights reserved