E1.12.3toolbar toggle versus action styling设计研究

工具栏中的切换按钮需要与相邻的动作按钮区分样式

别名: 工具栏切换 · 动作和切换混排 · mixed toolbar

概念解释

工具栏常把加粗、斜体(切换)和打印、插入图片(动作)排在同一行。若两套控件共用同一外形,用户会把切换当一次性动作点——加粗闪一下又弹回,或把打印当开关连点。工具栏里的切换必须在样式上与相邻动作分开:用持续的选中槽、不同的外盒、或分组分隔,让人在伸手之前就知道这一枚会留下值。

机制

同一行里的控件会被当成同一类,除非有分组线索打断。动作按钮训练出「点完就走」;切换训练出「点完看它是否还亮着」。外形一旦相同,两类运动程序会串:对切换用动作程序,值会在没有核对的情况下被翻转;对动作用切换程序,人会盯着打印键等它保持按下,以为没打出去。分隔线、不同底、切换用可停留的填充而动作用瞬时涟漪,都是在给类别边界。没有边界时,唯一线索是事后结果,工具栏上的结果又常常在别处(文档里的字形),反馈回路很长。

怎么研究

做混合工具栏与分组工具栏对照。任务包括「打开加粗」和「插入图片」,看是否出现把插入当开关、把加粗当一次性。

自变量:两套控件是否同形、有无分隔、切换选中是否用不同外盒。 因变量:错误类别的操作(对切换用完即走、对动作等待保持)、事后能否指出哪些会保持状态。

专家用户对具体图标很熟,分类错误会偏低。要包含不熟悉该编辑器的人,才能看到外形混同的代价。

边界

全部都是切换的格式栏(加粗斜体下划线)可以同形,因为类内一致。全部都是动作的命令栏也可以同形。问题出在混排。溢出菜单里用菜单勾选表达切换,不再用工具栏按钮外形,区分改走菜单惯例。触摸编辑器把格式做成底部一张格式面板,与插入动作分屏,混排问题被信息架构拆掉。

怎么落地

  • 混排时给切换一套可停留的选中外观,给动作一套不会停留的外观,不要共用同一底图。
  • 在两类之间加分隔或分组标题,不要只靠图标语义让人猜。
  • 工具提示可写「开/关」对「插入」,但只作备份,不能单靠悬停才说出类别。
  • 验证:把工具栏做成灰度、遮住提示,让人标「哪些点完会保持」。标错的那些就是外形没把切换和动作分开。

延伸

  • 同组E1.12.1 切换按钮以按下与未按下表达当前设置的状态 · E1.12.2 切换按钮的状态需要能被辅助技术识别为开关 · E1.12.4 切换按钮的状态在页面刷新后仍需保持
  • 相邻E1.01 按钮的层级 · E1.14 按钮组与分裂按钮 · D1.03 选中态与高亮
  • 站内检索toolbar toggle · command versus toggle · grouped controls

同组卡片

快捷操作

分享

分享当前页面

ios_share

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