E1.12.1toggle button pressed state设计研究

切换按钮以按下与未按下表达当前设置的状态

别名: 切换按钮 · aria-pressed · toggle pressed

概念解释

切换按钮(toggle button)按下去不是发出一次性动作,而是把某项设置在开与关之间翻转。它用按下/未按下(pressed / unpressed)显示当前值:加粗开着,按钮就保持凹陷或高亮;关着,就回到平坦。这与瞬间的按压反馈不是同一件事——瞬间按压缩接触存在,切换的按下是值本身。看错的人会把已经开着的加粗再点一次,以为还没生效。

机制

动作按钮的视觉按下是瞬态,手指离开就应当回去,否则会被当成卡住。切换按钮把「凹陷」借来当稳态,因为物理开关和实体键帽曾经用位置表达值。屏幕上若瞬态和稳态共用同一套凹陷,用户无法分辨「我正在按」还是「它现在是开」。必须让稳态按下比瞬态更持久、通常也更强(保持填充、保持选中色),瞬态只用更短的变暗。值一旦与外观脱节——程序里已加粗、按钮看起来却未按下——下一次点击会按「去打开」的意图发出,实际却是关闭。切换按钮的全部可用性都建立在外观 = 当前设置。

怎么研究

给同一「加粗」控件两种编码:只在接触期间凹陷、接触结束后保持凹陷。让人先看一段已加粗的文本,再决定要点不点。

自变量:稳态是否保持按下外观、瞬态与稳态是否同形、文本实际是否已加粗。 因变量:错误翻转率、口头「我以为现在是关的」、从外观推断当前值的正确率。

不要只测「能不能打开」。关键试次是值已经为开,看外观是否阻止一次多余的翻转。

边界

单选性质的分段控件里,按下表示「当前这一项」而不是开/关两态,外观仍是稳态,只是互斥。开关(switch)用滑块位置表达值,不是切换按钮,不要把凹陷套到开关轨道上。瞬间动作(保存)绝不能保持按下,否则会被读成切换。触摸上瞬态常被手指挡住,稳态按下更要在抬起后仍然可见。

怎么落地

  • 把切换按钮的选中外观做成抬手之后仍在的稳态,不要只用按下瞬间的变暗。
  • 与动作按钮拆开两套样式:切换有「开」的持续填充,动作没有。
  • 外观必须绑在真实值上,禁止只在本地先亮起来却还没写进文档。
  • 验证:打开加粗后移开指针。按钮若回到未选中外观而文字仍粗,或外观显示开着而文字不粗,按下就没有在表达当前设置。

延伸

  • 同组E1.12.2 切换按钮的状态需要能被辅助技术识别为开关 · E1.12.3 工具栏中的切换按钮需要与相邻的动作按钮区分样式 · E1.12.4 切换按钮的状态在页面刷新后仍需保持
  • 相邻E3.03 开关 · E1.02 按钮的状态 · D1.03 选中态与高亮
  • 站内检索toggle button · aria-pressed · pressed state

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E1.12.1