E1.14.1button group related actions设计研究

按钮组用于呈现一组互斥或并列的相关动作

别名: 按钮组 · 分段按钮动作 · grouped actions

概念解释

按钮组(button group)把若干动作做成连在一起的一排,中间用共用外轮廓或分隔线,而不是各自散落的独立按钮。它只适合互斥或并列且相关的动作:左对齐 / 居中 / 右对齐是互斥;粗体 / 斜体 / 下划线是并列格式;视图切换是互斥模式。不相关的保存和删除不应因为「都要出现」就被焊成一组。组表达的是「这些动作属于同一决策」,不是「省一点间距」。

机制

共用外轮廓触发知觉分组:人会把组内选项当成同一问题的答案,组外的当成另一件事。互斥时,组还暗示「选一个」,外观上常带有一次只能按下一项的稳态。并列时,组暗示「可以同时开」,但它们仍应同属一个对象(这段文字的格式),而不是把文档级保存和段落级格式焊在一起。错误的组会制造错误的互斥预期:保存和另存为若做成互斥组,用户以为只能择一且会丢掉另一种能力。散落的相关动作则相反:人找不到「另一半」,以为功能不存在。组的代价是宽度和误触邻项,所以相关性必须先成立。

怎么研究

给同一套动作两种布局:焊成一组、各自独立。任务是「换到列表视图」或「同时加粗和斜体」,看是否出现「我以为只能选一个」或「我没看见还有居中」。

自变量:是否共用外轮廓、动作是否真正互斥、组内数量。 因变量:互斥误解、漏用相关项、邻项误触。

把选择控件(分段选择值)和动作组混在同一实验里会搅混角色。动作组的试次应导致执行,而不是只改一个筛选值。

边界

筛选芯片、分段选择是选择控件,不是动作按钮组,即使长得很像。工具栏里用分隔线隔开的若干独立按钮不是按钮组,它们没有共用外轮廓,也不暗示互斥。只有两个不相关的动作(确定 / 取消)应保持独立,不要焊在一起冒充一组相关能力。

怎么落地

  • 先问这些动作是不是同一对象上的同一类决策;是,才用共用外轮廓。
  • 互斥组要在外观上一次只能亮一项;并列组允许多项亮,并在提示里写「可多选」。
  • 保存与删除、导航与提交不要放进同一组。
  • 验证:遮住文案问「这些是同一件事的几种做法吗」。答「不是」却焊在一起,或答「是」却散落,分组就用错了。

延伸

  • 同组E1.14.2 分裂按钮把默认动作与扩展动作分离到主体与箭头两部分 · E1.14.3 分裂按钮的箭头区域过小会造成误触扩展菜单 · E1.14.4 按钮组内选项过多时应改用其他控件而非持续横向扩展
  • 相邻E3.07 分段控件 · E1.12 切换按钮与状态按钮 · A2 知觉组织(格式塔)
  • 站内检索button group · segmented actions · mutual exclusion

同组卡片

快捷操作

分享

分享当前页面

ios_share

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