Split button 拆分按钮

/SPLIT BUT-n/ · noun · 操作类模式 · #115

分成两部分的一个按钮:主体部分直接执行最常用的操作,旁边窄窄的箭头部分打开一组相关的备选操作——发送或定时发送、粘贴或选择性粘贴、保存或另存为。当某个选择大多数时候都会用到,它能代替一排按钮。

Split button(拆分按钮) UI 模式示例:CatchUI 图鉴标本

别名:下拉按钮。

你可能会这样叫它

  • “旁边带小箭头的按钮”
  • “带下拉箭头的发送按钮”
  • “分成两半的按钮”
  • “右边能展开的按钮”

……它的名字是 拆分按钮(Split button)。

常见问题

拆分按钮是什么意思?

拆分按钮(split button)是分成两部分的按钮:点主体直接执行默认操作,点旁边的小箭头才展开相关选项,比如 Word 的“粘贴”按钮、Gmail 的“发送”按钮。只能展开菜单、本身不执行操作的那种叫下拉按钮。

代码里叫什么

Windows (WinUI)SplitButton ToggleSplitButton
Jetpack ComposeSplitButtonLayout
SwiftUIMenu(content:label:primaryAction:)
macOS (AppKit)NSComboButton
Web 没有原生元素:用两个按钮组成按钮组,第二个加 aria-haspopup="menu"

复制给 AI 编程工具

把这几个并排的按钮换成拆分按钮:主体部分执行用户最常选的操作,按钮上写这个动词;旁边单独的箭头部分有自己的无障碍名称,比如“更多发送选项”,点开是其余选项的菜单。两部分都要有清楚的悬停和焦点状态,中间有可见的分隔线;如果没有明显的默认选项,就改用普通的下拉按钮。

用 AI 写界面时该怎么说:UI 用词指南(英文)→

相关模式

传一张截图,抓住这个模式 →

学会从视觉线索认出 UI 模式(英文)