在复杂的应用程序中,大量的选项、命令、工具和控件很容易让用户不堪重负。一次显示大量的工具在视觉上是压倒性的,并且评估所有可用的操作位置太多了认知负荷在用户。拆分按钮通过将类似的命令分组在一起来减少视觉上的复杂性——就像导航菜单将相关的选项分组在一起,从而使人们能够在概念上理解站点的信息结构。

定义:拆分按钮是具有两个组件的按钮:标签和箭头;单击标签选择默认操作,单击箭头打开其他可能操作的列表。

拆分按钮是按钮和菜单的混合体:它将相关的命令组合在一起落下,但也提供一键访问默认选项,不需要打开菜单。

一个菜单按钮在左边的单词段落没有默认的选择。一个分隔按钮,单词插入在右边,默认选项。两个菜单都是打开的。
剩下按钮是一个常规的菜单按钮。单击按钮上的任何位置都会打开菜单,并且没有通过单击做出的默认选择
正确的
按钮是一个分裂按钮。点击本身执行插入文本的默认操作,但不打开菜单,而单击按钮的箭头部分将打开菜单,提供几个相关命令。

如果一个选项最常使用,则分割按钮用于呈现多个相关工具。制作最常见的选项a默认降低了互动成本要使用该选项,因为它在选择项目之前删除了打开菜单的需要。显而易见的惩罚是访问菜单变得更加困难,因为它需要击中一个小目标(这需要根据Fitts的法律更多的时间),还包括一个额外的心理操作来决定按钮的哪个部分被激活。

不像上下文菜单,拆分按钮通常放置在主工具栏中,在它们的关联菜单中找到的命令并不局限于与用户在触发菜单之前已经选择的项目相关的选项。

虽然拆分按钮似乎是一种明显的设计模式,但菜单中的选项可以是低的可发现性。用户(尤其是那些学习应用程序的用户)并不总是能识别出这种模式,因此他们可能不会注意到二级菜单按钮,因此也不会注意到菜单中的选项。因此,在决定是否使用拆分按钮时,首先要考虑的是默认选项是否有强选择;如果用户只注意到默认选项,它是否适用于大多数情况?如果没有,传统的菜单按钮(没有默认选项)可以通过促进发现来更好地帮助用户,特别是在没有太多重复使用的应用程序中。

在桌面应用程序中,菜单按钮用于命令和工具而不是导航。因此,使用拆分按钮时要考虑的第二个方面是该按钮是否将是托管命令与导航类别(事实上,我们建议您不要在网站导航中使用拆分按钮):如果单击按钮的结果是一个行动选择一个工具然后拆分按钮是合适的,而如果按钮需要用户另一个页面或屏幕,一个标准的下拉菜单是比拆分按钮更好的选择。

视觉上独立的箭头按钮

良好的视觉设计对拆分按钮的识别至关重要:指示按钮菜单方面的箭头必须与按钮的标签清楚地分开

设计不良的拆分按钮可以看起来像标准菜单按钮(始终打开菜单)。强大的视觉意义员拆分按钮包括按钮内的分界线或箭头周围区域的稍微不同的颜色。默认动作和箭头之间的视觉分离应该总是可见的,而不是简单的悬停效果-当两者之间的视觉分离被隐藏直到悬停,用户将不能正确识别一个分离按钮。

一个拆分按钮,箭头与默认按钮部件之间没有明确的视觉分离。
菜单按钮还是分割按钮?箭头按钮与默认值没有视觉上的分离粘贴操作(左),直到用户将鼠标悬停在按钮的那个区域(右)。这个隐藏的能指并不像总是显示的那样有效。

拆分按钮的箭头组件的目标大小是其可用性的主要限制因素。如果箭头按钮的大小非常小(这是经常发生的),这个按钮将会更难获得(根据菲茨定律)。因此,我们不建议在触摸屏应用程序中使用拆分按钮(因为黄油手的问题),除非有可能使tap的目标尺寸为这两个至少是部分按钮1cm×1cm.

例如,Adobe Photoshop尝试规避此大小尺寸问题,并在每个拆分按钮的右下角暗示箭头,允许(并且需要)点击和保持手势任何地方在按钮上打开菜单。不建议使用此解决方案,因为没有这种独特的可接受性的视觉指导率;我们观察到,即使是Photoshop的退伍军人用户也没有意识到他们可以在按钮上的任何地方点击并按住以访问其菜单组件;相反,他们试图将鼠标光标定位在微小的箭头图标上。和一些艰难的成功的人感到失望,发现菜单在点击中没有打开(需要代替点击并保持)。

Photoshop中拆分按钮的使用,在按钮的右下角有一个很小的箭头
Photoshop使用Main工具栏的分割按钮,但是没有清楚地表示应通过单击并持有可见目标区域的任何位置来打开菜单。此设计会导致新的Photoshop用户的可读性问题,常常尝试在微小的箭头图标上磨杂鼠标光标,然后单击打开菜单。

使用文本标签拆分按钮

有些拆分按钮在标签组件中既有图标又有文本。虽然图标是可选的,始终需要文本标签。文本提高了易学性、可发现性和可发现性,并增加了按钮的目标大小,从而提供了Fitts法则的好处。拆分按钮的默认选项应该总是包含一个文本标签,菜单中的其他选项也应该如此。

不像常规的菜单按钮,其中的文本标签应该清楚地描述一个通用类别包含菜单中包含的所有内容,拆分按钮的可见文本标签应该是一个描述性的名称默认的工具或命令

带有分类标签的行高按钮,因为它是一个菜单按钮。右边的reply按钮是一个分割按钮,文本标签是一个动词。
剩下行高度button是一个常规的菜单按钮,文本标签是菜单中选项的类别描述。
正确的
回复按钮是拆分按钮,文本标签是默认操作的名称,而不是整个类别的描述。

有效分流按钮的其他提示

而这些建议中有很多是从其他类型的菜单中继承过来的,比如上下文菜单菜单栏遵循这些规则确保拆分按钮运行良好:

  • 限制选择的总数内菜单要少于10-12个,避免选择瘫痪还有冗长乏味的需要检查一长串项目来找到想要的项目。
  • 避免在拆分按钮中使用子菜单,因为很难在不意外关闭主菜单的情况下将光标移动到子菜单。
  • 禁用不相关的项目或者无法为当前任务。
  • 在菜单中点菜被受欢迎(少数项目),或按字母顺序(用于用户知道名称的大量项目)。排序可以帮助用户找到他们需要的命令,而不必遍历所有选项。对于少量的商品(少于5件左右),按受欢迎程度排序可以使最重要的商品快速可用。对于超过5个菜单选项,字母顺序可以让用户更容易地预测在菜单顺序(根据Hick-Hyman法律)。
  • 如果菜单中的任何选项都有键盘快捷键可用,请在命令旁边显示这些快捷键促进可读性。

持续的分裂按钮

拆分按钮的一个有用变体叫做A持久拆分按钮(有时称为a莫代尔拆分按钮)。在这种类型的按钮中,默认更改为用户选择的最后一个操作(从split-button菜单中的操作列表中)。因此,用户的菜单选择将作为默认值持续存在(当然,直到用户从菜单中做出不同的选择为止)。因此,持久分裂按钮允许一定程度的定制对于每个用户而不需要通过首选项和高级应用程序设置(哪些用户不会参与)。它们还加快重复的工作或批量工作,其中用户可能会在拆分按钮中重复使用一个选项,然后切换到相关工具一段时间,依此类推。

一个持久的拆分按钮,其中用户的选择成为新的默认值。
在Windows剪切工具应用程序中,从分割按钮的菜单中选择一个选项(例如窗口剪断)成为新的默认选项,然后单击之后就会触发窗口剪断(直到用户从菜单中选择了不同的选项)。值得注意的是,在本例中,默认标签按钮保持不变,,而不是窗口剪断如果用户不知道当前的默认状态,则可能导致混淆。

然而,持久拆分按钮对高级用户的好处是与新用户同样强烈损害。当用户学习一个界面时,他们依靠熟悉的线索,例如命令在界面中的位置,以回忆该命令在哪里。这种空间一致性有助于构建UI的心理模型。随着界面的变化(例如,由于按钮标签的变化),即使是细微的变化,每次使用时,构建这种心理模型的上下文线索都会变弱,UI也不太容易学习。用户可能会被迫问自己“那个按钮在哪里?”一边试图找到一个有用的工具。

这就是为什么当您同时拥有高级用户和临时用户时,最好避免使用持久按钮。

总结

拆分按钮在需要合并大量命令的重复使用桌面应用程序中最有用。虽然拆分按钮对于访问最常用的工具非常有效,但对于用户来说,它们可能存在易学性和可发现性缺陷。确保按钮的箭头部分有视觉上的指示,提供清晰的描述性文字标签,不要在网站的导航菜单中使用分隔按钮。

在我们的全天学习更多Web和桌面应用程序设计课程。