E1.12.3toolbar toggle versus action styling设计研究
工具栏中的切换按钮需要与相邻的动作按钮区分样式
别名: 工具栏切换 · 动作和切换混排 · mixed toolbar
概念解释
工具栏常把加粗、斜体(切换)和打印、插入图片(动作)排在同一行。若两套控件共用同一外形,用户会把切换当一次性动作点——加粗闪一下又弹回,或把打印当开关连点。工具栏里的切换必须在样式上与相邻动作分开:用持续的选中槽、不同的外盒、或分组分隔,让人在伸手之前就知道这一枚会留下值。
机制
同一行里的控件会被当成同一类,除非有分组线索打断。动作按钮训练出「点完就走」;切换训练出「点完看它是否还亮着」。外形一旦相同,两类运动程序会串:对切换用动作程序,值会在没有核对的情况下被翻转;对动作用切换程序,人会盯着打印键等它保持按下,以为没打出去。分隔线、不同底、切换用可停留的填充而动作用瞬时涟漪,都是在给类别边界。没有边界时,唯一线索是事后结果,工具栏上的结果又常常在别处(文档里的字形),反馈回路很长。
怎么研究
做混合工具栏与分组工具栏对照。任务包括「打开加粗」和「插入图片」,看是否出现把插入当开关、把加粗当一次性。
自变量:两套控件是否同形、有无分隔、切换选中是否用不同外盒。 因变量:错误类别的操作(对切换用完即走、对动作等待保持)、事后能否指出哪些会保持状态。
专家用户对具体图标很熟,分类错误会偏低。要包含不熟悉该编辑器的人,才能看到外形混同的代价。
边界
全部都是切换的格式栏(加粗斜体下划线)可以同形,因为类内一致。全部都是动作的命令栏也可以同形。问题出在混排。溢出菜单里用菜单勾选表达切换,不再用工具栏按钮外形,区分改走菜单惯例。触摸编辑器把格式做成底部一张格式面板,与插入动作分屏,混排问题被信息架构拆掉。
怎么落地
- 混排时给切换一套可停留的选中外观,给动作一套不会停留的外观,不要共用同一底图。
- 在两类之间加分隔或分组标题,不要只靠图标语义让人猜。
- 工具提示可写「开/关」对「插入」,但只作备份,不能单靠悬停才说出类别。
- 验证:把工具栏做成灰度、遮住提示,让人标「哪些点完会保持」。标错的那些就是外形没把切换和动作分开。